/* ============================================================================
   ARJUN & KIARA — hot air balloon 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 -------------------------------------------------------- */
  /* A daylight palette: the page is a bright morning flight. Backgrounds
     stay pale and fresh, and every piece of text is a medium-dark plum or
     gold that sits calmly on top of them.                                */
  --ink:          #3B2145;   /* main text on the cards          */
  --ink-soft:     #6E5674;   /* secondary text on the cards     */
  --paper:        #FFFDFA;   /* the card surface — near white   */
  --paper-edge:   #EBDCC4;   /* hairline on the cards           */

  --gold:         #C08A2A;   /* main gold                        */
  --gold-lt:      #EBC77F;   /* light gold / foil highlight      */
  --gold-dp:      #8A5B14;   /* deep gold, for small text        */

  --marigold:     #F0A11C;   /* haldi yellow                     */
  --sindoor:      #C4415F;   /* wedding rose                     */
  --dusk:         #8367C8;   /* engagement violet                */
  --night:        #3B8CC4;   /* reception blue                   */

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

  /* Text sitting directly on the sky. The sky is always light now, so this
     is always a medium-dark plum with a soft white halo behind it.       */
  --on-sky:       #422544;
  --on-sky-dim:   rgba(66,37,68,.76);
  --on-sky-gold:  #97671A;
  --on-sky-shade: 0 1px 12px rgba(255,253,248,.9);

  /* Live sky colours — these are driven by scrolling, don't edit here.   */
  --sky-top: #FFD9CB;
  --sky-mid: #FFE9DC;
  --sky-bot: #FFF6EE;
  --star-op: 0;
  --cloud-op: .45;

  /* ---- 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="dusk"]     { --accent: var(--dusk); }
[data-accent="marigold"] { --accent: var(--marigold); }
[data-accent="sindoor"]  { --accent: var(--sindoor); }
[data-accent="night"]    { --accent: var(--night); }


/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  font-weight:300;
  color:var(--on-sky);
  background:#FFF6EE;
  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; }

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


/* ==========================================================================
   THE OPENING FILM
   --------------------------------------------------------------------------
   The first thing a guest sees. It holds on the opening frame with the names
   and the button until they touch the screen, then the film plays with its
   own sound 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:#170D24;
  cursor:pointer;
  transition:opacity 1s ease, transform 1.2s cubic-bezier(.4,0,.2,1);
}
/* the hand over — a slow push in, never a cut */
.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%; }

/* blurred still, so a wide window never shows bars beside the film */
.intro__bg{
  position:absolute; inset:-6%;
  background:url("../images/intro-poster.jpg") center/cover no-repeat;
  filter:blur(30px) saturate(1.15) brightness(.5);
}
.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(18,9,26,.34) 0%, rgba(18,9,26,.04) 20%,
      rgba(18,9,26,0)   34%, rgba(20,10,28,.52) 56%,
      rgba(16,8,24,.86) 74%, rgba(12,6,20,.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;
}

/* everything clears away the instant the film starts */
.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);
}

/* ---- the words, arriving one after another ---- */
.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:#F2D79A;
  text-shadow:0 2px 14px rgba(12,6,20,.95);
}

