/* ==========================================================================
   Sheraz Hussain Khan — Wedding Invitation
   ========================================================================== */

:root {
  --background: oklch(96.5% .025 83);
  --foreground: oklch(25% .045 121);
  --primary: oklch(34% .065 127);
  --primary-foreground: oklch(97% .02 84);
  --secondary: oklch(91% .036 86);
  --muted-foreground: oklch(48% .035 101);
  --border: oklch(72% .055 82 / .45);
  --olive-deep: oklch(23.5% .045 125);
  --olive-soft: oklch(38% .062 124);
  --ivory: oklch(97.4% .022 84);
  --gold: oklch(67% .08 82);
  --gold-bright: oklch(80% .09 86);
  --champagne: oklch(78% .07 80);
  --champagne-deep: oklch(56% .07 70);
  --table: #242e17;

  --font-display: "Cormorant Garamond", serif;
  --font-script: "Great Vibes", cursive;
  --font-body: "Manrope", sans-serif;
  --font-arabic: "Noto Naskh Arabic", serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  color: var(--foreground);
  background: var(--table);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.invitation-page { background: var(--ivory); width: 100%; min-height: 100svh; overflow: hidden; }
.invitation-journey { position: relative; }

/* ==========================================================================
   COVER — the card's gatefold doors swing open
   ========================================================================== */
.cover-stage {
  position: fixed; inset: 0; z-index: 20; overflow: hidden;
  touch-action: none; overscroll-behavior: none;
  background: var(--table);
  transition: opacity .65s ease;
  will-change: opacity;
}
.cover-stage::before {
  content: ""; position: absolute; inset: 0;
  background: url(../assets/texture-olive.svg) 0 0 / 600px 600px;
  opacity: .16;
}
.cover-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 55%, rgb(0 0 0 / .5));
}
.cover-stage--leaving { opacity: 0; pointer-events: none; }

/* a 2:3 frame that covers the screen on phones and fits it on wide screens */
.cover-art {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 66.667svh); aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%);
  transition: transform 2.4s cubic-bezier(.3, .6, .2, 1);
  will-change: transform;
}
@media (min-aspect-ratio: 3/4) { .cover-art { width: min(100vw, 66.667svh); } }
.cover-stage--opening .cover-art { transform: translate(-50%, -50%) scale(1.07); }
.cover-flora { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cover-flora { z-index: 2; }

.cover-card {
  position: absolute; left: 21.4%; top: 16.667%; width: 57.2%; height: 66.667%;
  perspective: 1800px; container-type: inline-size;
  box-shadow: 0 2.5cqw 6cqw rgb(5 8 2 / .55);
}
.cover-inside {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw;
  padding: 10cqw;
  text-align: center; color: var(--primary);
  background:
    radial-gradient(ellipse 70% 50% at 50% 45%, rgb(255 236 180 / .9), transparent 70%),
    url(../assets/texture-ivory.svg) 0 0 / 300px,
    linear-gradient(#fbf4e3, #efe2c4);
  outline: 1px solid var(--gold); outline-offset: -3.2cqw;
}
.cover-inside__arabic { font-family: var(--font-arabic); font-size: 6.4cqw; }
.cover-inside__flourish { width: 54cqw; height: 7cqw; color: var(--gold); }
.cover-inside__name { font-family: var(--font-script); font-size: 22cqw; line-height: 1; color: var(--primary); }
.cover-inside__sub { font-size: 3cqw; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--champagne-deep); }

.cover-door {
  position: absolute; top: 0; bottom: 0; width: 50%;
  transform-style: preserve-3d;
  transition: transform 1.6s cubic-bezier(.62, 0, .18, 1) .35s;
  will-change: transform;
}
.cover-door > img { width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cover-door--left { left: 0; transform-origin: left center; }
.cover-door--right { right: 0; transform-origin: right center; }
.cover-door--right > img { transform: scaleX(-1); }
.cover-door__back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: url(../assets/texture-ivory.svg) 0 0 / 300px, linear-gradient(90deg, #e9dcbd, #f8f0de);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3.5cqw #f5ecd8, inset 0 0 0 calc(3.5cqw + 1px) var(--gold);
}
.cover-stage--opening .cover-door--left { transform: rotateY(-112deg); }
.cover-stage--opening .cover-door--right { transform: rotateY(112deg); }

.cover-seal {
  position: absolute; z-index: 1; left: 39%; top: 35.667%; width: 22%;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35));
  transition: transform .8s cubic-bezier(.5, 0, .3, 1), opacity .6s;
  will-change: transform, opacity;
}
.cover-stage--closed .cover-seal { animation: seal-sway 5s ease-in-out infinite; transform-origin: 50% 10%; }
.cover-stage--opening .cover-seal { transform: translateY(-6%) scale(1.08); opacity: 0; }

