/* ==========================================================================
   BAPPACHE AAGMAN
   Four cards behind a velvet curtain, lit like a mandap at night.
   Every colour is taken from the Ganpati photograph.
   ========================================================================== */

:root{
  --night-0:#020B14;
  --night-1:#051624;
  --night-2:#092235;
  --glow-1: #0A435C;
  --glow-2: #0B6477;

  --panel-1:#0A314A;
  --panel-2:#062033;
  --panel-3:#031320;

  --gold-1:#8A6318;
  --gold-2:#C99A3E;
  --gold-3:#EFC768;
  --gold-4:#FBEBB4;

  --peacock-1: #064E3B;
  --peacock-2: #0D9488;
  --peacock-3: #14B8A6;
  --peacock-4: #2DD4BF;
  --peacock-royal: #1E3A8A;

  --marigold:  #0D9488;
  --marigold-2:#2DD4BF;
  --marigold-3:#065F46;
  --velvet-1:  #0B2538;
  --velvet-2:  #061826;
  --velvet-3:  #020B14;

  --cream:  #FFFDF5;
  --cream-2:#E2F3F5;
  --cream-3:#A5D6D8;

  --display:"Marcellus", "Times New Roman", serif;
  --ui:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --appH:100vh;
  --safeT:env(safe-area-inset-top, 0px);
  --safeB:env(safe-area-inset-bottom, 0px);

  --card-w: min(93vw, 450px);
  --card-h: min(calc(var(--appH) - 190px - var(--safeT) - var(--safeB)),
                calc(var(--card-w) * 1.94), 790px);
  --u: min(var(--card-w), calc(var(--card-h) * .56));

  --pad: clamp(18px, calc(var(--card-w) * .072), 34px);
  --gap: clamp(9px, calc(var(--card-h) * .021), 20px);

  --ease-out:cubic-bezier(.16,.84,.28,1);
  --ease-soft:cubic-bezier(.32,.72,.28,1);
  --par:0;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; overscroll-behavior:none; }
body{
  position:fixed; inset:0;
  background:var(--night-1); color:var(--cream);
  font-family:var(--ui); font-size:16px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%;
}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
[hidden]{ display:none !important; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold-3); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.noscript{ position:fixed; inset:0; display:grid; place-items:center; background:var(--night-1);
           z-index:900; font-family:var(--display); font-size:20px; color:var(--cream); text-align:center; padding:32px }


/* ==========================================================================
   THE WORLD
   ========================================================================== */
