/* ============================================================
   Mohammed Jaseem & Shahistha — "A Wedding in Scenes"
   A cinematic invitation told in scrollable scenes.
   Palette: pearl · sand · champagne · antique gold · emerald-noir
            malabar green · henna rose · sky pearl
   Display: Fraunces · Body: Hanken Grotesk · Calligraphy: Great Vibes · Arabic: Amiri
   Gold foil is reserved for large display + ornament only; body/labels use ink/emerald.
   ============================================================ */

:root{
  /* ---- brief palette ---- */
  --pearl:#FBF6EA;
  --sand:#EEDFC6;
  --champagne:#D8B768;
  --antique-gold:#A67828;
  --emerald-noir:#083A2B;
  --malabar-green:#4F8A68;
  --henna-rose:#B76E61;
  --sky-pearl:#DDEBE7;
  --ink:#17231D;

  /* ---- derived ---- */
  --pearl-bright:#FFFBF2;
  --card:#FFFDF7;
  --ink-soft:#51604F;
  --ink-faint:#7C887E;
  --emerald-2:#0C4A37;
  --emerald-deep:#062A1F;
  --gold-text:#8C6320;          /* darker gold for legibility where needed */
  --line:rgba(166,120,40,.45);
  --line-soft:rgba(166,120,40,.22);

  --foil:linear-gradient(100deg,#E7C879 0%,#C79A3A 36%,#A67828 56%,#EAD08A 80%,#C0902F 100%);
  --foil-bright:linear-gradient(100deg,#F3DFA0,#E0BC63 42%,#CBA13E 64%,#F1E1A6 100%);
  --shadow:0 34px 70px -38px rgba(8,42,32,.55);
  --shadow-sm:0 18px 42px -26px rgba(8,42,32,.42);
  --glow-gold:0 0 60px -10px rgba(216,183,104,.55);

  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --body:'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --script:'Great Vibes', 'Snell Roundhand', cursive;
  --arabic:'Amiri', serif;

  --pad:clamp(1.25rem,5vw,3rem);
  --maxw:1100px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--pearl); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body);
  color:var(--ink);
  line-height:1.7;
  font-size:clamp(1rem,1.4vw,1.08rem);
  font-weight:400;
  overflow-x:hidden;
  background:var(--pearl);
}
/* faint girih texture, fixed, barely-there */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("../assets/pattern-geo.svg") repeat; background-size:110px 110px; opacity:.045;
}
img{ max-width:100%; display:block; }
::selection{ background:rgba(166,120,40,.22); }
:focus-visible{ outline:2px solid var(--antique-gold); outline-offset:3px; border-radius:4px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; }
.wrap--narrow{ max-width:720px; }
.center{ text-align:center; }

/* A scene = one full-viewport act of the film */
.scene{
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-block:clamp(4rem,11vh,7.5rem);
  isolation:isolate;
}
.scene__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.scene--auto{ min-height:auto; }

/* ---------- ornaments ---------- */
.ornament{ display:block; width:min(70%,280px); height:22px; margin:1.3rem auto;
  background:center/contain no-repeat url("../assets/ornament.svg"); }
.ornament--sm{ width:min(46%,180px); height:18px; }

/* couture corner motifs — subtle, replace the old florals */
.corner{ position:absolute; width:clamp(74px,14vw,128px); aspect-ratio:1; z-index:1;
  background:center/contain no-repeat url("../assets/corner.svg"); opacity:.5; pointer-events:none; }
.corner--tl{ top:clamp(.8rem,3vw,1.6rem); left:clamp(.8rem,3vw,1.6rem); }
.corner--tr{ top:clamp(.8rem,3vw,1.6rem); right:clamp(.8rem,3vw,1.6rem); transform:scaleX(-1); }
.corner--bl{ bottom:clamp(.8rem,3vw,1.6rem); left:clamp(.8rem,3vw,1.6rem); transform:scaleY(-1); }
.corner--br{ bottom:clamp(.8rem,3vw,1.6rem); right:clamp(.8rem,3vw,1.6rem); transform:scale(-1,-1); }
.corner--gold{ opacity:.34; filter:brightness(1.5) saturate(.6); }

