/* ─────────────────────────────────────────────────────────────────────────
   Akhil & Rachana — Haldi & Sangeet, 23 Aug 2026
   The scrolling edition. The printed card puts ten hours down one sheet; this
   puts them along the scrollbar, so the guest's thumb is what sets the sun.

   Everything visual is a fixed, full-screen stage. The words are the only
   things that actually move. scroll.js writes the custom properties below and
   the whole sky follows from them — no keyframes drive the sun, only --p.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family:"Cormorant"; src:url("fonts/CormorantGaramond.woff2") format("woff2");
             font-weight:300 700; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("fonts/CormorantGaramond-Italic.woff2") format("woff2");
             font-weight:300 700; font-style:italic; font-display:swap; }
@font-face { font-family:"Marcellus"; src:url("fonts/Marcellus-Regular.woff2") format("woff2");
             font-display:swap; }
@font-face { font-family:"Cinzel"; src:url("fonts/Cinzel.woff2") format("woff2");
             font-weight:400 900; font-display:swap; }
@font-face { font-family:"Vibes"; src:url("fonts/GreatVibes-Regular.woff2") format("woff2");
             font-display:swap; }
@font-face { font-family:"TeluguSerif"; src:url("fonts/NotoSerifTelugu.woff2") format("woff2");
             font-weight:300 700; font-display:swap; }
@font-face { font-family:"TeluguDisplay"; src:url("fonts/TiroTelugu-Regular.woff2") format("woff2");
             font-display:swap; }

:root{
  /* morning — the printed card's palette, unchanged */
  --haldi:#E0930A; --haldi-deep:#A85C05;
  --ink-day:#7E3406; --ink-day-soft:#A0561A; --marigold:#EF6A11; --leaf:#4E7A2C;
  /* night */
  --night:#120E30; --ink-night:#F4E8CB; --ink-night-soft:#D9C48E;
  --gold:#C9A227; --gold-bright:#F2D98A; --gold-deep:#8A6B18;

  /* written every frame by scroll.js — the entire sky is a function of these */
  --p:0;            /* 0 at 10 AM, 1 well after dark            */
  --dusk:0; --night-op:0; --starsop:0; --glow:0;
  --rays:1;         /* the sun loses its glare as it comes down */
  --toranop:1; --lightsop:0; --lit:0;
  --suny:14vh; --sunx:50%; --dark:0;
}

