/* ═══════════════════════════════════════════════════════════════
   Bloom Garden — light, airy floral wedding invitation.
   Palette, fonts, and sizing are CSS variables that bloom-garden.js
   overwrites from the InviBloom builder config, so the document
   restyles itself. The layout DNA is shared across the InviBloom
   static templates; Bloom Garden's identity lives in the pale ivory
   surface, blush-and-sage garden rules, the envelope-bloom opening,
   the filmed garden hero, and the canvas blush-petal drift.
═══════════════════════════════════════════════════════════════ */

:root {
  --surface: #fbf4ef;
  --ink: #4a4038;
  --accent: #c98b9b;
  --story-surface: #f4e9e2;
  --rsvp-surface: #5a3d47;
  --hero-overlay: rgba(60,44,50,.42);
  --font-display: Forum, Georgia, serif;
  --name-size: 56px;
  --font-body: "Cormorant Garamond", Georgia, serif;
  --font-ui: Jost, system-ui, -apple-system, sans-serif;
  --base-size: 16px;
  --ink-soft: color-mix(in srgb, var(--ink) 74%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink) 46%, transparent);
  --rule: color-mix(in srgb, var(--accent) 42%, transparent);
  --paper: color-mix(in srgb, var(--surface) 88%, #fff 12%);
  --panel: color-mix(in srgb, var(--surface) 92%, #fff 8%);
  --shadow: 0 26px 60px -34px rgba(120,90,95,.34);
  --gutter: 22px;
  --section-y: clamp(66px, 11vw, 120px);
  --texture: url("../img/section-pattern.png");
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: var(--base-size); line-height: 1.65; overflow-x: hidden;
  background-image:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 44%),
    radial-gradient(circle at 86% 88%, color-mix(in srgb, var(--story-surface) 60%, transparent) 0%, transparent 48%),
    var(--texture);
  background-size: auto, auto, 520px 520px;
  background-attachment: fixed, fixed, fixed;
  background-blend-mode: multiply, normal, soft-light;
}
body.intro-active { overflow: hidden; height: 100dvh; }
img, video { max-width: 100%; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); }

/* ── Ornaments ── */
.ornament-divider { display: block; width: min(230px, 62%); height: 24px; margin: 16px auto; }
.corner-sprig { position: absolute; width: clamp(70px, 15vw, 122px); height: clamp(70px, 15vw, 122px); opacity: 0.34; pointer-events: none; z-index: 2; }
.corner-sprig--tl { top: 12px; left: 8px; }
.corner-sprig--tr { top: 12px; right: 8px; transform: scaleX(-1); }
.corner-sprig--bl { bottom: 12px; left: 8px; transform: scaleY(-1); }
.corner-sprig--br { bottom: 12px; right: 8px; transform: scale(-1); }

.section { position: relative; padding: var(--section-y) var(--gutter); --section-plate: none; }
/* No full-width plate here — the scratch card itself carries scratch-card.jpg,
   so the section stays plain and the card stands out instead of blending in. */
/* Every section rides the same pressed-flower pattern by default; Codex can
   later drop a per-section plate (section-events.jpg, …) to override any one. */
.reveal-date { --section-plate: none; }
.events { --section-plate: url("../img/section-pattern.png"); }
.couple { --section-plate: url("../img/section-pattern.png"); }
.gallery { --section-plate: url("../img/section-pattern.png"); }
.things { --section-plate: url("../img/section-pattern.png"); }
.venue { --section-plate: url("../img/section-pattern.png"); }
.rsvp { --section-plate: url("../img/section-pattern.png"); }
.calendar { --section-plate: url("../img/section-pattern.png"); }
/* Full-bleed section plate — the artwork covers the whole section edge-to-edge,
   no inset card frame; the veil gradients keep overlaid text legible. */
.section:not(.hero)::before,
.story-scroll::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface) 92%, #fff 6%)),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 22%, transparent 78%, color-mix(in srgb, var(--accent) 8%, transparent)),
    var(--section-plate);
  background-size: cover, cover, 520px 520px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center;
  background-blend-mode: normal, normal, soft-light;
  box-shadow: inset 0 0 120px color-mix(in srgb, var(--accent) 12%, transparent);
}
/* A single hairline between stacked sections keeps the rhythm without a card. */
.section:not(.hero)::after,
.story-scroll::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  opacity: .6;
}
.section:not(.hero) > * {
  position: relative;
  z-index: 1;
}
.section-head { text-align: center; margin: 0 auto clamp(28px, 6vw, 46px); max-width: 640px; }
.section-eyebrow { margin: 0; font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); }
.section-title { margin: 10px 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 6.4vw, 2.9rem); letter-spacing: 0.05em; line-height: 1.15; }
.section-title--sm { font-size: clamp(1.5rem, 4.6vw, 2rem); }

/* ── Scroll reveals ── */
body.reveal-armed .reveal-item { opacity: 0; transform: translateY(28px); }
body.reveal-armed .reveal-item.is-visible { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(0.22,0.61,0.36,1), transform 1s cubic-bezier(0.22,0.61,0.36,1); }