/* hairline divider with a diamond */
.hairline{ display:flex; align-items:center; justify-content:center; gap:12px; margin:1.1rem auto; }
.hairline::before,.hairline::after{ content:""; height:1px; width:46px; background:linear-gradient(90deg,transparent,var(--antique-gold)); }
.hairline::after{ background:linear-gradient(90deg,var(--antique-gold),transparent); }
.hairline i{ width:6px; height:6px; border:1px solid var(--antique-gold); transform:rotate(45deg); }

/* a soft gold radial glow used behind focal points */
.glow{ position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(120%,900px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(216,183,104,.28) 0%, rgba(216,183,104,.08) 38%, transparent 66%);
  z-index:0; pointer-events:none; }

/* ---------- type helpers ---------- */
.eyebrow{ font-family:var(--body); font-weight:600; font-size:.72rem;
  letter-spacing:.36em; text-transform:uppercase; color:var(--antique-gold); }
.kicker{ font-family:var(--body); font-weight:600; font-size:.66rem;
  letter-spacing:.42em; text-transform:uppercase; color:var(--emerald-noir); }
.scene-title{ font-family:var(--display); font-weight:500; font-optical-sizing:auto;
  font-size:clamp(2rem,5.4vw,3.2rem); line-height:1.12; color:var(--emerald-noir);
  letter-spacing:-.012em; }
.lede{ font-family:var(--display); font-weight:400; font-size:clamp(1.18rem,2.8vw,1.55rem);
  color:var(--ink); line-height:1.55; }
.body-copy{ font-size:clamp(1rem,2vw,1.12rem); color:var(--ink-soft); line-height:1.75; }

