/* ============================================================================
   ACP Invites — Punjabi wedding invitation
   Cinematic layered-parallax scenes carrying real invitation content.

   Structure: 8 full-viewport .panel scenes. Each stacks transparent .layer
   images (background → glow → figures → props → foreground) that drift on
   scroll and breathe when scrolling stops.

   The one thing to understand before editing: GSAP owns `transform` on every
   .layer. Never position a layer with transform — use left/right/width/height
   and background-position instead, or the idle animation will fight you.
   ========================================================================= */

:root {
  --marigold:   #E8A33D;
  --marigold-d: #C9761B;
  --maroon:     #6B1F2A;
  --maroon-d:   #3D0F17;
  --ink:        #FBF0E4;
  --ink-soft:   rgba(251, 240, 228, .78);
  --ink-faint:  rgba(251, 240, 228, .58);
  --night:      #1A0F14;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", -apple-system, "Segoe UI", sans-serif;
  --ease:  cubic-bezier(.22, .61, .36, 1);

  /* Panel side padding, reused by the scene text and the cards inside it. */
  --pad-x: 8vw;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  height: 100%;
  background: var(--night);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;               /* .scroller does the scrolling */
}

img { max-width: 100%; display: block; }

/* ── Scroller ───────────────────────────────────────────────────────────
   Scrolling happens inside .scroller, not on window — ScrollTrigger is
   configured with the same element. Continuous flow, no scroll-snap, so
   scenes bleed into one another. */