/* ═══ Intro gate — the seal-break ═══ */
.intro {
  --drag-progress: 0;
  --drag-x: 0px;
  --gate-left: 0deg;
  --gate-right: 0deg;
  --seal-left: 0px;
  --seal-right: 0px;
  --seal-rotate-left: 0deg;
  --seal-rotate-right: 0deg;
  --seal-scale: 1;
  --seal-opacity: 1;
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; cursor: pointer;
  background:
    radial-gradient(ellipse at 50% 42%, #fffaf6 0%, var(--surface) 52%, color-mix(in srgb, var(--accent) 22%, var(--surface)) 100%),
    var(--texture);
  background-size: auto, 520px 520px; background-blend-mode: multiply, soft-light;
  touch-action: none;
  user-select: none;
  transition: opacity 0.68s ease 1.12s, visibility 0.68s linear 1.12s;
}
.intro.open-gates::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 48%, transparent), color-mix(in srgb, var(--surface) 72%, #000 8%)),
    url("../img/section-intro-door.jpg") center / cover no-repeat;
  opacity: 0.72;
}
.intro.is-dragging { cursor: grabbing; }
.intro.is-resetting .gate-door,
.intro.is-resetting .wax-half,
.intro.is-resetting .gate-glow {
  transition-duration: 0.36s;
  transition-timing-function: cubic-bezier(0.22,0.61,0.36,1);
}
body.intro-open .intro { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.intro.has-film .intro-film { display: block; }
.intro.has-film .intro-fallback { display: none; }
/* Film intro: crossfade straight into the hero the moment the film ends — drop
   the gate-swing delay so the film's last frame (flowers settled to the border)
   dissolves seamlessly into the hero's edge-framed garden. */
.intro.has-film { transition: opacity 0.7s ease; }
.intro-fallback { position: absolute; inset: 0; overflow: hidden; }

/* One drawn opening shows at a time; bloom-garden.js sets the family. Bloom
   Garden opens with the envelope; the other families are inert fallbacks. */
.op { display: none; position: absolute; inset: 0; }
.intro.open-envelope .op-envelope { display: grid; place-items: center; padding: 0 var(--gutter); }
.intro.open-curtain .op-curtain { display: block; }
.intro.open-gates .op-gates { display: block; }
.intro.open-lotus .op-lotus { display: grid; place-items: center; }
.intro.open-birds .op-birds { display: block; }

.op-kicker { margin: 0; font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.op-names { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(1.2rem, 5vw, 1.6rem); letter-spacing: 0.06em; }
.op-date { margin: 0; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink-soft); }

/* Wax-seal medallion badge — cracks and fades as the jaali doors part. */
.op-crest-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  display: grid; place-items: center; width: clamp(120px, 34vw, 188px); height: clamp(120px, 34vw, 188px);
  transition: transform 0.9s cubic-bezier(0.65,0,0.35,1), opacity 0.7s ease;
}
.op-crest-badge .seal-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)); animation: sealGlow 3.4s ease-in-out infinite; }
.op-crest-badge svg { width: 64px; height: 64px; }
@keyframes sealGlow { 0%,100% { filter: drop-shadow(0 10px 26px rgba(0,0,0,.55)); } 50% { filter: drop-shadow(0 0 34px color-mix(in srgb, var(--accent) 60%, transparent)); } }
body.intro-open .op-crest-badge { opacity: 0; transform: translate(-50%, -50%) scale(1.32); }

/* gates → Nomaya jaali doors, opened as real 3D leaves.
   The perspective lives on the stage (one shared vanishing point) so both
   doors swing into the same space; each leaf hinges on its OUTER edge and the
   inner edge catches gold light. The intro itself fades only after the doors
   have swung (staggered below), so the motion reads physical, not a crossfade. */
