/* ============================================================
   THE EMERALD YEARS — an anniversary / occasion site
   Deep emerald + antique brass. Editorial, ceremonial, grown-up.

   Performance rules obeyed throughout:
     · only transform / opacity animated
     · fixed layers get their own compositor layer
     · no layout reads inside scroll handlers
     · every canvas loop stops when idle
   ============================================================ */

:root{
  --deep:    #05201c;
  --deep-2:  #082e26;
  --forest:  #0d3b31;
  --moss:    #14584a;
  --ink:     #f2f6f1;
  --muted:   rgba(242,246,241,.70);
  --faint:   rgba(242,246,241,.42);

  --brass:   #d8b163;
  --brass-2: #f0d79a;
  --brass-3: #a07c33;
  --blush:   #e8b7a0;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease:  cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.65,0,.35,1);
  --pad:   clamp(20px,5vw,68px);
  --maxw:  1120px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ background:var(--deep); -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; color:var(--ink); background:var(--deep);
  font-family:var(--sans); font-size:16px; line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,canvas{ display:block; max-width:100% }
::selection{ background:var(--brass); color:#14100a }

/* ---------- fixed atmosphere ---------- */
.atmos{
  position:fixed; inset:0; z-index:0; pointer-events:none; contain:strict;
  background:
    radial-gradient(920px 620px at 14% -6%,  rgba(20,88,74,.55), transparent 62%),
    radial-gradient(760px 560px at 88% 6%,   rgba(216,177,99,.13), transparent 58%),
    radial-gradient(900px 720px at 50% 112%, rgba(13,59,49,.85),  transparent 64%),
    linear-gradient(180deg,#04211c 0%,#072a23 45%,#041916 100%);
}
/* fine linen texture — static, cheap */
.atmos::after{
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='170' height='170' filter='url(%23n)'/></svg>");
}
#fx{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  contain:strict; will-change:transform; transform:translateZ(0);
}

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

/* ---------- shell ---------- */
main{ position:relative; z-index:3 }
.act{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:clamp(72px,13vh,130px) var(--pad);
}
.act.auto{ min-height:auto; padding-block:clamp(56px,10vh,110px) }
.hold{ width:100%; max-width:var(--maxw); margin:0 auto }
.narrow{ max-width:660px }
.center{ text-align:center; margin-inline:auto }

/* ---------- type ---------- */
.eyebrow{
  margin:0 0 20px; font-size:11px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--brass);
}
.display{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,9vw,6.4rem); line-height:1.03; letter-spacing:-.02em;
}
.display .it{ font-style:italic; color:var(--brass-2) }
h2.hd{
  margin:0 0 22px; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,5.2vw,3.4rem); line-height:1.14;
}
.lede{ margin:0; max-width:54ch; color:var(--muted); font-size:clamp(1rem,2.2vw,1.16rem) }
.lede.center{ text-align:center }
.rule{
  width:70px; height:1px; margin:26px 0; border:0;
  background:linear-gradient(90deg,var(--brass),transparent);
}
.rule.center{ margin-inline:auto; background:linear-gradient(90deg,transparent,var(--brass),transparent) }