.scroller {
  height: 100svh;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { width: 0; height: 0; }

/* The gate is up until the guest taps; don't let the page scroll behind it. */
body.is-gated .scroller { overflow: hidden; }

/* ── Panels ─────────────────────────────────────────────────────────── */
.panel {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: end start;
  isolation: isolate;
}

.panel--tall { min-height: 100svh; padding: 14svh 0; }

.panel[data-text="top-left"]     { place-items: start start; }
.panel[data-text="top-right"]    { place-items: start end; }
.panel[data-text="center-left"]  { place-items: center start; }
.panel[data-text="center"]       { place-items: center; }
.panel[data-text="bottom-left"]  { place-items: end start; }
.panel[data-text="bottom-right"] { place-items: end end; }

/* Fallback tint so a scene looks intentional before its art loads. */
.panel[data-tint="warm"] {
  background: radial-gradient(120% 120% at 60% 30%, #7A3520 0%, #2E1310 55%, #180A0C 100%);
}
.panel[data-tint="cool"] {
  background: radial-gradient(120% 120% at 35% 25%, #2E2B5A 0%, #161033 55%, #0A0820 100%);
}

/* ── Layers ───────────────────────────────────────────────────────────── */
.layer {
  position: absolute;
  inset: -12%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  pointer-events: none;
  z-index: 1;
}

.layer.el {
  inset: 0;
  background-size: contain;
  background-position: 62% bottom;
}

.layer { opacity: 0; transition: opacity .6s var(--ease); }
.layer.is-ready { opacity: 1; }
.layer.el.glow.is-ready { opacity: .55; }

/* Each scene opens as a full-screen layer; long invitation details scroll inside it. */
@media screen {
  .scroller.scene-mode { position: relative; overflow: hidden; }
  .scene-mode > .panel {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    visibility: hidden;
    pointer-events: none;
  }
  .scene-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .scene-mode > .panel::-webkit-scrollbar { display: none; }
  .scene-mode > .panel.is-current,
  .scene-mode > .panel.is-leaving { visibility: visible; }
  .scene-mode > .panel.is-current { pointer-events: auto; }
  .scene-mode > .panel .panel__inner { margin-bottom: max(9svh, 88px); }
  .scene-mode > .panel[data-scene="2"] .toplights { display: none; }
  .scene-nav {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 75;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 12px;
    border: 1px solid rgba(232, 163, 61, .35);
    border-radius: 40px;
    background: rgba(61, 15, 23, .8);
    color: var(--ink);
    font: 12px var(--sans);
    backdrop-filter: blur(8px);
  }
  .scene-nav button {
    background: none;
    color: var(--marigold);
    border: 0;
    width: 34px;
    height: 34px;
    font-size: 22px;
    cursor: pointer;
  }
  .scene-nav button:disabled { opacity: .3; cursor: default; }
  .scene-nav button:focus-visible { outline: 1px solid var(--marigold); border-radius: 50%; }
  body.is-gated .scene-nav { visibility: hidden; }
}
@media print { .scene-nav { display: none; } }

/* ── Placement classes ────────────────────────────────────────────────── */
.layer.el.fig-left {
  inset: auto; left: 24%; right: auto; bottom: 0;
  width: 54%; height: 120%;
}
.layer.el.fig-right {
  inset: auto; right: 4%; left: auto; bottom: 0;
  width: 52%; height: 120%;
}
.layer.el.fig-cl {
  inset: auto; left: 2%; right: auto; bottom: 0;
  width: 60%; height: 104%;
}
.layer.el.fig-cr {
  inset: auto; right: 7%; left: auto; bottom: -4%;
  width: 64%; height: 112%;
}
.layer.el.fig-center {
  inset: auto; left: 18%; right: 18%; bottom: 0;
  height: 98%;
}
.layer.el.fig-seated {
  inset: auto; left: 20%; right: 20%; bottom: 0;
  height: 78%;
}

.panel--finale .layer.el.fig-seated {
  left: 30%; right: 30%;
  height: 42%;
}
@media (max-width: 720px) {
  .panel--finale .layer.el.fig-seated { left: 14%; right: 14%; height: 34%; }
}
.panel--finale .layer.el.fig-seated.is-ready { opacity: .9; }
.panel--finale .footer { position: relative; z-index: 61; }

.panel--tall .layer.el.fig-center {
  left: auto; right: 0;
  width: 62%;
  height: 88%;
}
.panel--tall .layer.el.fig-center.is-ready { opacity: .82; }
.layer.el.hands {
  inset: 6% 12% 26% 12%;
  background-size: contain;
  background-position: center;
}
.layer.el.branch {
  inset: 0;
  background-size: cover;
  background-position: center top;
}
.layer.el.toplights {
  inset: 0 0 auto 0;
  height: 46%;
  background-size: 100% auto;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 92%);
}
.layer.el.fill {
  inset: -6%;
  background-size: cover;
  background-position: center bottom;
}
.layer.el.glow { z-index: 0; }

.panel[data-scene="5"] .layer.el.fill:not(.glow) { z-index: 0; }
.panel[data-scene="5"] .layer.el.fill:not(.glow).is-ready { opacity: .45; }

/* Bridal choora and kalire replace the former mehendi hands. */
.layer.el.bridal-keepsakes {
  inset: 17% auto auto 9%;
  width: 55%;
  height: 70%;
  background-size: contain;
  background-position: center;
}
@media (max-width: 720px) {
  .layer.el.bridal-keepsakes {
    inset: 17svh 8vw auto;
    width: auto;
    height: 53svh;
  }
}

/* ── Feathering ───────────────────────────────────────────────────────── */
.layer.el.fig-left,
.layer.el.fig-right,
.layer.el.fig-cl,
.layer.el.fig-cr,
.layer.el.fig-center,
.layer.el.fig-seated {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 100%);
  mask-composite: intersect;
}
.layer.el.branch {
  -webkit-mask-image: radial-gradient(140% 120% at 15% 5%, #000 55%, transparent 85%);
          mask-image: radial-gradient(140% 120% at 15% 5%, #000 55%, transparent 85%);
}
.layer.el.hands {
  -webkit-mask-image: radial-gradient(ellipse 86% 88% at 50% 50%, #000 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 86% 88% at 50% 50%, #000 78%, transparent 100%);
}
.layer.el.fill {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* ── Cinematic grade ──────────────────────────────────────────────────── */
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(24, 10, 12, .52) 100%),
    linear-gradient(180deg, rgba(24, 10, 12, .60) 0%, transparent 34%),
    linear-gradient(0deg,   rgba(24, 10, 12, .58) 0%, transparent 32%);
}
.panel[data-text$="left"]::after  { background-image:
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(24,10,12,.52) 100%),
    linear-gradient(180deg, rgba(24,10,12,.60) 0%, transparent 34%),
    linear-gradient(0deg,   rgba(24,10,12,.58) 0%, transparent 32%),
    linear-gradient(90deg,  rgba(24,10,12,.58) 0%, transparent 46%); }
.panel[data-text$="right"]::after { background-image:
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(24,10,12,.52) 100%),
    linear-gradient(180deg, rgba(24,10,12,.60) 0%, transparent 34%),
    linear-gradient(0deg,   rgba(24,10,12,.58) 0%, transparent 32%),
    linear-gradient(270deg, rgba(24,10,12,.58) 0%, transparent 46%); }
.panel[data-text="center"]::after { background-image:
    radial-gradient(120% 100% at 50% 50%, rgba(24,10,12,.30) 0%, rgba(24,10,12,.62) 100%),
    linear-gradient(180deg, rgba(24,10,12,.50) 0%, transparent 30%); }

/* ── Scene content ──────────────────────────────────────────────────── */
.panel__inner {
  position: relative;
  z-index: 60;
  margin: 9svh var(--pad-x);
  max-width: min(34ch, 84vw);
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .7));
}
.panel__inner--wide { max-width: min(62ch, 86vw); }