.op-gates { position: absolute; inset: 0; }
.op-gates .gate-stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 46%; transform-style: preserve-3d; }
.op-gates .gate-glow { position: absolute; left: 50%; top: 46%; width: 60vmin; height: 60vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, #fff 10%) 0%, color-mix(in srgb, var(--accent) 16%, transparent) 34%, transparent 70%); opacity: var(--drag-progress); transition: opacity 0.18s ease; }
body.intro-open .op-gates .gate-glow { opacity: 0.9; }
.op-gates .gate-door {
  position: absolute; top: 0; bottom: 0; width: 50.4%;
  transform-style: preserve-3d; backface-visibility: hidden;
  box-shadow: 0 0 80px color-mix(in srgb, #000 60%, transparent);
  transition: transform 0.16s cubic-bezier(0.22,0.61,0.36,1), filter 0.16s ease;
  will-change: transform;
}
.op-gates .gate-face {
  position: absolute; inset: 0; overflow: hidden;
  background-color: color-mix(in srgb, var(--rsvp-surface) 84%, #000 16%);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 32%, color-mix(in srgb, #000 46%, transparent)),
    url("../img/jaali-door.png");
  background-size: cover, cover; background-position: center; background-repeat: no-repeat;
  box-shadow: inset 0 0 140px color-mix(in srgb, #000 74%, transparent);
}
.op-gates .gate-edge { position: absolute; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 80%, #fff) 18%, var(--accent) 50%, color-mix(in srgb, var(--accent) 80%, #fff) 82%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); }
.gate-door--l { left: 0; transform-origin: left center; transform: rotateY(var(--gate-left)); }
.gate-door--r { right: 0; transform-origin: right center; transform: rotateY(var(--gate-right)); }
.gate-door--r .gate-face { transform: scaleX(-1); }
.gate-door--l .gate-edge { right: 0; }
.gate-door--r .gate-edge { left: 0; }
body.intro-open .op-gates .gate-door {
  transition: transform 1.28s cubic-bezier(0.16,0.88,0.28,1) 0.08s, filter 1.28s ease 0.08s;
  filter: brightness(1.12);
}
body.intro-open .op-gates .gate-door--l { transform: perspective(1500px) rotateY(-118deg) translateZ(14px); }
body.intro-open .op-gates .gate-door--r { transform: perspective(1500px) rotateY(118deg) translateZ(14px); }
.op-gates .gate-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); z-index: 3; background: linear-gradient(to bottom, transparent, var(--accent) 18%, color-mix(in srgb, var(--accent) 90%, #fff) 50%, var(--accent) 82%, transparent); opacity: 0.85; transition: opacity 0.4s ease; }
body.intro-open .op-gates .gate-seam { opacity: 0; }

/* Wax seal that genuinely breaks — two halves that split with a light flash. */
.op-gates .wax-seal { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 6; width: clamp(122px, 32vw, 180px); height: clamp(122px, 32vw, 180px); animation: sealBreathe 3.6s ease-in-out infinite; }
.op-gates .wax-half { position: absolute; top: 0; height: 100%; width: 50%; background-image: url("../img/seal-medallion.png"); background-repeat: no-repeat; background-size: 200% 100%; filter: drop-shadow(0 12px 26px rgba(0,0,0,.6)); opacity: var(--seal-opacity); transition: transform 0.16s cubic-bezier(0.22,0.61,0.36,1), opacity 0.16s ease; }
.op-gates .wax-half--l { left: 0; background-position: left center; transform-origin: right center; transform: translateX(var(--seal-left)) rotate(var(--seal-rotate-left)) scale(var(--seal-scale)); }
.op-gates .wax-half--r { right: 0; background-position: right center; transform-origin: left center; transform: translateX(var(--seal-right)) rotate(var(--seal-rotate-right)) scale(var(--seal-scale)); }
.op-gates .wax-flash { position: absolute; left: 50%; top: -8%; bottom: -8%; width: 2px; transform: translateX(-50%) scaleY(0); background: linear-gradient(to bottom, transparent, #fff, var(--accent), #fff, transparent); opacity: 0; }
@keyframes sealBreathe { 0%,100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.03); } }
body.intro-open .op-gates .wax-seal { animation: none; }
body.intro-open .op-gates .wax-half {
  transition: transform 0.78s cubic-bezier(0.16,0.88,0.28,1), opacity 0.54s ease 0.12s;
}
body.intro-open .op-gates .wax-half--l { transform: translateX(-54px) rotate(-22deg) scale(0.82); opacity: 0; }
body.intro-open .op-gates .wax-half--r { transform: translateX(54px) rotate(22deg) scale(0.82); opacity: 0; }
body.intro-open .op-gates .wax-flash { animation: crackFlash 0.55s ease-out forwards; }
@keyframes crackFlash { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); } 26% { opacity: 1; transform: translateX(-50%) scaleY(1); } 100% { opacity: 0; transform: translateX(-50%) scaleY(1); } }

/* envelope fallback (kept for non-gate opening styles) */
.env { position: relative; width: min(320px, 82vw); aspect-ratio: 1 / 0.66; transform-style: preserve-3d; filter: drop-shadow(0 26px 40px rgba(0,0,0,.5)); }
.env-back, .env-front, .env-flap { position: absolute; inset: 0; background: linear-gradient(155deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 74%, var(--accent) 14%) 100%); border: 1px solid var(--rule); border-radius: 6px; }
.env-back { z-index: 1; }
.env-front { z-index: 3; clip-path: polygon(0 22%, 50% 60%, 100% 22%, 100% 100%, 0 100%); }
.env-flap { z-index: 4; clip-path: polygon(0 0, 100% 0, 50% 62%); transform-origin: top center; animation: envFlap 3.6s ease-in-out infinite; }
@keyframes envFlap { 0%,55% { transform: rotateX(0); } 75%,100% { transform: rotateX(-24deg); } }
.env-letter { position: absolute; left: 7%; right: 7%; top: -12%; z-index: 2; padding: 20px 16px 26px; text-align: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; animation: envLetter 3.6s ease-in-out infinite; }
@keyframes envLetter { 0%,55% { transform: translateY(14%); } 80%,100% { transform: translateY(-14%); } }
.env-crest { display: block; width: 44px; height: 44px; margin: 0 auto 8px; }
.env-letter .ornament-divider { width: 70%; height: 16px; margin: 6px auto; }
.env-seal { position: absolute; left: 50%; top: 56%; z-index: 5; width: 58px; height: 58px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 62%, #000) 100%); box-shadow: 0 6px 16px -6px rgba(0,0,0,.6); }
.env-seal svg { width: 40px; height: 40px; opacity: 0.85; }
body.intro-open .op-envelope .env { animation: none; transform: scale(1.4); opacity: 0; transition: transform 0.9s ease, opacity 0.9s ease; }

/* curtain / lotus / birds fallbacks (dark-tinted, for other opening styles) */
.op-curtain .drape-panel { position: absolute; top: 0; bottom: 0; width: 50.5%;
  background-image: repeating-linear-gradient(to right, rgba(0,0,0,.34) 0px, rgba(255,255,255,.05) 14px, rgba(0,0,0,.34) 34px), linear-gradient(100deg, color-mix(in srgb, var(--rsvp-surface) 92%, #000) 0%, color-mix(in srgb, var(--rsvp-surface) 72%, var(--accent) 16%) 48%, color-mix(in srgb, var(--rsvp-surface) 92%, #000) 100%);
  background-size: 34px 100%, 100% 100%; transition: transform 1s cubic-bezier(0.65,0,0.35,1); }
.drape-panel--l { left: 0; border-right: 2px solid var(--accent); }
.drape-panel--r { right: 0; border-left: 2px solid var(--accent); }
body.intro-open .op-curtain .drape-panel--l { transform: translateX(-100%); }
body.intro-open .op-curtain .drape-panel--r { transform: translateX(100%); }
.op-lotus .lotus { position: relative; width: min(240px, 62vw); aspect-ratio: 1; }
.op-lotus .petal { position: absolute; left: 50%; top: 50%; width: 34%; height: 52%; margin: -26% 0 0 -17%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, #fff 24%) 0%, var(--accent) 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 100%; transition: transform 1.1s cubic-bezier(0.34,1.2,0.64,1), opacity 0.9s ease; }
.op-lotus .p1 { transform: rotate(0deg); } .op-lotus .p2 { transform: rotate(51deg); } .op-lotus .p3 { transform: rotate(102deg); }
.op-lotus .p4 { transform: rotate(153deg); } .op-lotus .p5 { transform: rotate(206deg); } .op-lotus .p6 { transform: rotate(257deg); } .op-lotus .p7 { transform: rotate(308deg); }
.op-lotus .lotus-core { position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; margin: -13% 0 0 -13%; border-radius: 50%; background: radial-gradient(circle at 40% 36%, color-mix(in srgb, var(--accent) 40%, #fff) 0%, var(--accent) 70%); box-shadow: 0 0 30px -4px color-mix(in srgb, var(--accent) 80%, transparent); }
body.intro-open .op-lotus .petal { opacity: 0; transform: scale(1.3) translateY(-30%); }
.op-birds .sky { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--accent) 8%) 0%, var(--surface) 100%); }
.op-birds .bird { position: absolute; width: 30px; height: 30px; color: var(--accent); opacity: 0.6; animation: birdFly linear infinite; }
.op-birds .bird::before, .op-birds .bird::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 3px; border-radius: 3px; background: currentColor; transform-origin: left center; }
.op-birds .bird::before { transform: translate(-100%,0) rotate(-24deg); } .op-birds .bird::after { transform: rotate(24deg); }
@keyframes birdFly { 0% { transform: translate(-12vw, 0); } 100% { transform: translate(112vw, -12vh); } }
.op-birds .b1 { top: 32%; animation-duration: 9s; } .op-birds .b2 { top: 44%; animation-duration: 11s; } .op-birds .b3 { top: 54%; animation-duration: 8s; } .op-birds .b4 { top: 38%; animation-duration: 12s; } .op-birds .b5 { top: 60%; animation-duration: 10s; }
body.intro-open .op-birds .bird { opacity: 0; transform: translateY(-40vh) scale(0.5); animation: none; }

.intro-hint { position: absolute; left: 0; right: 0; bottom: clamp(38px, 9vh, 76px); z-index: 6; text-align: center; }
.intro-hint-label { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 4.6vw, 1.55rem); letter-spacing: 0.14em; }
.intro-hint-sub { margin: 6px 0 0; font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); animation: hintPulse 2.4s ease-in-out infinite; }
@keyframes hintPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
body.intro-open .intro-hint { opacity: 0; transition: opacity 0.4s ease; }

/* ═══ Page ═══ */
.page { position: relative; opacity: 0; transition: opacity 1s ease 0.2s; }
body.intro-open .page { opacity: 1; }

.fx-layer { position: fixed; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.petal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-bit { position: absolute; top: -8%; will-change: transform; animation-name: fxFall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes fxFall { 0% { transform: translate3d(0,-10vh,0) rotate(0); opacity: 0; } 8% { opacity: 0.85; } 92% { opacity: 0.85; } 100% { transform: translate3d(var(--fx-drift,30px),112vh,0) rotate(540deg); opacity: 0; } }

/* ═══ Hero ═══ */
.hero { position: relative; min-height: 100dvh; display: grid; place-items: center; padding-block: clamp(90px,16vh,150px); text-align: center; overflow: hidden; color: #fff; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-photo, .hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-film { opacity: 0; transition: opacity 1s ease; }
.hero.has-film .hero-film { opacity: 1; }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--hero-overlay) 76%, transparent) 0%, var(--hero-overlay) 40%, color-mix(in srgb, var(--hero-overlay) 96%, #000 16%) 100%); }
.hero-inner { position: relative; z-index: 3; max-width: 680px; padding: 0 6px; }
.hero-kicker { margin: 0 0 18px; font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: color-mix(in srgb, #fff 84%, transparent); }
.hero-names { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.06; display: grid; gap: 6px; text-shadow: 0 10px 40px rgba(0,0,0,0.5); }
/* Cinematic mask-wipe reveal of each name */
.hero-name { font-size: min(var(--name-size), 15vw); letter-spacing: 0.04em; }
body.reveal-armed .hero-name, body.reveal-armed .hero-amp { clip-path: inset(0 0 110% 0); opacity: 0; }
body.intro-open .hero-name { animation: nameWipe 1.1s cubic-bezier(0.22,0.61,0.36,1) 0.5s forwards; }
body.intro-open .hero-amp { animation: nameWipe 1.1s cubic-bezier(0.22,0.61,0.36,1) 0.72s forwards; }
body.intro-open .hero-name:last-of-type { animation-delay: 0.92s; }
@keyframes nameWipe { from { clip-path: inset(0 0 110% 0); opacity: 0; transform: translateY(0.24em); } to { clip-path: inset(0 0 -10% 0); opacity: 1; transform: none; } }
.hero-amp { font-family: var(--font-body); font-style: italic; font-size: calc(min(var(--name-size),15vw) * 0.46); color: color-mix(in srgb, var(--accent) 82%, #fff); }
.hero .ornament-divider { margin: 20px auto; }
.hero-date { margin: 0; font-family: var(--font-display); font-size: clamp(1rem,3.6vw,1.3rem); letter-spacing: 0.18em; }
/* Bride/groom family lines carried up from the (now removed) invite card. */
.hero-relation { margin: 6px 0 0; font-family: var(--font-body); font-size: clamp(0.86rem,2.9vw,1.04rem); letter-spacing: 0.04em; color: color-mix(in srgb, #fff 82%, transparent); }
.hero-relation + .hero-venue { margin-top: 16px; }
.hero-venue { margin: 8px 0 0; font-family: var(--font-ui); font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, #fff 78%, transparent); }
.hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: 8px; text-decoration: none; color: #fff; }
.hero-scroll-label { font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.75; }
.hero-scroll-dot { width: 1px; height: 42px; background: linear-gradient(to bottom, currentColor, transparent); animation: scrollDrop 2.2s ease-in-out infinite; }
@keyframes scrollDrop { 0%,100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } }

/* ═══ Blessing / invitation card ═══ */
.invite { background: var(--story-surface); }
.arch-card { position: relative; max-width: 560px; margin: 0 auto; padding: clamp(30px,7vw,54px) clamp(20px,5vw,44px) clamp(34px,7vw,56px); text-align: center; background: var(--paper); border-radius: 46% 46% 8px 8px / 30% 30% 8px 8px; border: 1px solid var(--rule); box-shadow: var(--shadow); }
.arch-card::after { content: ""; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 46% 46% 4px 4px / 30% 30% 4px 4px; pointer-events: none; }
.arch-card-body { position: relative; z-index: 1; }
.arch-crest { display: block; width: 58px; height: 58px; margin: 0 auto 14px; }
.invite-overline { margin: 0; font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.invite-kicker { margin: 12px auto 0; max-width: 34ch; font-style: italic; font-size: 1.04rem; color: var(--ink-soft); }
.invite-names { margin: 0; display: grid; gap: 14px; font-weight: 400; }
.invite-person { display: grid; gap: 6px; }
.invite-name { font-family: var(--font-display); font-size: clamp(1.7rem,7vw,2.5rem); letter-spacing: 0.05em; line-height: 1.1; }
.invite-relation { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-faint); text-transform: uppercase; }
.invite-amp { font-family: var(--font-body); font-style: italic; font-size: 1.5rem; color: var(--accent); }
.invite-date { margin: 0; font-family: var(--font-display); font-size: clamp(1.05rem,4vw,1.35rem); letter-spacing: 0.16em; }
.invite-venue { margin: 8px 0 0; font-family: var(--font-ui); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

/* ═══ Scratch ═══ */
.scratch { position: relative; width: min(430px, 100%); margin: 0 auto; aspect-ratio: 1 / 0.62; min-height: clamp(200px, 56vw, 262px); border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: var(--paper); overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.75), 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); touch-action: none; }
.scratch-under { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 18px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 36%, transparent), color-mix(in srgb, var(--surface) 50%, transparent)), url("../img/scratch-card.jpg") center / cover no-repeat; }
.scratch-eyebrow { margin: 0; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.scratch-date { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(1.35rem,6vw,1.95rem); letter-spacing: 0.05em; }
.scratch-day, .scratch-time { margin: 0; font-family: var(--font-ui); font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity 0.6s ease; }
.scratch.is-cleared .scratch-canvas { opacity: 0; pointer-events: none; }
.scratch-hint { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); pointer-events: none; transition: opacity 0.4s ease; }
.scratch.is-cleared .scratch-hint { opacity: 0; }
.scratch.style-gift-date .scratch-canvas, .scratch.style-royal-date .scratch-canvas { display: none; }
.scratch.style-gift-date, .scratch.style-royal-date { cursor: pointer; }
.scratch.style-gift-date::before, .scratch.style-royal-date::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 88%, #000 8%) 0%, color-mix(in srgb, var(--accent) 60%, #fff 20%) 52%, color-mix(in srgb, var(--accent) 88%, #000 8%) 100%); transition: transform 0.8s cubic-bezier(0.65,0,0.35,1), opacity 0.6s ease; }
.scratch.style-royal-date::before { transform-origin: top center; }
.scratch.style-gift-date.is-cleared::before { transform: translateY(-101%); }
.scratch.style-royal-date.is-cleared::before { transform: scaleY(0); }

/* ═══ Countdown ═══ */
.countdown { background: var(--story-surface); }
.cd-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px,2.4vw,18px); max-width: 560px; margin: 0 auto; }
.cd-cell { display: grid; gap: 6px; justify-items: center; padding: clamp(14px,3.4vw,22px) 6px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.cd-num { font-family: var(--font-display); font-size: clamp(1.3rem,6.4vw,2.1rem); line-height: 1; color: var(--accent); }
.cd-label { font-family: var(--font-ui); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }

/* ═══ Events — parchment-on-dark timeline ═══ */
.events-list { max-width: 620px; margin: 0 auto; }
.events-list.mode-timeline { position: relative; display: grid; gap: clamp(22px,5vw,34px); padding-left: 42px; }
.events-list.mode-timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ink) 14%, transparent) 12%, color-mix(in srgb, var(--ink) 14%, transparent) 88%, transparent); }
/* A bright gold thread draws down the timeline as it scrolls into view. */
.events-list.mode-timeline::after { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1.5px; transform-origin: top center; transform: scaleY(var(--timeline-progress, 1)); background: linear-gradient(to bottom, transparent, var(--accent) 10%, var(--accent) 90%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
.evt { position: relative; }
.events-list.mode-timeline .evt::before { content: ""; position: absolute; left: -34px; top: 22px; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--surface), 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); }
.evt-card { position: relative; padding: clamp(18px,4.4vw,26px); border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.evt-photo { display: block; width: 100%; height: clamp(130px,30vw,190px); object-fit: cover; border-radius: 8px; margin-bottom: 14px; }
.evt-name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem,4.6vw,1.5rem); letter-spacing: 0.05em; }
.evt-meta { margin: 6px 0 0; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.evt-meta + .evt-meta { color: var(--ink-faint); text-transform: none; letter-spacing: 0.06em; }
.evt-desc { margin: 12px 0 0; font-size: 1.04rem; color: var(--ink-soft); }
.evt-map { display: inline-block; margin-top: 14px; font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
.events-list.mode-scroll { display: grid; gap: clamp(18px,4vw,28px); }
.events-list.mode-swipe { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; max-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
.events-list.mode-swipe::-webkit-scrollbar { display: none; }
.events-list.mode-swipe .evt { flex: 0 0 min(78vw,340px); scroll-snap-align: center; }
.events-list.mode-swipe .evt-card { height: 100%; }
/* A neutral wrapper so every mode can share one card structure. */
.evt-frame { display: block; }
.evt-body { display: block; }

/* Events — laavan-style: each ceremony is a separately framed photo with its
   details (name · date · time · venue · note) centred directly beneath it. */
.events-list.mode-image-overlay { display: grid; gap: clamp(34px,6vw,54px); max-width: 900px; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); }
.events-list.mode-image-overlay .evt-card { padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; text-align: center; }
.events-list.mode-image-overlay .evt-frame { position: relative; margin: 0 auto clamp(18px,3.4vw,24px); padding: clamp(8px,1.8vw,11px); border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent); border-radius: 12px; background: var(--paper); box-shadow: 0 30px 56px -34px rgba(0,0,0,.8), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); }
.events-list.mode-image-overlay .evt-frame::after { content: ""; position: absolute; inset: clamp(8px,1.8vw,11px); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 6px; pointer-events: none; }
.events-list.mode-image-overlay .evt-photo { width: 100%; height: clamp(210px,50vw,290px); margin: 0; border-radius: 5px; filter: saturate(.97) brightness(.95); }
.events-list.mode-image-overlay .evt-body { padding: 0; }
.events-list.mode-image-overlay .evt-name { font-size: clamp(1.4rem,5.4vw,1.85rem); }
.events-list.mode-image-overlay .evt-meta { margin-top: 8px; }
.events-list.mode-image-overlay .evt-desc { margin-left: auto; margin-right: auto; max-width: 42ch; }
.events-list.mode-image-overlay .evt-card:hover { transform: none; }
.events-list.mode-image-overlay .evt-card:hover .evt-frame { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 72%, transparent); box-shadow: 0 40px 70px -34px rgba(0,0,0,.82), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.events-list.mode-image-overlay .evt-frame { transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease; }

/* Each ceremony card slides in, alternating from the left and the right. */
@keyframes evtInLeft { from { opacity: 0; transform: translateX(-84px); } }
@keyframes evtInRight { from { opacity: 0; transform: translateX(84px); } }
body.reveal-armed .events-list .evt:nth-child(odd).is-visible { animation-name: evtInLeft; }
body.reveal-armed .events-list .evt:nth-child(even).is-visible { animation-name: evtInRight; }
body.reveal-armed .events-list .evt { opacity: 0; }
body.reveal-armed .events-list .evt.is-visible { opacity: 1; animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.22,0.61,0.36,1); animation-fill-mode: both; }
.motion-slide-left .evt.is-visible { animation-name: evtSlideLeft; }
.motion-slide-right .evt.is-visible { animation-name: evtSlideRight; }
.motion-push-up .evt.is-visible, .motion-stagger .evt.is-visible { animation-name: evtPushUp; }
.motion-scale .evt.is-visible { animation-name: evtScale; }
.motion-unroll .evt.is-visible { animation-name: evtUnroll; }
@keyframes evtSlideLeft { from { opacity: 0; transform: translateX(46px); } }
@keyframes evtSlideRight { from { opacity: 0; transform: translateX(-46px); } }
@keyframes evtPushUp { from { opacity: 0; transform: translateY(38px); } }
@keyframes evtScale { from { opacity: 0; transform: scale(0.88); } }
@keyframes evtUnroll { from { opacity: 0; transform: perspective(700px) rotateX(-72deg); transform-origin: top center; } }

/* ═══ Meet the couple — arched portrait ═══ */
.couple { background: var(--story-surface); text-align: center; }
.couple-arch { width: min(300px,76vw); aspect-ratio: 1 / 1.28; margin: 0 auto clamp(22px,5vw,34px); border-radius: 50vw 50vw 10px 10px; border: 1px solid var(--rule); padding: 8px; background: var(--paper); box-shadow: var(--shadow); }
.couple-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50vw 50vw 6px 6px; display: block; }
.couple-story { max-width: 46ch; margin: 0 auto; font-size: 1.12rem; font-style: italic; color: var(--ink-soft); }
.couple-hashtag { margin: 22px 0 0; font-family: var(--font-ui); font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); }

