/* ============================================================================
   ARJUN & KIARA — a Shiv & Parvati wedding invitation
   ----------------------------------------------------------------------------
   HOW TO RE-SKIN THIS TEMPLATE
   Change the values in the ":root" block below and the whole site follows.
   Nothing else needs touching for a colour or font change.
   ========================================================================== */

:root{

  /* ---- COLOURS -------------------------------------------------------- */
  /* Shiv & Parvati. Everything is drawn from the cover picture: the royal
     blue of the sky, the gold of her bangles, the crimson and saffron of
     her chooda, and the cream of a wedding card.                         */
  --ink:          #16233F;   /* deep indigo text on the cards    */
  --ink-soft:     #4C5A78;   /* secondary text on the cards      */
  --paper:        #FFF7E8;   /* warm cream card surface          */
  --paper-edge:   #E7D3AC;   /* hairline on the cards            */

  --gold:         #C9992F;   /* main gold                        */
  --gold-lt:      #F2DA9C;   /* light gold / foil highlight      */
  --gold-dp:      #8A6316;   /* deep gold, for small text        */

  --saffron:      #E8792B;   /* carnival                         */
  --rose:         #C2185B;   /* engagement                       */
  --turmeric:     #E5A50A;   /* haldi                            */
  --crimson:      #B4232F;   /* wedding                          */
  --royal:        #2E6FBF;   /* reception                        */

  --wa:           #25D366;   /* WhatsApp green                   */

  /* Text sitting directly on the blue sky */
  --on-sky:       #FFF3DC;
  --on-sky-dim:   rgba(255,243,220,.80);
  --on-sky-gold:  #F2DA9C;
  --on-sky-shade: 0 2px 16px rgba(4,16,40,.85);

  /* Live sky colours — driven by scrolling, don't edit here.             */
  --sky-top: #2A6FBB;
  --sky-mid: #4E8ECB;
  --sky-bot: #7FB2DE;
  --star-op: 0;
  --cloud-op: .55;

  /* ---- TYPE ------------------------------------------------------------ */
  --f-display: "Marcellus", "Times New Roman", serif;
  --f-script:  "Pinyon Script", "Snell Roundhand", cursive;
  --f-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- THE PRINTED MOTIF ------------------------------------------------
     A small floral diamond, tiled across every card. It is used as a mask,
     so the colour comes from CSS and each card can print it in its own ink. */
  --motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M23 1.5 L44.5 23 L23 44.5 L1.5 23 Z'/%3E%3Ccircle cx='23' cy='23' r='5'/%3E%3Cpath d='M23 11 C26.6 14.4 26.6 19.6 23 23 C19.4 19.6 19.4 14.4 23 11 Z'/%3E%3Cpath d='M23 35 C19.4 31.6 19.4 26.4 23 23 C26.6 26.4 26.6 31.6 23 35 Z'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='23' cy='1.5' r='1.3'/%3E%3Ccircle cx='44.5' cy='23' r='1.3'/%3E%3Ccircle cx='23' cy='44.5' r='1.3'/%3E%3Ccircle cx='1.5' cy='23' r='1.3'/%3E%3C/g%3E%3C/svg%3E");

  /* ---- SHAPE ----------------------------------------------------------- */
  --arch-out: 50% 50% 22px 22px / 40% 40% 22px 22px;
  --arch-in:  50% 50% 16px 16px / 40% 40% 16px 16px;
  --radius:   18px;

  /* ---- SPACING --------------------------------------------------------- */
  --gut:      27px;   /* page side padding — also keeps clear of the flight rail */
  --sec:      clamp(74px, 17vw, 118px);   /* space between sections */
}

/* Accent colour per event card — set by data-accent in the HTML */
[data-accent="saffron"]  { --accent: var(--saffron); }
[data-accent="rose"]     { --accent: var(--rose); }
[data-accent="turmeric"] { --accent: var(--turmeric); }
[data-accent="crimson"]  { --accent: var(--crimson); }
[data-accent="royal"]    { --accent: var(--royal); }


/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  width:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  width:100%;
  max-width:100%;
  font-family:var(--f-body);
  font-weight:300;
  color:var(--on-sky);
  background:#2A6FBB;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
button,input,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
h1,h2,h3,p,dl,dd,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
main{ max-width:100%; overflow-x:hidden; }

@supports (overflow-x:clip){
  html, body, main{ overflow-x:clip; }
}

:focus-visible{
  outline:2px solid var(--gold-lt);
  outline-offset:3px;
  border-radius:4px;
}


/* ==========================================================================
   THE OPENING FILM
   --------------------------------------------------------------------------
   Full screen. Holds on the first frame until the guest touches the screen,
   then the film plays and dissolves into the invitation. Same typefaces and
   the same gold as the rest of the site, so it reads as the invitation's
   first page rather than a video player.
   ========================================================================== */
.intro{
  position:fixed; inset:0; z-index:200;
  overflow:hidden;
  background:#06183A;
  cursor:pointer;
  transition:opacity 1s ease, transform 1.2s cubic-bezier(.4,0,.2,1);
}
.intro--out{ opacity:0; transform:scale(1.08); pointer-events:none; }

/* keeps the invitation from scrolling behind the film */
.is-gated, .is-gated body{ overflow:hidden; height:100%; }

.intro__bg{
  position:absolute; inset:-6%;
  background:url("../images/intro-poster.jpg") center/cover no-repeat;
  filter:blur(30px) saturate(1.15) brightness(.55);
}
.intro__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;              /* fills the phone edge to edge */
  object-position:center;
}

.intro__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
      rgba(5,20,50,.42) 0%, rgba(5,20,50,.06) 22%,
      rgba(5,20,50,0)   36%, rgba(5,20,50,.52) 58%,
      rgba(4,16,42,.88) 76%, rgba(3,12,34,.97) 100%);
  transition:opacity .5s ease;
}

.intro__panel{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 26px calc(40px + env(safe-area-inset-bottom));
  text-align:center;
}

.intro--playing .intro__scrim{ opacity:0; }
.intro--playing .intro__panel{
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity .4s ease, transform .55s cubic-bezier(.3,.7,.3,1);
}

.intro__eyebrow, .intro__names, .intro__sub, .intro__btn, .intro__meta{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.25,1);
}
.intro--ready .intro__eyebrow{ opacity:1; transform:none; transition-delay:.20s; }
.intro--ready .intro__names  { opacity:1; transform:none; transition-delay:.36s; }
.intro--ready .intro__sub    { opacity:1; transform:none; transition-delay:.52s; }
.intro--ready .intro__btn    { opacity:1; transform:none; transition-delay:.74s; }
.intro--ready .intro__meta   { opacity:1; transform:none; transition-delay:.90s; }