/* gold foil — large display + ornament only */
.foil{ background:var(--foil); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.foil--bright{ background:var(--foil-bright); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
@keyframes shimmer{ 0%{ background-position:0% center; } 100%{ background-position:200% center; } }

/* calligraphy names */
.script{ font-family:var(--script); font-weight:400; line-height:.96; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--body); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.95em 1.7em; border-radius:50px; cursor:pointer; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; }
.btn__ico{ font-size:1.05em; line-height:0; }
.btn--emerald{ background:var(--emerald-noir); color:var(--pearl); box-shadow:0 14px 30px -16px rgba(8,42,32,.85); }
.btn--emerald:hover{ transform:translateY(-2px); background:var(--emerald-2); }
.btn--gold{ background:linear-gradient(165deg,#D8B768,#A67828 62%,#8A6322); color:#FFF8E6; box-shadow:0 14px 30px -16px rgba(166,120,40,.8); }
.btn--gold:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn--ghost{ background:transparent; border-color:var(--antique-gold); color:var(--emerald-noir); }
.btn--ghost:hover{ transform:translateY(-2px); background:var(--emerald-noir); color:var(--pearl); border-color:var(--emerald-noir); }
.btn--ghost-gold{ background:transparent; border-color:var(--line); color:var(--gold-text); }
.btn--ghost-gold:hover{ background:var(--antique-gold); color:#FFF8E6; border-color:var(--antique-gold); }
.btn--on-dark{ border-color:var(--champagne); color:var(--champagne); background:transparent; }
.btn--on-dark:hover{ background:var(--champagne); color:var(--emerald-deep); }

/* add-to-calendar disclosure */
.cal{ position:relative; }
.cal summary{ list-style:none; }
.cal summary::-webkit-details-marker{ display:none; }
.cal__menu{ position:absolute; left:50%; transform:translateX(-50%); margin-top:.5rem; min-width:210px; z-index:20;
  background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); padding:.4rem; display:flex; flex-direction:column; }
.cal__menu a{ font-family:var(--body); font-weight:500; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; padding:.7rem .9rem; border-radius:8px; transition:background .2s,color .2s; }
.cal__menu a:hover{ background:var(--pearl); color:var(--emerald-noir); }
.cal[open] > summary{ filter:brightness(.96); }
.event-card--evening .cal__menu{ background:#072017; border-color:rgba(216,183,104,.4); }
.event-card--evening .cal__menu a{ color:#EFE7D2; }
.event-card--evening .cal__menu a:hover{ background:rgba(216,183,104,.16); color:#fff; }

/* ============================================================ SCENE 1 — GRATITUDE */
.scene--1{
  background:
    radial-gradient(120% 75% at 50% 6%, #FFFCF4 0%, rgba(255,252,244,0) 52%),
    radial-gradient(120% 90% at 50% 120%, #F1E6CE 0%, rgba(241,230,206,0) 55%),
    var(--pearl);
}
.scene--1 .scene__bg{
  background:url("../assets/jaali.svg") center/200px 200px repeat; opacity:.06;
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 70%);
          mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 70%);
}
.bismillah{ font-family:var(--arabic); font-weight:400; direction:rtl;
  font-size:clamp(1.8rem,6.6vw,3.2rem); line-height:1.7; color:var(--antique-gold);
  text-shadow:0 2px 20px rgba(216,183,104,.35); }
.gratitude{ font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,4vw,2.1rem); color:var(--emerald-noir); margin-top:.4rem; }
.gratitude-copy{ font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,2.7vw,1.5rem);
  color:var(--ink-soft); line-height:1.65; max-width:30ch; margin:1rem auto 0; }

/* ============================================================ SCENE 2 — ANNOUNCEMENT */
.scene--2{
  background:
    radial-gradient(110% 70% at 50% 8%, #FFFDF6 0%, rgba(255,253,246,0) 55%),
    radial-gradient(90% 60% at 50% 100%, #F6ECD6 0%, rgba(246,236,214,0) 60%),
    var(--pearl-bright);
}
.scene--2 .glow{ width:min(130%,1000px); }
.announce-kicker{ margin-bottom:clamp(1rem,3vh,1.8rem); }
.names{ font-family:var(--script); font-weight:400; line-height:.92;
  display:flex; flex-direction:column; align-items:center; gap:.04em; max-width:100%;
  font-size:clamp(3rem,13vw,6.6rem); }
.names .amp{ font-size:.46em; color:var(--henna-rose); -webkit-text-fill-color:var(--henna-rose);
  background:none; margin:.04em 0; opacity:.92; }
@media (prefers-reduced-motion:no-preference){
  .names.foil{ animation:shimmer 8s linear infinite alternate; }
}
.announce-sub{ font-family:var(--body); font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  font-size:.78rem; color:var(--emerald-noir); margin-top:.4rem; }
.announce-meta{ font-family:var(--display); font-weight:500; font-size:clamp(1.05rem,2.5vw,1.35rem);
  letter-spacing:.04em; color:var(--ink); margin-top:.7rem; }
.announce-meta .dot{ color:var(--antique-gold); margin:0 .5em; }

/* ============================================================ SCENE 3 — GRAND CELEBRATION */
.scene--3{
  background:
    radial-gradient(110% 80% at 50% 0%, #F6E9D0 0%, rgba(246,233,208,0) 60%),
    linear-gradient(180deg, var(--sand) 0%, #F2E7CF 100%);
}
.scene--3 .scene__bg{
  background:url("../assets/jaali.svg") center/150px 150px repeat; opacity:.1;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.scene--3 .scene-title{ color:var(--emerald-noir); }
.celebrate-lede{ font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,3.4vw,1.9rem);
  color:var(--ink); line-height:1.5; max-width:24ch; margin:1.2rem auto 0; }
.celebrate-lede .rose{ color:var(--henna-rose); font-style:italic; }
.celebrate-sub{ font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,2.4vw,1.35rem); color:var(--ink-soft); margin-top:.8rem; }

/* ============================================================ SCENE 4 — EVENTS */
.scene--4{ background:
    radial-gradient(120% 60% at 50% 0%, #FFFCF4 0%, rgba(255,252,244,0) 55%), var(--pearl); }
.events-head{ margin-bottom:clamp(1.6rem,4vw,2.6rem); }
.events-grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.4rem,4vw,2rem); width:100%; }
.event-card{ position:relative; text-align:center; padding:clamp(2rem,5vw,2.8rem) clamp(1.4rem,4vw,2.2rem);
  background:var(--card); border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--shadow-sm); overflow:hidden; }
.event-card::before{ content:""; position:absolute; inset:8px; border:1px solid var(--line-soft); border-radius:12px; pointer-events:none; }
.event-card__tag{ font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--antique-gold); }
.event-card__name{ font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,5.4vw,2.3rem); color:var(--emerald-noir); margin:.25rem 0 .6rem; letter-spacing:-.01em; }
.event-card__date{ font-family:var(--display); font-weight:500; font-size:1.18rem; color:var(--ink); }
.event-card__time{ font-family:var(--body); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; color:var(--antique-gold); margin-top:.2rem; }
.event-card .hairline{ margin:1rem auto; }
.event-card__venue{ font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--ink); }
.event-card__addr{ font-family:var(--body); font-size:.92rem; color:var(--ink-soft); margin-top:.3rem; line-height:1.5; }
.event-card__actions{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.5rem; }
.event-card--evening{ background:
    radial-gradient(120% 100% at 50% 0%, rgba(79,138,104,.32) 0, transparent 58%), var(--emerald-noir);
  border-color:rgba(216,183,104,.4); }
.event-card--evening::before{ border-color:rgba(216,183,104,.28); }
.event-card--evening .event-card__tag{ color:var(--champagne); }
.event-card--evening .event-card__name{ color:#fff; }
.event-card--evening .event-card__date{ color:#F3EAD4; }
.event-card--evening .event-card__time{ color:var(--champagne); }
.event-card--evening .event-card__venue{ color:#fff; }
.event-card--evening .event-card__addr{ color:#CFC7AE; }
.event-card--evening .hairline::before{ background:linear-gradient(90deg,transparent,var(--champagne)); }
.event-card--evening .hairline::after{ background:linear-gradient(90deg,var(--champagne),transparent); }
.event-card--evening .hairline i{ border-color:var(--champagne); }

/* ============================================================ SCENE 5 — COUPLE REVEAL */
.scene--5{ color:#F4ECDA;
  background:
    radial-gradient(100% 70% at 50% 50%, #0E4634 0%, rgba(14,70,52,0) 60%),
    linear-gradient(180deg, var(--emerald-deep) 0%, var(--emerald-noir) 50%, var(--emerald-deep) 100%); }
.scene--5 .glow{ background:radial-gradient(circle, rgba(216,183,104,.34) 0%, rgba(216,183,104,.1) 40%, transparent 68%); }
.scene--5 .kicker{ color:var(--champagne); }
.reveal-frame{ position:relative; width:min(74vw,330px); margin:clamp(1.4rem,4vh,2.4rem) auto; }
.reveal-frame__media{ position:relative; aspect-ratio:4/5; border-radius:170px/210px; overflow:hidden;
  background:#0a2a20; box-shadow:0 40px 90px -40px rgba(0,0,0,.7), var(--glow-gold); }
.reveal-frame__media img{ width:100%; height:100%; object-fit:cover; object-position:center 14%; }
.reveal-frame__ring{ position:absolute; inset:-12px; border-radius:180px/220px; border:1.5px solid var(--champagne); opacity:.85; pointer-events:none; }
.reveal-frame__ring--2{ inset:-4px; border-color:rgba(216,183,104,.5); }
.reveal-frame__star{ position:absolute; left:50%; transform:translateX(-50%); width:120px; height:18px;
  background:center/contain no-repeat url("../assets/ornament.svg"); }
.reveal-frame__star--t{ top:-34px; }
.reveal-frame__star--b{ bottom:-34px; transform:translateX(-50%) scaleY(-1); }
.reveal-name{ font-family:var(--script); font-size:clamp(2.6rem,9vw,4rem); line-height:1; margin-top:.2rem; }
.reveal-role{ font-family:var(--body); font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  font-size:.74rem; color:var(--champagne); }

/* ============================================================ SCENE 6 — BLESSED FAMILIES */
.scene--6{ background:
    radial-gradient(110% 70% at 50% 0%, #FFFCF5 0%, rgba(255,252,245,0) 55%), var(--pearl); }
.invite-copy{ font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,2.9vw,1.6rem);
  line-height:1.6; color:var(--ink); max-width:32ch; margin:0 auto; }
.invite-copy .nm{ color:var(--antique-gold); font-weight:500; }
.family-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,2.6rem); align-items:start;
  margin-top:clamp(2.4rem,6vw,3.4rem); width:100%; }
.person{ text-align:center; }
.person__role{ font-family:var(--body); font-weight:600; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--emerald-noir); }
.person__name{ font-family:var(--script); font-weight:400; font-size:clamp(2.5rem,10vw,3.6rem); line-height:1; margin:.15rem 0 .3rem; }
.person__lineage{ font-family:var(--body); font-size:.96rem; color:var(--ink-soft); line-height:1.55; }
.person__lineage + .person__lineage{ margin-top:.1rem; }
.family-amp{ font-family:var(--script); font-size:clamp(2.4rem,8vw,3.2rem); line-height:.6; text-align:center; color:var(--henna-rose); }

/* ============================================================ SCENE 7 — TRAVEL / ACROSS MALABAR */
.scene--7{ color:var(--emerald-noir);
  background:
    radial-gradient(120% 70% at 50% 0%, #EAF3EF 0%, rgba(234,243,239,0) 60%),
    linear-gradient(180deg, var(--sky-pearl) 0%, #E8F1ED 100%); }
.scene--7 .scene__bg{
  background:url("../assets/jaali.svg") center/170px 170px repeat; opacity:.05; }
.scene--7 .scene-title{ color:var(--emerald-noir); }
.route{ display:flex; align-items:center; justify-content:center; gap:clamp(.6rem,3vw,1.4rem);
  flex-wrap:wrap; margin:clamp(1.6rem,4vw,2.4rem) auto 0; }
.route__city{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,5vw,2.4rem); color:var(--emerald-noir); }
.route__path{ position:relative; width:clamp(80px,24vw,200px); height:2px;
  background:repeating-linear-gradient(90deg,var(--antique-gold) 0 7px,transparent 7px 14px); }
.route__path::before,.route__path::after{ content:""; position:absolute; top:50%; width:7px; height:7px;
  border:1px solid var(--antique-gold); background:var(--sky-pearl); transform:translateY(-50%) rotate(45deg); }
.route__path::before{ left:-3px; } .route__path::after{ right:-3px; }
.route__plane{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--antique-gold); font-size:1.1rem; background:var(--sky-pearl); padding:0 7px; }
.travel-meta{ font-family:var(--body); font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  font-size:.78rem; color:var(--antique-gold); margin-top:1.4rem; }
.travel-note{ font-family:var(--display); font-size:clamp(1.08rem,2.5vw,1.32rem); color:var(--ink-soft);
  margin:.7rem auto 0; line-height:1.65; max-width:42ch; }

/* ============================================================ SCENE 8 — RSVP FINALE */
.scene--8{ color:#F4ECDA;
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(79,138,104,.28) 0, transparent 58%),
    linear-gradient(180deg, var(--emerald-noir) 0%, var(--emerald-deep) 100%); }
.scene--8 .glow{ background:radial-gradient(circle, rgba(216,183,104,.18) 0%, transparent 64%); }
.scene--8 .kicker{ color:var(--champagne); }
.scene--8 .ornament{ filter:saturate(1.1) brightness(1.15); }
.finale-title{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,5.6vw,3.2rem);
  line-height:1.16; color:#fff; letter-spacing:-.01em; }
.finale-copy{ font-family:var(--display); font-size:clamp(1.12rem,2.6vw,1.4rem); color:#EFE7D2;
  max-width:34ch; margin:1.1rem auto 0; line-height:1.6; }
.rsvp-options{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1.9rem; }
.contacts{ display:grid; grid-template-columns:1fr; gap:1rem; margin:2.2rem auto 0; max-width:480px; width:100%; }
.contact{ display:flex; flex-direction:column; gap:.12rem; text-decoration:none; padding:1rem 1.3rem;
  background:rgba(255,253,247,.06); border:1px solid rgba(216,183,104,.4); border-radius:14px; transition:transform .25s, background .25s; }
.contact:hover{ transform:translateY(-2px); background:rgba(255,253,247,.12); }
.contact__name{ font-family:var(--display); font-weight:600; font-size:1.12rem; color:#fff; }
.contact__role{ font-family:var(--body); font-weight:500; letter-spacing:.16em; text-transform:uppercase; font-size:.62rem; color:var(--champagne); }
.contact__num{ font-family:var(--body); font-weight:500; color:#F3EAD4; margin-top:.25rem; letter-spacing:.04em; }
.finale-foot{ font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1rem,2.4vw,1.25rem); color:#CFC7AE; margin-top:2.4rem; }
.finale-names{ font-family:var(--script); font-size:clamp(2.4rem,9vw,3.6rem); line-height:1.05; margin-top:.3rem; }
.finale-date{ font-family:var(--body); font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  font-size:.72rem; color:var(--champagne); margin-top:.6rem; }

/* ---------- scroll cue ---------- */
.scroll-cue{ position:absolute; left:50%; bottom:clamp(1.4rem,4vh,2.4rem); transform:translateX(-50%);
  display:inline-flex; flex-direction:column; align-items:center; gap:.55rem; z-index:3;
  font-family:var(--body); font-weight:600; font-size:.58rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--antique-gold); text-decoration:none; }
.scroll-cue__line{ width:1px; height:42px; background:linear-gradient(var(--antique-gold),transparent); position:relative; overflow:hidden; }
.scroll-cue__line::after{ content:""; position:absolute; top:-50%; left:0; width:1px; height:50%; background:var(--antique-gold); animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(340%);} }
.scroll-cue--dark{ color:var(--champagne); }
.scroll-cue--dark .scroll-cue__line{ background:linear-gradient(var(--champagne),transparent); }
.scroll-cue--dark .scroll-cue__line::after{ background:var(--champagne); }

/* ---------- music toggle ---------- */
.music-toggle{ position:fixed; right:clamp(1rem,3vw,1.6rem); bottom:calc(env(safe-area-inset-bottom,0px) + clamp(1rem,3vw,1.6rem));
  z-index:60; width:52px; height:52px; border-radius:50%; background:rgba(255,253,247,.9); backdrop-filter:blur(6px);
  border:1px solid var(--antique-gold); color:var(--emerald-noir); display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 12px 28px -14px rgba(8,42,32,.7); transition:transform .25s; }
.music-toggle[hidden]{ display:none; }
.music-toggle:hover{ transform:translateY(-2px) scale(1.05); }
.music-icon{ font-size:1.25rem; line-height:1; }
.music-wave{ display:none; align-items:flex-end; gap:3px; height:17px; }
.music-wave i{ width:3px; height:6px; background:var(--emerald-noir); border-radius:2px; animation:wave 1s ease-in-out infinite; }
.music-wave i:nth-child(2){ animation-delay:.2s; } .music-wave i:nth-child(3){ animation-delay:.4s; }
@keyframes wave{ 0%,100%{ height:5px;} 50%{ height:15px;} }
body.music-on .music-icon{ display:none; } body.music-on .music-wave{ display:flex; }

/* ---------- sticky mobile RSVP ---------- */
.rsvp-sticky{ position:fixed; left:50%; transform:translateX(-50%) translateY(160%);
  bottom:calc(env(safe-area-inset-bottom,0px) + .8rem); z-index:55; transition:transform .35s ease; }
.rsvp-sticky.show{ transform:translateX(-50%) translateY(0); }
.rsvp-sticky .btn{ box-shadow:0 16px 36px -14px rgba(8,42,32,.9); }
@media (min-width:768px){ .rsvp-sticky{ display:none; } }

/* ============================================================ MOTION — curtain reveal */
[data-reveal]{ opacity:0; transform:translateY(30px);
  transition:opacity 1s cubic-bezier(.22,.65,.18,1), transform 1s cubic-bezier(.22,.65,.18,1); }
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal="scale"]{ transform:translateY(30px) scale(.965); }
[data-reveal="scale"].is-visible{ transform:none; }

@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
  .names.foil{ animation:none; }
  .scroll-cue__line::after,.music-wave i{ animation:none; }
}

/* ============================================================ RESPONSIVE */
@media (min-width:760px){
  .events-grid{ grid-template-columns:1fr 1fr; align-items:stretch; }
  .contacts{ grid-template-columns:1fr 1fr; max-width:none; }
}
@media (min-width:900px){
  .family-grid{ grid-template-columns:1fr auto 1fr; }
  .reveal-frame{ width:min(40vw,360px); }
  .names{ font-size:clamp(3.6rem,9vw,6.6rem); }
}
@media (max-width:380px){
  .route__path{ width:64px; }
}