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

:root{
  /* dawn sky, straight off the photograph */
  --dawn-1:#FEFCF3;
  --dawn-2:#FBF1CE;
  --dawn-3:#F7DEB6;
  --dawn-4:#F0CBAE;

  /* cloud and distant mist */
  --cloud:  #FFFDFA;
  --mist-1: #EFE6EC;
  --mist-2: #D6C9D6;
  --peak:   #B09DA6;

  /* the card itself — pearl, warmed and faintly lilac */
  --panel-1:#FFFDFA;
  --panel-2:#FDF4EC;
  --panel-3:#F6EAF0;

  /* His own colours */
  --violet-1:#6E2A59;
  --violet-2:#99377A;
  --violet-3:#B85497;
  --violet-4:#E0B6D4;
  --rose:    #D05E63;
  --rose-2:  #F3A6AC;
  --coral:   #F2B79F;

  /* the crown */
  --gold-1:#9E7328;
  --gold-2:#C79B48;
  --gold-3:#E0BC77;
  --gold-4:#F7E7BC;

  /* ink that reads on all of it */
  --cream:  #3A2337;
  --cream-2:#6A5266;
  --cream-3:#98849A;

  --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(--dawn-2); 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(--violet-2); 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(--dawn-2);
           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(58% 34% at 12% 6%, rgba(255,250,214,.95) 0%, rgba(255,250,214,0) 62%),
    linear-gradient(178deg,
      var(--dawn-2) 0%, var(--dawn-3) 22%, var(--dawn-4) 42%,
      var(--mist-1) 66%, var(--mist-2) 100%);
}
/* the sun, low and warm */
.world__bloom{ position:absolute; border-radius:50%; filter:blur(56px) }
.world__bloom--a{
  width:86vw; height:86vw; left:-24vw; top:-24vh;
  background:radial-gradient(circle, rgba(255,246,196,.95) 0%, rgba(255,225,160,.42) 42%, rgba(255,225,160,0) 70%);
  animation:lampA 9s ease-in-out infinite alternate;
}
.world__bloom--b{
  width:120vw; height:74vh; left:-10vw; bottom:-22vh;
  background:radial-gradient(circle, rgba(206,176,206,.5) 0%, rgba(206,176,206,0) 72%);
  animation:lampB 13s ease-in-out infinite alternate;
}
@keyframes lampA{ from{ opacity:.78; transform:scale(1) } to{ opacity:1; transform:scale(1.06) } }
@keyframes lampB{ from{ opacity:.55 } to{ opacity:.85 } }

.world__air{ position:absolute; inset:0 }

/* a sea of cloud, drifting */
.cloud{
  position:absolute; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,253,250,.94) 0%, rgba(255,253,250,.55) 52%, rgba(255,253,250,0) 100%);
  filter:blur(14px);
  animation-name:cloudDrift; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes cloudDrift{
  from{ transform:translate3d(-24vw,0,0) }
  to  { transform:translate3d(124vw,0,0) }
}

