/* ==========================================================================
   Clearwater — "Storybook Lantern — Bright + Scroll"
   Golden-hour sibling of Storybook Shore: honey, apricot and soft rose by
   day, warm plum by night, and a small lighthouse that keeps a light on.
   This variant raises the luminance of every non-sun element and adds a
   scroll-linked color grade (Tide's technique, Lantern's art): the scene
   travels from a bright golden hour at the hero down to a plum-dusk,
   lantern-lit night at the choice and footer, so each section sits in a
   distinctly different light.
   Hand-crafted pastel illustration, pillowy spacing, breathing-pace motion.
   ========================================================================== */

:root {
  /* palette — golden hour, brightened / fresher (sun itself unchanged) */
  --sky-dawn-top: #FCEFD9;   /* honey, lighter */
  --sky-dawn-mid: #FDDCC2;   /* apricot, lighter */
  --sky-dawn-low: #FBD0BC;   /* soft rose, lighter */
  --sky-morn-top: #FAE6C8;
  --sky-morn-low: #FFF8EC;

  --butter: #FFEDB6;
  --gold: #FFB347;           /* the sun / primary action — left as-is */
  --apricot: #FAD0AC;
  --plum-lav: #E0BAD3;       /* dusk violet, lighter & fresher */
  --sage: #D4D8B6;
  --sage-deep: #6B8A66;
  --sea: #A6D2C7;            /* sea, more luminous */
  --sand: #FBF4E9;           /* sand, fresher cream */
  --sand-deep: #F6E8D2;

  --night-top: #3F2D52;      /* warm plum night, brightened, never indigo */
  --night-mid: #5E4070;
  /* the deepest night band stays dark enough that paper / moonlight ink on it
     clears WCAG AA (paper 5.07:1, moonlight 4.68:1) — a fresher plum than the
     base, but never so light it breaks the crisis-line contrast */
  --night-low: #875A7C;
  --moonlight: #F2E9F3;

  --ink: #33312E;
  --ink-soft: #57524A;
  --paper: #F8F4EE;

  /* ---- scroll grade (driven by main.js; defaults = bright golden hour) ----
     The fixed sky reads these; JS interpolates them along the scroll. */
  --grade-sky-top: var(--sky-dawn-top);
  --grade-sky-mid: var(--sky-dawn-mid);
  --grade-sky-low: var(--sky-dawn-low);
  /* atmosphere: a plum night wash painted over the sky, 0 at the hero,
     rising toward 1 at the choice/footer */
  --grade-night: 0;
  /* how strongly the lighthouse beam and the lanterns read (0 day -> 1 night) */
  --beam-boost: 0;
  --lantern-boost: 0;

  --font-display: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, "Segoe UI", Verdana, sans-serif;

  --ease: cubic-bezier(0.45, 0.05, 0.35, 1);
  --slow: 1.1s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
  overflow-x: hidden;
}

svg { display: block; }

/* visible, friendly focus everywhere */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: 6px;
}
.page-moon :focus-visible,
body.scene-night :focus-visible,
.site-footer :focus-visible,
.shore-notes :focus-visible,
.choice :focus-visible {
  outline-color: var(--paper);
}
/* while the sun previews the choice, the scene is warm/light again — ink focus */
body.scene-warm .choice :focus-visible {
  outline-color: var(--ink);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Fixed graded sky — the scroll-linked color grade lives here.
   One continuous backdrop for the whole home page: a bright golden-hour
   gradient (--grade-sky-*), with a plum-night wash crossfaded over it
   (--grade-night), both driven by main.js along the scroll. Each section
   floats over this single graded scene, so the light visibly changes from
   the hero down to the choice and footer.
   ========================================================================== */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--grade-sky-top) 0%, var(--grade-sky-mid) 55%, var(--grade-sky-low) 100%);
}
.sky-layer { position: absolute; inset: 0; }
/* the night wash: deep warm plum, revealed as --grade-night rises */
.sky-dawn {
  background: linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 52%, var(--night-low) 100%);
  opacity: var(--grade-night);
}
/* a soft horizon glow that lingers low in the sky through dusk, fading out
   as full night settles — keeps the plum from going flat */
.sky-morning {
  background: radial-gradient(120% 70% at 50% 96%, rgba(255, 196, 138, 0.55) 0%, rgba(255, 196, 138, 0) 60%);
  opacity: calc(var(--grade-night) * (1 - var(--grade-night)) * 3.4);
}