.panel--tall .panel__inner--wide {
  max-width: min(1080px, 86vw);
  justify-self: stretch;
  width: 100%;
}

.panel[data-text$="right"]  .panel__inner { text-align: right; }
.panel[data-text="center"]  .panel__inner { text-align: center; }

.eyebrow {
  font-family: var(--sans);
  font-size: clamp(.82rem, 1.15vw, .98rem);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

.names {
  font-size: clamp(2.8rem, 7.5vw, 6.4rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.01em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .7);
}
.amp {
  display: block;
  font-size: .38em;
  font-style: italic;
  color: var(--marigold);
  margin: .12em 0;
  font-weight: 400;
}

.scene-title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .7);
}

.date-big {
  font-size: clamp(1.9rem, 5.4vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .7);
}

.lede {
  margin-top: 1.2rem;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .7);
}
.lede--story { max-width: 46ch; margin-inline: auto; }

.crest {
  width: clamp(46px, 6vw, 74px);
  margin-bottom: 1.4rem;
  opacity: .92;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .5));
}
.crest--sm { width: clamp(36px, 4.4vw, 54px); }
.panel[data-text$="right"] .crest { margin-left: auto; }
.panel[data-text="center"] .crest { margin-inline: auto; }

/* ── Families (scene 2) ─────────────────────────────────────────────── */
.blessing {
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.6rem;
}
.families {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.6rem);
  margin-top: .6rem;
}
.family__label {
  font-family: var(--sans);
  font-size: .86rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--marigold);
  margin-bottom: .7rem;
  text-wrap: balance;
}
.family__name {
  font-size: clamp(1.05rem, 2.1vw, 1.6rem);
  line-height: 1.45;
}
.family__note {
  margin-top: .5rem;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 300;
  color: var(--ink-faint);
  line-height: 1.5;
}
.family__sep img {
  width: clamp(30px, 4vw, 52px);
  opacity: .85;
}

/* ── Countdown (scene 3) ────────────────────────────────────────────── */
.countdown {
  display: flex;
  gap: clamp(.9rem, 2.6vw, 2rem);
  margin-top: 1.8rem;
}
.panel[data-text$="right"] .countdown { justify-content: flex-end; }
.countdown__unit { display: grid; gap: .3rem; text-align: center; }
.countdown__n {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.countdown__l {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Functions (scene 4) ────────────────────────────────────────────── */
.functions {
  display: grid;
  gap: clamp(.9rem, 2vw, 1.3rem);
  margin-top: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  text-align: left;
}
.fn {
  background: rgba(26, 12, 14, .48);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(232, 163, 61, .3);
  border-radius: 3px;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
}
.fn__name {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--marigold);
  margin-bottom: .6rem;
}
.fn__when {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--ink);
  margin-bottom: .7rem;
}
.fn__time { color: var(--ink-faint); }
.fn__venue { font-size: 1.02rem; line-height: 1.45; }
.fn__addr {
  display: block;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 300;
  color: var(--ink-faint);
  margin-top: .2rem;
}
.fn__meta {
  margin-top: .7rem;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 300;
  color: var(--ink-soft);
}
.fn__meta span {
  color: var(--marigold);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-right: .4rem;
}
.fn__meta--note { font-style: italic; }
.fn__map {
  display: inline-block;
  margin-top: .9rem;
  font-family: var(--sans);
  font-size: .86rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marigold);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 163, 61, .45);
  padding-bottom: .2rem;
  transition: color .25s, border-color .25s;
}
.fn__map:hover, .fn__map:focus-visible { color: var(--ink); border-color: var(--ink); }

/* ── Things to know (scene 5) ───────────────────────────────────────── */
.know { display: grid; gap: 1rem; margin-top: 1.4rem; }
.know__row { display: grid; gap: .25rem; }
.panel[data-text$="right"] .know__row { justify-items: end; }
.know__k {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--marigold);
}
.know__v { font-size: 1.14rem; line-height: 1.45; color: var(--ink-soft); }
.know__v a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(251,240,228,.35); }