.world{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.world__sky{
  position:absolute; inset:0;
  background:
    radial-gradient(76% 44% at 50% 24%, var(--glow-2) 0%, rgba(11,100,119,0) 62%),
    radial-gradient(122% 84% at 50% 33%, var(--glow-1) 0%, var(--night-2) 40%, var(--night-1) 68%, var(--night-0) 100%);
}
.world__bloom{ position:absolute; border-radius:50%; filter:blur(60px) }
.world__bloom--a{
  width:96vw; height:96vw; left:2vw; top:-14vh;
  background:radial-gradient(circle, rgba(45,212,191,.26) 0%, rgba(45,212,191,0) 66%);
  animation:lampA 7s ease-in-out infinite alternate;
}
.world__bloom--b{
  width:120vw; height:70vh; left:-10vw; bottom:-16vh;
  background:radial-gradient(circle, rgba(30,58,138,.28) 0%, rgba(30,58,138,0) 70%);
  animation:lampB 11s ease-in-out infinite alternate;
}
@keyframes lampA{ from{ opacity:.72; transform:scale(1) } to{ opacity:1; transform:scale(1.07) } }
@keyframes lampB{ from{ opacity:.6 } to{ opacity:.95 } }

.world__air{ position:absolute; inset:0 }
.smoke{
  position:absolute; bottom:-14%; width:120px; height:78%;
  background:linear-gradient(to top, rgba(226,243,245,0) 0%, rgba(226,243,245,.06) 34%, rgba(226,243,245,0) 100%);
  filter:blur(16px); animation:smokeRise linear infinite;
}
@keyframes smokeRise{
  from{ transform:translate3d(0,10%,0) scaleX(.6); opacity:0 }
  22% { opacity:.9 }
  to  { transform:translate3d(var(--sx,26px),-92%,0) scaleX(1.5); opacity:0 }
}
.ember{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #FFFBEB, #FBBF24 45%, #0D9488 75%, rgba(13,148,136,0) 100%);
  animation-name:emberUp; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes emberUp{
  from{ transform:translate3d(0,12vh,0); opacity:0 }
  14% { opacity:var(--pop,.8) } 86% { opacity:var(--pop,.8) }
  to  { transform:translate3d(var(--dx,24px),-102vh,0); opacity:0 }
}
.world__vignette{
  position:absolute; inset:0;
  background:radial-gradient(112% 78% at 50% 42%, rgba(0,0,0,0) 42%, rgba(0,0,0,.64) 100%);
}

/* real marigold garlands, hung in front of everything */
.world__garlands{ position:fixed; z-index:4; top:0; left:0; right:0; height:60%; pointer-events:none }
.mala{
  position:absolute; top:calc(var(--safeT) * -1 - 6px);
  transform-origin:50% 0; animation:sway 7s ease-in-out infinite alternate;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
.mala img{ display:block; width:100%; height:auto }
@keyframes sway{ from{ transform:rotate(-1.6deg) } to{ transform:rotate(1.6deg) } }

/* FLOWER PETALS — falling on every card, always */
.petals{ position:fixed; z-index:5; inset:0; pointer-events:none; overflow:hidden }
.petal{ position:absolute; top:-10vh; animation-name:petalFall;
        animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform }
.petal i{
  display:block; width:100%; height:100%;
  border-radius:64% 36% 58% 42% / 52% 62% 38% 48%;
  background:linear-gradient(140deg, #2DD4BF 0%, #0D9488 52%, #064E3B 100%);
  box-shadow:inset 0 1px 2px rgba(204,251,241,.6);
  animation:petalSpin linear infinite;
}
.petal--rose i{
  background:linear-gradient(140deg, #FDE68A 0%, #D97706 55%, #92400E 100%);
  box-shadow:inset 0 1px 2px rgba(254,243,199,.7);
}
.petal--white i{
  background:linear-gradient(140deg, #FFFFFF 0%, #E0F2FE 55%, #7DD3FC 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.8);
}
@keyframes petalFall{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(var(--dx,40px),120vh,0) } }
@keyframes petalSpin{ from{ transform:rotate3d(1,1,.3,0deg) } to{ transform:rotate3d(1,1,.3,360deg) } }


/* ==========================================================================
   FRAME
   ========================================================================== */
.frame{ position:relative; z-index:2; height:var(--appH,100%); outline:none }
body:not(.is-open) .frame{ visibility:hidden }

.topbar{ position:absolute; z-index:6; right:16px; top:calc(var(--safeT) + 14px) }
.music{
  position:relative; width:54px; height:54px; display:grid; place-items:center;
  border-radius:50%; color:var(--gold-3);
  background:linear-gradient(180deg, rgba(10,49,74,.96), rgba(6,32,51,.96));
  box-shadow:0 0 0 1.5px rgba(201,154,62,.6), 0 8px 20px -8px rgba(0,0,0,.85);
  transition:transform .2s var(--ease-out);
}
.music svg{ width:23px; height:23px }
.music__on{ display:none }
.music:active{ transform:scale(.93) }
.music.is-playing .music__on{ display:block }
.music.is-playing .music__off{ display:none }
.music.is-playing{ color:var(--marigold-2) }
.music.is-playing::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid rgba(45,212,191,.55); animation:ring 2.6s ease-out infinite;
}
@keyframes ring{ from{ transform:scale(.86); opacity:.85 } to{ transform:scale(1.24); opacity:0 } }


/* ==========================================================================
   STAGE + DECK
   ========================================================================== */
.stage{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  padding:calc(var(--safeT) + 42px) 0 calc(var(--safeB) + 110px);
  perspective:1500px; perspective-origin:50% 44%;
  touch-action:none; -webkit-user-select:none; user-select:none;
}
.deck{ position:relative; width:var(--card-w); height:var(--card-h); transform-style:preserve-3d; opacity:0 }
.deck__float{
  position:absolute; inset:0; transform-style:preserve-3d;
  animation:breathe 11s ease-in-out infinite alternate; will-change:transform;
}
@keyframes breathe{
  from{ transform:translate3d(0,-5px,0) rotateX(1.1deg) }
  to  { transform:translate3d(0, 5px,0) rotateX(-.8deg) }
}
body.is-open .deck{ opacity:1; animation:arrive 1.1s var(--ease-out) backwards }
@keyframes arrive{
  from{ opacity:0; transform:translate3d(0,40px,-170px) scale(.92) }
  to  { opacity:1; transform:none }
}

.card{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:
    translate3d(var(--x,0%), var(--y,0%), var(--z,0px))
    rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) scale(var(--s,1));
  opacity:var(--o,1); will-change:transform,opacity;
}
.card[data-hidden="1"]{ visibility:hidden }
.card__tilt{ position:absolute; inset:0; transform-style:preserve-3d;
             transform:rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg)) }

.card__face{
  position:absolute; inset:0; border-radius:28px; overflow:hidden;
  background:
    radial-gradient(122% 62% at 50% 0%, rgba(11,100,119,.5) 0%, rgba(11,100,119,0) 58%),
    linear-gradient(172deg, var(--panel-1) 0%, var(--panel-2) 54%, var(--panel-3) 100%);
  box-shadow:
    0 40px 70px -26px rgba(0,0,0,.88),
    0 16px 30px -14px rgba(0,0,0,.62),
    inset 0 0 0 1.5px rgba(239,199,104,.55),
    inset 0 0 0 6px rgba(3,19,32,.88),
    inset 0 0 0 7.5px rgba(201,154,62,.38),
    inset 0 44px 76px -44px rgba(45,212,191,.28);
}

/* the Ganpati reflection every card sits on */
.card__reflect{
  position:absolute; inset:0; pointer-events:none;
  background-size:cover; background-position:50% 40%;
  opacity:.30;
  -webkit-mask-image:radial-gradient(88% 62% at 50% 44%, #000 0%, rgba(0,0,0,.55) 54%, transparent 88%);
          mask-image:radial-gradient(88% 62% at 50% 44%, #000 0%, rgba(0,0,0,.55) 54%, transparent 88%);
}
.card__corner{
  position:absolute; width:33%; pointer-events:none; opacity:.5;
}
.card__corner img{ width:100%; height:auto }
.card__corner--tl{ left:6px; top:6px }
.card__corner--br{ right:6px; bottom:6px; transform:rotate(180deg) }

.card__sheen{
  position:absolute; inset:-30%; pointer-events:none;
  background:linear-gradient(102deg, rgba(255,214,140,0) 40%, rgba(255,214,140,.15) 50%, rgba(255,214,140,0) 60%);
  transform:translate3d(var(--gx,0px),0,0);
}

/* The card leans aside in time with the swiping hand, just far enough that
   the one behind it shows. It stops well before the hand does — the point is
   made in a lean or two, and after that it would only get in the way. */
.card.is-hinting{ animation:peek 3.2s var(--ease-soft) 1 }
.card.is-hinting.hint--first{ animation-iteration-count:2 }
@keyframes peek{
  0%,10%,72%,100%{
    transform:translate3d(var(--x,0%),var(--y,0%),var(--z,0px))
              rotateY(0deg) rotateZ(0deg) scale(var(--s,1));
  }
  46%{
    transform:translate3d(calc(var(--x,0%) - 6.5%),var(--y,0%),calc(var(--z,0px) + 16px))
              rotateY(5deg) rotateZ(-1.6deg) scale(var(--s,1));
  }
}

/* ==========================================================================
   CARD CONTENT   — everything upright, nothing cursive
   ========================================================================== */
.c{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(var(--pad) + 6px) var(--pad) calc(var(--pad) + 4px);
  text-align:center; gap:var(--gap); overflow:hidden;
}

.mantra{
  font-family:var(--ui); font-weight:600;
  font-size:clamp(12px, calc(var(--u) * .036), 15px);
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-3); padding-left:.2em;
}
.eyebrow{
  font-family:var(--ui); font-weight:700;
  font-size:clamp(10px, calc(var(--u) * .032), 13px);
  letter-spacing:.28em; text-transform:uppercase; color:var(--marigold-2); padding-left:.28em;
}
.welcome{
  font-family:var(--ui); font-weight:500;
  font-size:clamp(11.5px, calc(var(--u) * .035), 15px);
  letter-spacing:.05em; color:var(--cream-2); line-height:1.5;
  max-width:26ch; margin-top:5px;
}
.lead{
  font-family:var(--ui); font-weight:500;
  font-size:clamp(14px, calc(var(--u) * .046), 19px);
  letter-spacing:.01em; color:var(--gold-3);
}
.display{
  font-family:var(--display); font-weight:400;
  font-size:clamp(28px, calc(var(--u) * .132), 60px);
  line-height:1.12; letter-spacing:.012em; color:var(--cream); max-width:13ch;
  text-shadow:0 2px 16px rgba(0,0,0,.7), 0 0 36px rgba(45,212,191,.25);
}
.display--sm{ font-size:clamp(23px, calc(var(--u) * .102), 46px); max-width:15ch }
.prose{
  font-family:var(--ui); font-weight:400;
  font-size:clamp(14px, calc(var(--u) * .048), 18px);
  line-height:1.68; color:var(--cream-2); max-width:34ch;
}
.namecard{
  font-family:var(--display); font-weight:400;
  font-size:clamp(16px, calc(var(--u) * .060), 27px);
  letter-spacing:.03em;
  color:var(--gold-3); text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.dates{
  font-family:var(--ui); font-weight:700;
  font-size:clamp(14px, calc(var(--u) * .052), 23px);
  letter-spacing:.04em; color:var(--gold-3); font-variant-numeric:tabular-nums;
  padding:.5em 1.1em; border-radius:999px;
  background:rgba(13,148,136,.18);
  box-shadow:inset 0 0 0 1px rgba(45,212,191,.5);
}

/* the real gold divider */
.rule{ width:min(72%,260px); flex:none; opacity:.9 }
.rule img{ width:100%; height:auto }
.spacer{ flex:1 1 auto; min-height:0 }


/* ---------- card 1 — the 3D shrine & photograph ---------- */
.c--aagman{ padding:0; gap:0; justify-content:flex-start }
.shrine{ position:absolute; inset:0; overflow:hidden }
.shrine img,.shrine video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 44%;
  transform:scale(1.01); transition:transform 7s var(--ease-soft);
}
.card.is-entering .shrine img,.card.is-entering .shrine video{ transform:scale(1.07) }
.shrine__poster-fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.25; filter:blur(6px); pointer-events:none;
}
.shrine__void{
  position:absolute; inset:0; display:grid; place-items:center;
  background:radial-gradient(60% 46% at 50% 40%, rgba(11,100,119,.55), rgba(2,11,20,.96));
  color:var(--gold-3); font-family:var(--ui); font-size:14px; letter-spacing:.22em;
}

/* Divine Prabhavali (Glowing Sacred Aura) */
.shrine__halo{
  position:absolute; left:50%; top:44%; transform:translate(-50%, -50%);
  width:min(74vw, 340px); height:min(74vw, 340px);
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(239,199,104,.48) 0%, rgba(45,212,191,.32) 42%, rgba(13,148,136,.1) 64%, rgba(2,11,20,0) 75%);
  filter:blur(22px);
  animation:haloPulse 4.4s ease-in-out infinite alternate;
}
@keyframes haloPulse{
  0%   { transform:translate(-50%, -50%) scale(0.9);  opacity:0.65; }
  100% { transform:translate(-50%, -50%) scale(1.18); opacity:1; }
}