/* ═══ Gallery ═══ */
.gallery-grid { max-width: 720px; margin: 0 auto; display: grid; gap: 10px; }
.gallery-item { position: relative; padding: 0; border: 1px solid var(--rule); border-radius: 8px; background: none; overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.gallery-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../img/gallery-frame.png") center / 100% 100% no-repeat; z-index: 2; }
.gallery-item img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22,0.61,0.36,1), filter 0.6s ease; filter: saturate(0.92) brightness(0.94); }
.gallery-item:hover img { transform: scale(1.06); filter: none; }
.gallery-grid.layout-grid-2 { grid-template-columns: repeat(2,1fr); }
.gallery-grid.layout-grid-3 { grid-template-columns: repeat(3,1fr); }
.gallery-grid.layout-stacked { grid-template-columns: 1fr; }
.gallery-grid.layout-stacked .gallery-item { aspect-ratio: 4/3; }
.gallery-grid.layout-mosaic { grid-template-columns: repeat(4,1fr); grid-auto-rows: minmax(78px,auto); }
.gallery-grid.layout-mosaic .gallery-item { aspect-ratio: auto; grid-column: span 2; grid-row: span 2; }
.gallery-grid.layout-mosaic .gallery-item:nth-child(4n+1) { grid-column: span 4; grid-row: span 3; }
.gallery-grid.layout-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; max-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
.gallery-grid.layout-carousel::-webkit-scrollbar { display: none; }
.gallery-grid.layout-carousel .gallery-item { flex: 0 0 min(70vw,300px); scroll-snap-align: center; }