.cover-lantern { left: 72.2%; top: -9.93%; width: 13.6%; z-index: 2; }

.cover-trigger {
  position: absolute; inset: 0; z-index: 5;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 0 1.25rem max(7svh, env(safe-area-inset-bottom));
  color: var(--primary-foreground);
}
.cover-trigger strong {
  position: relative; overflow: hidden;
  min-width: 170px; padding: .95rem 1.5rem;
  border: 1px solid color-mix(in oklab, var(--gold), transparent 15%);
  background: color-mix(in oklab, var(--olive-deep), transparent 10%);
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  box-shadow: 0 15px 40px oklch(10% .03 125 / .45), inset 0 0 0 3px color-mix(in oklab, var(--olive-deep), transparent 10%), inset 0 0 0 4px color-mix(in oklab, var(--gold), transparent 60%);
}
.cover-trigger strong::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 236 190 / .35), transparent);
  transform: skewX(-20deg);
  animation: sheen 3.2s ease-in-out 2s infinite;
}
.cover-stage--closed .cover-trigger strong { animation: cover-prompt-in 1.1s cubic-bezier(.2, .7, .2, 1) .5s both; }
.cover-stage--opening .cover-trigger strong { animation: seal-lift .6s forwards; }

/* ==========================================================================
   SCENE ART (built by js/main.js from data-scene)
   ========================================================================== */