/* 3D Model Element */
.shrine__model{
  position:absolute; inset:0; width:100%; height:100%;
  --poster-color:transparent;
  outline:none; z-index:1; cursor:grab;
  animation:divineHover 5.5s ease-in-out infinite alternate;
}
.shrine__model:active{ cursor:grabbing; }
@keyframes divineHover{
  0%   { transform:translateY(-7px); }
  100% { transform:translateY(7px); }
}

/* Sacred blessing ripple rings */
.shrine__ring{
  position:absolute; left:50%; top:44%; transform:translate(-50%, -50%);
  width:20px; height:20px; border-radius:50%; pointer-events:none; z-index:2;
  border:2px solid rgba(251,235,180,.88);
  box-shadow:0 0 26px 8px rgba(45,212,191,.75), inset 0 0 16px rgba(239,199,104,.8);
  opacity:0;
}
.shrine__ring.is-blessing{
  animation:blessingWave 1.8s cubic-bezier(0.12, 0.74, 0.2, 1) forwards;
}
.shrine__ring--2{ animation-delay:.28s; }
@keyframes blessingWave{
  0%   { transform:translate(-50%, -50%) scale(0.4); opacity:1; }
  55%  { opacity:0.85; }
  100% { transform:translate(-50%, -50%) scale(22);  opacity:0; }
}