.intro__names{
  margin:12px 0 0;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(38px,11.5vw,54px); 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(10,5,18,.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(26px,8.4vw,36px); line-height:1.25;
  color:#FFF0D2;
  text-shadow:0 3px 18px rgba(10,5,18,.95);
}

/* ---- the button ---- */
.intro__btn{
  position:relative;
  margin-top:28px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 40px;
  border-radius:999px;
  font-family:var(--f-body);
  font-size:12px; font-weight:500;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:#40230A;
  background:linear-gradient(105deg,#F7E7BE,#E5B65C 32%,#FFF8E4 50%,#D19B34 70%,#F2D79A);
  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;
}
/* a halo that breathes, so the tap is unmistakable */
.intro__btn::after{
  content:""; position:absolute; inset:-9px;
  border-radius:999px;
  border:1.5px solid rgba(242,215,154,.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:20px;
  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(12,6,20,.95);
}

/* a wide window shows the whole frame rather than cropping it */
@media (min-width:720px){
  .intro__video{ object-fit:contain; }
}

@media (prefers-reduced-motion:reduce){
  .intro__btn::after{ animation:none; }
  .intro--out{ transform:none; }
}


/* ==========================================================================
   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='%23B8862A' 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='%23B8862A'%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:multiply;   /* darkens very slightly, so gold reads on pale sky */
  opacity:.075;
}

/* a whisper of warmth at the edges so the pale sky never looks flat */
.sky__vig{
  position:absolute; inset:0;
  background:radial-gradient(78% 55% at 50% 42%,
      rgba(255,255,255,.55) 0%, transparent 46%),
    radial-gradient(120% 90% at 50% 100%, rgba(214,158,110,.20), transparent 60%);
}

/* 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,#FFF3E8,#FFE3D4);
  transition:opacity .8s ease, visibility .8s;
}
.loader.gone{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; }

.loader__balloon{
  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-dp);
}
.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(138,91,20,.22); overflow:hidden;
}
.loader__track i{
  display:block; height:100%; width:0;
  background:var(--gold);
  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(138,91,20,.28) 12%,
      rgba(138,91,20,.28) 88%, transparent);
}
.flight__fill{
  position:absolute; left:0; bottom:0; width:100%; height:0;
  background:linear-gradient(180deg,var(--gold),var(--gold-dp));
  box-shadow:0 0 8px rgba(192,138,42,.5);
}
.flight__balloon{
  position:absolute; left:50%; bottom:0;
  width:19px; margin-left:-9.5px; margin-bottom:-7px;
  filter:drop-shadow(0 3px 7px rgba(150,105,70,.5));
  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(138,91,20,.35);
  transition:background .3s, transform .3s;
}
.flight__dots button[aria-current="true"]::after{
  background:var(--gold-dp); transform:scale(1.7);
  box-shadow:0 0 9px rgba(192,138,42,.6);
}


/* ==========================================================================
   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:center;
  text-align:center;
  padding:96px var(--gut) 132px;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__video{
  width:100%; height:100%; object-fit:cover;
  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.                          */
.hero__veil{
  position:absolute; inset:0;
  background:
    /* shade behind the names only — most of the frame is untouched */
    radial-gradient(80% 46% at 50% 45%,
        rgba(22,11,30,.58) 0%, rgba(22,11,30,.30) 50%, transparent 78%),
    /* a gentle cinematic darkening top and bottom. No light wash — the
       film keeps its own colour all the way down.                       */
    linear-gradient(180deg,
        rgba(22,11,30,.22) 0%, transparent 14%,
        transparent 58%, rgba(20,10,28,.38) 82%, rgba(18,9,26,.62) 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:30px auto 0; max-width:20em;
  font-family:var(--f-display);
  font-size:16px; line-height:1.7;
  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);
}

/* ---- the printed invitation card ---------------------------------------
   The card is a single picture. The words are laid into the clear middle
   of the artwork and sized in "cqw" — percentages of the card's own width
   — so the whole thing scales as one piece on every screen size.        */
.card--invite{
  padding:0;
  border:0;
  background:none;
  box-shadow:0 26px 54px -26px rgba(146,100,64,.48);
  border-radius:4px;
  container-type:inline-size;
}
/* The artwork is a real <img>, not a CSS background. That way the card gets
   its height from the picture itself and needs no aspect-ratio support —
   it lays out correctly on older phones too.                              */
.invite__bg{
  display:block; width:100%; height:auto;
  border-radius:4px;
}

.invite__text{
  position:absolute;
  left:13%; right:13%;
  top:25%; bottom:28%;          /* the clear area between the Ganesha and
                                   the mandap at the foot of the card */
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
}

/* Sizes are given twice on purpose: a vw value every browser understands,
   then a cqw value (a share of the card's own width) for browsers that
   support it. Either way the words scale with the card.                  */
.card--invite .invoke,
.card--invite .eyebrow,
.card--invite .prose,
.card--invite .signature{
  width:100%;
  text-align:center;   /* belt and braces — never inherit an alignment */
}
.card--invite .invoke{
  margin-bottom:0;
  font-size:clamp(10px,3.4vw,15px); font-size:3.9cqw;
}
.card--invite .eyebrow{
  margin-top:4.2cqw;
  font-size:clamp(8px,2.5vw,11px); font-size:2.9cqw;
}
.card--invite .prose{
  margin-top:3.4cqw;
  font-size:clamp(11px,3.7vw,16px); font-size:4.2cqw;
  line-height:1.62;
}
.card--invite .prose--sm{
  margin-top:3.6cqw;
  font-size:clamp(9px,3vw,13px); font-size:3.4cqw;
  line-height:1.6;
}
.card--invite .signature{
  margin-top:3.4cqw;
  font-size:clamp(24px,7.7vw,34px); font-size:8.8cqw;
}

/* Sanskrit invocation */
.invoke{
  font-family:"Tiro Devanagari Hindi", var(--f-display), serif;
  font-size:16px; line-height:1.5;
  color:var(--gold-dp);
  letter-spacing:.02em;
  margin-bottom:22px;
}


/* ==========================================================================
   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(138,91,20,.20);
  background:linear-gradient(180deg, rgba(255,253,248,.88), rgba(255,250,242,.62));
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:0 10px 26px -18px rgba(120,80,50,.55);
  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(138,91,20,.42);
  background:rgba(255,253,248,.55);
  color:var(--on-sky-gold);
}
.btn--ghost:hover{ background:rgba(255,253,248,.9); }


/* ==========================================================================
   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 arch ---- */
.arch{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.arch::before{           /* accent halo behind the frame */
  content:"";
  position:absolute; inset:8% 4% 10%;
  border-radius:50%;
  background:var(--accent,var(--gold));
  filter:blur(46px); opacity:.42;
  z-index:-1;
}
.arch__frame{
  padding:7px;
  border-radius:var(--arch-out);
  background:linear-gradient(158deg,
      #F7E7BE 0%, #C9922F 24%, #FFF3D2 44%,
      #A9721F 64%, #E9CB88 82%, #B87F22 100%);
  box-shadow:
    0 24px 50px -26px rgba(146,100,64,.55),
    0 0 0 1px rgba(255,246,222,.28) inset;
}
.arch__img{
  width:100%; aspect-ratio:5/6; object-fit:cover;
  object-position:50% 50%;   /* JS pans this for parallax inside the frame */
  border-radius:var(--arch-in);
  background:#2A1A46;
}

/* ---- details under the arch ---- */
/* 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__balloon{
  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(138,91,20,.16);
}
.foot p{
  font-size:10px; font-weight:400;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:rgba(66,37,68,.52);
}

/* ---- music button ---- */
.music{
  position:fixed; z-index:45;
  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-dp);
  border:1px solid rgba(138,91,20,.42);
  background:rgba(255,253,248,.82);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  box-shadow:0 10px 24px -10px rgba(120,80,50,.6);
  transition:transform .2s ease, border-color .3s ease;
}
.music:active{ transform:scale(.92); }
.music:hover{ border-color:var(--gold); }

.music__play{ width:17px; height:17px; fill:currentColor; margin-left:2px; }
.music__bars{ display:none; align-items:flex-end; gap:2.5px; height:15px; }
.music__bars i{
  width:2.5px; border-radius:2px; background:currentColor;
  animation:eq .9s ease-in-out infinite alternate;
}
.music__bars i:nth-child(1){ height:40%; animation-delay:0s;   }
.music__bars i:nth-child(2){ height:95%; animation-delay:.18s; }
.music__bars i:nth-child(3){ height:60%; animation-delay:.36s; }
.music__bars i:nth-child(4){ height:80%; animation-delay:.09s; }
@keyframes eq{ from{ transform:scaleY(.35); } to{ transform:scaleY(1); } }

.music.on .music__bars{ display:flex; }
.music.on .music__play{ display:none; }


/* ==========================================================================
   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; }
  .rise{ display:none; }
  /* swap the moving video for its still frame */
  .hero__video{ display:none; }
  .hero__media{ background:url("../images/hero-poster.jpg") center/cover no-repeat; }
}