/* ==========================================================================
   Header — overlays the scene, no layout space
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 2.6rem);
  pointer-events: none; /* children restore it */
}
.site-header > * { pointer-events: auto; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  background: rgba(255, 251, 242, 0.72);
  border-radius: 999px;
  transition: color var(--slow) var(--ease), background var(--slow) var(--ease);
}

.about-nav { position: relative; }

.about-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  font: 600 1rem var(--font-body);
  color: var(--ink);
  background: rgba(255, 251, 242, 0.72);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.4s var(--ease), color var(--slow) var(--ease);
}
.about-btn:hover { background: rgba(255, 251, 242, 0.9); }
.about-btn .chev { transition: transform 0.35s var(--ease); }
.about-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.about-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 13rem;
  list-style: none;
  background: #FFFBF2;
  border-radius: 22px;
  padding: 0.6rem;
  box-shadow: 0 14px 38px rgba(51, 49, 46, 0.16);
}
.about-menu a {
  display: block;
  padding: 0.75rem 1.1rem;
  min-height: 44px;
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.about-menu a:hover { background: var(--butter); }

/* On the home page the header keeps its warm cream pill in every scene state
   (a small lit lantern over the dark) — ink on cream stays AA through every
   frame of the relight, with no color crossfade to fail mid-transition.
   Only the moon page, a static night, dresses the header dark. */
.page-moon .wordmark,
.page-moon .about-btn {
  color: var(--paper);
  background: rgba(58, 42, 74, 0.5);
}

/* ==========================================================================
   Hero — golden-hour poster: sun, lighthouse, rowboat
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  transform: translateY(-9vh);
}

.brand {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  letter-spacing: 0.01em;
  line-height: 1.04;
  color: var(--ink);
  animation: fade-up 1.4s var(--ease) 1.1s both;
}

.hero-line {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 400;
  color: var(--ink-soft);
  animation: fade-up 1.4s var(--ease) 1.7s both;
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 1.2rem;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: 999px;
  animation: fade-up 1.4s var(--ease) 2.3s both;
}
.scroll-cue svg { animation: cue-drift 3.6s var(--ease) infinite; }
.scroll-cue:hover { color: var(--ink); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cue-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* hero entrance: the sun lifts, the glow blooms — once */
.sun-rise { animation: sun-rise 2.6s var(--ease) both; }
@keyframes sun-rise {
  from { transform: translateY(54px); }
  to   { transform: translateY(0); }
}

/* ambient micro-motion — barely there */
.cloud-a { animation: drift 26s var(--ease) infinite alternate; }
.cloud-b { animation: drift 34s var(--ease) infinite alternate-reverse; }
.cloud-c { animation: drift 30s var(--ease) 4s infinite alternate; }
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(34px); }
}

.gull-a { animation: glide 18s var(--ease) infinite alternate; }
.gull-b { animation: glide 22s var(--ease) 2s infinite alternate-reverse; }
@keyframes glide {
  from { transform: translate(0, 0); }
  to   { transform: translate(46px, -14px); }
}

.grass-a, .grass-b {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.grass-a { animation: sway 6.5s var(--ease) infinite alternate; }
.grass-b { animation: sway 7.5s var(--ease) 1.2s infinite alternate-reverse; }
@keyframes sway {
  from { transform: rotate(-2.2deg); }
  to   { transform: rotate(2.2deg); }
}

.shimmer { animation: shimmer 7s var(--ease) infinite alternate; }
@keyframes shimmer {
  from { opacity: 0.35; }
  to   { opacity: 0.8; }
}

/* the lighthouse breathes its light at resting-breath pace:
   one 10s cycle, ~4s in / ~6s out */
.lh-beam {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: beam-breathe 10s var(--ease) infinite;
  /* the beam reads more strongly as the scene grades toward dusk on scroll */
  filter: drop-shadow(0 0 calc(var(--beam-boost) * 14px) rgba(255, 233, 168, calc(var(--beam-boost) * 0.85)));
}
@keyframes beam-breathe {
  0%, 100% { opacity: 0.4; }
  40%      { opacity: 0.85; }
}
.lh-lamp { animation: lamp-breathe 10s var(--ease) infinite; }
@keyframes lamp-breathe {
  0%, 100% { opacity: 0.7; }
  40%      { opacity: 1; }
}

/* phones: xMidYMax slice crops the viewBox edges, so pull the sun, the
   lighthouse and the rowboat into the centre band that survives the crop
   (790px keeps the sun's left ray clear of the lighthouse roof at 600px) */
@media (max-width: 640px) {
  .hero-scene .sun-group { transform: translate(790px, 470px); }
  .hero-scene .lighthouse { transform: translate(600px, 556px); }
  .hero-scene .rowboat { transform: translate(770px, 786px); }
}

/* ==========================================================================
   Support — one breath
   ========================================================================== */

.support {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.6rem;
  padding: clamp(5rem, 12vh, 8rem) 1.5rem;
  text-align: center;
}

.support-cloud { animation: drift 28s var(--ease) infinite alternate; }

/* The breath words float over the continuously-grading sky. To keep the dark
   ink AA at EVERY scroll position — including the brief frames where the sky
   has begun to deepen toward dusk while the text is still leaving the top of
   the viewport — they rest on a soft cream "cloud" scrim. It reads as words
   on open morning sky, and guarantees ink-on-light contrast throughout. */
.breath {
  position: relative;
  z-index: 1;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.4rem);
  border-radius: 36px;
  background: radial-gradient(120% 100% at 50% 50%, rgba(255, 251, 244, 0.94) 0%, rgba(255, 251, 244, 0.86) 62%, rgba(255, 251, 244, 0) 100%);
}