/* the scrim that lets the words sit on the picture */
.shrine__scrim{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(180deg, rgba(2,11,20,.84) 0%, rgba(2,11,20,.52) 13%, rgba(2,11,20,0) 25%),
    linear-gradient(0deg,
      rgba(2,11,20,.97) 0%, rgba(2,11,20,.92) 20%, rgba(2,11,20,.7) 32%,
      rgba(2,11,20,0) 48%);
}
.plate{
  position:relative; z-index:3; width:100%;
  display:flex; flex-direction:column; align-items:center;
  padding:0 var(--pad); text-align:center;
  pointer-events:none;
}
.plate > *{ pointer-events:auto; }
.plate--top{ padding-top:calc(var(--pad) + 4px) }
.plate--foot{
  margin-top:auto; padding-bottom:calc(var(--pad) + 2px);
  gap:calc(var(--gap) * .4);
}

/* Blessing action button */
.bless-trigger{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:36px; padding:6px 18px; border-radius:999px;
  font-family:var(--ui); font-size:clamp(11px, calc(var(--u)*.033), 13.5px);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#02201C;
  background:linear-gradient(180deg, #5EEAD4 0%, #14B8A6 48%, #0D9488 100%);
  border:1px solid rgba(251,235,180,.85);
  box-shadow:0 6px 18px -4px rgba(13,148,136,.7), 0 0 0 1px rgba(45,212,191,.4), inset 0 1.5px 0 rgba(255,255,255,.8);
  cursor:pointer; touch-action:manipulation;
  transition:transform .16s var(--ease-out), box-shadow .2s ease, filter .2s ease;
  animation:blessBtnGlow 3s ease-in-out infinite;
  margin-top:4px;
}
.bless-trigger:hover{ filter:brightness(1.08); transform:scale(1.03); }
.bless-trigger:active{ transform:scale(0.96); }
.bless-trigger__icon{ font-size:1.15em; }
.bless-trigger__sparkle{ font-size:1.05em; }
@keyframes blessBtnGlow{
  0%,100%{ box-shadow:0 6px 18px -4px rgba(13,148,136,.7), 0 0 0 0 rgba(45,212,191,.45); }
  50%    { box-shadow:0 8px 24px -4px rgba(13,148,136,.9), 0 0 0 6px rgba(45,212,191,0); }
}

/* Divine blessing message banner */
.bless-toast{
  position:absolute; left:50%; top:22%; transform:translate(-50%, -8px);
  z-index:20; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 20px; border-radius:14px;
  background:linear-gradient(170deg, rgba(6,32,51,.96) 0%, rgba(3,19,32,.97) 100%);
  border:1.5px solid var(--gold-3);
  box-shadow:0 12px 34px -8px rgba(0,0,0,.92), 0 0 26px 4px rgba(45,212,191,.5), inset 0 1px 0 rgba(255,255,255,.3);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
}
.bless-toast.is-shown{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
}
.bless-toast__shloka{
  font-family:var(--ui); font-size:clamp(12px, calc(var(--u)*.035), 14px);
  font-weight:700; letter-spacing:.12em; color:var(--gold-4); text-transform:uppercase;
}
.bless-toast__msg{
  font-family:var(--display); font-size:clamp(12.5px, calc(var(--u)*.040), 16px);
  color:var(--cream); letter-spacing:.02em; white-space:nowrap;
}

/* Burst Petals */
.petal--burst{
  animation-name:burstFall !important;
  animation-timing-function:cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  animation-iteration-count:1 !important;
}
@keyframes burstFall{
  0%   { opacity:1; transform:translate3d(0, 0, 0) scale(0.6); }
  30%  { opacity:1; }
  100% { opacity:0; transform:translate3d(var(--dx, 60px), 75vh, 0) scale(1.15); }
}
.c--aagman .display{
  margin-top:calc(var(--gap) * -.12);
  font-size:clamp(27px, calc(var(--u) * .128), 56px);
  line-height:.99;
}
.c--aagman .lead{ font-size:clamp(13px, calc(var(--u) * .043), 18px) }
.c--aagman .dates{ padding:.42em 1em }

/* ---------- card 2 — the utsav timeline ---------- */
.tl{ --ev:1; position:relative; width:100%; flex:1 1 auto; min-height:0;
     display:flex; flex-direction:column; justify-content:space-between; padding:calc(var(--gap)*.3) 0 }
.tl::before{
  content:""; position:absolute; left:50%; top:6px; bottom:6px; width:2px; margin-left:-1px;
  background:linear-gradient(180deg, transparent, var(--gold-2) 8%, var(--gold-2) 92%, transparent);
  opacity:.7; transform-origin:top; transform:scaleY(0);
}
.card.is-entering .tl::before{ animation:draw 1.4s var(--ease-soft) .35s forwards }
@keyframes draw{ to{ transform:scaleY(1) } }
.ev{ position:relative; display:flex; align-items:center; min-height:0 }
.ev--l{ justify-content:flex-start } .ev--r{ justify-content:flex-end }
.ev__dot{
  position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--peacock-4), var(--peacock-2) 60%, var(--peacock-1));
  box-shadow:0 0 0 3px rgba(3,19,32,.92), 0 0 16px 2px rgba(45,212,191,.75);
}
.ev__box{
  width:calc(50% - 9px);
  background:linear-gradient(168deg, rgba(10,49,74,.96) 0%, rgba(6,32,51,.96) 100%);
  border-radius:15px; padding:calc(var(--gap)*.56*var(--ev)) calc(var(--gap)*.34);
  min-width:0; overflow-wrap:anywhere;
  box-shadow:inset 0 0 0 1.5px rgba(201,154,62,.45), 0 10px 22px -12px rgba(0,0,0,.95);
  text-align:center;
}
.tl[data-rows="5"]{ --ev:.90 }
.tl[data-rows="6"]{ --ev:.82 }
.tl[data-rows="7"]{ --ev:.75 }
.tl[data-rows="8"]{ --ev:.69 }
.tl[data-rows="9"]{ --ev:.64 }

