/* ==========================================================================
   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:#080503;
  --night-1:#150C05;
  --night-2:#24160A;
  --glow-1: #533314;
  --glow-2: #855018;

  --panel-1:#35220F;
  --panel-2:#22150A;
  --panel-3:#160D06;

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

  --marigold:  #F0871A;
  --marigold-2:#FFC142;
  --marigold-3:#C4400F;
  --velvet-1:  #2A2622;
  --velvet-2:  #16130F;
  --velvet-3:  #080706;

  --cream:  #FFF6E4;
  --cream-2:#F0DFC0;
  --cream-3:#C9B491;

  --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(133,80,24,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(240,135,26,.34) 0%, rgba(240,135,26,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(196,64,15,.22) 0%, rgba(196,64,15,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(255,232,196,0) 0%, rgba(255,232,196,.07) 34%, rgba(255,232,196,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%, #FFE6A8, #F0871A 58%, rgba(240,135,26,0) 76%);
  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, var(--marigold-2) 0%, var(--marigold) 52%, var(--marigold-3) 100%);
  box-shadow:inset 0 1px 2px rgba(255,238,190,.55);
  animation:petalSpin linear infinite;
}
.petal--rose i{ background:linear-gradient(140deg,#FFD9E2 0%, #F2879F 55%, #C2415F 100%) }
.petal--white i{ background:linear-gradient(140deg,#FFFDF6 0%, #F5E9D2 55%, #DCC79F 100%) }
@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(64,41,18,.96), rgba(34,21,10,.96));
  box-shadow:0 0 0 1.5px rgba(201,154,62,.55), 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(255,193,66,.5); 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(133,80,24,.55) 0%, rgba(133,80,24,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(20,11,5,.85),
    inset 0 0 0 7.5px rgba(201,154,62,.34),
    inset 0 44px 76px -44px rgba(255,196,96,.36);
}

/* 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);
}

.card.is-hinting{ animation:peek 3.6s var(--ease-soft) 2 }
@keyframes peek{
  0%,68%,100%{ transform:translate3d(var(--x,0%),var(--y,0%),var(--z,0px)) rotateY(0deg) rotateZ(0deg) scale(var(--s,1)) }
  20%{ transform:translate3d(calc(var(--x,0%) - 9%),var(--y,0%),calc(var(--z,0px) + 22px)) rotateY(6deg) rotateZ(-2.2deg) scale(var(--s,1)) }
  42%{ transform:translate3d(calc(var(--x,0%) + 2%),var(--y,0%),var(--z,0px)) rotateY(-1.4deg) rotateZ(.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(240,135,26,.22);
}
.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(240,135,26,.13);
  box-shadow:inset 0 0 0 1px rgba(255,193,66,.4);
}

/* 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 photograph IS the card ---------- */
.c--aagman{ padding:0; gap:0; justify-content:flex-start }
.shrine{ position:absolute; inset:0 }
.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__void{
  position:absolute; inset:0; display:grid; place-items:center;
  background:radial-gradient(60% 46% at 50% 40%, rgba(133,80,24,.55), rgba(8,5,3,.96));
  color:var(--gold-3); font-family:var(--ui); font-size:14px; letter-spacing:.22em;
}
/* the scrim that lets the words sit on the picture */
.shrine__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,4,2,.84) 0%, rgba(6,4,2,.66) 12%, rgba(6,4,2,.24) 22%, rgba(6,4,2,0) 34%),
    linear-gradient(0deg,
      rgba(6,4,2,.97) 0%,  rgba(6,4,2,.95) 20%, rgba(6,4,2,.89) 30%,
      rgba(6,4,2,.74) 38%, rgba(6,4,2,.44) 47%, rgba(6,4,2,.14) 56%,
      rgba(6,4,2,0)   66%);
}
.plate{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; align-items:center;
  padding:0 var(--pad); text-align:center;
}
.plate--top{ padding-top:calc(var(--pad) + 4px) }
.plate--foot{
  margin-top:auto; padding-bottom:calc(var(--pad) + 2px);
  gap:calc(var(--gap) * .5);
}
.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(--marigold-2), var(--marigold) 60%, var(--marigold-3));
  box-shadow:0 0 0 3px rgba(20,11,5,.92), 0 0 16px 2px rgba(240,135,26,.7);
}
.ev__box{
  width:calc(50% - 9px);
  background:linear-gradient(168deg, rgba(80,52,24,.96) 0%, rgba(44,28,13,.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 .display{ font-size:clamp(22px, calc(var(--u) * .094), 42px) }
.c--invite .prose{
  font-size:clamp(13.5px, calc(var(--u) * .0435), 17px);
  line-height:1.72; color:var(--cream-2); max-width:32ch;
}
.c--invite .eyebrow{ opacity:.92 }
.note{
  width:100%;
  background:linear-gradient(168deg, rgba(80,52,24,.9) 0%, rgba(42,26,12,.9) 100%);
  border-radius:18px; padding:calc(var(--gap)*.92) calc(var(--gap)*.9);
  box-shadow:inset 0 0 0 1px rgba(201,154,62,.28), 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, var(--marigold-2) 0%, var(--marigold) 56%, #D9600F 100%);
  color:#2A1204;
  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(240,135,26,.7), inset 0 1.5px 0 rgba(255,244,214,.7),
             inset 0 -2px 0 rgba(150,60,4,.4), 0 0 0 1.5px rgba(255,215,140,.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(240,135,26,.8), inset 0 1.5px 0 rgba(255,244,214,.7) }


/* ---------- card 4 — blessings ---------- */
.c--bless .media{
  position:absolute; inset:0; opacity:.34;
  -webkit-mask-image:radial-gradient(72% 58% at 50% 46%, #000 0%, rgba(0,0,0,.4) 58%, transparent 88%);
          mask-image:radial-gradient(72% 58% at 50% 46%, #000 0%, rgba(0,0,0,.4) 58%, transparent 88%);
}
.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(20,11,5,.94) 0%, rgba(20,11,5,.62) 46%, rgba(20,11,5,0) 82%);
  opacity:0; animation:fadeIn .5s ease .1s forwards;
}
@keyframes fadeIn{ to{ opacity:1 } }
.teach__hand{
  position:relative; width:50px; color:var(--marigold);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.85));
  animation:swipeHand 3.2s var(--ease-soft) 2;
}
@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(8,5,3,.92) 34%, rgba(8,5,3,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(64,41,18,.9), rgba(34,21,10,.9));
  box-shadow:inset 0 0 0 1.5px rgba(201,154,62,.4);
}
.pad--next{
  padding:0 24px 0 26px; color:#2A1204; border-radius:14px;
  background:linear-gradient(180deg, var(--marigold-2) 0%, var(--marigold) 56%, #D9600F 100%);
  box-shadow:0 10px 24px -10px rgba(240,135,26,.7), inset 0 1.5px 0 rgba(255,244,214,.7),
             inset 0 -2px 0 rgba(150,60,4,.4), 0 0 0 1.5px rgba(255,215,140,.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(240,135,26,.7), inset 0 1.5px 0 rgba(255,244,214,.7), inset 0 -2px 0 rgba(150,60,4,.4), 0 0 0 1.5px rgba(255,215,140,.45) }
  50%    { box-shadow:0 12px 32px -10px rgba(240,135,26,.95), inset 0 1.5px 0 rgba(255,244,214,.7), inset 0 -2px 0 rgba(150,60,4,.4), 0 0 0 2px rgba(255,235,180,.85), 0 0 30px 4px rgba(240,135,26,.55) }
}

.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(--marigold-2), var(--marigold) 60%, var(--marigold-3));
  box-shadow:0 0 0 3px rgba(240,135,26,.22), 0 0 16px 2px rgba(240,135,26,.75);
}
.bead.is-past i{ background:rgba(239,199,104,.66) }