/* ── Hashtag / Instagram / film (scene 7) ───────────────────────────── */
.hashtag {
  container-type: inline-size;
  font-size: clamp(1.15rem, 4.4vw, 3rem);
  font-weight: 600;
  color: var(--marigold);
  line-height: 1.15;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .7);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.hashtag { font-size: calc(clamp(1.15rem, 4.4vw, 3rem) * var(--fit, 1)); }

.panel[data-scene="7"] .panel__inner { max-width: min(46ch, 82vw); }
.film { margin-top: 1.6rem; }
.film__label {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .7rem;
}
.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(232, 163, 61, .3);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0, 0, 0, .45);
}
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.4rem;
  padding: .8rem 1.5rem;
  font-family: var(--sans);
  font-size: .88rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.btn__ico { width: 17px; height: 17px; flex: none; }
.btn--ghost {
  color: var(--ink);
  border: 1px solid rgba(232, 163, 61, .5);
  background: rgba(26, 12, 14, .35);
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--marigold); color: var(--maroon-d); border-color: var(--marigold); }
.btn--solid {
  width: 100%;
  justify-content: center;
  border: 0;
  background: var(--marigold);
  color: var(--maroon-d);
  font-weight: 500;
}
.btn--solid:hover, .btn--solid:focus-visible { background: #F4BC5C; }

/* ── Cards, forms (scene 8) ─────────────────────────────────────────── */
.card {
  background: rgba(26, 12, 14, .55);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border: 1px solid rgba(232, 163, 61, .28);
  border-radius: 4px;
  padding: clamp(1.3rem, 3.4vw, 2.2rem);
  margin-bottom: clamp(1rem, 2.6vw, 1.6rem);
  text-align: left;
}
.form { margin-top: 1.4rem; display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.field label {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .72rem .85rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(232, 163, 61, .28);
  border-radius: 2px;
  transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 4.5rem; font-family: var(--sans); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--marigold);
  background: rgba(0, 0, 0, .5);
}

.field--functions:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  font-family: var(--sans);
  font-size: .9rem;
  padding: .3rem 0;
}
.field--functions label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.field--functions input[type="checkbox"] { accent-color: var(--marigold); width: 1rem; height: 1rem; }

.status {
  font-family: var(--sans);
  font-size: .96rem;
  color: var(--marigold);
  min-height: 1.2em;
}

/* ── Wish wall ────────────────────────────────────────────────────────── */
.wishwall { margin-top: 1.6rem; display: grid; gap: .8rem; }
.wishwall:empty { display: none; }
.acp-invites-wish {
  background: rgba(0, 0, 0, .28);
  border-left: 2px solid var(--marigold);
  border-radius: 2px;
  padding: .9rem 1.1rem;
  transition: opacity .36s var(--ease);
}
.wish-hidden { display: none; }
.wish-out { opacity: 0; }
.acp-invites-wish-message { font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft); }
.acp-invites-wish-author {
  display: block;
  margin-top: .5rem;
  font-family: var(--sans);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marigold);
}

/* ── RSVP ────────────────────────────────────────────────────────── */
.rsvp-ask {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  color: var(--ink-soft);
}
.rsvp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
}
.rsvp-actions .btn {
  width: auto;
  flex: 1 1 12rem;
  margin-top: 1rem;
  justify-content: center;
  text-align: center;
}
.rsvp-step[hidden], .rsvp-choice[hidden] { display: none; }