*{ box-sizing:border-box; }
html{ background:var(--night); }
body{
  margin:0; background:var(--night); color:var(--ink-night);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ── the stage: fixed, so scrolling moves the words past the sky ───────── */
.stage{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  height:100vh; height:100dvh; overflow:hidden;
}
.sky{ position:absolute; inset:0; }
.sky-day{
  background:linear-gradient(180deg, #FFF9EA 0%, #FEF0CB 40%, #FBDC96 72%, #F7C86F 100%);
}
.sky-dusk{
  opacity:var(--dusk);
  background:linear-gradient(180deg, #3F2A66 0%, #7C3050 20%, #C04C31 42%,
                             #ED8A34 62%, #FFC97A 74%, #FFE0A0 100%);
}
.sky-night{
  opacity:var(--night-op);
  background:linear-gradient(180deg, #100C2A 0%, #16113A 45%, #241A45 72%,
                             #33204A 88%, #3E2350 100%);
}

.starfield{ position:absolute; left:0; right:0; top:0; height:78%; opacity:var(--starsop); }
.stars{ display:block; width:100%; height:100%; }
.stars .tw{ animation:tw var(--t,4s) ease-in-out var(--d,0s) infinite alternate; }
@keyframes tw{ from{ opacity:.14 } to{ opacity:.95 } }

/* the sun rides a full-height track; scroll.js only moves it down the track */
.sun-track{ position:absolute; inset:0; }
.sun-wrap{
  position:absolute; top:var(--suny); left:var(--sunx);
  transform:translate(-50%,-50%);
  width:clamp(190px, 46vw, 340px); aspect-ratio:1;
  color:rgba(176,90,12,.62);
}
.sun{ display:block; width:100%; height:100%; overflow:visible; }
.sun-disc{ fill:#FFE79E; }
/* a sun near the horizon is not the same colour as a sun overhead */
.sun-warm{ fill:#FF9A3C; opacity:calc(var(--glow) * .78); }
.sun-rays{ opacity:var(--rays); }
.sun-halo{ opacity:calc(.55 + var(--glow) * .45); }

/* what is left in the sky after the sun is gone */
.afterglow{
  position:absolute; left:-10%; right:-10%; bottom:0; height:52%;
  opacity:var(--glow); pointer-events:none;
  background:radial-gradient(ellipse 62% 100% at var(--sunx) 100%,
             rgba(255,150,60,.62), rgba(255,110,40,.16) 52%, transparent 76%);
}

/* The far edge of the farm — the thing the sun actually goes down behind.
   The art is 680x320, drawn at full width, so it is always 47.06vw tall. It is
   then hung so its ridge lands on the same 71vh line on every screen: that line
   is the horizon, it is where the sun goes out, and it must not wander when the
   phone turns. Cropping or squashing it instead would eat the palms, which are
   the only thing making this read as a place rather than as a gradient. */
.hills{
  position:absolute; left:0; right:0; bottom:0;
  top:calc(76vh - 12.7vw); top:calc(76dvh - 12.7vw);
  color:#6E3C13; filter:brightness(calc(1 - var(--dark) * .88));
}
.treeline{ display:block; width:100%; height:auto; }
/* the drawing stops at 47.06vw; the ground it stands on runs to the foot */
.ground{ position:absolute; left:0; right:0; top:calc(47.06vw - 1px); bottom:0;
         background:linear-gradient(180deg, currentColor 0%, #5A320F 55%, #3C2008 100%); }

/* the doorway, dressed twice: marigolds by day, bulbs after dark */
.toran-wrap{
  position:absolute; top:0; left:0; right:0; height:clamp(88px, 14vh, 152px);
  opacity:var(--toranop); transform-origin:50% 0;
  animation:sway 9s ease-in-out infinite alternate;
}
.toran{ display:block; width:100%; height:100%; }
.toran .bloom{ fill:var(--marigold); }
.toran .bloom circle{ stroke:rgba(150,60,4,.5); stroke-width:1.1; }
.toran .bloom .heart{ fill:var(--haldi); }
.toran .leaf{ fill:#5C8B33; stroke:#2F5417; stroke-width:1.4; }
@keyframes sway{ from{ transform:rotate(-.5deg) } to{ transform:rotate(.5deg) } }

.lights-wrap{
  position:absolute; top:0; left:0; right:0;
  opacity:var(--lightsop); color:var(--gold);
}
/* scaled by width, like the treeline: the lamps stay round and stay in
   proportion to the screen instead of to the viewport height */
.lights{ display:block; width:100%; height:auto; overflow:visible; }
.lights .glass{ fill:#FFE9B4; stroke:#8A6B18; stroke-width:1.3; }
.lights .cap{ fill:var(--gold-deep); }
.lights .filament{ fill:none; stroke:#B9861F; stroke-width:1.6; }
/* every lamp waits its turn: a real string comes on left to right, it does not
   dim up all at once. --i is baked into each bulb by web_motifs.lights_web */
.lights .bulb{ opacity:0; transition:opacity .5s ease calc(var(--i) * 34ms); }
.lights .bulb .halo{ opacity:0; transition:opacity .7s ease calc(var(--i) * 34ms); }
body.lit .lights .bulb{ opacity:1; }
body.lit .lights .bulb .halo{ opacity:1; }

/* paper fibre, so the wide gradients never band on a cheap screen */
.grain{
  position:absolute; inset:0; opacity:.34; mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient( 23deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(113deg, rgba(0,0,0,.05)       0 1px, transparent 1px 4px);
}

/* ── the words ────────────────────────────────────────────────────────── */
main{ position:relative; z-index:20; }
.scene{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; text-align:center;
  padding:12vh clamp(1.1rem, 6vw, 2.6rem);
  /* --v is how centred this scene is, 0..1. Written by scroll.js. */
  opacity:var(--v, 1);
  transform:translateY(calc((1 - var(--v, 1)) * 30px));
  will-change:opacity, transform;
}
.s-turn{ min-height:170vh; min-height:170dvh; padding:0; }   /* room for the sunset */

.invite{ margin:0; font-family:"Cormorant",serif; font-weight:600;
         font-size:clamp(1rem, 4.3vw, 1.4rem); line-height:1.55; color:var(--ink-day); }
.names{ margin:.2em 0 0; font-family:"Vibes",cursive; font-weight:400; line-height:1.04;
        font-size:clamp(3.2rem, 16.5vw, 6.4rem); color:var(--ink-day);
        text-shadow:0 2px 0 rgba(255,247,224,.55); }
.names .amp, .sign .amp{
  font-family:"Cormorant",serif; font-style:italic; font-weight:600;
  font-size:.52em; color:var(--marigold); vertical-align:.2em; padding:0 .34em; }
.journey{ margin:.1em 0 0; font-family:"Cormorant",serif; font-style:italic; font-weight:600;
          font-size:clamp(1.05rem, 4.8vw, 1.55rem); color:var(--ink-day-soft); }

.rule{ line-height:0; }
.rule svg{ display:block; width:clamp(180px, 58vw, 360px); height:auto; }
.rule.day{ color:var(--ink-day-soft); }
.rule.night{ color:var(--gold); }

/* art · title+time · art. Grid, not flex: two equal 1fr side columns are what
   keep the type optically centred on the screen even though the dolu is much
   wider than the peacock feather beside it. The minmax(0,…) matters: a bare 1fr
   still carries min-width:auto, so the wider dolu would bloat its own column and
   push SANGEET off centre — which it did, by 9px. */
.event{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
        gap:clamp(.4rem, 3vw, 1.7rem); width:100%; max-width:34rem; }
.event img{ height:auto; display:block; }
.event > img:first-of-type{ justify-self:end; }
.event > img:last-of-type{ justify-self:start; }
/* the patrika's crimson ink is too cold next to turmeric — swing it warm so the
   line art carries the same weight as the type beside it */
.pot{ width:clamp(52px, 15vw, 108px);
      filter:hue-rotate(14deg) saturate(1.45) brightness(.82) contrast(1.12); }
.pot.flip{ transform:scaleX(-1); }
.dolu{ width:clamp(64px, 19vw, 132px); filter:brightness(1.14); }
.peacock{ width:clamp(50px, 14vw, 104px); filter:brightness(1.14); }

.ev-name{ margin:0; font-family:"Cinzel",serif; font-weight:700; letter-spacing:.2em;
          font-size:clamp(1.5rem, 8vw, 2.9rem); }
.ev-te{ margin:.12em 0 0; font-family:"TeluguDisplay",serif; line-height:1.5;
        font-size:clamp(1.15rem, 6vw, 2.1rem); }
.ev-time{ margin:.34em 0 0; font-family:"Marcellus",serif; letter-spacing:.03em;
          font-variant-numeric:lining-nums; font-size:clamp(1.3rem, 6.6vw, 2.3rem); }
.ev-time .on{ font-family:"Cormorant",serif; font-style:italic; font-weight:600; font-size:.68em; }

.s-haldi .ev-name{ color:var(--ink-day); }
.s-haldi .ev-te  { color:var(--haldi-deep); }
.s-haldi .ev-time{ color:var(--ink-day-soft); }
.s-haldi .cal    { color:var(--ink-day-soft); }
.s-sangeet .ev-name{ color:var(--gold-bright); }
.s-sangeet .ev-te  { color:var(--gold); }
.s-sangeet .ev-time{ color:var(--ink-night); }

/* a live page can do one thing paper cannot: put the date in their phone */
.cal{ display:inline-block; margin-top:.7em; padding:.45em .2em;
      font-family:"Cormorant",serif; font-style:italic; font-weight:600;
      font-size:clamp(.9rem, 3.7vw, 1.1rem); color:var(--ink-night-soft);
      text-decoration:underline; text-underline-offset:.28em;
      text-decoration-thickness:1px; opacity:.85; }

.when{ margin:0; font-family:"Marcellus",serif; letter-spacing:.05em;
       font-variant-numeric:lining-nums; color:var(--gold-bright);
       /* 7vw put "Sunday · 23 August 2026" within 12px of both edges on a 375
          phone and wrapped it on a 360 one */
       font-size:clamp(1.28rem, 6.2vw, 2.5rem); }
.when-te{ margin:.1em 0 1.4em; font-family:"TeluguSerif",serif; color:var(--ink-night-soft);
          font-size:clamp(.95rem, 4.2vw, 1.35rem); }
.venue-name{ margin:0; font-family:"Marcellus",serif; line-height:1.18; color:var(--ink-night);
             font-size:clamp(1.35rem, 6.4vw, 2.2rem); }
.venue-line{ margin:.28em 0 0; font-family:"Cormorant",serif; font-weight:600; line-height:1.5;
             color:var(--ink-night-soft); font-size:clamp(.95rem, 4.2vw, 1.3rem); }
.venue-te{ margin:.4em 0 0; font-family:"TeluguSerif",serif; line-height:1.6;
           color:var(--ink-night-soft); font-size:clamp(.85rem, 3.6vw, 1.1rem); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:1.8em; min-height:48px; padding:.85em 1.9em;
  font-family:"Cinzel",serif; font-weight:600; letter-spacing:.16em;
  font-size:clamp(.72rem, 3.2vw, .9rem); color:var(--gold-bright); text-decoration:none;
  border:1px solid rgba(201,162,39,.62); border-radius:999px;
  background:rgba(255,231,168,.06);
  box-shadow:0 0 0 6px rgba(201,162,39,.05), 0 10px 30px rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ background:rgba(255,231,168,.16); }

.closing{ margin:0; font-family:"Cormorant",serif; font-weight:600; font-style:italic;
          line-height:1.6; color:var(--ink-night-soft);
          font-size:clamp(1rem, 4.4vw, 1.35rem); max-width:26rem; }
.sign{ margin:1.2em 0 0; font-family:"Vibes",cursive; color:var(--gold-bright);
       font-size:clamp(2.2rem, 11vw, 4rem); line-height:1.1; }
.sign .amp{ color:var(--gold); }

.foot-band{ position:relative; z-index:20; line-height:0; }
.foot-band .band{ line-height:0; }
.foot-band svg{ display:block; width:100%; height:clamp(58px, 12vw, 96px); }

/* ── the one instruction the page needs ───────────────────────────────── */
.hint{
  position:fixed; z-index:30; left:50%; bottom:calc(2.2rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font-family:"Cinzel",serif; font-weight:600; font-size:.7rem; letter-spacing:.3em;
  /* it sits on the treeline, which is dark in every weather */
  color:rgba(255,238,200,.82); opacity:var(--hint, 1);
  transition:opacity .5s ease; pointer-events:none;
}
.hint svg{ animation:nudge 1.9s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0); opacity:.55 } 50%{ transform:translateY(5px); opacity:1 } }

@media (prefers-reduced-motion: reduce){
  .stars .tw, .toran-wrap, .hint svg{ animation:none; }
  .scene{ transform:none; }
}