/* ==========================================================================
   THE CURTAIN
   ========================================================================== */
.curtain{ position:fixed; inset:0; z-index:40; overflow:hidden; background:var(--night-0) }

.curtain__panel{
  position:absolute; top:0; bottom:0; width:51%;
  background:
    /* velvet folds */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.42) 0px, rgba(0,0,0,0) 14px, rgba(255,255,255,.07) 28px, rgba(0,0,0,0) 42px, rgba(0,0,0,.42) 56px),
    linear-gradient(100deg, var(--velvet-3) 0%, var(--velvet-1) 34%, var(--velvet-2) 62%, var(--velvet-3) 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.7);
  transition:transform 1.5s cubic-bezier(.62,.02,.24,1);
  will-change:transform;
}
.curtain__panel--l{ left:0;  transform-origin:left center }
.curtain__panel--r{ right:0; transform-origin:right center;
                    background-position:right; transform:scaleX(1) }
/* the gold braid down each inner edge */
.curtain__panel--l::after,.curtain__panel--r::after{
  content:""; position:absolute; top:0; bottom:0; width:7px;
  background:linear-gradient(90deg, rgba(0,0,0,.45), var(--gold-1) 26%, var(--gold-3) 58%, var(--gold-1) 100%);
  box-shadow:0 0 18px rgba(239,199,104,.4);
}
.curtain__panel--l::after{ right:0 }
.curtain__panel--r::after{ left:0; transform:scaleX(-1) }