.rsvp-miss {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.4vw, 1.8rem);
  color: var(--marigold);
  margin-top: .6rem;
}
.rsvp-miss-sub {
  margin-top: .5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.rsvp-back {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.rsvp-back:hover, .rsvp-back:focus-visible { color: var(--marigold); }

/* ── View all wishes ─────────────────────────────────────────────────── */
.wish-viewall {
  display: block;
  margin: 1.2rem auto 0;
  padding: .6rem 1.4rem;
  border: 1px solid rgba(232, 163, 61, .5);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marigold);
  cursor: pointer;
}
.wish-viewall[hidden] { display: none !important; }
.wish-viewall:hover, .wish-viewall:focus-visible { background: rgba(232, 163, 61, .12); }

.wishall {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 5, 7, .72);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease), visibility .3s;
}
.wishall.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.wishall__dialog {
  width: min(640px, 100%);
  max-height: 86svh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  border: 1px solid rgba(232, 163, 61, .32);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .55);
}
.wishall__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem .8rem;
  border-bottom: 1px solid rgba(232, 163, 61, .22);
  flex: none;
}
.wishall__title {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--marigold);
  margin: 0;
}
.wishall__close {
  border: 0;
  background: none;
  padding: .2rem;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
}
.wishall__close:hover, .wishall__close:focus-visible { color: var(--marigold); }
.wishall__list {
  overflow-y: auto;
  display: grid;
  gap: .8rem;
  padding: 1rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
}
@media (min-width: 700px) {
  .wishall { align-items: center; padding: 4vh 4vw; }
  .wishall__dialog { border-radius: 10px; max-height: 82svh; }
  .wishall__list { grid-template-columns: 1fr 1fr; }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer { text-align: center; padding-top: clamp(1.6rem, 4vw, 2.6rem); }
.footer__orn { width: clamp(110px, 22vw, 190px); margin: 0 auto 1.2rem; opacity: .85; }
.footer__names { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 600; }
.footer__date { font-family: var(--sans); font-size: .95rem; letter-spacing: .16em; color: var(--ink-faint); margin-top: .4rem; }

/* ── Scroll cue ─────────────────────────────────────────────────────── */
.cue {
  position: absolute;
  bottom: 4svh; right: 5vw;
  z-index: 60;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: grid;
  justify-items: center;
  gap: .6rem;
  pointer-events: none;
}
.cue::after {
  content: "";
  width: 1px; height: 32px;
  background: linear-gradient(var(--ink-faint), transparent);
  animation: cueDrop 1.8s var(--ease) infinite;
}
@keyframes cueDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Gate ───────────────────────────────────────────────────────────── */
.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8vw;
  --gate-shift: 12%;
  background: var(--night);
  transition: opacity .8s var(--ease), visibility .8s;
}
.gate__art {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 35%, #7A3520 0%, #2E1310 55%, #180A0C 100%);
  opacity: .95;
  will-change: transform;
}
.gate__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gate-img, none);
  background-size: cover;
  background-position: center 68%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.gate__art.is-ready::after { opacity: 1; }
