/* ── HERO — pinned night → sunrise & headline handoff → sun docks as the
   nav's central dot → nav forms with its "Auto money errands" tagline.
   Two-way scrub: scrolling up rewinds the dawn. ── */
.sunstory { position: relative; height: 240vh; background: var(--ink); }
.sunstage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ink);
}

/* finale seam: the painting's lower edge melts into the film's ink ground
   instead of terminating in a hard amber/black cut as the stage scrolls off.
   --edge-fade is scrubbed by hero.js over the timeline's last leg. */
.sunstage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20vh;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(33, 24, 10, 0) 0%, rgb(33, 24, 10) 90%);
  opacity: var(--edge-fade, 0);
}

/* the mountains by night: near-black silhouettes under the stars. The day
   scape shares this exact geometry and paints over it as it warms. */
.scape-night { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.scape { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 0; will-change: opacity; }

/* golden-hour sky: dark plum up top melting to amber at the horizon */
.sky-dawn {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      #232539 0%, #3b3050 26%, #5e3f55 44%,
      #93544e 60%, #c97e4f 74%, #eaa95f 86%, #f7c87e 100%);
}
.sky-dawn::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background: repeating-linear-gradient(176deg,
    rgba(255, 235, 200, 0.045) 0 2px, transparent 2px 9px,
    rgba(120, 80, 120, 0.05) 9px 11px, transparent 11px 23px);
}

.cloud { position: absolute; border-radius: 50%; filter: blur(26px); }
.cloud.c1 { top: 7%;  left: -6%;  width: 56%; height: 11%; background: rgba(186, 118, 112, 0.22); transform: rotate(-2deg); }
.cloud.c2 { top: 17%; right: -9%; width: 50%; height: 10%; background: rgba(146, 108, 142, 0.24); transform: rotate(1.5deg); }
.cloud.c3 { top: 29%; left: 16%;  width: 44%; height: 8%;  background: rgba(220, 150, 110, 0.16); transform: rotate(-1deg); }

.ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46vh; display: block; }

.mist { position: absolute; left: 0; right: 0; border-radius: 50%; filter: blur(24px); }
.mist.m1 { bottom: 24vh; height: 9vh;  background: rgba(255, 196, 140, 0.20); }
.mist.m2 { bottom: 9vh;  height: 10vh; background: rgba(238, 168, 118, 0.13); }

/* horizon glow where the sun crests, riding the same warm track — additive
   screen blend ported from v9's .valley-glow so it reads as light bleeding
   over the ridge rather than a flat paint layer */
.hero-warm {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(62% 46% at 50% 102%, rgba(255, 196, 96, 0.50), rgba(250, 150, 40, 0.14) 52%, transparent 76%);
  mix-blend-mode: screen;
}

.stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.star {
  position: absolute; display: block;
  background: var(--bone);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(244, 241, 233, 0.6);
  animation: twinkle 3.2s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .star { animation: none; } }

/* canvas-tooth grain over the whole stage — unifies art, type, and sun */
.grain {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: url("../assets/grain.jpg");
  background-size: 440px auto;
  mix-blend-mode: overlay;
  opacity: 0.16;
}

/* lifted slightly so the copy clears the far ridge */
.col {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  transform: translateY(-34px);
}
.sun-rest { width: 170px; height: 150px; flex: none; margin-bottom: 22px; }

h1 {
  position: relative; z-index: 2;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 58px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--bone);
  max-width: 32ch;
  will-change: opacity, transform;
}
h1 em { font-style: italic; color: var(--sun-bright); }
/* eyebrow lives INSIDE the h1 so the exit animation carries it as one block */
.h1-kicker {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sun);
}
@media (max-width: 900px) { h1 { font-size: 42px; } }
@media (max-width: 420px) { h1 { font-size: 34px; } }

/* beat 2 — the headline handoff: this line rises with the sun, lands at the
   stage centre (same type as the h1 it replaces), then crossfades into the
   nav tagline as the lockup assembles */
.sub {
  position: relative; z-index: 2;
  margin: 24px auto 0;
  opacity: 0; /* hidden until hero.js drives it — prevents the whole block
                 stacking under the h1 during the pre-boot flash */
  will-change: opacity, transform;
}
.sub em { font-style: italic; color: var(--sun-bright); }
/* beat 2 headline — byte-identical treatment to the h1 (the beats differ
   only by their labels and order, never by weight or size) */
.sub .sub-head {
  display: block;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 58px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--bone);
  max-width: 32ch;
  text-wrap: balance;
}
.sub .sub-body {
  display: block;
  margin: 18px auto 0;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.65;
  color: var(--bone-soft);
  max-width: 52ch;
  text-wrap: balance;
}
/* small caption — a beat under the subheadline, mono like .sub-note but a
   touch larger and normal-case prose so it reads as a caption, never as a
   second subheadline competing with .sub-head */
/* reassurance line — rides the same element so the sun carries the beat whole */
.sub .sub-note {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--bone-faint);
}
@media (max-width: 900px) { .sub .sub-head { font-size: 42px; } }
@media (max-width: 420px) {
  .sub .sub-head { font-size: 34px; }
  .sub .sub-body { font-size: 16.5px; }
  }

/* the flying sun (fixed; above the nav so it stays visible until handoff) */
#flysun {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  opacity: 0; /* hidden until hero.js positions it — prevents the pre-boot corner flash */
  pointer-events: none;
  will-change: transform, opacity;
}
/* while still cresting the near ridge (hero.js measures its crest line),
   sink behind the painted ridge art instead of floating in front of the
   mountains it's meant to be rising out of — swapped back to z-index:60
   the instant it climbs above that line. */
#flysun.behind-ridge { z-index: -1; }

.scrollcue {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.scrollcue .chev {
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--mist);
  border-bottom: 1.5px solid var(--mist);
  transform: rotate(45deg);
}