/* sunlit motes rising through it */
.ember{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #FFFBE4, #F6DFA0 56%, rgba(246,223,160,0) 78%);
  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(114% 80% at 50% 40%, rgba(255,255,255,0) 44%, rgba(150,126,150,.20) 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(140,110,120,.32));
}
.mala img{
  display:block; width:100%; height:auto;
  /* pulled off pure marigold toward the rose-gold of the island's flowers */
  filter:hue-rotate(-13deg) saturate(.72) brightness(1.07);
}
@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, #FFE3EC 0%, var(--rose-2) 50%, var(--rose) 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.7);
  animation:petalSpin linear infinite;
}
.petal--rose i{ background:linear-gradient(140deg,#F6D8EE 0%, var(--violet-4) 52%, var(--violet-3) 100%) }
.petal--white i{ background:linear-gradient(140deg,#FFFFFF 0%, #FBF1E2 55%, #EBD6B4 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(255,253,250,.96), rgba(250,240,246,.96));
  box-shadow:0 0 0 1.5px rgba(199,155,72,.6), 0 8px 20px -8px rgba(122,84,116,.42);
  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(--violet-2) }
.music.is-playing::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid rgba(184,84,151,.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% 58% at 50% 0%, rgba(255,246,214,.9) 0%, rgba(255,246,214,0) 58%),
    linear-gradient(172deg, var(--panel-1) 0%, var(--panel-2) 52%, var(--panel-3) 100%);
  box-shadow:
    0 36px 64px -26px rgba(122,84,116,.42),
    0 14px 28px -14px rgba(122,84,116,.24),
    inset 0 0 0 1.5px var(--gold-3),
    inset 0 0 0 6px rgba(255,253,250,.92),
    inset 0 0 0 7.5px rgba(199,155,72,.42),
    inset 0 40px 70px -44px rgba(255,214,150,.5);
}

/* the photograph itself, sitting under every card like a fresco */
.card__reflect{
  position:absolute; inset:0; pointer-events:none;
  background-size:cover; background-position:50% 46%;
  opacity:.42;
  -webkit-mask-image:radial-gradient(98% 78% at 50% 46%, #000 0%, rgba(0,0,0,.9) 60%, rgba(0,0,0,.4) 84%, transparent 100%);
          mask-image:radial-gradient(98% 78% at 50% 46%, #000 0%, rgba(0,0,0,.9) 60%, rgba(0,0,0,.4) 84%, transparent 100%);
}
.card__corner{
  position:absolute; width:33%; pointer-events:none; opacity:.34;
}
.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,255,255,0) 40%, rgba(255,255,255,.5) 50%, rgba(255,255,255,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;
  /* light held over the fresco so the plum ink keeps its contrast */
  background:linear-gradient(180deg,
    rgba(255,247,232,.72) 0%,  rgba(255,247,232,.44) 12%, rgba(255,248,235,.22) 26%,
    rgba(255,248,236,.16) 50%, rgba(255,247,233,.24) 74%, rgba(255,246,230,.5) 88%,
    rgba(255,245,228,.72) 100%);
}
/* card 1 is the photograph — it carries its own scrim */
.c--aagman{ background:none }

.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-1); 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(--violet-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(--violet-2);
}
.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 1px 0 rgba(255,255,255,.7);
}
.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(--violet-1); text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.dates{
  font-family:var(--ui); font-weight:700;
  font-size:clamp(14px, calc(var(--u) * .052), 23px);
  letter-spacing:.04em; color:var(--violet-1); font-variant-numeric:tabular-nums;
  padding:.5em 1.15em; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,253,250,.9), rgba(253,242,235,.82));
  box-shadow:inset 0 0 0 1px rgba(153,55,122,.34), 0 4px 14px rgba(110,42,89,.1);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}

/* 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(255,246,214,.9), rgba(240,203,174,.95));
  color:var(--violet-1); 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(255,252,247,.86) 0%, rgba(255,252,247,.58) 10%, rgba(255,252,247,.16) 19%, rgba(255,252,247,0) 30%),
    linear-gradient(0deg,
      rgba(255,251,245,.95) 0%,  rgba(255,251,245,.9) 16%, rgba(255,251,245,.78) 26%,
      rgba(255,251,245,.56) 34%, rgba(255,250,243,.28) 43%, rgba(255,250,243,.07) 52%,
      rgba(255,250,243,0)   62%);
}
.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: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(--violet-4), var(--violet-3) 58%, var(--violet-1));
  box-shadow:0 0 0 3px var(--panel-1), 0 0 14px 2px rgba(184,84,151,.5);
}
.ev__box{
  width:calc(50% - 9px);
  background:linear-gradient(168deg, rgba(255,255,255,.96) 0%, rgba(250,240,246,.96) 100%);
  border-radius:15px; padding:calc(var(--gap)*.52*var(--ev)) calc(var(--gap)*.34);
  min-width:0; overflow-wrap:anywhere;
  box-shadow:inset 0 0 0 1.5px rgba(199,155,72,.5), 0 8px 18px -10px rgba(122,84,116,.4);
  text-align:center;
}
.tl[data-rows="5"]{ --ev:.90 }
.tl[data-rows="6"]{ --ev:.76 }
.tl[data-rows="7"]{ --ev:.70 }
.tl[data-rows="8"]{ --ev:.65 }
.tl[data-rows="9"]{ --ev:.60 }

/* Six is the most the dashboard will ever put on one page, and by then the
   type is at the smallest size that is still readable across a room — so
   --ev has nothing left to give. From here the space comes out of the
   padding and the gaps between the lines instead. */