/* ═══ Venue ═══ */
.venue-card { position: relative; max-width: 480px; margin: 0 auto; padding: clamp(28px,6vw,44px) clamp(20px,5vw,34px); text-align: center; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.venue-sprig { position: absolute; right: -14px; bottom: -14px; width: 116px; height: 116px; opacity: 0.18; pointer-events: none; }
.venue-name { margin: 0; position: relative; font-family: var(--font-display); font-size: clamp(1.3rem,5.2vw,1.75rem); letter-spacing: 0.05em; }
.venue-address { margin: 10px 0 0; position: relative; font-size: 1.04rem; color: var(--ink-soft); }
.venue-map { position: relative; display: inline-block; margin-top: 20px; padding: 12px 26px; border-radius: 999px; border: 1px solid var(--accent); font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--accent); transition: background 0.3s ease, color 0.3s ease; }
.venue-map:hover { background: var(--accent); color: #10131a; }

/* ═══ Things to know — jaali-framed cards ═══ */
.things { background: var(--story-surface); }
.things-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; display: grid; gap: clamp(12px,3vw,18px); grid-template-columns: repeat(2, minmax(0,1fr)); }
.ttk-card { padding: clamp(20px,4.6vw,28px); text-align: center; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.ttk-card svg { width: 42px; height: 42px; margin: 0 auto 12px; display: block; color: var(--accent); opacity: 0.9; }
.ttk-label { margin: 0; font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.ttk-value { margin: 10px 0 0; font-size: 1rem; color: var(--ink-soft); }

/* ═══ RSVP ═══ */
/* The RSVP band deliberately stays deep-toned (rsvp-surface), so its copy and
   the platform RSVP panel's translucent-white controls read as light-on-dark. */
.rsvp { background: var(--rsvp-surface); color: #fbf1ee; text-align: center; }
.rsvp .section-title { color: inherit; }
.rsvp .section-eyebrow { color: color-mix(in srgb, var(--accent) 84%, #fff); }
.rsvp-inner { max-width: 620px; margin: 0 auto; }
.rsvp-body { margin: 16px auto 30px; max-width: 46ch; font-size: 1.1rem; font-style: italic; opacity: 0.86; }
.rsvp-btn { display: inline-block; padding: 0; border-radius: 999px; text-decoration: none; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 66%, #fff 26%), var(--accent)); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--accent) 90%, transparent); }
.rsvp-btn-inner { display: block; padding: 15px 34px; font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: #1a1408; }
.rsvp-helper { margin: 14px 0 0; font-size: 0.84rem; opacity: 0.62; }

/* Petal-burst confirmation overlay */
.rsvp-burst { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }
.rsvp-burst.is-live { opacity: 1; }
.rsvp-burst img { width: min(560px, 86vw); max-height: 86vh; object-fit: contain; transform: scale(0.7); transition: transform 1.1s cubic-bezier(0.22,0.61,0.36,1); border-radius: 12px; }
.rsvp-burst.is-live img { transform: scale(1); }

/* ═══ Calendar ═══ */
.calendar-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.calendar-btns { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cal-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--ink); transition: border-color 0.3s ease, transform 0.3s ease; }
.cal-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.cal-icon { width: 17px; height: 17px; color: var(--accent); }

/* ═══ Footer ═══ */
.site-footer { padding: clamp(48px,9vw,74px) var(--gutter) calc(clamp(48px,9vw,74px) + 60px); text-align: center; background: var(--story-surface); border-top: 1px solid var(--rule); }
.ft-names { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem,5.4vw,1.8rem); letter-spacing: 0.06em; }
.ft-amp { color: var(--accent); font-family: var(--font-body); font-style: italic; margin: 0 8px; }
.ft-date { margin: 8px 0 0; font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
.ft-tagline { margin: 18px 0 0; font-style: italic; color: var(--ink-soft); }
.ft-credit { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--ink-faint); }
.ft-credit img { width: 20px; height: 20px; object-fit: contain; }

/* ═══ Controls ═══ */
.fab-cluster { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; justify-items: end; gap: 10px; }
body.intro-active .fab-cluster, body.intro-active .rsvp-pill { display: none; }
.fab { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); color: var(--accent); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0,0,0,.7); }
.fab-music .fab-icon { width: 20px; height: 20px; }
/* Muted (off) icon shows by default; the speaker-on icon shows while playing. */
.fab-music .fab-icon-on { display: none; }
.fab-music[aria-pressed="true"] .fab-icon-on { display: block; }
.fab-music[aria-pressed="true"] .fab-icon-off { display: none; }
.fab-music[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 10px 24px -12px rgba(0,0,0,.7), 0 0 16px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
.fab-nav-lines { display: grid; gap: 4px; }
.fab-nav-lines i { display: block; width: 17px; height: 1.4px; background: currentColor; }
.nav-panel { display: none; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); text-align: right; min-width: 176px; }
.nav-panel.is-open { display: grid; gap: 9px; }
.nav-panel-eyebrow { font-family: var(--font-ui); font-size: 0.56rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.nav-link { font-family: var(--font-ui); font-size: 0.76rem; letter-spacing: 0.08em; text-decoration: none; color: var(--ink-soft); }
.nav-link:hover { color: var(--accent); }
.rsvp-pill { position: fixed; left: 50%; bottom: 18px; z-index: 55; transform: translateX(-50%); padding: 11px 22px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: var(--accent); box-shadow: 0 10px 26px -14px rgba(0,0,0,.7); }

/* ═══ Lightbox ═══ */
.lightbox { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 24px; background: rgba(6,7,10,0.94); }
.lightbox[hidden] { display: none; }
.lb-img { max-width: 100%; max-height: 84vh; border-radius: 8px; }
.lb-close, .lb-nav { position: absolute; border: 1px solid rgba(255,255,255,0.28); background: rgba(0,0,0,0.4); color: #fff; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ═══ Scroll progress bar ═══ */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 210; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, #fff 20%), var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); }
body.intro-active .scroll-progress { opacity: 0; }

/* ═══ Ambient jaali light drift ═══ */
.jaali-drift { position: fixed; inset: -10% -20%; z-index: 3; pointer-events: none; opacity: 0.045; background-image: url("../img/section-pattern.png"); background-size: 420px auto; background-repeat: repeat; mix-blend-mode: multiply; animation: jaaliDrift 60s linear infinite; will-change: transform; }
@keyframes jaaliDrift { 0% { background-position: 0 0; } 100% { background-position: 420px 840px; } }

/* ═══ Our Story — long-image scroll sync ═══ */
.story-scroll { position: relative; background: var(--surface); min-height: 220vh; }
.story-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.story-img-wrap { position: absolute; inset: 0; }
.story-img { position: absolute; top: 0; left: 0; width: 100%; height: auto; min-height: 100%; object-fit: cover; will-change: transform; transform: scale(1.04); }
.story-veil { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent) 0%, transparent 22%, transparent 62%, color-mix(in srgb, var(--surface) 92%, #000 8%) 100%), radial-gradient(ellipse at 50% 60%, transparent 30%, color-mix(in srgb, var(--surface) 60%, transparent) 100%); }
.story-jaali { position: absolute; right: 6%; bottom: 8%; width: clamp(80px, 16vw, 150px); height: clamp(120px, 24vw, 220px); opacity: 0.28; color: var(--accent); }
.story-copy { position: relative; z-index: 2; max-width: 640px; margin: -100vh auto 0; margin-top: -100dvh; padding: 0 var(--gutter); }
.story-chapter { min-height: 78vh; display: grid; align-content: center; text-align: center; }
.story-eyebrow { margin: 0 0 14px; font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); }
.story-line { margin: 0 auto; max-width: 22ch; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 5.4vw, 2.5rem); line-height: 1.3; letter-spacing: 0.02em; text-shadow: 0 8px 40px rgba(0,0,0,0.6); }

/* ═══ Ken-Burns drift on key imagery ═══ */
.hero-photo { will-change: transform; animation: kenBurns 26s ease-in-out infinite alternate; }
.couple-photo { animation: kenBurns 30s ease-in-out infinite alternate; }
@keyframes kenBurns { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(-1.5%); } }

/* ═══ Clip-path wipe reveals ═══ */
/* Only the gallery uses the clip-path wipe; the scratch card and couple portrait
   stay always-visible (they no longer depend on the scroll reveal). */
body.reveal-armed .gallery-grid { clip-path: inset(0 0 100% 0); }
body.reveal-armed .gallery-grid.is-visible { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(0.22,0.61,0.36,1), opacity 1s ease, transform 1s ease; }

/* ═══ Divider shimmer sweep ═══ */
.ornament-divider { position: relative; overflow: hidden; }
.section-head .ornament-divider::after, .hero .ornament-divider::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, #fff 60%, transparent) 50%, transparent 70%); transform: translateX(-120%); animation: shimmer 5.5s ease-in-out infinite; }
@keyframes shimmer { 0%, 60% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }

/* ═══ Card micro-interactions ═══ */
.evt-card, .ttk-card, .cd-cell, .venue-card { transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease; }
.evt-card:hover, .ttk-card:hover, .venue-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); }
.gallery-item { transition: transform 0.4s ease; }
.gallery-item:hover { transform: translateY(-3px); }

/* ═══ Motion preferences ═══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  body.reveal-armed .hero-name, body.reveal-armed .hero-amp { clip-path: none; opacity: 1; }
  body.reveal-armed .gallery-grid { clip-path: none; }
  .story-scroll { min-height: 0; }
  .story-sticky { position: relative; height: auto; min-height: 60vh; }
  .story-copy { margin-top: 0; }
  .story-chapter { min-height: 0; padding: 40px 0; }
  .hero-photo, .couple-photo, .story-img, .jaali-drift { animation: none !important; transform: none; }
}

/* ═══ Wider viewports ═══ */
@media (min-width: 768px) {
  .events-list.mode-timeline { padding-left: 56px; }
  .events-list.mode-timeline::before, .events-list.mode-timeline::after { left: 21px; }
  .events-list.mode-timeline .evt::before { left: -41px; }
}