.breath p {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.4vw, 2.2rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  max-width: 26ch;
  margin: 0 auto 1.4em;
}
.breath p:last-child { margin-bottom: 0; }

/* ==========================================================================
   The Choice — golden dusk into warm plum, lanterns & fireflies
   ========================================================================== */

.choice {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.6rem);
  padding: clamp(6rem, 14vh, 9rem) 1.5rem 11rem;
  overflow: hidden;
  text-align: center;
  /* transparent: the fixed scroll-graded sky shows through. By the time this
     section enters the viewport the grade has reached its plum-dusk night, so
     the choice already sits in lantern light. The veils below layer the
     sun/moon hover relight on top. */
  background: transparent;
  color: var(--paper);
}

/* a dark plum scrim guarantees AA for the light choice text over the night
   sky no matter where the gradient band sits behind it; it lifts away while
   the sun previews (scene-warm), where the text turns ink on a warm scrim. */
.choice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(135% 90% at 50% 46%, rgba(35, 24, 46, 0.55) 0%, rgba(35, 24, 46, 0.22) 55%, rgba(35, 24, 46, 0) 100%);
  opacity: 1;
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
  z-index: 1;
}
body.scene-warm .choice::after { opacity: 0; }

/* warm + night veils crossfade over the base night */
.choice::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #FFE6BE 0%, var(--butter) 52%, #FFDFB2 100%);
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
  z-index: 1;
}
.night-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 55%, var(--night-low) 100%);
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
}

body.scene-warm .choice::before { opacity: 1; }
/* the moon hover deepens the already-night choice a touch more */
body.scene-night .night-veil { opacity: 0.55; }

/* AA through the relight: a slow paper<->ink crossfade would pass through an
   unreadable midpoint, so while the light changes the words take a short
   breath — they dip out (300ms), swap color in a single hidden frame, and
   return once the sky has settled. JS adds body.relighting for ~0.85s on each
   warm/night flip (skipped under reduced motion, where the scene snaps). */
.prompt {
  position: relative;
  z-index: 2;
  color: var(--paper);
  transition: color 0s linear 0.41s, opacity 0.3s var(--ease);
}
body.scene-warm .prompt {
  color: var(--ink);
  transition: color 0s linear 0.51s, opacity 0.3s var(--ease);
}
body.relighting .prompt { opacity: 0; }

/* paper lanterns and fireflies — half-lit at dusk, fully lit at night,
   resting while the sun previews */
.fireflies {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* lanterns + fireflies read strongly by default now that the choice sits in
     night; the sun preview rests them, the moon preview lifts them fully.
     --lantern-boost (scroll-driven) warms their glow as the scene darkens. */
  opacity: 0.92;
  filter: saturate(calc(1 + var(--lantern-boost) * 0.25)) brightness(calc(0.94 + var(--lantern-boost) * 0.12));
  transition: opacity var(--slow) var(--ease);
  pointer-events: none;
}
body.scene-night .choice .fireflies { opacity: 1; }
body.scene-warm .choice .fireflies { opacity: 0.12; }