/* ---------- monogram ---------- */
.crest{ display:grid; place-items:center; gap:18px; margin-bottom:34px }
.crest svg{ width:clamp(88px,13vh,124px); height:auto; overflow:visible }
.ring{ fill:none; stroke:var(--brass); stroke-width:1; opacity:.55 }
.ring-draw{
  fill:none; stroke:url(#brassG); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:var(--len,340); stroke-dashoffset:var(--len,340);
  transition:stroke-dashoffset 2.2s var(--ease) .2s;
}
.drawn .ring-draw{ stroke-dashoffset:0 }
.crest .mono{
  font-family:var(--serif); font-size:2.1rem; fill:var(--brass-2);
  text-anchor:middle; dominant-baseline:middle;
}

/* ---------- timeline ---------- */
.timeline{ position:relative; padding-left:clamp(22px,4vw,42px) }
.timeline::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(216,177,99,.5) 12%,rgba(216,177,99,.5) 88%,transparent);
  transform:scaleY(var(--tl,0)); transform-origin:top;
  transition:transform 1.6s var(--ease);
}
.year{ position:relative; padding:clamp(18px,3vh,30px) 0 }
.year::before{
  content:""; position:absolute; left:calc(clamp(22px,4vw,42px) * -1); top:calc(clamp(18px,3vh,30px) + .55em);
  width:9px; height:9px; margin-left:-4px; border-radius:50%;
  background:var(--deep); border:1px solid var(--brass);
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.year.in::before{ background:var(--brass); box-shadow:0 0 0 5px rgba(216,177,99,.14) }
.year b{
  display:block; font-family:var(--serif); font-size:clamp(1.5rem,4vw,2.2rem);
  font-weight:300; color:var(--brass-2); line-height:1.1;
}
.year p{ margin:6px 0 0; color:var(--muted); font-size:clamp(.98rem,2.1vw,1.08rem); max-width:46ch }

/* ---------- figures ---------- */
.figs{ display:grid; gap:clamp(16px,3vw,30px); grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:600px){ .figs{ gap:14px } }
.fig{ text-align:center; padding:clamp(18px,3vh,30px) 12px;
      border:1px solid rgba(216,177,99,.20); border-radius:2px;
      background:linear-gradient(180deg,rgba(216,177,99,.05),transparent) }
.fig b{
  display:block; font-family:var(--serif); font-weight:300; line-height:1;
  font-size:clamp(1.9rem,6vw,3.4rem); font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--brass-2),var(--brass-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fig span{ display:block; margin-top:9px; font-size:10px; letter-spacing:.24em;
           text-transform:uppercase; color:var(--faint) }

/* ---------- toast (sticky glasses) ---------- */
.toastwrap{ min-height:180svh; position:relative }
.toastwrap .sticky{
  position:sticky; top:0; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(22px,4.5vh,44px); padding:clamp(56px,10vh,100px) var(--pad);
  text-align:center;
}
.glasses{ width:min(300px,72vw); height:auto; overflow:visible;
          filter:drop-shadow(0 16px 30px rgba(0,0,0,.4)) }
.gl-l,.gl-r{ transition:transform 1s var(--ease) }
.clink .gl-l{ transform:translateX(16px) rotate(9deg) }
.clink .gl-r{ transform:translateX(-16px) rotate(-9deg) }
.spark{ opacity:0; transition:opacity .5s var(--ease) }
.clink .spark{ opacity:1 }

/* ---------- vows / quote ---------- */
.quote{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.4rem,4.2vw,2.5rem); line-height:1.45;
  max-width:22ch; margin:0 auto; color:var(--ink);
}
.attrib{ margin:22px 0 0; font-size:11px; letter-spacing:.28em;
         text-transform:uppercase; color:var(--brass) }

/* ---------- gallery of moments ---------- */
.moments{ display:grid; gap:clamp(12px,2vw,20px); grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:700px){ .moments{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.moment{
  position:relative; aspect-ratio:3/4; border-radius:2px; overflow:hidden;
  border:1px solid rgba(216,177,99,.22);
  display:grid; place-items:center; text-align:center; padding:16px;
}
.moment span{
  font-family:var(--serif); font-size:clamp(.95rem,2.2vw,1.15rem);
  color:var(--brass-2); line-height:1.3;
}
.m1{ background:linear-gradient(160deg,#0d3b31,#05201c) }
.m2{ background:linear-gradient(160deg,#14584a,#082e26) }
.m3{ background:linear-gradient(160deg,#1b6a56,#0d3b31) }
.m4{ background:linear-gradient(160deg,#0a3229,#041916) }
.m5{ background:linear-gradient(160deg,#125045,#072a23) }
.m6{ background:linear-gradient(160deg,#186253,#0a3229) }

/* ---------- programme ---------- */
.prog-list{ margin:0; padding:0; list-style:none; display:grid; gap:0 }
.prog-list li{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,4vw,40px);
  align-items:baseline; padding:clamp(15px,2.6vh,24px) 0;
  border-bottom:1px solid rgba(216,177,99,.16);
}
.prog-list li:last-child{ border-bottom:0 }
.prog-list time{
  font-family:var(--serif); font-size:clamp(1rem,2.6vw,1.3rem);
  color:var(--brass); white-space:nowrap;
}
.prog-list strong{ display:block; font-weight:500; font-size:clamp(1rem,2.3vw,1.12rem) }
.prog-list em{ display:block; font-style:normal; color:var(--faint); font-size:13.5px; margin-top:2px }

/* ---------- finale ---------- */
.finale .display{ font-size:clamp(2.4rem,10vw,6.8rem) }
.grad{
  background:linear-gradient(96deg,var(--brass-2) 0%,var(--brass) 40%,var(--blush) 72%,var(--brass-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn{
  font:inherit; font-weight:500; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; cursor:pointer; color:#14100a;
  padding:16px 34px; border:0; border-radius:2px;
  background:linear-gradient(135deg,var(--brass-2),var(--brass) 55%,var(--brass-3));
  box-shadow:0 10px 26px rgba(216,177,99,.20);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(216,177,99,.3) }
.btn:active{ transform:translateY(-1px) scale(.985) }
.btnrow{ margin-top:34px }
.sig{ margin:30px 0 0; font-family:var(--serif); font-style:italic;
      font-size:1.15rem; color:var(--brass) }

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

/* line-by-line for the big display */
.split .ln{ display:block; overflow:clip; padding-bottom:.06em }
@supports not (overflow:clip){ .split .ln{ overflow:hidden } }
.split .ln i{
  display:inline-block; font-style:inherit; transform:translateY(105%); opacity:0;
  transition:transform 1.05s var(--ease), opacity .8s var(--ease);
}
.split.in .ln i{ transform:none; opacity:1 }
.split.in .ln:nth-child(2) i{ transition-delay:.10s }
.split.in .ln:nth-child(3) i{ transition-delay:.20s }
.split.settled .ln{ overflow:visible }

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

@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 }
  .split .ln i{ transform:none !important; opacity:1 !important }
  .toastwrap{ min-height:auto }
  .timeline::before{ transform:scaleY(1) }
}