.tl[data-rows="6"] .ev__box,
.tl[data-rows="7"] .ev__box,
.tl[data-rows="8"] .ev__box,
.tl[data-rows="9"] .ev__box{
  padding:calc(var(--gap) * .34 * var(--ev)) calc(var(--gap) * .3);
  border-radius:13px;
}
.tl[data-rows="6"] .ev__name, .tl[data-rows="7"] .ev__name,
.tl[data-rows="8"] .ev__name, .tl[data-rows="9"] .ev__name{ margin-top:1px; line-height:1.14 }

.tl[data-rows="6"] .ev__date, .tl[data-rows="7"] .ev__date,
.tl[data-rows="8"] .ev__date, .tl[data-rows="9"] .ev__date{ margin-top:2px; line-height:1.2 }

.tl[data-rows="6"] .ev__extra, .tl[data-rows="7"] .ev__extra,
.tl[data-rows="8"] .ev__extra, .tl[data-rows="9"] .ev__extra{
  margin-top:calc(3px * var(--ev)); padding-top:calc(3px * var(--ev)); line-height:1.25;
}

/* short phones: tighten the timeline further so however many events are added
   in edit/content.js, the last one still lands inside the card */
@media (max-height:700px){
  .tl[data-rows="4"]{ --ev:.90 }
  .tl[data-rows="5"]{ --ev:.80 }
  .tl[data-rows="6"]{ --ev:.66 }
  .tl[data-rows="7"]{ --ev:.60 }
  .tl[data-rows="8"]{ --ev:.55 }
  .tl[data-rows="9"]{ --ev:.50 }

  /* the shortest phones need the boxes tighter still */
  .tl[data-rows="6"] .ev__box,
  .tl[data-rows="7"] .ev__box,
  .tl[data-rows="8"] .ev__box,
  .tl[data-rows="9"] .ev__box{
    padding:calc(var(--gap) * .28 * var(--ev)) calc(var(--gap) * .28);
  }
}

.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(--violet-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-1); 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(--violet-2); margin-top:calc(5px * var(--ev));
  padding-top:calc(5px * var(--ev)); border-top:1px solid rgba(199,155,72,.34);
}
.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(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(255,255,255,.92) 0%, rgba(250,240,246,.92) 100%);
  border-radius:18px; padding:calc(var(--gap)*.92) calc(var(--gap)*.9);
  box-shadow:inset 0 0 0 1px rgba(199,155,72,.34), 0 10px 24px -14px rgba(122,84,116,.34);
  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(--violet-3) 0%, var(--violet-2) 56%, var(--violet-1) 100%);
  color:#FFF6FB;
  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(153,55,122,.5), inset 0 1.5px 0 rgba(255,255,255,.34),
             inset 0 -2px 0 rgba(70,20,55,.3), 0 0 0 1.5px rgba(224,182,212,.6);
  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) }


/* ---------- 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, #FFFCF6 0%, #FAF0E4 58%, #F2E4EC 100%);
  box-shadow:inset 0 0 0 1.5px rgba(199,155,72,.5), 0 10px 24px -14px rgba(122,84,116,.36);
  color:var(--violet-2);
}
.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(153,55,122,.10) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,  rgba(153,55,122,.10) 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(--violet-2);
  filter:drop-shadow(0 4px 9px rgba(122,84,116,.5));
}
.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(--violet-3);
  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:.34;
  -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(72% 30% at 50% 58%, rgba(255,251,243,.9) 0%, rgba(255,251,243,.6) 46%, rgba(255,251,243,0) 82%),
    linear-gradient(180deg, rgba(255,250,240,.66) 0%, rgba(255,250,240,0) 26%, rgba(255,250,240,0) 70%, rgba(255,249,238,.72) 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(--violet-1); max-width:16ch;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.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-1); 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) * 1.45) }
.c--bless .namecard{ font-size:clamp(15px, calc(var(--u) * .053), 24px) }
.c--bless .signoff{ margin-bottom:2px }
/* the blessing sits below the face, never across it */
.c--bless .spacer:first-of-type{ flex-grow:1.5 }
.c--bless .spacer:last-of-type{ flex-grow:.8 }