.tw { animation: twinkle 4.5s var(--ease) infinite alternate; }
.t2 { animation-delay: 1.1s; }
.t3 { animation-delay: 2.3s; }
.t4 { animation-delay: 3.2s; }
@keyframes twinkle {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

/* fireflies: soft twinkle plus a drift small enough to half-notice */
.ff {
  animation:
    twinkle 5s var(--ease) infinite alternate,
    ff-drift 14s var(--ease) infinite alternate;
}
.f2 { animation-delay: 1.1s, 3s;   animation-duration: 5s, 17s; }
.f3 { animation-delay: 2.3s, 6s;   animation-duration: 6s, 12s; }
.f4 { animation-delay: 3.2s, 1.5s; animation-duration: 4.5s, 19s; }
@keyframes ff-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(10px, -12px); }
}

.lantern { animation: lantern-float 18s var(--ease) infinite alternate; }
.lantern-b { animation-duration: 22s; animation-delay: 4s; }
@keyframes lantern-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
.lantern-glow { animation: breathe-glow 10s var(--ease) infinite alternate; }

/* phones: keep the lanterns inside the visible centre band, and gather a few
   fireflies into it too (xMidYMid slice leaves roughly x 570-870 visible when
   the stacked orbs make the section ~900px tall). cx, not transform: the
   ff-drift animation owns the transform property and would override it. */
@media (max-width: 640px) {
  .fireflies .lantern-pos-a { transform: translate(600px, 140px); }
  .fireflies .lantern-pos-b { transform: translate(820px, 96px); }
  .fireflies .ff:nth-child(1) { cx: 640px; }
  .fireflies .ff:nth-child(2) { cx: 750px; }
  .fireflies .ff:nth-child(5) { cx: 840px; }
  .fireflies .ff:nth-child(6) { cx: 790px; }
}

.prompt {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.15;
  max-width: 16ch;
}

.orbs {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2rem, 9vw, 9rem);
  flex-wrap: wrap;
}

.choice-link {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem;
  text-decoration: none;
  /* night by default (the choice sits in lantern light); ink while the sun
     previews its warm scene */
  color: var(--paper);
  border-radius: 32px;
  transition: transform var(--slow) var(--ease), color 0s linear 0.36s;
}
body.scene-warm .choice-link {
  color: var(--ink);
  transition-delay: 0s, 0.56s;
}
.choice-link:hover { transform: translateY(-8px); }

.orb {
  width: clamp(170px, 24vw, 270px);
  height: auto;
}