.ev__label{
  font-family:var(--ui); font-weight:700;
  font-size:calc(clamp(8px, calc(var(--u)*.027), 11px) * var(--ev));
  letter-spacing:.16em; text-transform:uppercase; color:var(--marigold-2); padding-left:.16em;
}
.ev__name{
  font-family:var(--display); font-weight:400;
  font-size:calc(clamp(13.5px, calc(var(--u)*.049), 22px) * var(--ev)); letter-spacing:.015em;
  color:var(--cream); line-height:1.2; margin-top:3px;
}
.ev__date{
  font-family:var(--ui); font-weight:500;
  font-size:calc(clamp(10.5px, calc(var(--u)*.036), 15px) * var(--ev)); line-height:1.3;
  color:var(--gold-3); margin-top:4px; font-variant-numeric:tabular-nums;
}
.ev__extra{
  font-family:var(--ui); font-weight:600;
  font-size:calc(clamp(9.5px, calc(var(--u)*.031), 12.5px) * var(--ev));
  letter-spacing:.09em; color:var(--marigold-2); margin-top:calc(5px * var(--ev));
  padding-top:calc(5px * var(--ev)); border-top:1px solid rgba(201,154,62,.28);
}
.ev__time{
  font-family:var(--ui); font-weight:700;
  font-size:calc(clamp(11.5px, calc(var(--u)*.04), 17px) * var(--ev));
  color:var(--cream); font-variant-numeric:tabular-nums; margin-top:1px;
}