/* ==========================================================================
   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(255,252,247,.96) 0%, rgba(255,252,247,.66) 46%, rgba(255,252,247,0) 82%);
  opacity:0; animation:fadeIn .5s ease .1s forwards;
}
@keyframes fadeIn{ to{ opacity:1 } }
.teach__hand{
  position:relative; width:50px; color:var(--violet-2);
  filter:drop-shadow(0 6px 14px rgba(122,84,116,.5));
  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(--mist-2) 0%, rgba(214,201,214,.9) 32%, rgba(214,201,214,0) 100%);
}
.hint{
  min-height:14px; font-family:var(--ui);
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet-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(255,253,250,.94), rgba(250,240,246,.94));
  box-shadow:inset 0 0 0 1.5px rgba(199,155,72,.45), 0 6px 14px -8px rgba(122,84,116,.34);
}
.pad--next{
  padding:0 24px 0 26px; color:#FFF6FB; border-radius:14px;
  background:linear-gradient(180deg, var(--violet-3) 0%, var(--violet-2) 56%, var(--violet-1) 100%);
  box-shadow:0 10px 24px -10px rgba(153,55,122,.5), inset 0 1.5px 0 rgba(255,255,255,.34),
             inset 0 -2px 0 rgba(70,20,55,.3), 0 0 0 1.5px rgba(224,182,212,.6);
}
.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(153,55,122,.5), inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(70,20,55,.3), 0 0 0 1.5px rgba(224,182,212,.6) }
  50%    { box-shadow:0 12px 32px -10px rgba(153,55,122,.7), inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(70,20,55,.3), 0 0 0 2px rgba(240,214,234,.95), 0 0 30px 4px rgba(184,84,151,.45) }
}

.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(153,55,122,.26); transition:all .38s var(--ease-out) }
.bead[aria-current="true"] i{
  width:13px; height:13px;
  background:radial-gradient(circle at 34% 30%, var(--violet-4), var(--violet-3) 58%, var(--violet-1));
  box-shadow:0 0 0 3px rgba(184,84,151,.18), 0 0 14px 2px rgba(184,84,151,.55);
}
.bead.is-past i{ background:rgba(153,55,122,.5) }


/* ==========================================================================
   THE OPENING PAGE
   The dawn out of the photograph, softened to cloud. Nothing else on it.
   ========================================================================== */
.opening{
  position:fixed; inset:0; z-index:40; overflow:hidden;
  background:var(--dawn-2);
  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:var(--dawn-2);
}
/* the crease, and the light catching one side of it */
.opening__fold{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(150,120,140,0) 49.1%, rgba(150,120,140,.13) 49.9%,
                    rgba(255,253,250,.6) 50.4%, rgba(150,120,140,0) 51.4%),
    radial-gradient(58% 32% at 14% 8%, rgba(255,250,214,.85) 0%, rgba(255,250,214,0) 66%),
    radial-gradient(120% 92% at 50% 52%, rgba(0,0,0,0) 50%, rgba(150,126,150,.16) 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:saturate(1.25) drop-shadow(0 2px 7px rgba(150,110,60,.3));
}
.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:var(--violet-2); 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:var(--violet-1); 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(199,155,72,.7),transparent) }
.opening__rule i{ width:4px; height:4px; transform:rotate(45deg); background:var(--gold-2) }
.opening__note{
  font-family:var(--ui); font-weight:500;
  font-size:clamp(11px, 3.1vw, 13px);
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold-1); 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:#FFF6FB;
  background:linear-gradient(180deg, var(--violet-3) 0%, var(--violet-2) 58%, var(--violet-1) 100%);
  box-shadow:
    0 0 0 1px rgba(110,42,89,.5),
    0 0 0 4px rgba(255,253,250,.6),
    0 10px 22px -9px rgba(110,42,89,.5),
    inset 0 1.5px 0 rgba(255,255,255,.3);
  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(110,42,89,.5), 0 0 0 4px rgba(255,253,250,.6),
               0 10px 22px -9px rgba(110,42,89,.5), inset 0 1.5px 0 rgba(255,255,255,.3),
               0 0 0 0 rgba(184,84,151,0);
  }
  50%{
    box-shadow:0 0 0 1px rgba(110,42,89,.75), 0 0 0 5px rgba(255,253,250,.85),
               0 13px 28px -9px rgba(110,42,89,.55), inset 0 1.5px 0 rgba(255,255,255,.35),
               0 0 30px 6px rgba(184,84,151,.36);
  }
}
.openbtn:hover{ filter:brightness(1.07) }
.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(122,84,116,.45));
  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(153,55,122,.6);
  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,.cloud,.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) }
}