.choice-link .copy {
  font-family: var(--font-display);
  /* never below 1.5rem (24px): stays "large text" for the 3:1 AA threshold
     while the scene relights beneath it */
  font-size: clamp(1.5rem, 2.2vw, 1.65rem);
  font-weight: 400;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.choice-link:hover .copy,
.choice-link:focus-visible .copy { opacity: 1; transform: translateY(0); }

/* same breath as the prompt while the scene crosses to night */
body.relighting .choice-link .copy {
  opacity: 0;
  transition-duration: 0.3s, 0.3s;
}

/* touch / no-hover: copy always visible, stacked, big targets */
@media (hover: none) {
  .choice-link .copy { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .orbs { flex-direction: column; align-items: center; gap: 1.6rem; }
  .choice-link .copy { opacity: 1; transform: none; }
}

/* moon's gentle rock + glow breathing */
.moon-rock {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rock 9s var(--ease) infinite alternate;
}
@keyframes rock {
  from { transform: rotate(-2.4deg); }
  to   { transform: rotate(2.4deg); }
}
.moon-glow { animation: breathe-glow 7s var(--ease) infinite alternate; }
.orb-rays {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes breathe-glow {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

.choice-shore {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  width: 100%;
  height: clamp(110px, 16vh, 180px);
  pointer-events: none;
  z-index: 1;
}
/* night shore by default (matches the graded night choice); warms while the
   sun previews */
.shore-sea, .shore-dune, .shore-sand { transition: fill var(--slow) var(--ease); }
.shore-sea { fill: #46406A; }
.shore-dune { fill: #6E5A78; }
.shore-sand { fill: #8A6E86; }
body.scene-warm .shore-sea { fill: #93BBAD; }
body.scene-warm .shore-dune { fill: #F0DCB8; }
body.scene-warm .shore-sand { fill: var(--sand); }

/* ==========================================================================
   Story & approach — two small notes on the sand
   ========================================================================== */

/* The journey ends in night: the shore-notes and footer sit on the dark plum
   sand, lantern-lit. Solid night panels here (rather than the see-through
   graded sky) guarantee AA for the small body text and the crisis lines no
   matter where the gradient band falls. Paper ink on these tones runs 8-11:1. */
.shore-notes {
  background: linear-gradient(180deg, var(--night-mid) 0%, var(--night-top) 100%);
  color: var(--paper);
  padding: clamp(3.5rem, 8vh, 5rem) 1.5rem clamp(2rem, 5vh, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  text-align: center;
}
.shore-note {
  max-width: 38ch;
  scroll-margin-top: 5.5rem;
}
.shore-note h2 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin-bottom: 0.5rem;
  color: var(--paper);
}
.shore-note p { color: var(--moonlight); }

/* ==========================================================================
   Footer — on the night sand, the lighthouse light still on
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--night-top);
  color: var(--paper);
  text-align: center;
  padding: clamp(3.5rem, 8vh, 5.5rem) 1.5rem 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.take {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.take-title {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--paper);
}
.qr { filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.36)); }

.qr-download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--butter);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.4s var(--ease);
}
.qr-download:hover { background: var(--gold); }

.qr-download-alt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.2rem 0.4rem;
  color: var(--paper);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qr-download-alt:hover { color: var(--moonlight); }

.footer-nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--moonlight);
}
.footer-nav a {
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  padding: 0.6rem 0.4rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.footer-nav a:hover { border-bottom-color: var(--gold); }

.write-line { color: var(--moonlight); }
.write-line a {
  color: var(--paper);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem 0.2rem;
  display: inline-block;
}

.safety {
  font-size: 1rem;
  color: var(--moonlight);
  line-height: 1.9;
  max-width: 44ch;
}
.safety a {
  color: var(--paper);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.2rem 0.1rem;
  display: inline-block;
}
.fine {
  font-family: var(--font-display);
  color: var(--moonlight);
  font-size: 0.95rem;
}

/* ==========================================================================
   Quiz page (sun path) — late-morning honey light
   ========================================================================== */

.page-quiz {
  background: linear-gradient(180deg, var(--sky-morn-top) 0%, #F8E8CC 70%, var(--sand) 100%) fixed;
  min-height: 100svh;
}

.quiz-main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6.5rem 1.5rem 4rem;
}

.step {
  width: min(40rem, 100%);
  text-align: center;
  animation: fade-up 0.9s var(--ease) both;
}
.step[hidden] { display: none; }

.step h1, .step h2 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.8rem, 4.5vw, 2.7rem);
  line-height: 1.2;
  margin-bottom: 1.1rem;
}
.step h1:focus, .step h2:focus,
.step h1:focus-visible, .step h2:focus-visible,
.moon-line:focus, .moon-line:focus-visible { outline: none; }

.step .note {
  color: var(--ink-soft);
  margin-bottom: 2.2rem;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

.answers {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 2.2rem 0 1.8rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100%;
  padding: 0.95rem 1.8rem;
  font: 700 1.125rem var(--font-body);
  color: var(--ink);
  background: #FFFBF2;
  border: 2.5px solid rgba(51, 49, 46, 0.16);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover { background: var(--butter); border-color: var(--gold); transform: translateY(-2px); }
.btn[aria-pressed="true"] { background: var(--butter); border-color: var(--gold); }

.btn-primary {
  width: auto;
  background: var(--gold);
  border-color: var(--gold);
}
.btn-primary:hover { background: #FFC468; }

.btn-ghost {
  width: auto;
  min-height: 44px;
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
  font-weight: 600;
}
.btn-ghost:hover { background: rgba(255, 251, 242, 0.7); border-color: transparent; color: var(--ink); }

/* the sun rises as you go — the quiz's progress */
.progress-sun {
  position: fixed;
  top: 5.2rem;
  right: clamp(1.2rem, 4vw, 2.6rem);
  width: 104px;
  z-index: 40;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.progress-sun.is-up { opacity: 1; }
@media (max-width: 480px) {
  .progress-sun { width: 64px; }
  .quiz-main { padding-top: 9.5rem; }
}
.progress-sun .p-horizon { stroke: var(--ink-soft); opacity: 0.55; }
.progress-sun .p-sun {
  transform: translateY(calc((1 - var(--rise, 0)) * 40px));
  transition: transform 1.1s var(--ease);
}
.progress-sun .p-rays {
  opacity: var(--rise, 0);
  transition: opacity 1.1s var(--ease);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* simple forms */
.form-field {
  text-align: left;
  margin-bottom: 1.2rem;
}
.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.form-field input {
  width: 100%;
  min-height: 56px;
  padding: 0.8rem 1.3rem;
  font: 400 1.125rem var(--font-body);
  color: var(--ink);
  background: #FFFBF2;
  /* warm gray, >=3:1 against the cream fill and every quiz-page sky tone
     (WCAG 1.4.11): the empty field's boundary has to be findable */
  border: 2.5px solid #7E7669;
  border-radius: 999px;
}
.form-field input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.quiz-form { max-width: 26rem; margin: 0 auto; }

/* gentle inline validation messages */
.form-error {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.45rem 0 0 1.3rem;
  color: var(--ink);
}
.page-moon .form-error { color: var(--butter); }
.moon-form .form-error {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
}

.step-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

/* ==========================================================================
   Moon page — warm plum night, the lighthouse keeps its beam on
   ========================================================================== */

.page-moon {
  background: linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 52%, var(--night-low) 100%) fixed;
  color: var(--paper);
}

.moon-main {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6.5rem 1.5rem 4rem;
  overflow: hidden;
}

.moon-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.moon-content {
  position: relative;
  z-index: 2;
  width: min(34rem, 100%);
  text-align: center;
}

.moon-line {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.2;
  margin-bottom: 2.4rem;
}

.moon-form {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.moon-form input {
  flex: 1 1 16rem;
  min-height: 56px;
  padding: 0.8rem 1.4rem;
  font: 400 1.125rem var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid transparent;
  border-radius: 999px;
}
.moon-form input:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}
.moon-btn {
  min-height: 56px;
  padding: 0.9rem 1.9rem;
  font: 700 1.125rem var(--font-body);
  color: var(--ink);
  background: var(--moonlight);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.4s var(--ease), transform 0.35s var(--ease);
}
.moon-btn:hover { background: #FFFFFF; transform: translateY(-2px); }

.moon-note {
  font-size: 1.05rem;
  color: var(--paper);
  margin-bottom: 1.8rem;
}

.moon-quiet { font-size: 1.05rem; }
.moon-quiet,
.moon-quiet a {
  color: var(--paper);
}
.moon-quiet a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem 0.2rem;
  display: inline-block;
}
.moon-quiet a:hover { color: #FFFFFF; }

.moon-thanks p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.45;
}

.moon-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.moon-footer .safety { color: var(--paper); }
.moon-footer .safety a,
.moon-footer a { color: var(--paper); }

.quiz-footer .safety { color: var(--ink-soft); }
.quiz-footer .safety a { color: var(--ink); }

/* the light left on: lamp glow breathes, beam sweeps slowly */
.lh-lamp-glow { animation: breathe-glow 10s var(--ease) infinite alternate; }
.lh-beam-night {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: beam-sweep 16s var(--ease) infinite alternate;
}
@keyframes beam-sweep {
  from { transform: rotate(-4.5deg); }
  to   { transform: rotate(3.5deg); }
}

/* phones: xMidYMax slice crops the viewBox edges, so pull the moon and the
   lighthouse toward the centre band that survives the crop */
@media (max-width: 640px) {
  .moon-scene .m-moon { transform: translate(850px, 150px); }
  .moon-scene .m-lighthouse { transform: translate(545px, 724px); }
}

/* ==========================================================================
   Reduced motion — static scene per section, instant everything
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  /* SCROLL GRADING FULLY OFF: the fixed graded sky is removed and JS skips all
     grading. Each section composes its own static scene instead — a bright
     golden hour up top, settling to lantern-lit plum night at the choice and
     footer — so the visitor still travels through the day, just without the
     continuous color animation. */
  .sky { display: none; }
  .hero { background: linear-gradient(180deg, var(--sky-dawn-top) 0%, var(--sky-dawn-mid) 55%, var(--sky-dawn-low) 100%); }
  .support { background: linear-gradient(180deg, var(--sky-morn-top) 0%, var(--sky-morn-low) 100%); }
  /* the choice no longer floats over a graded sky, so it owns a solid plum
     night here — its dark scrim + light text stay AA */
  .choice {
    background: linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 55%, var(--night-low) 100%);
  }
  .page-quiz, .page-moon { background-attachment: scroll; }
  /* the beams hold a steady, visible glow instead of breathing; no scroll
     boost is applied (--beam-boost / --lantern-boost stay at rest) */
  .lh-beam { opacity: 0.6; filter: none; }
  .lh-beam-night { transform: none; }
  .fireflies { filter: none; }
}