/* ---------- card 3 — invitation & venue ---------- */
.c--invite{ gap:calc(var(--gap) * .82) }
.c--invite .note,
.c--invite .prose{
  text-align:center;
}
.c--invite .display{ font-size:clamp(22px, calc(var(--u) * .094), 42px) }
.c--invite .prose{
  font-size:clamp(12.5px, calc(var(--u) * .0395), 15.5px);
  line-height:1.78; color:var(--cream-2); max-width:34ch;
}
.c--invite .note{ gap:calc(var(--gap)*.5) }
.c--invite .signoff{ margin-top:calc(var(--gap)*.2) }
.c--invite .eyebrow{ opacity:.92 }
.note{
  width:100%;
  background:linear-gradient(168deg, rgba(10,49,74,.92) 0%, rgba(6,32,51,.92) 100%);
  border-radius:18px; padding:calc(var(--gap)*.92) calc(var(--gap)*.9);
  box-shadow:inset 0 0 0 1px rgba(201,154,62,.35), 0 12px 26px -14px rgba(0,0,0,.95);
  display:flex; flex-direction:column; gap:calc(var(--gap)*.55);
}
.address{
  font-family:var(--display); font-weight:400;
  font-size:clamp(15px, calc(var(--u)*.052), 23px);
  color:var(--cream); line-height:1.5; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.maps{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  min-height:clamp(46px, calc(var(--card-h) * .078), 58px);
  padding:.85em 1.8em; border-radius:14px;
  background:linear-gradient(180deg, #14B8A6 0%, #0D9488 56%, #047857 100%);
  color:#02201C;
  font-family:var(--ui); font-size:clamp(12px, calc(var(--u)*.038), 15px);
  font-weight:800; letter-spacing:.06em;
  box-shadow:0 12px 26px -10px rgba(13,148,136,.7), inset 0 1.5px 0 rgba(204,251,241,.7),
             inset 0 -2px 0 rgba(4,120,87,.4), 0 0 0 1.5px rgba(45,212,191,.45);
  transition:transform .16s var(--ease-out), box-shadow .16s ease, filter .16s ease;
}
.maps svg{ width:17px; height:17px }
.maps:hover{ filter:brightness(1.06) }
.maps:active{ transform:translateY(2px); box-shadow:0 5px 14px -9px rgba(13,148,136,.8), inset 0 1.5px 0 rgba(204,251,241,.7) }


/* ---------- the location card ---------- */
.c--place{ gap:calc(var(--gap) * .78) }
.map{
  position:relative; width:100%;
  aspect-ratio:3 / 2; max-height:34%;
  border-radius:16px; overflow:hidden;
  background:linear-gradient(168deg, #0A314A 0%, #062033 62%, #031320 100%);
  box-shadow:inset 0 0 0 1.5px rgba(201,154,62,.45), 0 12px 26px -14px rgba(0,0,0,.95);
  color:var(--gold-3);
}
.map__art{ position:absolute; inset:0; width:100%; height:100% }
/* a faint survey grid over the streets */
.map__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(201,154,62,.09) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,  rgba(201,154,62,.09) 0 1px, transparent 1px 26px);
  -webkit-mask-image:radial-gradient(74% 74% at 50% 50%, #000 40%, transparent 100%);
          mask-image:radial-gradient(74% 74% at 50% 50%, #000 40%, transparent 100%);
}
.map__pin{
  position:absolute; left:50%; top:50%; width:34px; height:34px;
  margin:-30px 0 0 -17px; color:var(--marigold-2);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.8));
}
.map__pin svg{ position:relative; width:100%; height:100% }
.map__pulse{
  position:absolute; left:50%; bottom:-4px; width:26px; height:26px; margin-left:-13px;
  border-radius:50%; border:2px solid var(--marigold-2);
  animation:pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse{
  from{ transform:scale(.35); opacity:.9 }
  to  { transform:scale(1.5); opacity:0 }
}
.landmark{
  font-family:var(--ui); font-weight:400;
  font-size:clamp(11.5px, calc(var(--u)*.036), 14px);
  line-height:1.55; color:var(--cream-3); max-width:30ch;
}

/* ---------- card 4 — blessings ---------- */
.c--bless .media{
  position:absolute; inset:0; opacity:.42;
  -webkit-mask-image:radial-gradient(76% 62% at 50% 46%, #000 0%, rgba(0,0,0,.45) 58%, transparent 90%);
          mask-image:radial-gradient(76% 62% at 50% 46%, #000 0%, rgba(0,0,0,.45) 58%, transparent 90%);
}
/* a veil between the footage and the words, so the blessing stays readable */
.c--bless::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(66% 44% at 50% 52%, rgba(2,11,20,.65) 0%, rgba(2,11,20,.32) 52%, rgba(2,11,20,0) 78%),
    linear-gradient(180deg, rgba(2,11,20,.5) 0%, rgba(2,11,20,0) 24%, rgba(2,11,20,0) 74%, rgba(2,11,20,.55) 100%);
}
.c--bless .media img,.c--bless .media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.c--bless > *{ position:relative; z-index:1 }
.bless{
  font-family:var(--display); font-weight:400;
  font-size:clamp(20px, calc(var(--u)*.082), 38px);
  line-height:1.42; letter-spacing:.015em; color:var(--cream); max-width:16ch;
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}
.signoff{
  font-family:var(--ui); font-weight:600;
  font-size:clamp(12px, calc(var(--u)*.04), 16px);
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-3); padding-left:.2em;
}


/* ==========================================================================
   REVEALS
   ========================================================================== */
.card.is-entering [data-r]{
  animation:rise .82s var(--ease-out) backwards;
  animation-delay:calc(var(--i,0) * var(--step, 98ms) + var(--d, 0ms));
}
@keyframes rise{ from{ opacity:0; transform:translate3d(0,18px,0) } to{ opacity:1; transform:none } }
.card.is-entering .card__corner{ animation:cornerIn 1.1s var(--ease-out) .25s backwards }
@keyframes cornerIn{ from{ opacity:0; transform:scale(.82) } to{ opacity:.62 } }
.card.is-entering .card__corner--br{ animation-name:cornerInBR }
@keyframes cornerInBR{ from{ opacity:0; transform:rotate(180deg) scale(.82) } to{ opacity:.62; transform:rotate(180deg) } }
.c--bless{ --step:230ms }
.c--bless .c,.c--bless{ padding-bottom:calc(var(--pad) * 2.1) }
.c--bless .namecard{ font-size:clamp(15px, calc(var(--u) * .053), 24px) }
.c--bless .signoff{ margin-bottom:2px }


/* ==========================================================================
   TEACHING GESTURE
   ========================================================================== */
.teach{
  position:absolute; left:50%; bottom:calc(var(--safeB) + 98px); transform:translateX(-50%);
  width:200px; height:88px; pointer-events:none; display:grid; place-items:center; z-index:6;
}
.teach::before{
  content:""; position:absolute; inset:-40px -58px;
  background:radial-gradient(48% 46% at 50% 54%, rgba(2,11,20,.94) 0%, rgba(2,11,20,.62) 46%, rgba(2,11,20,0) 82%);
  opacity:0; animation:fadeIn .5s ease .1s forwards;
}
@keyframes fadeIn{ to{ opacity:1 } }
.teach__hand{
  position:relative; width:50px; color:var(--marigold-2);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.85));
  animation:swipeHand 3.2s var(--ease-soft) 2;
}
.teach--first .teach__hand{
  animation:swipeHand 3.2s var(--ease-soft) 4;
}
@keyframes swipeHand{
  0%   { transform:translate3d(40px,0,0) rotate(7deg);  opacity:0 }
  10%  { transform:translate3d(40px,0,0) rotate(7deg);  opacity:1 }
  48%  { transform:translate3d(-40px,0,0) rotate(-8deg); opacity:1 }
  62%  { transform:translate3d(-40px,0,0) rotate(-8deg); opacity:0 }
  100% { transform:translate3d(40px,0,0) rotate(7deg);  opacity:0 }
}


/* ==========================================================================
   CONTROLS
   ========================================================================== */