[data-scene] { isolation: isolate; position: relative; }
.scene {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background: var(--scene-bg);
}
.scene::before {
  content: ""; position: absolute; inset: 0;
  background: var(--scene-texture) 0 0 / 600px 600px;
  opacity: var(--texture-opacity, .5);
}
.scene::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 45%, transparent 55%, var(--scene-edge));
}
.scene--ivory {
  --scene-bg: radial-gradient(ellipse 120% 80% at 50% 35%, #fffaf0 0%, #f6edda 55%, #ebdfc4 100%);
  --scene-texture: url(../assets/texture-ivory.svg);
  --texture-opacity: .4;
  --scene-edge: rgb(150 120 70 / .12);
  --arch-line: oklch(64% .085 80);
  --emboss-hi: rgb(255 255 255 / .8);
  --emboss-lo: rgb(110 85 40 / .28);
  --jali-opacity: .32;
}
.scene--olive {
  --scene-bg: radial-gradient(ellipse 120% 80% at 50% 38%, #3d4b25 0%, #2b371c 55%, #1b2410 100%);
  --scene-texture: url(../assets/texture-olive.svg);
  --texture-opacity: .2;
  --scene-edge: rgb(5 10 2 / .4);
  --arch-line: oklch(72% .085 83);
  --emboss-hi: rgb(0 0 0 / .45);
  --emboss-lo: rgb(255 230 170 / .12);
  --jali-opacity: .2;
}
.scene--stone {
  --scene-bg: linear-gradient(to bottom, #efe3c9, #f5ecda 40%, #ebdfc4);
  --scene-texture: url(../assets/texture-ivory.svg);
  --texture-opacity: .5;
  --scene-edge: rgb(150 120 70 / .14);
  --arch-line: oklch(62% .085 78);
  --emboss-hi: rgb(255 255 255 / .85);
  --emboss-lo: rgb(110 85 40 / .3);
  --jali-opacity: .42;
}

/* arch: fixed-ratio top + stretchy sides, so it frames any section height */
.scene-arch {
  position: absolute;
  top: clamp(18px, 4vw, 44px); bottom: clamp(18px, 4vw, 44px);
  left: max(4%, calc(50% - 440px)); right: max(4%, calc(50% - 440px));
  display: flex; flex-direction: column;
  container-type: inline-size;
  color: var(--arch-line);
  filter: drop-shadow(0 1px 0 var(--emboss-hi)) drop-shadow(0 1px 1.5px var(--emboss-lo));
}
.scene-arch__top { width: 100%; height: auto; flex: none; overflow: visible; }
.scene-arch__jali { opacity: var(--jali-opacity); }
.scene-arch__sides {
  --band: color-mix(in oklab, var(--arch-line), transparent 88%);
  position: relative; flex: 1;
  margin: -1px calc(3.125% - .75px) 0;
  border: 1.5px solid; border-top: 0;
  background:
    linear-gradient(90deg, var(--band) 0 2.333%, transparent 2.333% 97.667%, var(--band) 97.667%),
    linear-gradient(0deg, var(--band) 0 2.19cqw, transparent 2.19cqw);
}
.scene-arch__sides::before,
.scene-arch__sides::after { content: ""; position: absolute; top: 0; bottom: 0; }
.scene-arch__sides::before { left: 2.333%; right: 2.333%; bottom: 2.19cqw; border: 1px solid; border-top: 0; }
.scene-arch__sides::after { left: calc(1.1667% - 1.5px); right: calc(1.1667% - 1.5px); bottom: calc(1.09cqw - 1.5px); border: 3px dotted; border-top: 0; opacity: .55; }

.scene--palace .scene-arch { left: max(9%, calc(50% - 380px)); right: max(9%, calc(50% - 380px)); }
.scene--palace .scene-arch__sides {
  background:
    linear-gradient(90deg, var(--band) 0 2.333%, transparent 2.333% 97.667%, var(--band) 97.667%),
    linear-gradient(0deg, var(--band) 0 2.19cqw, transparent 2.19cqw),
    url(../assets/skyline.svg) center bottom 2.19cqw / 100% auto no-repeat,
    linear-gradient(to bottom, #f6ecd8 0%, #f3e6cb 60%, #ead9b7 100%);
}

.flora { position: absolute; height: auto; }
.flora--hang { width: clamp(160px, 42vw, 400px); top: -8px; }
.flora--bush { width: clamp(160px, 42vw, 380px); bottom: -2px; }
.flora--left { left: -10px; }
.flora--right { right: -10px; transform: scaleX(-1); }

/* lanterns: chain + body image with a flickering glow behind */
.lantern { position: absolute; transform-origin: 50% 0; }
.lantern > img { position: relative; width: 100%; height: auto; }
.lantern__glow {
  position: absolute; left: 50%; top: 70%;
  width: 300%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(255 214 130 / .55) 0%, rgb(255 200 110 / .2) 32%, transparent 68%);
  animation: flicker 3.4s ease-in-out infinite;
}
.scene .lantern {
  top: -2.5rem; width: clamp(40px, 10vw, 68px);
  animation: lantern-sway 6s ease-in-out infinite;
}
.scene .lantern--left { left: clamp(14%, 18vw, 22%); }
.scene .lantern--right { right: clamp(14%, 18vw, 22%); animation-delay: -3s; }
.scene .lantern--right .lantern__glow { animation-delay: -1.3s; }
.scene--floral .lantern { top: -1rem; width: clamp(46px, 12vw, 78px); }
.scene--floral .lantern--left { left: clamp(10%, 14vw, 18%); }
.scene--floral .lantern--right { right: clamp(10%, 14vw, 18%); }
.scene--palace .lantern { top: auto; bottom: clamp(14px, 3.4vw, 38px); animation: none; clip-path: inset(43% -200% -50% -200%); }
.scene--palace .lantern--left { left: max(2%, calc(50% - 470px)); }
.scene--palace .lantern--right { right: max(2%, calc(50% - 470px)); }
.scene--ivory .lantern__glow, .scene--stone .lantern__glow { opacity: .75; }

.scene-rays {
  position: absolute; inset: -20% -30%;
  background: repeating-linear-gradient(115deg,
    transparent 0 70px, rgb(255 238 196 / .08) 70px 120px, transparent 120px 210px);
  filter: blur(16px);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 75% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 50% at 75% 30%, #000, transparent 75%);
  animation: rays-drift 14s ease-in-out infinite alternate;
}
.scene-frame {
  position: absolute; inset: 1.1rem;
  border: 1px solid color-mix(in oklab, var(--gold), transparent 50%);
  box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in oklab, var(--gold), transparent 78%);
}

/* Three.js layers (js/three-fx.js) */
.fx-canvas { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }
.has-webgl .petals { display: none; }
.rings3d { display: none; width: min(84vw, 380px); aspect-ratio: 1.35; margin: -3rem auto -.6rem; }
.has-webgl .rings3d { display: block; }
.rings3d canvas { display: block; width: 100% !important; height: 100% !important; }

/* falling petals (fallback when WebGL is unavailable) */
.petals { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -40px; left: var(--x);
  width: var(--s); height: var(--s);
  animation: petal-fall var(--d) linear var(--delay) infinite;
}
.petal i {
  display: block; width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.9'%3E%3Cstop offset='0' stop-color='%23fffdf7'/%3E%3Cstop offset='.7' stop-color='%23f6e9d6'/%3E%3Cstop offset='1' stop-color='%23e6cfb2'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M10 1C15 4 19 10 16 15C13 19 7 19 4 15C1 10 5 4 10 1Z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .15));
  animation: petal-sway var(--sway) ease-in-out infinite alternate;
}

/* ==========================================================================
   INVITATION
   ========================================================================== */
.paper-section, .ayat-section, .rsvp-section { display: grid; place-items: center; min-height: min(1100px, 100svh); }
.hero-copy, .ayat-copy, .rsvp-copy { text-align: center; width: min(78%, 640px); }
.hero-copy { padding: clamp(9rem, 26vw, 15rem) 0 clamp(11rem, 22vw, 12rem); }
.arabic-kicker { font-family: var(--font-arabic); color: var(--primary); font-size: clamp(1.45rem, 4vw, 2.2rem); }
.eyebrow { color: var(--primary); text-transform: uppercase; letter-spacing: .22em; margin-bottom: .8rem; font-size: .68rem; font-weight: 600; }

.flourish { width: min(190px, 60%); height: 26px; margin: 0 auto 1rem; color: var(--gold); }
.hero-copy h1 { font-family: var(--font-display); font-weight: 500; line-height: .98; font-size: clamp(2.8rem, 10.5vw, 5.4rem); }
.shimmer {
  background: linear-gradient(100deg, var(--primary) 0%, var(--primary) 42%, oklch(72% .1 84) 50%, var(--primary) 58%, var(--primary) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s ease-in-out 2.4s infinite;
}
.wedding-introduction { margin-top: 2rem; }
.wedding-introduction:first-of-type { margin-top: 2.25rem; }
.honoured-family { font-family: var(--font-display); color: var(--primary); font-size: clamp(1.5rem, 5.4vw, 2.1rem); font-weight: 600; line-height: 1.2; }
.invitation-line { max-width: 440px; font-family: var(--font-display); margin: .6rem auto 0; font-size: clamp(1.1rem, 3.6vw, 1.3rem); font-style: italic; line-height: 1.45; }
.couple-intro { margin-top: 2.25rem; }
.ampersand { display: block; font-family: var(--font-script); color: var(--gold); margin: .9rem 0 .8rem; font-size: clamp(2.4rem, 8vw, 3.2rem); line-height: 1; }
.bride-line { font-family: var(--font-display); color: var(--primary); font-size: clamp(1.55rem, 5.6vw, 2.3rem); font-weight: 600; line-height: 1.2; }
.bride-line span { display: block; margin-bottom: .35rem; font-family: var(--font-body); color: var(--champagne-deep); font-size: .62rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.welcome-message { max-width: 520px; font-family: var(--font-display); color: var(--muted-foreground); margin: 0 auto; font-size: clamp(1.1rem, 3.2vw, 1.3rem); font-style: italic; line-height: 1.6; }

.hero-reveal { opacity: 0; transform: translateY(22px); }
.invitation-page--open .hero-reveal { animation: hero-reveal 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-reveal--1 { animation-delay: .2s; }
.hero-reveal--2 { animation-delay: .5s; }
.hero-reveal--3 { animation-delay: .85s; }
.hero-reveal--4 { animation-delay: 1.2s; }
.hero-reveal--5 { animation-delay: 1.5s; }
.hero-reveal--6 { animation-delay: 1.85s; }

/* ---------- ayat ---------- */
.ayat-section { min-height: max(820px, 100svh); color: var(--primary-foreground); }
.ayat-copy { width: min(76%, 640px); padding: 9rem 0 8rem; text-shadow: 0 2px 15px oklch(12% .02 120 / .68); }
.ayat-copy > svg { width: 28px; height: 28px; color: var(--gold-bright); margin: 0 auto 2rem; filter: drop-shadow(0 0 8px oklch(80% .09 86 / .5)); }
.ayat-arabic { font-family: var(--font-arabic); font-size: clamp(1.7rem, 4.8vw, 3.3rem); line-height: 1.8; }
.ayat-copy > p:not(.ayat-arabic) { max-width: 600px; font-family: var(--font-display); margin: 2rem auto 1rem; font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-style: italic; line-height: 1.55; }
.ayat-copy > span { color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; }

/* ==========================================================================
   CHAPTERS
   ========================================================================== */
.chapter-page {
  position: relative; display: grid; place-items: center;
  min-height: 100svh; padding: 7.5rem 1.25rem;
  text-align: center; color: var(--primary); overflow: hidden;
}
.chapter-copy, .chapter-frame { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(100%, 520px); }
.chapter-date .chapter-copy { margin-top: 2.5rem; }
/* keep the text below the arch's scallops, which grow with the arch width (see .scene-arch) */
.chapter-date[data-scene="ivory-arch"] { padding-top: max(7.5rem, clamp(18px, 4vw, 44px) + min(92vw, 880px) * .203 - 1rem); }
.chapter-number { color: var(--gold); text-transform: uppercase; letter-spacing: .3em; font-size: .62rem; font-weight: 600; }
.chapter-title {
  width: 100%; margin-top: .6rem;
  font-family: var(--font-display); font-weight: 500; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  font-size: clamp(3rem, 12vw, 5rem);
}
.chapter-ornament { width: 120px; height: 16px; color: var(--gold); margin: 1.2rem 0 2rem; }
.chapter-flourish { width: 150px; height: 20px; color: var(--gold); margin: .9rem 0 .5rem; }

.chapter--b { color: var(--primary-foreground); }
.chapter--b .chapter-number, .chapter--b .chapter-ornament, .chapter--b .eyebrow,
.chapter--b .chapter-label, .chapter--b .chapter-dot, .chapter--b .chapter-flourish { color: var(--gold); }
.chapter--b .chapter-title { text-shadow: 0 2px 18px rgb(0 0 0 / .35); }
.chapter--b .chapter-address, .chapter--b .chapter-scroll { color: color-mix(in oklab, var(--primary-foreground), transparent 18%); }
.chapter--b .chapter-venue--script { color: var(--primary-foreground); }
.chapter--c .eyebrow, .chapter--c .chapter-number { color: var(--champagne-deep); }

/* heart scratch card — gold foil */
.heart-wrap { position: relative; }
.chapter--c .heart-scratch { filter: drop-shadow(0 0 1px oklch(60% .08 80 / .7)) drop-shadow(0 18px 30px oklch(25% .05 90 / .22)); }
.heart-scratch {
  position: relative; width: min(72vw, 280px); aspect-ratio: 1 / .92;
  touch-action: none;
  filter: drop-shadow(0 18px 30px oklch(25% .05 90 / .3));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 90C20 68 2 50 2 28 2 13 13 2 27 2c10 0 18 6 23 14C55 8 63 2 73 2c14 0 25 11 25 26 0 22-18 40-48 62z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 90C20 68 2 50 2 28 2 13 13 2 27 2c10 0 18 6 23 14C55 8 63 2 73 2c14 0 25 11 25 26 0 22-18 40-48 62z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.heart-scratch__inner {
  position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 12%;
  background: radial-gradient(circle at 50% 38%, #fff, #fbf3e2 60%, #efe0c0);
}
.heart-scratch__inner strong {
  font-family: var(--font-display); color: var(--primary);
  font-size: clamp(5rem, 22vw, 8rem); font-weight: 500; line-height: 1;
  opacity: .15; transform: scale(.9);
  transition: opacity .9s, transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.heart-scratch.is-revealed .heart-scratch__inner strong { opacity: 1; transform: scale(1); }
.heart-scratch__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity .9s; }
.heart-scratch__canvas:focus-visible { outline: none; }
.heart-scratch.is-revealed .heart-scratch__canvas { opacity: 0; pointer-events: none; }
/* once scratched, a swipe starting on the heart should scroll the page again */
.heart-scratch.is-revealed { touch-action: auto; }
.heart-wrap::after {
  content: ""; position: absolute; inset: -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, oklch(85% .09 85 / .45), transparent 65%);
  opacity: 0; transition: opacity 1.2s;
}
.heart-wrap.is-revealed::after { opacity: 1; }

.sparkle {
  position: absolute; left: 50%; top: 45%; z-index: 2;
  width: var(--size); height: var(--size); pointer-events: none;
  background: var(--c);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: sparkle-burst 1.3s cubic-bezier(.15, .7, .3, 1) forwards;
}

.chapter-date-rest { min-height: 9.5rem; margin-top: 1.8rem; }
.chapter-date-rest > * { opacity: 0; transform: translateY(14px); transition: opacity 1s, transform 1s, letter-spacing 1.4s; }
.chapter-date-rest.is-visible > * { opacity: 1; transform: none; }
.chapter-month { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 500; }
.chapter-date-rest.is-visible .chapter-month { letter-spacing: .34em; transition-delay: .3s; }
.chapter-year {
  margin-top: .2rem;
  font-family: var(--font-display); font-size: clamp(2.6rem, 11vw, 3.6rem); font-weight: 600; letter-spacing: .12em;
  background: linear-gradient(180deg, color-mix(in oklab, var(--champagne), white 35%) 0%, var(--champagne) 45%, var(--champagne-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / .5)) drop-shadow(0 2px 2px oklch(35% .04 70 / .3));
}
.chapter-date-rest.is-visible .chapter-year { transition-delay: .8s; }
.chapter-scroll { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.6rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .28em; font-size: .58rem; font-weight: 600; }
.chapter-date-rest.is-visible .chapter-scroll { transition-delay: 1.4s; }
.chapter-scroll span { width: 1px; height: 28px; background: linear-gradient(var(--gold), transparent); animation: scroll-hint 1.8s ease-in-out infinite; }

.chapter-frame { padding: 5rem 1rem 3rem; }
.chapter-frame .eyebrow { color: var(--gold); }
.chapter--c .chapter-frame .eyebrow { color: var(--champagne-deep); }
.chapter-detail-body { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-bottom: 2.2rem; }
.chapter-label { margin-top: .4rem; color: var(--gold); text-transform: uppercase; letter-spacing: .26em; font-size: .7rem; font-weight: 600; }
.chapter--c .chapter-label { color: var(--champagne-deep); }
.chapter-label--lg { letter-spacing: .22em; font-size: .9rem; }
.chapter-time { font-family: var(--font-display); font-size: clamp(2.1rem, 8vw, 2.9rem); font-weight: 500; line-height: 1.15; }
.chapter-venue { font-family: var(--font-display); font-size: clamp(1.7rem, 7vw, 2.5rem); font-style: italic; font-weight: 500; line-height: 1.15; }
.chapter-venue--script { color: var(--primary); text-shadow: 0 1px 0 color-mix(in oklab, var(--gold), transparent 35%); font-size: clamp(2.3rem, 9vw, 3.5rem); font-weight: 600; line-height: .95; }
.chapter-address { max-width: 26ch; margin-top: .4rem; font-family: var(--font-display); color: var(--muted-foreground); font-size: 1.25rem; line-height: 1.4; }
.chapter-dot { color: var(--gold); margin: .6rem 0 .2rem; font-size: .6rem; }
.chapter-map-buttons { display: flex; flex-direction: column; align-items: center; gap: .7rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-width: 210px; height: 2.75rem; padding: 0 1.5rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-decoration: none; white-space: nowrap;
  color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--gold), transparent 20%);
  background: color-mix(in oklab, var(--background), transparent 15%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgb(60 50 20 / .1), inset 0 0 0 3px color-mix(in oklab, var(--background), transparent 15%), inset 0 0 0 4px color-mix(in oklab, var(--gold), transparent 70%);
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--secondary); }
.btn:active { transform: scale(.97); }
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn--quiet { min-width: 0; height: 2.3rem; border-color: transparent; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-weight: 500; color: var(--champagne-deep); }
.btn--quiet:hover { background: color-mix(in oklab, var(--gold), transparent 88%); }
.chapter--b .btn { color: var(--primary-foreground); background: color-mix(in oklab, var(--olive-deep), transparent 25%); box-shadow: 0 6px 18px rgb(0 0 0 / .25), inset 0 0 0 3px color-mix(in oklab, var(--olive-deep), transparent 25%), inset 0 0 0 4px color-mix(in oklab, var(--gold), transparent 65%); }
.chapter--b .btn:hover { background: var(--olive-deep); }
.chapter--b .btn--quiet { background: none; box-shadow: none; color: var(--gold); }
.chapter--b .btn--quiet:hover { background: rgb(255 255 255 / .06); }

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */
.countdown-section { text-align: center; min-height: 680px; padding: 8rem 1rem 7rem; place-content: center; }
.section-heading h2, .rsvp-copy h2 { font-family: var(--font-script); font-weight: 400; line-height: 1.05; }
.section-heading h2 {
  color: var(--primary); font-size: clamp(3.4rem, 12vw, 5.6rem);
  text-shadow: 0 1px 0 color-mix(in oklab, var(--gold), transparent 35%), 0 10px 28px color-mix(in oklab, var(--gold), transparent 78%);
}
.section-heading .eyebrow { color: var(--champagne-deep); }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.45rem, 2vw, 1rem); width: min(92vw, 640px); margin: 2.6rem auto 0; }
.countdown div {
  position: relative; padding: 1.6rem .3rem 1.1rem;
  border: 1px solid color-mix(in oklab, var(--gold), transparent 35%);
  border-radius: 999px 999px .5rem .5rem;
  background: linear-gradient(to bottom, rgb(255 252 244 / .9), rgb(246 236 214 / .75));
  box-shadow: 0 10px 24px rgb(110 85 40 / .12), inset 0 0 0 4px rgb(255 252 244 / .8), inset 0 0 0 5px color-mix(in oklab, var(--gold), transparent 72%);
}
.countdown strong { display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 9vw, 4rem); font-weight: 500; color: var(--primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown span { color: var(--champagne-deep); text-transform: uppercase; letter-spacing: .16em; font-size: clamp(.5rem, 1.8vw, .62rem); font-weight: 600; }
.countdown-note { margin-top: 1.8rem; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--muted-foreground); }

/* ==========================================================================
   RSVP
   ========================================================================== */
.rsvp-section { min-height: max(840px, 100svh); color: var(--primary-foreground); }
.rsvp-copy { padding: 9rem 0 8rem; text-shadow: 0 2px 15px oklch(12% .02 120 / .68); }
.rsvp-copy .eyebrow { color: var(--gold); }
.rsvp-copy h2 { font-size: clamp(3.6rem, 13vw, 5.8rem); color: var(--primary-foreground); }
.rsvp-copy > p:not(.eyebrow) { max-width: 450px; font-family: var(--font-display); margin: 1.2rem auto 2.4rem; font-size: 1.35rem; font-style: italic; }
.rsvp-actions { display: flex; justify-content: center; }
.rsvp-col { padding: 1.4rem 2.6rem; border: 1px solid color-mix(in oklab, var(--gold), transparent 45%); border-radius: 999px 999px .6rem .6rem; background: rgb(20 28 10 / .25); }
.rsvp-col-title { color: var(--gold); text-transform: uppercase; letter-spacing: .24em; margin: .6rem 0 .5rem; font-size: .7rem; font-weight: 600; }
.rsvp-col ul { display: grid; gap: .45rem; list-style: none; font-family: var(--font-display); font-size: clamp(1.3rem, 5vw, 1.6rem); line-height: 1.25; }
.rsvp-flourish { margin-top: 3rem; }

/* ---------- music toggle ---------- */
.music-toggle {
  position: fixed; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 50;
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 9999px;
  color: var(--gold); border: 1px solid var(--gold);
  background: color-mix(in oklab, var(--olive-deep) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgb(0 0 0 / .25);
}
.music-toggle svg { width: 1.1rem; height: 1.1rem; }
.music-bars { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.music-bars i { width: 2.5px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: bars 1s ease-in-out infinite; }
.music-bars i:nth-child(2) { animation-delay: -.3s; }
.music-bars i:nth-child(3) { animation-delay: -.6s; }
.music-bars i:nth-child(4) { animation-delay: -.15s; }
.music-toggle.is-playing .music-bars { display: flex; }
.music-toggle.is-playing .icon-off { display: none; }
.music-toggle.is-playing::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--gold);
  animation: ring 2.4s ease-out infinite;
}

/* ---------- scroll reveal ---------- */
.scroll-text-reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.scroll-text-reveal.is-text-visible { opacity: 1; transform: translateY(0); }
.ayat-copy > :nth-child(3), .chapter-detail-body > :nth-child(2), .section-heading > :nth-child(2), .rsvp-copy > :nth-child(2) { transition-delay: .12s; }
.chapter-detail-body > :nth-child(3), .rsvp-copy > :nth-child(3) { transition-delay: .2s; }
.chapter-detail-body > :nth-child(n+4) { transition-delay: .28s; }
.countdown > div:nth-child(2) { transition-delay: .1s; }
.countdown > div:nth-child(3) { transition-delay: .2s; }
.countdown > div:nth-child(4) { transition-delay: .3s; }

/* ---------- keyframes ---------- */
@keyframes hero-reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes seal-lift { to { opacity: 0; transform: translateY(-35px) scale(.92); } }
@keyframes cover-prompt-in { 0% { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheen { 0% { left: -60%; } 45%, 100% { left: 130%; } }
@keyframes seal-sway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes scroll-hint { 0%, 100% { opacity: .5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(8px); } }
@keyframes lantern-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes flicker {
  0%, 100% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  35% { opacity: .78; }
  55% { opacity: .95; transform: translate(-50%, -50%) scale(.97); }
  75% { opacity: .82; }
}
@keyframes shimmer { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
@keyframes rays-drift { from { transform: translateX(-2%); opacity: .8; } to { transform: translateX(2%); opacity: 1; } }
@keyframes petal-fall { from { transform: translateY(0); } to { transform: translateY(calc(100vh + 80px)); } }
@keyframes petal-sway { from { transform: translateX(calc(var(--drift) * -1)) rotate(-30deg); } to { transform: translateX(var(--drift)) rotate(200deg); } }
@keyframes sparkle-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(160deg); }
}
@keyframes bars { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- pause looping decorations off-screen (class set in js/main.js) ---------- */
.is-offscreen .lantern, .is-offscreen .lantern__glow, .is-offscreen .scene-rays,
.is-offscreen .shimmer, .is-offscreen .chapter-scroll span { animation-play-state: paused; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .countdown { width: 94vw; }
  .rsvp-col { padding: 1.2rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .petals { display: none; }
}