/* ================================================================
   DAWN SEQUENCE â€” styles
   Everything that only takes effect once dawn.js has confirmed
   WebGL + GSAP/ScrollTrigger/Lenis + desktop viewport + motion is OK,
   and adds `dawn-active` to <html>. Until then this stylesheet is
   inert (the .hud/.service-card rules only matter once dawn.js
   injects the HUD markup / sets --p, which it only does after boot).
   ================================================================ */

:root {
  --font-mono: 'JetBrains Mono', monospace;
}

/* Lenis drives scroll position itself â€” native smooth-scroll fights it. */
html.dawn-active {
  scroll-behavior: auto !important;
}

/* The shader sky. Base hidden state lives inline in index.html so there's
   never a flash of an unstyled canvas before this stylesheet loads. */
html.dawn-active #sky {
  display: block;
}

/* The shader replaces these static night-sky decorations. */
html.dawn-active .stars,
html.dawn-active .celestial,
html.dawn-active .orbit {
  display: none;
}

/* Let the shader sky show through every section â€” these all have opaque
   backgrounds in the shipped site. */
html.dawn-active body,
html.dawn-active .vision,
html.dawn-active .services,
html.dawn-active .results,
html.dawn-active .contact {
  background: transparent;
}

html.dawn-active .services::before {
  background: none;
}

/* ---------- HUD (bottom-left time/phase readout) ---------- */
.hud {
  position: fixed;
  left: 2rem;
  bottom: 2rem;
  z-index: 1000;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  color: var(--mist);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: none;
}

.hud-time {
  font-size: 1.25rem;
  color: var(--light);
  font-weight: 500;
}

.hud-phase {
  color: var(--dawn);
}

.hud-track {
  width: 120px;
  height: 1px;
  background: rgba(253, 246, 236, 0.15);
  margin-top: 0.4rem;
  position: relative;
}

.hud-track::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--dawn), var(--coral));
}

@media (max-width: 767px) {
  .hud {
    display: none;
  }
}

/* ---------- Service cards: "lit from below" scrub ----------
   dawn.js writes --p (0 -> 1) per card via ScrollTrigger as the sun
   (i.e. the scroll position) reaches it. */
html.dawn-active .service-card {
  background: rgba(10, 15, 26, 0.45);
  border: 1px solid rgba(232, 184, 125, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Warm glow rising from the bottom edge of the card. */
html.dawn-active .service-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(0deg, rgba(244, 162, 97, calc(var(--p, 0) * 0.16)), transparent);
  pointer-events: none;
}

/* Repurpose the existing hover-underline as a scroll-scrubbed underline
   while dawn is active (same specificity as the :hover rule, later in
   source order, so it wins deterministically regardless of hover state). */
html.dawn-active .service-card::after {
  left: 0;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--dawn), var(--coral));
}


/* ---------- Golden-hour readability ----------
   The sky now caps at golden hour (never daylight), so all text
   stays luminous-on-dark like the rest of the BigPic family.
   These are gentle helpers for the brightest zone near the sun. */

html.dawn-active .result-visual svg {
  opacity: 0.85;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 10px rgba(10, 15, 26, 0.75));
}

html.dawn-active .result-title,
html.dawn-active .results .section-title {
  text-shadow: 0 2px 18px rgba(10, 15, 26, 0.65);
}

html.dawn-active .result-desc,
html.dawn-active .result-metric {
  text-shadow: 0 1px 12px rgba(10, 15, 26, 0.55);
}

html.dawn-active .contact .section-title {
  text-shadow: 0 2px 22px rgba(10, 15, 26, 0.7), 0 0 60px rgba(10, 15, 26, 0.4);
}

html.dawn-active .contact-text {
  color: var(--light); /* full warm-white — the default mist-gray drowns in the sun's glow */
  text-shadow:
    0 1px 3px rgba(10, 15, 26, 0.85),
    0 2px 26px rgba(10, 15, 26, 0.85),
    0 0 70px rgba(10, 15, 26, 0.55);
}