.controls{
  position:absolute; z-index:7; left:0; right:0; bottom:calc(var(--safeB) + 16px);
  display:flex; flex-direction:column; align-items:center; gap:13px; pointer-events:none;
}
.controls > *{ pointer-events:auto }
.controls::before{
  content:""; position:absolute; z-index:-1;
  left:0; right:0; bottom:calc((var(--safeB) + 16px) * -1); height:210px;
  background:linear-gradient(to top, var(--night-0) 0%, rgba(2,11,20,.92) 34%, rgba(2,11,20,0) 100%);
}
.hint{
  min-height:14px; font-family:var(--ui);
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--marigold-2); padding-left:.18em; opacity:0; transition:opacity .5s ease;
}
.hint.is-on{ opacity:.95 }

.nav{ display:flex; align-items:center; gap:14px }
.pad{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  min-height:54px; color:var(--gold-3); border-radius:14px; padding:0 6px;
  transition:transform .16s var(--ease-out), opacity .3s ease; touch-action:manipulation;
}
.pad svg{ width:24px; height:24px }
.pad--back{
  width:54px; padding:0; border-radius:14px;
  background:linear-gradient(180deg, rgba(10,49,74,.9), rgba(6,32,51,.9));
  box-shadow:inset 0 0 0 1.5px rgba(201,154,62,.45);
}
.pad--next{
  padding:0 24px 0 26px; color:#02201C; border-radius:14px;
  background:linear-gradient(180deg, #14B8A6 0%, #0D9488 56%, #047857 100%);
  box-shadow:0 10px 24px -10px rgba(13,148,136,.7), inset 0 1.5px 0 rgba(204,251,241,.7),
             inset 0 -2px 0 rgba(4,120,87,.4), 0 0 0 1.5px rgba(45,212,191,.45);
}
.pad__word{ font-family:var(--ui); font-size:14px; font-weight:800;
            letter-spacing:.1em; text-transform:uppercase; padding-left:.1em }
.pad:active{ transform:scale(.95) }
.pad[aria-disabled="true"]{ opacity:.3; pointer-events:none }
.pad--next.is-inviting{ animation:invite 2.4s var(--ease-soft) infinite }
@keyframes invite{
  0%,100%{ box-shadow:0 10px 24px -10px rgba(13,148,136,.7), inset 0 1.5px 0 rgba(204,251,241,.7), inset 0 -2px 0 rgba(4,120,87,.4), 0 0 0 1.5px rgba(45,212,191,.45) }
  50%    { box-shadow:0 12px 32px -10px rgba(13,148,136,.95), inset 0 1.5px 0 rgba(204,251,241,.7), inset 0 -2px 0 rgba(4,120,87,.4), 0 0 0 2px rgba(204,251,241,.85), 0 0 30px 4px rgba(45,212,191,.65) }
}

.beads{ display:flex; align-items:center; gap:10px }
.bead{ width:24px; height:24px; display:grid; place-items:center; border-radius:50%; touch-action:manipulation }
.bead i{ display:block; width:8px; height:8px; border-radius:50%;
         background:rgba(239,199,104,.32); transition:all .38s var(--ease-out) }
.bead[aria-current="true"] i{
  width:13px; height:13px;
  background:radial-gradient(circle at 34% 30%, var(--peacock-4), var(--peacock-2) 60%, var(--peacock-1));
  box-shadow:0 0 0 3px rgba(45,212,191,.25), 0 0 16px 2px rgba(45,212,191,.8);
}
.bead.is-past i{ background:rgba(239,199,104,.66) }


/* ==========================================================================
   THE OPENING PAGE
   A sheet of aged paper, folded once down the middle. Nothing else.
   ========================================================================== */
.opening{
  position:fixed; inset:0; z-index:40; overflow:hidden;
  background:#F6EEDD;
  transition:opacity .85s ease, transform .85s var(--ease-out);
}
.opening__paper{
  position:absolute; inset:0;
  background-image:var(--paper, none);
  background-size:cover; background-position:50% 50%;
  background-color:#F6EEDD;
}
/* the crease, and the light catching one side of it */
.opening__fold{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(120,92,44,0) 49.1%, rgba(120,92,44,.16) 49.9%,
                    rgba(255,252,242,.5) 50.4%, rgba(120,92,44,0) 51.4%),
    radial-gradient(120% 80% at 50% 42%, rgba(255,252,242,.5) 0%, rgba(255,252,242,0) 62%),
    radial-gradient(120% 92% at 50% 50%, rgba(0,0,0,0) 52%, rgba(96,70,30,.13) 100%);
}
.opening__inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0; padding:calc(var(--safeT) + 40px) 34px calc(var(--safeB) + 40px);
  text-align:center;
}
.opening__inner > *{ animation:openIn .9s var(--ease-out) backwards }
.opening__inner > *:nth-child(1){ animation-delay:.10s }
.opening__inner > *:nth-child(2){ animation-delay:.20s }
.opening__inner > *:nth-child(3){ animation-delay:.30s }
.opening__inner > *:nth-child(4){ animation-delay:.40s }
.opening__inner > *:nth-child(5){ animation-delay:.48s }
.opening__inner > *:nth-child(6){ animation-delay:.58s }
@keyframes openIn{
  from{ opacity:0; transform:translate3d(0,14px,0) }
  to  { opacity:1; transform:none }
}