.curtain__valance{
  position:absolute; z-index:3; top:0; left:0; right:0;
  height:clamp(64px,12vh,116px);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.75));
}
/* a pelmet with scalloped hem, the way a mandap is dressed */
.curtain__swag{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.36) 0px, rgba(0,0,0,0) 12px, rgba(255,255,255,.09) 24px, rgba(0,0,0,0) 36px, rgba(0,0,0,.36) 48px),
    linear-gradient(180deg, #38322B 0%, var(--velvet-1) 42%, var(--velvet-2) 84%, var(--velvet-3) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0/100% calc(100% - 20px) no-repeat,
    radial-gradient(circle at 24px 0, #000 0 20px, transparent 20.5px) 0 100%/48px 20px repeat-x;
          mask:
    linear-gradient(#000 0 0) 0 0/100% calc(100% - 20px) no-repeat,
    radial-gradient(circle at 24px 0, #000 0 20px, transparent 20.5px) 0 100%/48px 20px repeat-x;
}
/* a gold bead hanging at the low point of every scallop */
.curtain__fringe{
  position:absolute; left:0; right:0; bottom:-7px; height:16px;
  background:
    radial-gradient(circle at 24px 5px,
      var(--gold-4) 0 2px, var(--gold-2) 2.5px 5px, transparent 5.5px) 0 0/48px 16px repeat-x;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));
}

.curtain__seam{
  position:absolute; z-index:2; top:0; bottom:0; left:50%; width:22px; margin-left:-11px;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 34%, rgba(255,222,150,.5) 50%, rgba(0,0,0,.55) 66%, rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  transition:opacity .5s ease;
}
.curtain__center{
  position:absolute; z-index:4; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:0 30px; text-align:center;
  transition:opacity .5s ease, transform .5s ease;
}
.curtain__mark{
  width:clamp(130px, 36vw, 200px);
  filter:brightness(1.18) drop-shadow(0 0 30px rgba(240,135,26,.85)) drop-shadow(0 0 70px rgba(240,135,26,.4));
}
.curtain__mark img{ width:100%; height:auto }
.curtain__mantra{
  font-family:var(--ui); font-weight:700;
  font-size:clamp(12px, 3.6vw, 15px);
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold-4); padding-left:.28em;
  text-shadow:0 0 22px rgba(240,135,26,.55);
}

body.is-opening .curtain__center{ opacity:0; transform:scale(.9) }
body.is-opening .curtain__seam{ opacity:0 }
body.is-opening .curtain__panel--l{ transform:translate3d(-101%,0,0) }
body.is-opening .curtain__panel--r{ transform:translate3d(101%,0,0) }
body.is-opening .curtain__valance{ transform:translate3d(0,-102%,0); transition:transform 1.2s cubic-bezier(.62,.02,.24,1) .18s }
body.is-open .curtain{ 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{ animation-duration:.01ms; animation-iteration-count:1; opacity:1 }
  .pad--next.is-inviting,.music.is-playing::after{ animation:none }
  .card__sheen{ display:none }
  .curtain__panel,.curtain__valance{ transition-duration:.4s }
}

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