.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24, 10, 12, .5) 0%, transparent 22%),
    linear-gradient(0deg,   rgba(24, 10, 12, .5) 0%, transparent 24%);
}
.gate__inner {
  position: relative;
  z-index: 1;
  transform: translateX(var(--gate-shift, 0));
  padding: clamp(2.4rem, 5vw, 4rem) clamp(2.4rem, 6vw, 5rem);
  margin-bottom: 0;
}
.gate__inner::before {
  content: "";
  position: absolute;
  inset: -16% -22%;
  z-index: -1;
  background: radial-gradient(62% 58% at 50% 50%,
    rgba(22, 9, 11, .52) 0%,
    rgba(22, 9, 11, .34) 46%,
    rgba(22, 9, 11, .14) 74%,
    transparent 100%);
}
.gate__mark { width: clamp(52px, 8vw, 88px); margin: 0 auto 1.6rem; opacity: .9; }
.gate__eyebrow {
  font-family: var(--sans);
  font-size: clamp(.8rem, 1.15vw, .94rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.2rem;
}
.gate__names { font-size: clamp(2.4rem, 8vw, 5.4rem); font-weight: 600; line-height: 1; }
.gate__amp { display: block; font-size: .34em; font-style: italic; color: var(--marigold); margin: .14em 0; font-weight: 400; }
.gate__date {
  margin-top: 1.2rem;
  font-family: var(--sans);
  font-size: .96rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.gate__btn {
  margin-top: 2.4rem;
  padding: .9rem 2rem;
  font-family: var(--sans);
  font-size: .88rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--maroon-d);
  background: var(--marigold);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.gate__btn:hover, .gate__btn:focus-visible { background: #F4BC5C; transform: translateY(-2px); }
.gate.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── Music toggle ───────────────────────────────────────────────────── */
.music {
  position: fixed;
  right: 4vw; bottom: 3.4svh;
  z-index: 150;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(232, 163, 61, .45);
  background: rgba(26, 12, 14, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--marigold);
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.music:hover, .music:focus-visible { background: rgba(26, 12, 14, .85); transform: scale(1.06); }
.music__on { width: 19px; height: 19px; }
.music__bars { display: none; align-items: flex-end; gap: 2px; height: 15px; }
.music__bars i { width: 2px; background: var(--marigold); animation: bars .9s ease-in-out infinite; }
.music__bars i:nth-child(1) { height: 40%; animation-delay: -.2s; }
.music__bars i:nth-child(2) { height: 90%; animation-delay: -.5s; }
.music__bars i:nth-child(3) { height: 60%; animation-delay: -.8s; }
@keyframes bars { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.music.is-playing .music__on { display: none; }
.music.is-playing .music__bars { display: flex; }

/* ══════════════════════════════════════════════════════════════════════
   TABLET
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --pad-x: 7vw; }

  .layer.el.fig-center { left: 12%; right: 12%; height: 106%; }
  .layer.el.fig-left   { left: 4%;  width: 68%; height: 132%; }
  .layer.el.fig-right  { right: -2%; width: 66%; height: 132%; }

  .panel--tall .layer.el.fig-center {
    left: auto; right: -6%;
    width: 82%;
    height: 104%;
  }
  .layer.el.fig-cl     { left: 0%;  width: 64%; height: 112%; }
  .layer.el.fig-cr     { right: 2%; width: 68%; height: 120%; }
  .layer.el.fig-seated { left: 16%; right: 16%; height: 84%; }

  .layer.el.fill:not(.glow) {
    inset: auto 0 -4% 0;
    height: 62%;
    background-size: 100% auto;
    background-position: center bottom;
  }

  .layer.el.toplights {
    inset: -10% 0 auto 0;
    height: 52%;
    background-size: 112% auto;
  }

  .layer.el.hands { inset: 5% 16% 30% 16%; }
  .panel--finale .layer.el.fig-seated { left: 26%; right: 26%; height: 48%; }
}

/* ══════════════════════════════════════════════════════════════════════
   TABLET PORTRAIT
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 721px) and (max-width: 1024px) and (orientation: portrait) {
  .layer { inset: -6%; }

  .panel__inner { max-width: min(52ch, 78vw); }
  .panel__inner--wide { max-width: min(680px, 82vw); }

  .layer.el.fig-left   { left: 0%;  width: 82%; height: 124%; }
  .layer.el.fig-right  { right: -4%; width: 80%; height: 122%; }
  .layer.el.fig-center { left: 2%;  right: 2%;  height: 112%; }
  .panel--tall .layer.el.fig-center {
    left: auto; right: -8%;
    width: 90%;
    height: 108%;
  }
  .layer.el.fig-cl     { left: -2%; width: 72%; height: 108%; }
  .layer.el.fig-cr     { right: 0%; width: 74%; height: 112%; }
  .layer.el.fig-seated { left: 12%; right: 12%; height: 80%; }
  .layer.el.hands      { inset: 8% 8% 24% 8%; }

  .layer.el.fill:not(.glow) { height: 54%; }
  .layer.el.toplights {
    inset: -12% 0 auto 0;
    height: 58%;
    background-size: 120% auto;
  }

  .functions { grid-template-columns: 1fr 1fr; }
  .families  { gap: 2rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  :root { --pad-x: 7vw; }

  .panel__inner { margin: 7svh var(--pad-x); max-width: 88vw; }
  .panel__inner--wide { max-width: 88vw; }

  .panel[data-text$="right"] .panel__inner,
  .panel[data-text$="right"] .know__row { text-align: left; justify-items: start; }
  .panel[data-text$="right"] .countdown { justify-content: flex-start; }
  .panel[data-text$="right"] .crest { margin-left: 0; }
  .panel[data-text$="right"] { place-items: start start; }
  .panel[data-text="bottom-right"] { place-items: end start; }

  .panel[data-scene="7"] { place-items: start start; }
  .panel[data-scene="7"] .panel__inner { margin-top: 2svh; margin-bottom: 0; }

  .panel[data-scene="4"] { place-items: start start; }
  .panel[data-scene="4"] .panel__inner { margin-top: 2svh; margin-bottom: 0; }

  .panel--tall { padding: 3svh 0 8svh; }

  .panel[data-scene="4"] .panel__inner,
  .panel[data-scene="7"] .panel__inner {
    max-width: 80vw;
    padding: 1.05rem .95rem;
  }
  .panel[data-scene="4"] .eyebrow,
  .panel[data-scene="7"] .eyebrow { font-size: .66rem; letter-spacing: .2em; }
  .panel[data-scene="4"] .scene-title,
  .panel[data-scene="7"] .scene-title { font-size: 1.62rem; }
  .panel[data-scene="7"] .hashtag { font-size: calc(clamp(1rem, 3.6vw, 2.2rem) * var(--fit, 1)); }
  .panel[data-scene="4"] .lede,
  .panel[data-scene="7"] .lede { font-size: .84rem; }
  .panel[data-scene="7"] .btn { margin-top: 1rem; padding: .66rem 1.1rem; font-size: .78rem; }
  .panel[data-scene="7"] .film__label { font-size: .72rem; margin-bottom: .45rem; }

  .panel[data-scene="4"] .functions { gap: .8rem; }
  .panel[data-scene="4"] .fn { padding: .85rem .8rem; }
  .panel[data-scene="4"] .fn__name { font-size: 1.06rem; }
  .panel[data-scene="4"] .fn__when,
  .panel[data-scene="4"] .fn__meta span,
  .panel[data-scene="4"] .fn__map { font-size: .8rem; }

  .panel[data-scene="7"] .panel__inner {
    max-height: 46svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .panel[data-scene="7"] .film { margin-top: .9rem; }
  .panel[data-scene="7"] .film__frame { max-width: 230px; }

  .layer { inset: -6%; }

  .panel--tall .panel[data-scene="7"] .layer.el.fig-center,
  .panel[data-scene="7"] .layer.el.fig-center {
    top: 292px; bottom: 0;
    left: -4%; right: -4%;
    width: auto;
    height: auto;
    background-size: auto 55%;
    background-position: 38% bottom;
  }

  .layer.el.fig-left   { left: -18%; width: 132%; height: 118%; bottom: 2%; }
  .layer.el.fig-right  { right: -18%; width: 130%; height: 116%; bottom: 2%; }
  .layer.el.fig-center { left: -16%; right: -16%; height: 120%; }

  .layer.el.toplights {
    inset: -4svh 0 auto 0;
    height: 34svh;
    background-size: 132% auto;
    background-position: center top;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 98%);
            mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 98%);
  }
  .panel--tall .layer.el.fig-center {
    top: auto; bottom: 0;
    left: auto; right: -14%;
    width: 96%;
    height: 44svh;
    background-size: contain;
    background-position: right bottom;
  }
  .layer.el.fig-seated { left: -4%; right: -4%; height: 76%; }
  .layer.el.fig-cl     { left: -8%; width: 112%; height: 100%; }
  .layer.el.fig-cr     { right: -8%; width: 114%; height: 104%; }
  .layer.el.hands      { inset: 10% -6% 18% -6%; }

  .panel--tall .layer.el.is-ready { opacity: .9; }
  .panel--tall .layer.el.fig-seated.is-ready { opacity: .72; }
  .panel--tall .layer.el.fig-center.is-ready { opacity: .9; }
  .panel--tall .layer.el.toplights.is-ready,
  .panel--tall .layer.el.branch.is-ready { opacity: 1; }
  .panel--tall .layer.el.glow.is-ready { opacity: .6; }

  .panel--tall .layer.el.glow {
    inset: 0;
    background-size: 100% 46svh;
    background-repeat: repeat-y;
    background-position: center top;
  }

  .panel--tall .panel__inner {
    background: linear-gradient(180deg, rgba(24, 10, 12, .34) 0%, rgba(24, 10, 12, .5) 100%);
    padding: 1.4rem 1.1rem;
    border-radius: 14px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .panel::after,
  .panel[data-text$="left"]::after,
  .panel[data-text$="right"]::after,
  .panel[data-text="center"]::after {
    background-image:
      radial-gradient(120% 90% at 50% 50%, transparent 0%, rgba(24, 10, 12, .40) 100%),
      linear-gradient(180deg, rgba(24, 10, 12, .62) 0%, rgba(24, 10, 12, .18) 38%,
                              rgba(24, 10, 12, .30) 68%, rgba(24, 10, 12, .72) 100%);
  }
  .panel--tall::after,
  .panel--tall[data-text$="left"]::after,
  .panel--tall[data-text$="right"]::after {
    background-image:
      radial-gradient(130% 100% at 50% 42%, transparent 0%, rgba(24, 10, 12, .26) 100%),
      linear-gradient(180deg, rgba(24, 10, 12, .5) 0%, rgba(24, 10, 12, .06) 34%,
                              rgba(24, 10, 12, .14) 62%, rgba(24, 10, 12, .58) 100%);
  }

  .functions { text-align: center; }
  .fn__when  { justify-content: center; }
  .fn__meta span { display: block; margin: 0 0 .2rem; }
  .fn__map { margin-inline: auto; }

  .families { grid-template-columns: 1fr; gap: 1.6rem; }
  .family__sep { justify-self: center; }
  .family__sep img { width: 34px; }

  .countdown { gap: 1.1rem; }
  .functions { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }

  .gate { padding: 6vw; align-content: center; --gate-shift: 0%; }
  .gate__inner { transform: translateY(-4svh); margin-bottom: 0; }
  .gate__art::after { background-size: cover; background-position: center; }
  .gate::before {
    background:
      radial-gradient(86% 46% at 50% 50%, rgba(24, 10, 12, .78) 0%, rgba(24, 10, 12, .36) 64%, transparent 100%),
      linear-gradient(180deg, rgba(24, 10, 12, .5) 0%, transparent 24%),
      linear-gradient(0deg,   rgba(24, 10, 12, .5) 0%, transparent 26%);
  }
  .gate__eyebrow { font-size: .74rem; letter-spacing: .2em; max-width: 26ch; margin-inline: auto; }
  .gate__mark { width: 44px; margin-bottom: 1.1rem; }
  .gate__btn { margin-top: 1.8rem; }

  .cue { right: auto; left: var(--pad-x); }
  .music { right: 5vw; bottom: 2.6svh; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .panel { min-height: 640px; }
  .panel__inner { margin: 6svh var(--pad-x); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroller { scroll-behavior: auto; }
  .cue::after { animation: none; }
  .music__bars i { animation: none; }
  .layer { transition: none; }
}

@media print {
  body { overflow: visible; background: #fff; color: #1a1a1a; }
  .scroller { height: auto; overflow: visible; }
  .gate, .music, .cue, .layer, .panel::after, .film { display: none !important; }
  .panel { min-height: auto; page-break-inside: avoid; padding: 1.5rem 0; background: none !important; }
  .panel__inner { margin: 0; max-width: 100%; filter: none; }
  .eyebrow, .family__label, .know__k, .fn__name, .amp, .hashtag { color: #8a5a12; }
  .lede, .know__v, .fn__addr, .family__note { color: #444; }
  .card, .fn { border-color: #ccc; background: none; backdrop-filter: none; }
  .form, .status, .btn { display: none !important; }
}

/* Soft illustrated glints around the Punjabi bridal keepsakes. */
.panel[data-scene="5"] .scene-art::after {
 content: ""; position: absolute; inset: 16% 10% 38%; pointer-events: none; z-index: 5;
 background: radial-gradient(circle at 20% 30%, #ffe6a2 0 2px, transparent 4px), radial-gradient(circle at 76% 35%, #ffe6a2 0 1px, transparent 4px), radial-gradient(circle at 40% 75%, #ffd983 0 2px, transparent 5px), radial-gradient(circle at 88% 65%, #ffe6a2 0 2px, transparent 4px);
 animation: bridal-glints 3.5s ease-in-out infinite alternate;
}
@keyframes bridal-glints { from { opacity: .15; translate: 0 5px; } to { opacity: .75; translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .panel[data-scene="5"] .scene-art::after { animation: none; opacity: .3; } }

/* Illustrated haveli courtyard replaces the bridal product still life. */
.panel[data-scene="5"] .bridal-keepsakes, .panel[data-scene="5"] .hands { display: none; }
.panel[data-scene="5"] .scene-art > .bg { inset: -2%; background-position: center; animation: haveli-breathe 9s ease-in-out infinite alternate; }
.panel[data-scene="5"] .scene-art::after { inset: 9% 0 auto 0; height: 38%; background: radial-gradient(ellipse at 10% 40%, rgba(255,192,62,.45), transparent 12%), radial-gradient(ellipse at 22% 90%, rgba(255,192,62,.3), transparent 9%), radial-gradient(ellipse at 77% 90%, rgba(255,192,62,.3), transparent 9%); animation: haveli-lanterns 2.8s ease-in-out infinite alternate; }
@keyframes haveli-breathe { from { scale: 1; } to { scale: 1.025; } }
@keyframes haveli-lanterns { from { opacity: .3; } to { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .panel[data-scene="5"] .scene-art > .bg, .panel[data-scene="5"] .scene-art::after { animation: none; } }

/* Glowing fireflies drift through the haveli, clear of the invitation text. */
.haveli-fireflies { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.haveli-fireflies i { position: absolute; left: var(--fly-x); top: var(--fly-y); width: 4px; height: 4px; border-radius: 50%; background: #fff1b4; box-shadow: 0 0 7px 2px #ffc85c, 0 0 18px rgba(255,185,57,.5); animation: haveli-firefly var(--fly-duration) ease-in-out var(--fly-delay) infinite alternate; }
.haveli-fireflies i:nth-child(3n) { width: 3px; height: 3px; }
@keyframes haveli-firefly { 0% { opacity: .05; transform: translate(-10px, 12px); } 45% { opacity: .9; } 100% { opacity: .15; transform: translate(14px, -20px); } }
.scene-mode > .panel:not(.is-current) .haveli-fireflies i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .haveli-fireflies i { animation: none; opacity: .25; } }