.opening__mark{ width:clamp(76px, 21vw, 112px); margin-bottom:clamp(18px,5vw,28px) }
.opening__mark img{
  width:100%; height:auto;
  filter:brightness(.82) saturate(1.3) drop-shadow(0 2px 6px rgba(120,80,20,.22));
}
.opening__eyebrow{
  font-family:var(--ui); font-weight:600;
  font-size:clamp(9.5px, 2.7vw, 11.5px);
  letter-spacing:.34em; text-transform:uppercase; color:#0F766E; padding-left:.34em;
}
.opening__family{
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px, 11vw, 56px);
  line-height:1.16; letter-spacing:.05em; text-transform:uppercase;
  color:#092235; max-width:9ch; margin-top:clamp(14px,4vw,20px);
  padding-left:.05em;
}
.opening__rule{
  display:flex; align-items:center; gap:9px;
  width:min(46vw,190px); margin-top:clamp(20px,5.5vw,28px);
}
.opening__rule span{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(15,118,110,.4),transparent) }
.opening__rule i{ width:4px; height:4px; transform:rotate(45deg); background:#C99A3E }
.opening__note{
  font-family:var(--ui); font-weight:500;
  font-size:clamp(11px, 3.1vw, 13px);
  letter-spacing:.13em; text-transform:uppercase; color:#0D5D56; margin-top:clamp(14px,4vw,18px); padding-left:.13em;
  max-width:30ch; line-height:1.7;
}

.opening__cta{
  position:relative;
  margin-top:clamp(24px,6.5vw,34px);
  display:flex; align-items:center; justify-content:center;
}

/* a quiet outlined seal, exactly as printed invitations do it */
.openbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 clamp(26px,7vw,38px);
  border-radius:999px;
  font-family:var(--ui); font-size:clamp(10.5px,2.9vw,12.5px);
  font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  padding-left:calc(clamp(26px,7vw,38px) + .24em);
  color:#064E3B;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,253,250,.92));
  box-shadow:
    0 0 0 1px rgba(15,118,110,.5),
    0 0 0 4px rgba(255,255,255,.6),
    0 6px 16px -8px rgba(6,78,59,.35),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .16s var(--ease-out), box-shadow .2s ease, color .2s ease;
  touch-action:manipulation;
  animation:sealGlow 2.6s ease-in-out infinite;
}
@keyframes sealGlow{
  0%,100%{
    box-shadow:0 0 0 1px rgba(15,118,110,.5), 0 0 0 4px rgba(255,255,255,.6),
               0 6px 16px -8px rgba(6,78,59,.35), inset 0 1px 0 rgba(255,255,255,.9),
               0 0 0 0 rgba(45,212,191,0);
  }
  50%{
    box-shadow:0 0 0 1px rgba(13,148,136,.9), 0 0 0 4px rgba(255,255,255,.8),
               0 10px 24px -8px rgba(6,78,59,.45), inset 0 1px 0 rgba(255,255,255,.95),
               0 0 26px 5px rgba(45,212,191,.35);
  }
}
.openbtn:hover{
  color:#042F2E;
  box-shadow:
    0 0 0 1px rgba(13,148,136,.85),
    0 0 0 4px rgba(255,255,255,.7),
    0 8px 20px -8px rgba(6,78,59,.45),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.openbtn:active{ transform:translateY(1.5px) scale(.985); animation:none }

/* a finger tapping the seal, so nobody has to wonder */
.tapper{
  position:absolute; left:50%; top:50%;
  width:0; height:0; pointer-events:none;
}
.tapper__hand{
  position:absolute; left:8px; top:0;
  /* the parent has no width, so max-width:100% would collapse this to nothing */
  max-width:none;
  width:clamp(36px,9.5vw,46px);
  height:calc(clamp(36px,9.5vw,46px) * 1.25);
  transform-origin:22% 18%;
  filter:drop-shadow(0 5px 10px rgba(6,78,59,.35));
  animation:tapPress 2.6s var(--ease-soft) infinite;
}
@keyframes tapPress{
  0%,100%{ transform:translate3d(10px,10px,0) rotate(-6deg) }
  16%    { transform:translate3d(0,0,0)       rotate(-2deg) }
  26%    { transform:translate3d(-1px,-3px,0) rotate(-1deg) }
  40%    { transform:translate3d(10px,10px,0) rotate(-6deg) }
}
.tapper__ring{
  position:absolute; left:-13px; top:-13px;
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(13,148,136,.65);
  opacity:0;
  animation:tapRing 2.6s ease-out infinite;
}
.tapper__ring--b{ animation-delay:.16s }
@keyframes tapRing{
  0%,16%{ transform:scale(.4); opacity:0 }
  22%   { opacity:.85 }
  46%   { transform:scale(2.7); opacity:0 }
  100%  { transform:scale(2.7); opacity:0 }
}

/* the paper lifts away and the mandap is behind it */
body.is-opening .opening{ opacity:0; transform:scale(1.09) }
body.is-open .opening{ display:none }


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .world__bloom,.smoke,.ember,.mala,.deck,.deck__float{ animation:none !important }
  .petal{ animation-duration:36s !important }
  .petal i{ animation:none }
  .card.is-entering [data-r],.card.is-entering .card__corner{ animation-duration:.01ms; animation-delay:0ms }
  .card.is-hinting{ animation:none }
  .card.is-entering .tl::before{ animation:none }
  .tl::before{ transform:scaleY(1) }
  .teach__hand,.teach--first .teach__hand{ animation-duration:.01ms; animation-iteration-count:1; opacity:1 }
  .openbtn,.tapper__hand,.tapper__ring{ animation:none }
  .tapper{ display:none }
  .pad--next.is-inviting,.music.is-playing::after{ animation:none }
  .card__sheen{ display:none }
  .opening{ transition-duration:.4s }
  .opening__inner > *{ animation:none }
}

@media (min-width: 760px) and (min-height: 700px){
  :root{ --card-w:min(58vw, 470px) }
}