.intro__eyebrow{
  font-family:var(--f-body);
  font-size:10px; font-weight:500;
  letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  color:var(--gold-lt);
  text-shadow:0 2px 14px rgba(2,10,30,.95);
}
.intro__names{
  margin:12px 0 0;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(36px,11vw,52px); line-height:1.04;
  letter-spacing:.015em;
  background:linear-gradient(105deg,#F7E7BE 8%,#E5B65C 30%,#FFF6DE 46%,#D19B34 62%,#F7E7BE 88%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:foil 7s ease-in-out infinite;
  filter:drop-shadow(0 5px 18px rgba(2,10,28,.9));
}
.intro__names span{
  font-family:var(--f-script); font-size:.8em;
  -webkit-text-fill-color:#FFEFC6; color:#FFEFC6; padding:0 .06em;
}
.intro__sub{
  margin-top:4px;
  font-family:var(--f-script);
  font-size:clamp(25px,8vw,34px); line-height:1.25;
  color:#FFF0D2;
  text-shadow:0 3px 18px rgba(2,10,28,.95);
}
.intro__btn{
  position:relative;
  margin-top:26px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 38px;
  border-radius:999px;
  font-family:var(--f-body);
  font-size:12px; font-weight:500;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:#3A2508;
  background:linear-gradient(105deg,#F7E7BE,#E5B65C 32%,#FFF8E4 50%,#D19B34 70%,#F2DA9C);
  background-size:210% 100%;
  box-shadow:
    0 0 0 1px rgba(255,246,222,.6) inset,
    0 16px 38px -12px rgba(0,0,0,.9),
    0 0 40px -6px rgba(233,196,106,.55);
  animation:foil 6s ease-in-out infinite;
  transition:transform .2s ease;
}
.intro__btn::after{
  content:""; position:absolute; inset:-9px;
  border-radius:999px;
  border:1.5px solid rgba(242,218,156,.5);
  animation:introHalo 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes introHalo{
  0%,100%{ transform:scale(1);    opacity:.6; }
  55%    { transform:scale(1.09); opacity:0;  }
}
.intro__btn:active{ transform:scale(.96); }
.intro__meta{
  margin-top:18px;
  font-family:var(--f-body);
  font-size:10px; font-weight:400;
  letter-spacing:.26em; text-indent:.26em; text-transform:uppercase;
  color:rgba(255,240,214,.68);
  text-shadow:0 2px 12px rgba(2,10,30,.95);
}
@media (min-width:720px){ .intro__video{ object-fit:contain; } }
@media (prefers-reduced-motion:reduce){
  .intro__btn::after{ animation:none; }
  .intro--out{ transform:none; }
}


/* ==========================================================================
   DRIFTING TRISHULS — Shiva's trident and drum, turning slowly behind
   the whole page
   ========================================================================== */
.trishuls{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.trishuls span{
  position:absolute;
  left:var(--x); bottom:-30vh;
  width:calc(132px * var(--s));
  aspect-ratio:440/782;          /* the trishul is tall, not wide */
  background:url("../images/trishul.png") center/contain no-repeat;
  filter:drop-shadow(0 8px 18px rgba(2,12,34,.5));
  animation:trishulDrift var(--t,45s) linear var(--d,0s) infinite;
  will-change:transform, opacity;
}
/* it turns gently as it rises, the way a damru is twisted when played */
@keyframes trishulDrift{
  0%   { transform:translate3d(0,0,0) rotate(0deg);                       opacity:0; }
  8%   {                                                                  opacity:var(--o,.25); }
  50%  { transform:translate3d(24px,-78vh,0) rotate(var(--r,25deg));      opacity:var(--o,.25); }
  92%  {                                                                  opacity:0; }
  100% { transform:translate3d(-12px,-150vh,0) rotate(calc(var(--r,25deg) * 2)); opacity:0; }
}


/* ==========================================================================
   THE SKY — fixed background, colour driven by scroll
   ========================================================================== */
.sky{ position:fixed; inset:0; z-index:-2; pointer-events:none; }

.sky__grad{
  position:absolute; inset:0;
  background:linear-gradient(175deg,
      var(--sky-top) 0%,
      var(--sky-mid) 52%,
      var(--sky-bot) 100%);
}

/* starfield — fades out as the sky brightens */
.sky__stars{
  position:absolute; inset:0;
  opacity:var(--star-op);
  transition:opacity .6s linear;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 14%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 78% 9%,  #fff, transparent),
    radial-gradient(1.6px 1.6px at 44% 26%, #ffeccd, transparent),
    radial-gradient(1.1px 1.1px at 88% 34%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 26% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 65% 58%, #ffeccd, transparent),
    radial-gradient(1.1px 1.1px at 8%  68%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 92% 76%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 36% 86%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 94%, #ffeccd, transparent);
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{ filter:brightness(.7);} to{ filter:brightness(1.25);} }

/* gold lattice — the ornamental border pattern off a wedding card,
   tiled across the whole sky so no part of the page reads as plain      */
.sky__motif{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23F2DA9C' stroke-width='1.1'%3E%3Cpath d='M44 5 L83 44 L44 83 L5 44 Z'/%3E%3Cpath d='M44 33 C51 37 51 49 44 55 C37 49 37 37 44 33 Z'/%3E%3Ccircle cx='44' cy='44' r='12'/%3E%3Cpath d='M0 0 C12 0 22 10 22 22 C10 22 0 12 0 0 Z'/%3E%3Cpath d='M88 0 C76 0 66 10 66 22 C78 22 88 12 88 0 Z'/%3E%3Cpath d='M0 88 C12 88 22 78 22 66 C10 66 0 76 0 88 Z'/%3E%3Cpath d='M88 88 C76 88 66 78 66 66 C78 66 88 76 88 88 Z'/%3E%3C/g%3E%3Cg fill='%23F2DA9C'%3E%3Ccircle cx='44' cy='5' r='1.7'/%3E%3Ccircle cx='83' cy='44' r='1.7'/%3E%3Ccircle cx='44' cy='83' r='1.7'/%3E%3Ccircle cx='5' cy='44' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
  background-size:88px 88px;
  mix-blend-mode:soft-light;
  opacity:.16;
}

/* a whisper of warmth at the edges so the pale sky never looks flat */
.sky__vig{
  position:absolute; inset:0;
  background:radial-gradient(82% 58% at 50% 40%, transparent 38%, rgba(4,18,46,.42) 100%);
}

/* soft drifting cloud banks — fade in at daytime altitudes */
.sky__clouds{
  position:absolute; inset:-10% -20%;
  opacity:var(--cloud-op);
  transition:opacity .6s linear;
  background:
    radial-gradient(48% 24% at 20% 28%, rgba(255,255,255,.95), transparent 72%),
    radial-gradient(40% 19% at 76% 44%, rgba(255,255,255,.88), transparent 72%),
    radial-gradient(54% 22% at 38% 70%, rgba(255,255,255,.80), transparent 72%),
    radial-gradient(34% 16% at 88% 78%, rgba(255,255,255,.72), transparent 72%);
  animation:drift 46s linear infinite alternate;
}
@keyframes drift{ from{ transform:translate3d(-3%,0,0);} to{ transform:translate3d(3%,-2%,0);} }


/* ==========================================================================
   RISING BALLOONS — ambient layer that drifts up the whole page
   Sits above the sky and below the content, so balloons pass through the
   gaps between cards.
   ========================================================================== */
.rise{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.rise span{
  position:absolute;
  left:var(--x); bottom:-30vh;
  width:calc(190px * var(--s));
  aspect-ratio:1/1;
  background:url("../images/balloon.png") center/contain no-repeat;
  filter:hue-rotate(var(--h,0deg)) saturate(.92) drop-shadow(0 6px 14px rgba(150,105,70,.30));
  animation:rise var(--t,45s) linear var(--d,0s) infinite;
  will-change:transform, opacity;
}
@keyframes rise{
  0%   { transform:translate3d(0,0,0) rotate(-4deg);            opacity:0; }
  8%   {                                                        opacity:var(--o,.45); }
  50%  { transform:translate3d(26px,-78vh,0) rotate(4deg);      opacity:var(--o,.45); }
  92%  {                                                        opacity:0; }
  100% { transform:translate3d(-14px,-155vh,0) rotate(-3deg);   opacity:0; }
}


/* ==========================================================================
   PRELOADER
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#0E3A6B,#1F5FA8);
  transition:opacity .8s ease, visibility .8s;
}
.loader.gone{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; }

.loader__mark{
  width:76px; margin:0 auto 24px;
  animation:liftOff 2.6s cubic-bezier(.33,.9,.4,1) infinite;
  filter:drop-shadow(0 12px 26px rgba(150,105,70,.42));
}
@keyframes liftOff{
  0%   { transform:translateY(26px) scale(.9); opacity:0; }
  25%  { opacity:1; }
  100% { transform:translateY(-26px) scale(1.02); opacity:0; }
}

.loader__mono{
  font-family:var(--f-display);
  font-size:30px; letter-spacing:.26em; text-indent:.26em;
  color:var(--gold-lt);
}
.loader__mono span{ font-family:var(--f-script); letter-spacing:0; font-size:34px; }

.loader__track{
  width:120px; height:1px; margin:22px auto 0;
  background:rgba(242,218,156,.25); overflow:hidden;
}
.loader__track i{
  display:block; height:100%; width:0;
  background:var(--gold-lt);
  transition:width .3s linear;
}


/* ==========================================================================
   FLIGHT PATH — scroll progress + jump links
   ========================================================================== */
.flight{
  position:fixed; z-index:40;
  right:2px; top:16vh; bottom:16vh;
  width:20px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateX(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.flight.on{ opacity:1; transform:none; }

.flight__track{
  position:absolute; inset:0 auto; left:50%;
  width:1px; height:100%;
  transform:translateX(-.5px);
  background:linear-gradient(180deg,
      transparent, rgba(242,218,156,.32) 12%,
      rgba(242,218,156,.32) 88%, transparent);
}
.flight__fill{
  position:absolute; left:0; bottom:0; width:100%; height:0;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  box-shadow:0 0 10px rgba(242,218,156,.7);
}
.flight__mark{
  position:absolute; left:50%; bottom:0;
  width:9px; height:9px; margin-left:-4.5px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFF0C4, var(--gold-lt) 45%, var(--gold));
  box-shadow:0 0 12px rgba(242,218,156,.9);
  will-change:bottom;
}

.flight__dots{
  position:relative; z-index:1;
  height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
}
.flight__dots button{
  width:20px; height:20px;
  display:grid; place-items:center;
}
.flight__dots button::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:rgba(242,218,156,.38);
  transition:background .3s, transform .3s;
}
.flight__dots button[aria-current="true"]::after{
  background:var(--gold-lt); transform:scale(1.7);
  box-shadow:0 0 10px rgba(242,218,156,.9);
}


/* ==========================================================================
   SHARED TEXT
   ========================================================================== */
.wrap{ width:min(100% - (var(--gut) * 2), 480px); margin-inline:auto; }
.center{ text-align:center; }

.eyebrow{
  font-family:var(--f-body);
  font-weight:500; font-size:11px;
  letter-spacing:.30em; text-transform:uppercase; text-indent:.30em;
  color:var(--gold-dp);
  text-align:center;
}
.eyebrow--sky{ color:var(--on-sky-gold); text-shadow:var(--on-sky-shade); }
.eyebrow--light{ color:#F2D79A; text-shadow:0 2px 12px rgba(14,7,26,.85); }

.h2{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(34px,10vw,46px);
  line-height:1.06;
  letter-spacing:.01em;
  text-align:center;
  color:var(--on-sky);
  text-shadow:var(--on-sky-shade);
  margin:14px 0 0;
}

.prose{
  font-size:16.5px; line-height:1.85; font-weight:300;
  color:var(--ink-soft);
}
.prose em{
  font-family:var(--f-display); font-style:normal;
  font-size:1.16em; color:var(--ink);
}
.prose--sm{ font-size:14.5px; margin-top:14px; }
.prose--center{ text-align:center; }
.prose--light{ color:var(--on-sky-dim); text-shadow:var(--on-sky-shade); margin-top:18px; }

.signature{
  font-family:var(--f-script);
  font-size:38px; line-height:1;
  color:var(--gold-dp);
  text-align:center;
  margin-top:26px;
}
.signature--big{ font-size:clamp(52px,17vw,74px); color:var(--on-sky-gold); }

/* small diamond ornament */
.orn{
  display:block; width:100%; height:9px; margin-bottom:22px;
  background:
    linear-gradient(var(--paper-edge),var(--paper-edge)) left  center/calc(50% - 14px) 1px no-repeat,
    linear-gradient(var(--paper-edge),var(--paper-edge)) right center/calc(50% - 14px) 1px no-repeat;
  position:relative;
}
.orn::after{
  content:""; position:absolute; left:50%; top:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:var(--gold); transform:rotate(45deg);
}


/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{ padding-block:var(--sec); position:relative; }
.section--events{ padding-bottom:calc(var(--sec) * .4); }
.section--close{ padding-block:calc(var(--sec) * 1.1) calc(var(--sec) * .7); }


/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  text-align:center;
  padding:11vh var(--gut) 132px;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__img{
  width:100%; height:100%; object-fit:cover;
  object-position:center;
  transform:scale(1.06);
  will-change:transform;
}
/* The film keeps its own colours. There is no wash over it — only a soft
   pool of shade directly behind the words, and a fade at the very bottom
   where the cover hands over to the bright page.                          */
/* Shade only at the top, where the names sit, and at the foot for the
   scroll cue. The joined hands in the middle are left untouched.       */
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
      rgba(5,22,56,.72) 0%, rgba(5,22,56,.44) 26%,
      rgba(5,22,56,.06) 44%, rgba(5,22,56,0) 58%,
      rgba(5,22,56,.26) 82%, rgba(6,26,62,.70) 100%);
}

.hero__content{ position:relative; z-index:1; }

.hero__names{
  margin:20px 0 0;
  font-weight:400;
  line-height:.92;
}
.hero__name{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(52px,17.5vw,80px);
  letter-spacing:.015em;
  /* gold foil, on the film's own colours */
  background:linear-gradient(105deg,#F7E7BE 8%,#E5B65C 30%,#FFF6DE 46%,#D19B34 62%,#F7E7BE 88%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:foil 7s ease-in-out infinite;
  /* drop-shadow (not text-shadow) — text-shadow would ghost through the
     transparent fill that the gold gradient needs */
  filter:drop-shadow(0 6px 18px rgba(14,7,26,.7));
}
@keyframes foil{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

.hero__amp{
  display:block;
  font-family:var(--f-script);
  font-size:clamp(44px,14vw,60px);
  color:#FFEFC6;
  line-height:1;
  margin:-2px 0 -6px;
  filter:drop-shadow(0 4px 14px rgba(14,7,26,.75));
}

.hero__meta{ margin-top:26px; }
.hero__date{
  font-size:15px; font-weight:400;
  letter-spacing:.34em; text-indent:.34em;
  color:#FFF3DC;
  text-shadow:0 2px 14px rgba(14,7,26,.8);
}
.hero__place{
  margin-top:9px;
  font-size:11px; font-weight:400;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:rgba(255,243,220,.74);
  text-shadow:0 2px 12px rgba(14,7,26,.8);
}
.hero__line{
  margin:26px auto 0;
  max-width:16em;                 /* stops the line sprawling on a phone */
  font-family:var(--f-display);
  font-size:clamp(14.5px,4.2vw,18px); line-height:1.55;
  text-wrap:balance;
  color:rgba(255,243,220,.9);
  text-shadow:0 2px 14px rgba(14,7,26,.85);
}

/* ---- scroll cue ---- */
.cue{
  position:absolute; z-index:2;
  left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:opacity .5s ease, transform .5s ease;
  animation:cueBob 2.8s ease-in-out infinite;
}
/* a pool of shade so the cue reads over any frame of the film */
.cue::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; width:230px; height:190px;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(14,7,22,.62), transparent 72%);
  pointer-events:none;
}
@keyframes cueBob{
  0%,100%{ transform:translate(-50%,0); }
  50%    { transform:translate(-50%,-7px); }
}
.cue.hide{ opacity:0; transform:translate(-50%,16px); pointer-events:none; animation:none; }

.cue__label{
  white-space:nowrap;
  font-size:11.5px; font-weight:500;
  letter-spacing:.22em; text-indent:.22em; text-transform:uppercase;
  color:#FFE9B8;
  text-shadow:0 2px 14px rgba(12,6,20,.95), 0 0 26px rgba(12,6,20,.7);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.78; } 50%{ opacity:1; } }

.cue__tube{
  position:relative;
  width:28px; height:46px; border-radius:16px;
  border:1.5px solid rgba(255,229,164,.9);
  background:rgba(16,8,24,.34);
  box-shadow:0 0 18px rgba(12,6,20,.6), 0 0 12px rgba(255,229,164,.28);
  overflow:hidden;
}
.cue__bead{
  position:absolute; left:50%; top:9px;
  width:5px; height:10px; margin-left:-2.5px; border-radius:3px;
  background:#FFE9B8;
  box-shadow:0 0 8px rgba(255,229,164,.9);
  animation:bead 1.7s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes bead{
  0%   { transform:translateY(0);    opacity:0; }
  22%  { opacity:1; }
  78%  { opacity:1; }
  100% { transform:translateY(16px); opacity:0; }
}
.cue__chev{
  width:26px; height:auto;
  fill:none; stroke:#FFE9B8; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 2px 8px rgba(12,6,20,.9));
  animation:nudge 1.7s ease-in-out infinite;
}
@keyframes nudge{ 0%,100%{ transform:translateY(0); opacity:.6; } 50%{ transform:translateY(6px); opacity:1; } }


/* ==========================================================================
   CARDS ON CREAM PAPER
   --------------------------------------------------------------------------
   The wedding feeling comes from what is printed INTO the card — a fine
   all-over motif and a large mandala watermark, tone on tone — rather than
   from ornaments stuck on the outside.
   ========================================================================== */
.card{
  position:relative;
  isolation:isolate;          /* lets the watermark sit under the words */
  padding:34px 26px 30px;
  border-radius:var(--radius);
}

/* --- the printed mandala watermark --- */
.mandala{
  position:absolute; z-index:-1;
  top:50%; left:50%;
  width:min(94%, 330px); height:auto; aspect-ratio:1;
  transform:translate(-50%,-50%);
  color:var(--gold);
  opacity:.13;
  pointer-events:none;
}
.mandala__g{
  fill:none; stroke:currentColor;
  stroke-width:.9; stroke-linejoin:round;
}
.mandala .dot{ fill:currentColor; stroke:none; }

/* --- the fine all-over motif, masked so it can take any colour --- */
.card--paper::before,
.event__body::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  background:var(--gold);
  opacity:.07;
  -webkit-mask-image:var(--motif); mask-image:var(--motif);
  -webkit-mask-size:46px 46px;     mask-size:46px 46px;
  -webkit-mask-repeat:repeat;      mask-repeat:repeat;
}
.card--paper{
  background:
    radial-gradient(120% 90% at 20% 0%, #FFFDF6, transparent 60%),
    var(--paper);
  border:1px solid var(--paper-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 20px 44px -24px rgba(146,100,64,.42);
  text-align:center;
}

/* one slow pass of light across the card as it arrives — like foil catching
   the light. Runs once, never loops.                                       */
.card::after{
  content:""; position:absolute; inset:0; z-index:4;
  border-radius:inherit; pointer-events:none; opacity:0;
  background:linear-gradient(102deg,
      transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  background-size:280% 100%;
  background-position:135% 0;
}
.card.reveal.in::after{
  animation:sheen 1.7s cubic-bezier(.3,.7,.35,1) .5s 1 both;
}
@keyframes sheen{
  0%   { opacity:0;  background-position:135% 0; }
  22%  { opacity:1; }
  100% { opacity:0;  background-position:-35% 0; }
}


/* ==========================================================================
   ENGRAVED FRAME — the printed border of a wedding card.
   Added to any element with data-frame. The rules draw themselves outwards
   when the card scrolls into view.
   ========================================================================== */
.frame{ position:absolute; inset:13px; pointer-events:none; }
.frame::before{                       /* the second, inner rule */
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(201,146,47,.28);
  border-radius:7px;
  opacity:0; transition:opacity .8s ease .55s;
}
.reveal.in .frame::before{ opacity:1; }

.frame i{
  position:absolute;
  background:linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  transition:transform 1s cubic-bezier(.2,.7,.25,1) .1s;
}
.frame__t, .frame__b{ left:0; right:0; height:1px; transform:scaleX(0); }
.frame__l, .frame__r{ top:0; bottom:0; width:1px; transform:scaleY(0);
  background:linear-gradient(180deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent); }
.frame__t{ top:0; } .frame__b{ bottom:0; }
.frame__l{ left:0; } .frame__r{ right:0; }
.reveal.in .frame i{ transform:scale(1); }

.frame b{                              /* corner diamonds */
  position:absolute; width:6px; height:6px;
  background:var(--gold); transform:rotate(45deg) scale(0);
  transition:transform .5s cubic-bezier(.3,1.5,.5,1) .75s;
}
.reveal.in .frame b{ transform:rotate(45deg) scale(1); }
.frame__d--tl{ top:-3px;    left:-3px;  }
.frame__d--tr{ top:-3px;    right:-3px; }
.frame__d--bl{ bottom:-3px; left:-3px;  }
.frame__d--br{ bottom:-3px; right:-3px; }


/* ==========================================================================
   MARIGOLD TORAN — the flower garland strung across a doorway
   ========================================================================== */
.toran{
  position:absolute; top:-8px; left:0;
  width:100%; height:62px;
  overflow:visible; z-index:2; pointer-events:none;
  transform-origin:50% 0;
  animation:sway 7s ease-in-out infinite;
}
@keyframes sway{
  0%,100%{ transform:rotate(-.5deg); }
  50%    { transform:rotate(.5deg); }
}
.toran__line{ stroke:rgba(138,91,20,.5); stroke-width:1; }
.toran__buds{ filter:drop-shadow(0 2px 3px rgba(90,30,10,.22)); }

/* across the top of the cover */
.hero__toran{
  position:absolute; top:7px; left:0; right:0; height:56px;
  z-index:2; pointer-events:none;
  filter:drop-shadow(0 6px 12px rgba(150,105,70,.42));
}


/* ==========================================================================
   DRIFTING MARIGOLD PETALS
   ========================================================================== */
.petals{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.petals i{
  position:absolute; top:-8vh; left:var(--x);
  width:var(--sz); height:calc(var(--sz) * .72);
  border-radius:62% 38% 55% 45% / 58% 62% 38% 42%;
  background:linear-gradient(140deg,#FFC857,#F08A22 55%,#D9611F);
  opacity:0;
  animation:fall var(--t) linear var(--d) infinite;
}
@keyframes fall{
  0%   { transform:translate3d(0,0,0) rotate(0deg);                  opacity:0; }
  10%  {                                                             opacity:var(--o,.4); }
  50%  { transform:translate3d(34px,58vh,0) rotate(calc(var(--rot) * .5)); }
  90%  {                                                             opacity:var(--o,.4); }
  100% { transform:translate3d(-18px,118vh,0) rotate(var(--rot));    opacity:0; }
}


/* ---- the invitation card, dressed as a wedding card ---- */
.card--bless{
  padding:42px 26px 38px;
  background:
    radial-gradient(90% 40% at 50% 0%, #FFF7E2, transparent 62%),
    radial-gradient(120% 90% at 20% 100%, #FFFDF6, transparent 60%),
    var(--paper);
}

.card--invite{ padding:34px 26px 34px; }

/* the Ganesha at the head of the card */
.invite__ganesh{
  width:104px; height:auto; margin:0 auto 14px;
  filter:drop-shadow(0 10px 22px rgba(20,40,90,.28));
  opacity:0; transform:translateY(10px) scale(.94);
  transition:opacity 1s ease .25s, transform 1s cubic-bezier(.2,.7,.25,1) .25s;
}
.reveal.in .invite__ganesh{ opacity:1; transform:none; }

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */
.clock{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; margin-top:26px;
}
.clock__unit{
  padding:16px 4px 12px;
  border-radius:14px;
  border:1px solid rgba(242,218,156,.34);
  background:linear-gradient(180deg, rgba(255,247,232,.16), rgba(255,247,232,.06));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 12px 30px -20px rgba(4,16,40,.7);
  text-align:center;
}
.clock__unit b{
  display:block;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(25px,8vw,32px); line-height:1;
  color:var(--on-sky);
  font-variant-numeric:tabular-nums;
}
.clock__unit span{
  display:block; margin-top:8px;
  font-size:9px; font-weight:500;
  letter-spacing:.16em; text-indent:.16em; text-transform:uppercase;
  color:var(--on-sky-dim);
}
.clock__done{
  margin-top:26px; text-align:center;
  font-family:var(--f-display); font-size:24px;
  color:var(--on-sky-gold);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 30px;
  border-radius:999px;
  font-size:12px; font-weight:500;
  letter-spacing:.20em; text-indent:.20em; text-transform:uppercase;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:active{ transform:scale(.97); }

.btn--ghost{
  margin-top:32px;
  border:1px solid rgba(242,218,156,.45);
  background:rgba(255,247,232,.08);
  color:var(--on-sky-gold);
}
.btn--ghost:hover{ background:rgba(255,247,232,.16); }


/* ==========================================================================
   EVENT CARDS
   ========================================================================== */
.event{
  position:relative;
  padding-top:clamp(56px,14vw,84px);
  perspective:1100px;
}

.event__stamp{
  position:absolute; top:clamp(56px,14vw,84px); left:calc(var(--gut) - 4px);
  z-index:3;
  display:flex; flex-direction:column; align-items:center;
  padding:9px 11px 8px;
  border-radius:10px;
  background:linear-gradient(160deg,#FFFCF3,#F3E4C6);
  box-shadow:0 10px 22px -10px rgba(146,100,64,.45);
  border:1px solid rgba(201,146,47,.35);
}
.event__stamp b{
  font-family:var(--f-display); font-weight:400;
  font-size:24px; line-height:1; color:var(--ink);
}
.event__stamp span{
  margin-top:3px;
  font-size:9px; font-weight:500;
  letter-spacing:.14em; text-indent:.14em; text-transform:uppercase;
  color:var(--gold-dp);
}

/* ---- the gold ring, with the caricature set inside it ---- */
.ring{
  position:relative;
  width:100%; aspect-ratio:1/1;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.ring__halo{                     /* the event's colour, glowing behind */
  position:absolute; inset:8%;
  border-radius:50%;
  background:var(--accent,var(--gold));
  filter:blur(48px); opacity:.5;
  z-index:-1;
}
/* 72.5% is measured from ring.png — the art tucks just under the band */
.ring__art{
  position:absolute; top:50%; left:50%;
  width:72.5%; height:72.5%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  object-fit:cover;
  background:#123A6B;
  box-shadow:0 20px 44px -22px rgba(4,16,40,.85);
}
.ring__frame{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  filter:drop-shadow(0 12px 28px rgba(4,16,40,.6));
}

/* ---- details under the ring ---- */
/* each event card prints its motif and watermark in its own ink */
.event__body{
  position:relative;
  isolation:isolate;
  margin-top:26px;
  padding:34px 24px 30px;
  border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 20% 0%, #FFFDF6, transparent 60%),
    var(--paper);
  border:1px solid var(--paper-edge);
  border-top:2px solid var(--accent,var(--gold));
  box-shadow:0 20px 44px -26px rgba(146,100,64,.42);
  text-align:center;
}
.event__body::before{ background:var(--accent, var(--gold)); opacity:.085; }
.event__body .mandala{ color:var(--accent, var(--gold)); opacity:.14; }

.event__line{
  margin-top:14px;
  font-family:var(--f-display);
  font-size:19px; line-height:1.5;
  color:var(--ink);
}

.det{ margin-top:24px; text-align:left; }
.det > div{
  display:grid; grid-template-columns:66px 1fr;
  gap:14px; align-items:baseline;
  padding:13px 0;
  border-top:1px solid var(--paper-edge);
}
.det > div:last-child{ border-bottom:1px solid var(--paper-edge); }
.det dt{
  font-size:9.5px; font-weight:500;
  letter-spacing:.18em; text-indent:.18em; text-transform:uppercase;
  color:var(--gold-dp);
}
.det dd{
  margin:0;
  font-size:15.5px; line-height:1.5; font-weight:400;
  color:var(--ink);
}
.det dd span{ color:var(--ink-soft); font-size:13.5px; }

.note{
  margin-top:18px;
  font-size:14px; line-height:1.6;
  color:var(--ink-soft);
  font-style:italic;
}

.maplink{
  display:inline-block; margin-top:22px;
  padding-bottom:3px;
  font-size:11px; font-weight:500;
  letter-spacing:.20em; text-indent:.20em; text-transform:uppercase;
  text-decoration:none;
  color:var(--gold-dp);
  border-bottom:1px solid rgba(138,91,20,.4);
}
.maplink:hover{ color:var(--ink); border-bottom-color:var(--ink); }


/* ==========================================================================
   THE COUPLE — photo gallery
   ========================================================================== */
.gal{
  display:grid; grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:34px;
  padding-bottom:30px;   /* room for the offset second column */
}
.gal__it{
  margin:0;
  padding:5px;
  border-radius:var(--arch-out);
  background:linear-gradient(158deg,
      #F7E7BE 0%, #C9922F 26%, #FFF3D2 46%,
      #A9721F 66%, #E9CB88 84%, #B87F22 100%);
  box-shadow:0 18px 38px -22px rgba(146,100,64,.5);
}
/* stagger with margin, not transform — .reveal already owns transform */
.gal{ align-items:start; }
.gal__it:nth-child(even){ margin-top:30px; }
.gal__it img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:calc(var(--radius) - 4px);
  border-start-start-radius:44%; border-start-end-radius:44%;
  background:#2A1A46;
}

/* ==========================================================================
   BLESSINGS
   ========================================================================== */
.card--bless{ margin-top:30px; }

.fam{ margin-top:26px; text-align:center; }
.fam__name{
  font-family:var(--f-display); font-weight:400;
  font-size:23px; color:var(--ink);
}
.fam__role{
  margin-top:18px;
  font-size:9.5px; font-weight:500;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:var(--gold-dp);
}
.fam__people{
  margin-top:8px;
  font-family:var(--f-display);
  font-size:17.5px; line-height:1.6;
  color:var(--ink);
}

/* lotus between the two families */
.famsplit{
  display:flex; align-items:center; gap:14px;
  margin:30px 0 4px;
}
.famsplit span{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--paper-edge), transparent);
}
.lotus{
  width:40px; height:auto; flex:none;
  fill:none; stroke:var(--gold);
  stroke-width:1.1; stroke-linejoin:round; stroke-linecap:round;
}
/* the petals draw themselves in, one after another */
.lotus path{
  stroke-dasharray:90; stroke-dashoffset:90;
  transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.3,1);
}
.reveal.in .lotus path{ stroke-dashoffset:0; }
.reveal.in .lotus path:nth-child(1){ transition-delay:.55s; }
.reveal.in .lotus path:nth-child(2){ transition-delay:.68s; }
.reveal.in .lotus path:nth-child(3){ transition-delay:.68s; }
.reveal.in .lotus path:nth-child(4){ transition-delay:.81s; }
.reveal.in .lotus path:nth-child(5){ transition-delay:.81s; }

.memoriam{
  margin-top:30px; text-align:center;
  font-family:var(--f-script);
  font-size:27px;
  color:var(--gold-dp);
}


/* ==========================================================================
   SEND A BLESSING
   ========================================================================== */
.wish{ margin-top:30px; text-align:left; }

.fld{ display:block; margin-bottom:18px; }
.fld__lab{
  display:block; margin-bottom:8px;
  font-size:9.5px; font-weight:500;
  letter-spacing:.20em; text-indent:.20em; text-transform:uppercase;
  color:var(--gold-dp);
}
.fld__in{
  width:100%; padding:14px 15px;
  font-size:16px; font-weight:300;   /* 16px stops iOS zooming on focus */
  color:var(--ink);
  background:#FFFDF7;
  border:1px solid var(--paper-edge);
  border-radius:12px;
  transition:border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance:none; appearance:none;
}
.fld__in::placeholder{ color:#B6A48F; }
.fld__in:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,146,47,.16);
}
.fld__in--area{ resize:vertical; min-height:110px; line-height:1.6; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 20px; }
.chips button{
  padding:8px 13px;
  font-size:12px; font-weight:400;
  color:var(--gold-dp);
  border:1px solid var(--paper-edge);
  border-radius:999px;
  background:#FFFDF7;
  transition:background .2s, border-color .2s, transform .15s;
}
.chips button:active{ transform:scale(.96); }
.chips button:hover{ background:#FBF2DF; border-color:var(--gold); }

/* live WhatsApp-style preview */
.bubble{
  position:relative;
  margin-bottom:20px; padding:12px 40px 12px 14px;
  border-radius:12px 12px 12px 4px;
  background:#E7FFDB;
  border:1px solid #C7EDB6;
  min-height:0; max-height:0; opacity:0; overflow:hidden;
  padding-block:0;
  transition:max-height .35s ease, opacity .3s ease, padding-block .35s ease;
}
.bubble.on{ max-height:340px; opacity:1; padding-block:12px; }
.bubble__txt{
  font-size:14px; line-height:1.6; color:#12321C;
  white-space:pre-wrap; word-break:break-word;
}
.bubble__tick{
  position:absolute; right:12px; bottom:8px;
  font-size:11px; color:#53BDEB; letter-spacing:-2px;
}

.btn--wa{
  width:100%;
  background:var(--wa); color:#062B14;
  box-shadow:0 14px 30px -14px rgba(37,211,102,.9);
}
.btn--wa:hover{ background:#1FBE5B; }
.btn__wa{ width:19px; height:19px; fill:currentColor; }

.wish__hint{
  margin-top:14px; text-align:center;
  font-size:12px; color:var(--ink-soft);
  transition:color .2s;
}
.wish__hint.err{ color:var(--sindoor); }

.shake{ animation:shake .4s; }
@keyframes shake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-6px); }
  40%,60%{ transform:translateX(6px); }
}


/* ==========================================================================
   CLOSING + FOOTER + FAB
   ========================================================================== */
.close__mark{
  width:104px; margin:0 auto 26px;
  animation:bob 6.5s ease-in-out infinite;
  filter:drop-shadow(0 18px 30px rgba(150,105,70,.4));
}
@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-1.5deg); }
  50%    { transform:translateY(-16px) rotate(1.5deg); }
}
.close__date{
  margin-top:16px;
  font-size:11px; font-weight:400;
  letter-spacing:.26em; text-indent:.26em; text-transform:uppercase;
  color:var(--on-sky-dim);
}
.close__note{
  margin-top:22px;
  font-family:var(--f-display); font-size:17px;
  color:var(--on-sky); opacity:.8;
}

.foot{
  padding:28px var(--gut) calc(30px + env(safe-area-inset-bottom));
  text-align:center;
  border-top:1px solid rgba(242,218,156,.18);
}
.foot p{
  font-size:10px; font-weight:400;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:rgba(255,243,220,.5);
}

/* ---- music button ---- */
.music{
  position:fixed; z-index:230;
  right:14px; bottom:calc(16px + env(safe-area-inset-bottom));
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--gold-lt);
  border:1px solid rgba(242,218,156,.5);
  background:rgba(9,30,70,.62);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  box-shadow:0 10px 24px -10px rgba(2,12,34,.85);
  transition:transform .2s ease, border-color .3s ease;
}
.music:active{ transform:scale(.92); }
.music:hover{ border-color:var(--gold-lt); }

/* a plain play / pause pair — bars looked decorative, not tappable */
.music__play,
.music__pause{ width:17px; height:17px; fill:currentColor; }
.music__play{ margin-left:2px; }
.music__pause{ display:none; }
.music.on .music__pause{ display:block; }
.music.on .music__play { display:none; }
/* a soft ring while it plays, so you can see the music is on */
.music.on::after{
  content:""; position:absolute; inset:-5px;
  border-radius:50%;
  border:1px solid rgba(242,218,156,.42);
  animation:musicRing 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes musicRing{
  0%,100%{ transform:scale(1);    opacity:.55; }
  55%    { transform:scale(1.14); opacity:0;   }
}


/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{
  opacity:0;
  transform:perspective(1000px) translateY(30px) rotateX(7deg);
  transform-origin:50% 100%;
  transition:opacity .9s cubic-bezier(.2,.7,.25,1),
             transform .9s cubic-bezier(.2,.7,.25,1);
}
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.10s; }
.reveal[data-d="2"]{ transition-delay:.22s; }
.reveal[data-d="3"]{ transition-delay:.34s; }
.reveal[data-d="4"]{ transition-delay:.52s; }
.reveal[data-d="5"]{ transition-delay:.66s; }


/* every piece of text that sits directly on the sky gets the same soft halo */
.clock__unit b, .clock__unit span, .clock__done,
.signature--big, .close__date, .close__note{
  text-shadow:var(--on-sky-shade);
}


/* ==========================================================================
   LARGER SCREENS — the column stays narrow, the sky opens up
   ========================================================================== */
@media (min-width:720px){
  :root{ --gut:32px; }
  .wrap{ width:min(100% - 64px, 520px); }
  .flight{ right:22px; }
  .music{ right:26px; bottom:26px; }
  .hero__line{ font-size:17px; }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .trishuls{ display:none; }
  /* swap the moving video for its still frame */
  .hero__img{ transform:none; }
  .hero__media{ background:url("../images/hero-hands.jpg") center/cover no-repeat; }
}


/* ==========================================================================
   THE COUPLE SECTION — part 1: the photographic blocks
   --------------------------------------------------------------------------
   js/couple-scene.js builds the blocks from one photograph and writes their
   transforms as you scroll. It also writes --assembled, --settle and --name
   onto the root for the finishing moves. Only transform and opacity animate.
   ========================================================================== */
.tiles{
  --assembled:0; --settle:0; --name:0;
  --tile-persp:1300px;
  position:relative;
}
.tiles__rail{ height:190vh; }
.tiles__sticky{
  position:sticky; top:0;
  height:100vh; height:100svh;
  display:grid; place-items:center;
}
.tiles__stage{
  position:relative;
  width:min(78vw, 400px);
  aspect-ratio:4/5;
  perspective:var(--tile-persp);
  perspective-origin:50% 48%;
  /* the finished photograph gets a slow push once it locks together */
  transform:scale(calc(1 + var(--settle) * .04));
}
.tiles__grid{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}
.tiles__t{
  position:absolute;
  background-repeat:no-repeat;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform, opacity;
}
/* the frame and its shadow only arrive once the blocks have met, so the
   assembly reads as loose pieces rather than a picture with a border      */
.tiles__edge{
  position:absolute; inset:0;
  border-radius:3px;
  box-shadow:
    0 0 0 1px rgba(242,218,156,calc(var(--assembled) * .42)),
    0 48px 90px -46px rgba(2,12,34,calc(var(--assembled) * .95));
  opacity:var(--assembled);
  pointer-events:none;
}
.tiles__glow{
  position:absolute; inset:-14%;
  border-radius:50%;
  background:radial-gradient(44% 36% at 50% 48%, rgba(255,238,202,.34), transparent 70%);
  opacity:calc(var(--settle) * .8);
  filter:blur(18px);
  mix-blend-mode:screen;
  pointer-events:none;
}
.tiles__names{
  position:absolute; left:0; right:0;
  bottom:calc(5vh + env(safe-area-inset-bottom));
  z-index:3; padding:16px 20px 0;
  text-align:center;
  opacity:var(--name);
  transform:translate3d(0, calc((1 - var(--name)) * 24px), 0);
  filter:blur(calc((1 - var(--name)) * 8px));
}
.tiles__names::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; width:150%; height:230%;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(4,16,42,.82), transparent 72%);
}
.lp__eyebrow{
  font-family:var(--f-body);
  font-size:9.5px; font-weight:500;
  letter-spacing:.32em; text-indent:.32em; text-transform:uppercase;
  color:var(--gold-lt);
  text-shadow:0 2px 12px rgba(2,12,34,.95);
}
.lp__title{
  margin-top:10px;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(30px,8.6vw,44px); line-height:1.06;
  background:linear-gradient(105deg,#F7E7BE 8%,#E5B65C 32%,#FFF6DE 50%,#D19B34 68%,#F7E7BE 90%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 16px rgba(2,10,28,.9));
}
.lp__title span{
  font-family:var(--f-script); font-size:.78em;
  -webkit-text-fill-color:#FFEFC6; color:#FFEFC6; padding:0 .06em;
}
.lp__date{
  margin-top:9px;
  font-family:var(--f-body);
  font-size:10px; font-weight:400;
  letter-spacing:.26em; text-indent:.26em; text-transform:uppercase;
  color:rgba(255,243,220,.75);
  text-shadow:0 2px 12px rgba(2,12,34,.95);
}
.lp__debug{
  position:fixed; left:12px; bottom:12px; z-index:60;
  padding:7px 11px; border-radius:6px;
  background:rgba(3,12,34,.82);
  border:1px solid rgba(242,218,156,.4);
  font-family:var(--f-body); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-lt);
  pointer-events:none;
}


/* ==========================================================================
   THE COUPLE SECTION — part 2: the gallery
   --------------------------------------------------------------------------
   Every remaining photograph, each revealed by a mask travelling in its own
   direction while the picture drifts the opposite way inside it.
   --gp = how far the reveal has run · --par = drift, -1 → 1
   ========================================================================== */
.shots{ margin-top:12px; }

.gw{
  --gp:0; --par:0;
  margin:0 0 clamp(46px,11vw,84px);
}
.gw:last-child{ margin-bottom:0; }

.gw__win{
  position:relative;
  overflow:hidden;
  border-radius:4px;
  box-shadow:
    0 0 0 1px rgba(242,218,156,.26),
    0 34px 70px -40px rgba(2,12,34,.9);
  will-change:clip-path;
}
.gw__img{
  display:block; width:100%; height:auto;
  transform:
    translate3d(var(--gx,0px), calc(var(--gy,0px) + var(--par) * 14px), 0)
    scale(calc(1.09 - var(--gp) * .09));
  will-change:transform;
}

/* each direction: where the mask starts, and which way the picture drifts */
.gw[data-reveal="lr"] .gw__win{ clip-path:inset(0 calc((1 - var(--gp)) * 100%) 0 0); }
.gw[data-reveal="lr"] .gw__img{ --gx:calc((1 - var(--gp)) * -42px); }

.gw[data-reveal="bt"] .gw__win{ clip-path:inset(calc((1 - var(--gp)) * 100%) 0 0 0); }
.gw[data-reveal="bt"] .gw__img{ --gy:calc((1 - var(--gp)) * 52px); }

.gw[data-reveal="rl"] .gw__win{ clip-path:inset(0 0 0 calc((1 - var(--gp)) * 100%)); }
.gw[data-reveal="rl"] .gw__img{ --gx:calc((1 - var(--gp)) * 42px); }

.gw[data-reveal="ce"] .gw__win{
  clip-path:inset(0 calc((1 - var(--gp)) * 50%) 0 calc((1 - var(--gp)) * 50%));
}
.gw[data-reveal="tb"] .gw__win{ clip-path:inset(0 0 calc((1 - var(--gp)) * 100%) 0); }
.gw[data-reveal="tb"] .gw__img{ --gy:calc((1 - var(--gp)) * -52px); }

.gw__cap{
  margin-top:12px;
  font-family:var(--f-body);
  font-size:9.5px; font-weight:500;
  letter-spacing:.26em; text-indent:.26em; text-transform:uppercase;
  color:var(--on-sky-dim);
  text-shadow:var(--on-sky-shade);
  opacity:calc(var(--gp) * var(--gp));
}

/* editorial rhythm on wider screens; phones stay full width */
@media (min-width:720px){
  .gw--left  { width:88%; margin-right:auto; }
  .gw--right { width:88%; margin-left:auto; text-align:right; }
  .gw--wide  { width:100%; }
}

@media (max-width:600px){
  .tiles{ --tile-persp:1000px; }
  .tiles__rail{ height:170vh; }
  .tiles__stage{ width:min(80vw,320px); }
}

@media (prefers-reduced-motion:reduce){
  .tiles__rail{ height:auto; }
  .tiles__sticky{ position:static; height:auto; padding:14px 0 40px; }
  .tiles__stage{ transform:none; }
  .tiles__names{ position:static; transform:none; filter:none; margin-top:30px; }
  .tiles__t{ will-change:auto; }
  .gw__win{ clip-path:none !important; }
  .gw__img{ transform:none; }
}