/* ============================================================
   GOLDEN HOUR — a single-page birthday wish
   The sky travels dawn → night as you scroll.

   Scroll-performance rules obeyed throughout:
     · only transform / opacity are ever animated
     · fixed background layers live on their own compositor layers
     · no layout-triggering properties touched on scroll
     · scroll handler is passive and rAF-throttled
   ============================================================ */

:root{
  --ink:      #fdf8f2;
  --muted:    rgba(253,248,242,.72);
  --faint:    rgba(253,248,242,.46);
  --gold:     #ffc46b;
  --gold-2:   #ff8f5e;
  --rose:     #ff7fa5;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --pad:  clamp(20px,5vw,64px);
}

*,*::before,*::after{ box-sizing:border-box }
html{
  background:#1a1030;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0; color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
canvas{ display:block }
::selection{ background:var(--gold); color:#2a1a0a }

/* ---------- fixed sky ---------- */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  contain:strict;
}
.layer{
  position:absolute; inset:0;
  opacity:0; transition:opacity .9s linear;
  will-change:opacity; transform:translateZ(0);
}
.layer[data-sky="0"]{ opacity:1 }

/* dawn */
.l-dawn{
  background:
    radial-gradient(120% 80% at 50% 108%, #ff9d6e 0%, #b5567e 42%, #4a2a63 76%, #221540 100%);
}
/* morning */
.l-morn{
  background:
    radial-gradient(120% 85% at 50% 106%, #ffd28a 0%, #ff9b6b 38%, #a4557f 70%, #3d2456 100%);
}
/* golden hour */
.l-gold{
  background:
    radial-gradient(125% 90% at 50% 104%, #ffd98a 0%, #ffa15c 34%, #e0656f 62%, #6b3268 100%);
}
/* dusk */
.l-dusk{
  background:
    radial-gradient(120% 90% at 50% 104%, #ff9a6a 0%, #c2557f 30%, #6a3573 62%, #2b1a48 100%);
}
/* night */
.l-night{
  background:
    radial-gradient(130% 100% at 50% 112%, #4b2a6b 0%, #2a1a4d 40%, #150e2c 74%, #0c0819 100%);
}

/* the sun: rises then sets, driven by a CSS variable */
.sun{
  position:absolute; left:50%; bottom:-14vh;
  width:min(46vw,340px); aspect-ratio:1; border-radius:50%;
  transform:translate(-50%, calc(var(--sunY,0) * -62vh)) scale(var(--sunS,1));
  background:radial-gradient(circle at 50% 50%,
      rgba(255,246,214,.95) 0%,
      rgba(255,205,120,.85) 38%,
      rgba(255,150,90,.35) 62%,
      rgba(255,120,70,0) 78%);
  filter:blur(2px);
  opacity:var(--sunO,.95);
  will-change:transform,opacity;
}
/* stars fade in for the last stretch */
.stars{
  position:absolute; inset:0; opacity:var(--starO,0);
  transition:opacity 1.1s linear;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 42%, #ffe9c6, transparent),
    radial-gradient(1.6px 1.6px at 46% 12%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 62% 34%, #dfe8ff, transparent),
    radial-gradient(1.5px 1.5px at 78% 20%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 88% 48%, #ffe9c6, transparent),
    radial-gradient(1.3px 1.3px at 18% 62%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 36% 76%, #dfe8ff, transparent),
    radial-gradient(1.4px 1.4px at 68% 68%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 84% 80%, #ffe9c6, transparent);
  will-change:opacity;
}

/* confetti canvas */
#fx{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  contain:strict; will-change:transform; transform:translateZ(0);
}

/* ---------- scroll progress ---------- */
.prog{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:9;
  background:rgba(255,255,255,.10);
}
.prog i{
  display:block; height:100%; width:100%;
  transform:scaleX(var(--p,0)); transform-origin:left;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  will-change:transform;
}

/* ---------- panels ---------- */
main{ position:relative; z-index:3 }
.panel{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(64px,12vh,120px) var(--pad);
}
.panel.tall{ min-height:190svh; align-items:flex-start }
.inner{ width:100%; max-width:660px; text-align:left }
.inner.wide{ max-width:900px }
.first .inner{ text-align:left }
.finale .inner{ text-align:center }

/* ---------- type ---------- */
.eyebrow,.kicker{
  margin:0 0 18px; font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold);
}
.name{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.9rem,11vw,7rem); line-height:1.0; letter-spacing:-.03em;
}
.name span{ display:inline-block }
.big{
  margin:0 0 22px; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,5.6vw,3.6rem); line-height:1.14; letter-spacing:-.02em;
}
.huge{
  margin:0 0 22px; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.8rem,12vw,7.5rem); line-height:.98; letter-spacing:-.03em;
}
.grad{
  background:linear-gradient(96deg,var(--gold) 0%,var(--rose) 52%,#ffd9a8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{
  margin:26px 0 0; max-width:42ch; color:var(--muted);
  font-size:clamp(1rem,2.4vw,1.18rem);
}
.body{
  margin:0; max-width:52ch; color:var(--muted);
  font-size:clamp(1rem,2.2vw,1.14rem); line-height:1.8;
}
.body.center{ margin-inline:auto; text-align:center }
.sig{
  margin:26px 0 0; font-family:var(--serif); font-style:italic;
  font-size:1.15rem; color:var(--gold);
}

/* ---------- scroll cue ---------- */
.scrollcue{
  margin-top:46px; display:flex; align-items:center; gap:14px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint);
}
.scrollcue span{
  width:1px; height:44px; background:rgba(255,255,255,.22);
  position:relative; overflow:hidden; display:block;
}
.scrollcue span::after{
  content:""; position:absolute; left:0; width:1px; height:16px;
  background:var(--gold); animation:trickle 2.1s var(--ease) infinite;
}
@keyframes trickle{ 0%{top:-18px} 100%{top:46px} }
.scrollcue em{ font-style:normal }

/* ---------- figures ---------- */
.figs{
  display:grid; gap:clamp(18px,3vw,34px); margin:0 0 40px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:560px){ .figs{ gap:16px } }
.fig{ text-align:center }
.fig b{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,7vw,4.2rem); line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fffaf0,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fig span{
  display:block; margin-top:8px; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint);
}

/* ---------- sticky candle ---------- */
.sticky{
  position:sticky; top:0; min-height:100svh; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(24px,5vh,52px); padding:clamp(48px,10vh,90px) 0;
}
@media (min-width:900px){
  .sticky{ flex-direction:row; gap:clamp(40px,7vw,90px); max-width:900px; margin:0 auto }
  .wishtext{ flex:1 }
}
.candle-wrap{ position:relative; flex:0 0 auto }
.candle{ width:clamp(72px,15vh,120px); height:auto; display:block;
         filter:drop-shadow(0 12px 24px rgba(0,0,0,.35)) }
.halo{
  position:absolute; left:50%; top:-6%;
  width:230px; height:230px; transform:translate(-50%,0);
  background:radial-gradient(circle, rgba(255,190,90,.34), transparent 62%);
  filter:blur(14px); pointer-events:none;
  opacity:var(--haloO,1); transition:opacity .8s var(--ease);
}
.flame{
  transform-origin:center bottom;
  animation:flick .28s ease-in-out infinite alternate;
}
@keyframes flick{
  from{ transform:scale(1) rotate(-3.5deg); opacity:.92 }
  to  { transform:scale(1.12,1.2) rotate(3.5deg); opacity:1 }
}
.flame-g{ transition:opacity .6s var(--ease), transform .6s var(--ease) }
.out .flame-g{ opacity:0; transform:translateY(8px) scale(.3) }
.out .halo{ opacity:0 }
.out .flame{ animation:none }

/* ---------- wishes list ---------- */
.wishes{ margin:0; padding:0; list-style:none; display:grid; gap:clamp(14px,2.4vh,22px) }
.wishes li{
  padding-left:26px; position:relative; color:var(--muted);
  font-size:clamp(1.02rem,2.4vw,1.24rem); line-height:1.6;
}
.wishes li::before{
  content:"✦"; position:absolute; left:0; top:.05em; color:var(--gold); font-size:.85em;
}
.wishes em{ font-style:normal; color:var(--ink); font-weight:500 }

/* ---------- button ---------- */
.btnrow{ margin-top:32px }
.btn{
  font:inherit; font-weight:600; font-size:15px; cursor:pointer;
  padding:15px 34px; border:0; border-radius:999px; color:#2a1a0a;
  background:linear-gradient(135deg,#ffd98a,var(--gold) 55%,var(--gold-2));
  box-shadow:0 12px 30px rgba(255,150,80,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(255,150,80,.38) }
.btn:active{ transform:translateY(-1px) scale(.98) }

/* ---------- fade-in on scroll ---------- */
[data-fade]{
  opacity:0; transform:translate3d(0,26px,0);
  will-change:transform,opacity;
}
[data-fade].in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform 1s var(--ease);
}
[data-fade].in{ transition-delay:calc(var(--d,0) * 110ms) }
[data-fade].settled{ will-change:auto }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-fade]{ opacity:1 !important; transform:none !important }
  .panel.tall{ min-height:100svh }
}