/* =====================================================================
   Abdullah & Ayesha — Engagement / Ring Ceremony
   Burgundy & ivory botanical: ivory cards on cream satin, burgundy and
   ivory ribbons, watercolour roses, fine gold rules and a burgundy seal.
   ===================================================================== */

:root {
  --burgundy: #7B2335;
  --burgundy-deep: #5E1626;
  --wine: #9A4A57;
  --blush: #D9B3A8;
  --beige: #E4CDB8;
  --gold: #B8955A;
  --gold-light: #D8BF8E;
  --gold-deep: #8A6A3A;
  --gold-text: #82622F;          /* gold that still reads at small sizes */
  --gold-line: rgba(184, 149, 90, .78);
  --ivory: #FBF7F1;
  --cream: #F3EBDF;
  --satin: #EFE4D4;
  --ink: #4A3A34;
  --ink-soft: #6B5850;
  --foil: linear-gradient(110deg, #9C7A45 0%, #D8BF8E 40%, #F4E6C4 48%, #B8955A 60%, #8A6A3A 100%);

  --f-script: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  --f-caps: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --f-body: "EB Garamond", Garamond, Georgia, serif;
  --f-arabic: "Amiri Quran", "Amiri", "Scheherazade New", "Traditional Arabic", serif;

  --ease: cubic-bezier(.22, .75, .2, 1);
  --ease-soft: cubic-bezier(.45, .05, .25, 1);
  --paper: url("assets/paper.jpg");

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--satin);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--satin);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-sealed { overflow: hidden; height: 100vh; height: 100dvh; }

img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; border-radius: 6px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ornament strokes drawn through <use> pick up currentColor */
.o-line { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.o-fill { fill: currentColor; }

/* =====================================================================
   Desktop backdrop
   ===================================================================== */
.backdrop { display: none; }

@media (min-width: 760px) {
  body { background: #E9DCCB; }
  .backdrop {
    display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background: #EADDCB;
  }
  /* the same satin, mirrored either side, softly fading towards the card */
  .backdrop::before, .backdrop::after {
    content: ""; position: absolute; top: -12px; bottom: -12px; width: 52%;
    background: url("assets/scene-satin.webp") 50% 0 / cover no-repeat;
    filter: blur(1.5px) saturate(.95);
    -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 92%);
    mask-image: linear-gradient(90deg, #000 30%, transparent 92%);
  }
  .backdrop::before { left: -12px; }
  .backdrop::after { right: -12px; transform: scaleX(-1); }
}

/* =====================================================================
   EnvelopeIntro
   ===================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--satin);
  touch-action: none;
  transition: opacity .95s var(--ease) .15s, visibility 0s linear 1.2s;
}
.intro[hidden] { display: none; }

.intro__scene {
  position: absolute; top: 50%; left: 50%;
  width: max(100vw, 56.28vh);
  aspect-ratio: 941 / 1672;
  transform: translate(-50%, -50%);
  background: url("assets/scene-satin.webp") center / 100% 100% no-repeat;
  transition: transform 2.4s var(--ease-soft), filter 1.4s var(--ease);
}
@media (min-aspect-ratio: 4 / 5) {
  .intro { background: #EADDCB; }
  .intro::before, .intro::after {
    content: ""; position: absolute; top: -12px; bottom: -12px; width: 52%;
    background: url("assets/scene-satin.webp") 50% 0 / cover no-repeat;
    filter: blur(1.5px) saturate(.95);
    -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 92%);
    mask-image: linear-gradient(90deg, #000 30%, transparent 92%);
  }
  .intro::before { left: -12px; }
  .intro::after { right: -12px; transform: scaleX(-1); }
  .intro__scene {
    width: auto; height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
}

/* occasional isolated sparkles on the satin */
.intro__glints { position: absolute; inset: 0; pointer-events: none; }
.intro__glints i {
  position: absolute; width: 14px; height: 14px; opacity: 0;
  background:
    linear-gradient(#FFF6DD, #FFF6DD) center / 1.5px 100% no-repeat,
    linear-gradient(90deg, #FFF6DD, #FFF6DD) center / 100% 1.5px no-repeat;
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  filter: drop-shadow(0 0 3px rgba(255, 236, 190, .9));
  animation: glint 7s ease-in-out infinite;
}
.intro__glints i:nth-child(1) { left: 17%; top: 26%; animation-delay: 2.2s; }
.intro__glints i:nth-child(2) { right: 14%; top: 64%; animation-delay: 4.6s; transform: scale(.8); }
.intro__glints i:nth-child(3) { left: 30%; bottom: 13%; animation-delay: 6.4s; transform: scale(.7); }
@keyframes glint {
  0%, 84%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  90% { opacity: 1; transform: scale(1) rotate(45deg); }
}

.intro__stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(22px, 5vh, 44px);
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  animation: stage-in 1.3s var(--ease) backwards;
  transition: transform 1.1s var(--ease-soft), opacity .9s var(--ease);
}
@keyframes stage-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.envelope {
  --env-w: min(86vw, 440px, calc((100vh - 250px) * 1.46));
  --env-w: min(86vw, 440px, calc((100dvh - 250px) * 1.46));
  position: relative;
  width: var(--env-w);
  aspect-ratio: 146 / 100;
  container-type: inline-size;
  cursor: pointer;
  animation: breathe 5.5s ease-in-out 1.4s infinite;
}
@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

.envelope__shadow {
  position: absolute; left: 3%; right: 3%; bottom: -6%; height: 30%; z-index: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(94, 40, 30, .32), rgba(94, 40, 30, 0) 70%);
  filter: blur(7px);
  transition: opacity .8s var(--ease);
}

/* paper surfaces share one texture */
.envelope__back, .envelope__card,
.envelope__side::before, .envelope__bottom::before,
.envelope__flap-face::before, .envelope__flap-inner::before {
  background-image: var(--paper-tint, linear-gradient(transparent, transparent)), var(--paper);
  background-size: 100% 100%, 220px;
  background-color: var(--ivory);
}

.envelope__back {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 1.2% / 1.8%;
  --paper-tint: linear-gradient(180deg, rgba(214, 192, 160, .5), rgba(233, 221, 203, .2) 50%);
  overflow: hidden;
}
.envelope__back::before { /* burgundy liner, seen once the flap lifts */
  content: ""; position: absolute; left: 3.2%; right: 3.2%; top: 3%; height: 49%;
  background:
    radial-gradient(circle, rgba(216, 191, 142, .55) 0 .9px, transparent 1.4px) 0 0 / 11px 11px,
    radial-gradient(circle, rgba(216, 191, 142, .3) 0 .7px, transparent 1.1px) 5.5px 5.5px / 11px 11px,
    linear-gradient(180deg, #6A1B2C, #7B2335);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.envelope__back::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 14px 22px -10px rgba(60, 20, 20, .45); }

.envelope__glow { /* warm light from inside the envelope */
  position: absolute; left: 20%; right: 20%; top: -6%; height: 60%; z-index: 2;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 240, 205, .95), rgba(255, 228, 180, .35) 45%, rgba(255, 228, 180, 0) 72%);
  opacity: 0; pointer-events: none;
  transition: opacity .9s var(--ease);
}

.envelope__card {
  position: absolute; left: 6.5%; right: 6.5%; top: 5%; height: 90%; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 5.5cqw;
  text-align: center;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 2.2cqw var(--ivory),
    inset 0 0 0 calc(2.2cqw + 1px) var(--gold),
    inset 0 0 0 3cqw var(--ivory),
    inset 0 0 0 calc(3cqw + .7px) var(--gold-line),
    0 1px 3px rgba(60, 25, 20, .25);
  transition: transform 1.05s cubic-bezier(.25, .7, .2, 1) .95s;
}
.envelope__card-kicker { font: 600 2.4cqw/1 var(--f-caps); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--gold-text); }
.envelope__card-title { margin-top: 1.4cqw; font: 9cqw/1 var(--f-script); color: var(--burgundy); }
.envelope__card-names { margin-top: 1.2cqw; font: 5.6cqw/1.2 var(--f-script); color: var(--burgundy-deep); }
.envelope__card-fleur { width: 13cqw; height: 4cqw; margin-top: 1.2cqw; color: var(--gold); }
.envelope__card-date { margin-top: 1.2cqw; font: 600 2.6cqw/1 var(--f-caps); letter-spacing: .28em; padding-left: .28em; color: var(--gold-text); }

.envelope__pocket { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.envelope__side, .envelope__bottom { position: absolute; inset: 0; }
.envelope__side { filter: drop-shadow(0 -1px 1.2px rgba(80, 35, 30, .16)); }
.envelope__side::before {
  content: ""; position: absolute; inset: 0;
  --paper-tint: linear-gradient(90deg, rgba(222, 206, 182, .55), rgba(251, 247, 241, 0) 30%, rgba(251, 247, 241, 0) 70%, rgba(222, 206, 182, .55));
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 0 1.2% 1.2% / 0 0 1.8% 1.8%;
}
.envelope__bottom { filter: drop-shadow(0 -1.5px 2px rgba(80, 35, 30, .2)); }
.envelope__bottom::before {
  content: ""; position: absolute; inset: 0;
  --paper-tint: linear-gradient(0deg, rgba(232, 218, 198, .45), rgba(255, 252, 246, .35) 70%);
  clip-path: polygon(0 100%, 50% 42%, 100% 100%);
}
.envelope__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.envelope__rule { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .9; }
.envelope__rule--fold { opacity: .75; }
.envelope__trace {
  fill: none; stroke: #FFF1CF; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: .16 1.4; stroke-dashoffset: .16;
  filter: drop-shadow(0 0 3px rgba(255, 226, 160, .95));
  opacity: 0;
}

.envelope__flap {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(0deg);
}
.envelope__flap-face, .envelope__flap-inner {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.envelope__flap-face { filter: drop-shadow(0 2px 2.4px rgba(80, 30, 25, .26)); }
.envelope__flap-face::before {
  content: ""; position: absolute; inset: 0;
  --paper-tint: linear-gradient(180deg, rgba(255, 253, 248, .5), rgba(236, 224, 206, .35));
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  border-radius: 1.2% 1.2% 0 0 / 1.8% 1.8% 0 0;
}
.envelope__flap-inner { transform: rotateY(180deg); }
.envelope__flap-inner::before, .envelope__flap-inner::after { content: ""; position: absolute; inset: 0; }
.envelope__flap-inner::before {
  --paper-tint: linear-gradient(0deg, rgba(226, 210, 186, .55), rgba(244, 236, 224, .3));
  clip-path: polygon(0 0, 100% 0, 50% 58%);
}
.envelope__flap-inner::after {
  background:
    radial-gradient(circle, rgba(216, 191, 142, .55) 0 .9px, transparent 1.4px) 0 0 / 11px 11px,
    radial-gradient(circle, rgba(216, 191, 142, .3) 0 .7px, transparent 1.1px) 5.5px 5.5px / 11px 11px,
    linear-gradient(0deg, #6A1B2C, #7B2335);
  clip-path: polygon(3.4% 3%, 96.6% 3%, 50% 52%);
}

/* wax seal */
.seal {
  position: absolute; z-index: 6;
  left: 50%; top: 55.5%;
  width: 27%; aspect-ratio: 1;
  padding: 0; border: 0; background: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.seal:focus-visible { outline-offset: 2px; border-radius: 50%; }
.seal::after { /* a gentle warm halo invites the tap, twice, then rests */
  content: ""; position: absolute; inset: 10%; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 232, 190, 0);
  animation: seal-hint 2.8s ease-in-out 1.8s 2;
  pointer-events: none;
}
@keyframes seal-hint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 232, 190, 0); }
  50% { box-shadow: 0 0 20px 7px rgba(255, 232, 190, .6); }
}
.seal__body { position: absolute; inset: 0; transition: transform .2s var(--ease); }
.seal:hover .seal__body { transform: scale(1.025); }
.seal:active .seal__body { transform: scale(.965); }
.seal__half {
  position: absolute; inset: 0;
  background: url("assets/seal.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(60, 15, 20, .35));
}
.seal__half--l { clip-path: polygon(0 0, 53.4% 0, 49.6% 15%, 55.4% 30%, 47.6% 46%, 54.6% 61%, 46.6% 77%, 52.6% 90%, 49.6% 100%, 0 100%); }
.seal__half--r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 49.2% 100%, 52.2% 90%, 46.2% 77%, 54.2% 61%, 47.2% 46%, 55% 30%, 49.2% 15%); }
.seal__sheen { /* reflected light passing over the gold impression */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 244, 214, .55) 48%, transparent 58%) -120% 0 / 250% 100% no-repeat;
  -webkit-mask: url("assets/seal.webp") center / 100% 100% no-repeat;
  mask: url("assets/seal.webp") center / 100% 100% no-repeat;
  mix-blend-mode: soft-light;
  animation: sheen 6s ease-in-out 2.4s infinite;
}
@keyframes sheen {
  0%, 62% { background-position: -120% 0; }
  88%, 100% { background-position: 220% 0; }
}

/* "Tap to Open" plaque */
.plate {
  position: relative;
  display: grid; place-items: center;
  width: min(62vw, 250px); aspect-ratio: 240 / 64;
  margin-top: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0;
  animation: fade-in 1.2s var(--ease) .9s forwards;
  transition: opacity .4s var(--ease);
}
.plate__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 8px rgba(94, 40, 30, .16)); }
.plate__fill { fill: rgba(251, 247, 241, .93); stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.plate__line { fill: none; stroke: var(--gold-line); stroke-width: .8; vector-effect: non-scaling-stroke; }
.plate__text {
  position: relative;
  font: 600 clamp(19px, 5.4vw, 23px)/1 var(--f-caps);
  letter-spacing: .08em;
  color: var(--burgundy);
}
.plate__fleur { position: absolute; left: 50%; width: 64px; height: 20px; margin-left: -32px; color: var(--gold); }
.plate__fleur--top { top: -24px; }
.plate__fleur--bottom { bottom: -24px; transform: rotate(180deg); }
@keyframes fade-in { to { opacity: 1; } }

.intro__veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 252, 245, .97), rgba(250, 243, 232, .82) 55%, rgba(239, 228, 212, .6));
  transition: opacity .7s var(--ease);
}

/* ---- opening choreography (≈2.6s) ---- */
.intro.is-opening { cursor: default; }
.intro.is-opening .envelope { animation: none; }
.intro.is-opening .seal { pointer-events: none; }
.intro.is-opening .seal::after, .intro.is-opening .seal__sheen { animation: none; opacity: 0; }
.intro.is-opening .plate { opacity: 0; animation: none; pointer-events: none; }
.intro.is-opening .seal__body { animation: seal-press .35s cubic-bezier(.3, 0, .3, 1) both; }
.intro.is-opening .seal__half--l { animation: seal-fall-l .8s cubic-bezier(.45, 0, .7, .45) .3s both; }
.intro.is-opening .seal__half--r { animation: seal-fall-r .8s cubic-bezier(.45, 0, .7, .45) .3s both; }
.intro.is-opening .envelope__trace { animation: trace .75s ease-out .2s both; }
.intro.is-opening .envelope__flap {
  animation:
    flap-open 1s cubic-bezier(.65, 0, .35, 1) .5s both,
    flap-depth 1s steps(1, end) .5s both;
}
.intro.is-opening .envelope__glow { opacity: 1; transition-delay: .95s; }
.intro.is-opening .envelope__card { transform: translateY(-58%); }
.intro.is-opening .intro__stage { transform: translateY(13%); transition-delay: .9s; }

@keyframes seal-press {
  0% { transform: scale(1); }
  45% { transform: scale(.965); }
  100% { transform: scale(1.005); }
}
@keyframes seal-fall-l {
  0% { transform: none; opacity: 1; }
  20% { transform: translate(-3%, 1%) rotate(-5deg); opacity: 1; }
  100% { transform: translate(-26%, 80%) rotate(-32deg); opacity: 0; }
}
@keyframes seal-fall-r {
  0% { transform: none; opacity: 1; }
  20% { transform: translate(3%, 1%) rotate(5deg); opacity: 1; }
  100% { transform: translate(26%, 86%) rotate(30deg); opacity: 0; }
}
@keyframes trace {
  0% { stroke-dashoffset: .16; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: -1.1; opacity: 0; }
}
@keyframes flap-open {
  from { transform: perspective(1100px) rotateX(0deg); }
  to { transform: perspective(1100px) rotateX(180deg); }
}
@keyframes flap-depth {
  0% { z-index: 5; }
  50% { z-index: 1; }
  100% { z-index: 1; }
}

.intro.is-revealing { opacity: 0; visibility: hidden; pointer-events: none; }
.intro.is-revealing .intro__veil { opacity: 1; }
.intro.is-revealing .intro__stage { transform: translateY(8%) scale(1.14); opacity: 0; transition: transform 1.2s var(--ease-soft), opacity .8s var(--ease) .1s; }
.intro.is-revealing .intro__scene { transform: translate(-50%, -50%) scale(1.06); filter: blur(2px); }

/* =====================================================================
   The invitation column
   ===================================================================== */
.invite {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  margin: 0 auto;
  container-type: inline-size;
  --fade: 18cqw;
  background: var(--satin);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 760px) {
  .invite {
    margin: 44px auto;
    border-radius: 8px;
    box-shadow:
      0 0 0 1px rgba(184, 149, 90, .35),
      0 50px 100px -40px rgba(80, 30, 25, .5),
      0 12px 36px -14px rgba(80, 30, 25, .3);
  }
}

/* ---- scenes: one painted card per moment, stretched through its plain middle ---- */
.scene {
  --pad-t: 45cqw;
  --pad-b: 45cqw;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 177.7cqw;
  padding: var(--pad-t) 14cqw var(--pad-b);
  text-align: center;
}
/* each scene dissolves in over the bottom of the one before it */
.scene + .scene, .scene + .moment, .moment + .scene {
  margin-top: calc(var(--fade) * -1);
  -webkit-mask-image: linear-gradient(transparent, #000 var(--fade));
  mask-image: linear-gradient(transparent, #000 var(--fade));
}
.scene > :not(.scene__art) { position: relative; z-index: 1; }
.scene__body { display: flex; flex-direction: column; align-items: center; width: 100%; }

.scene__art {
  position: absolute; left: 0; right: 0; top: -4cqw; bottom: -4cqw; z-index: 0;
  border: 0 solid transparent;
  border-image-source: url("assets/scene-card.webp");
  border-image-slice: 800 0 858 0 fill;
  border-image-width: 85.02cqw 0 91.18cqw 0;
  border-image-repeat: stretch;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
  pointer-events: none;
}
.scene--flip .scene__art { transform: translate3d(0, var(--py, 0px), 0) scaleX(-1); }
.scene--bism { --pad-t: 60cqw; }
.scene--bism .scene__art {
  border-image-source: url("assets/scene-bismillah.webp");
  border-image-slice: 790 0 862 0 fill;
  border-image-width: 83.95cqw 0 91.6cqw 0;
}
.scene--satin { --pad-t: 52cqw; --pad-b: 38cqw; }
.scene--satin .scene__art {
  border-image-source: url("assets/scene-satin.webp");
  border-image-slice: 850 0 802 0 fill;
  border-image-width: 90.33cqw 0 85.23cqw 0;
}

/* ---- reveal system ---- */
.js [data-reveal] {
  opacity: 0;
  transition: opacity 1s var(--ease), transform 1.15s var(--ease), filter 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="up"] { transform: translate3d(0, 18px, 0); }
.js [data-reveal="fade"] { transform: scale(.97); }
.js [data-reveal="blur"] { transform: translate3d(0, 10px, 0); filter: blur(6px); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

.js [data-reveal="line"] { opacity: 0; transition: opacity .8s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="line"].is-in { opacity: 1; }
.js [data-reveal="line"] .rule__line { transform: scaleX(0); transition: transform 1.3s var(--ease) calc(var(--d, 0s) + .1s); }
.js [data-reveal="line"] .rule__line:first-child { transform-origin: 100% 50%; }
.js [data-reveal="line"] .rule__line:last-child { transform-origin: 0 50%; }
.js [data-reveal="line"].is-in .rule__line { transform: none; }

/* ---- shared typography & ornaments ---- */
.kicker {
  display: block;
  font-family: var(--f-caps); font-weight: 600;
  font-size: 3.6cqw; line-height: 1.3;
  letter-spacing: .24em; padding-left: .24em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.kicker--wide { letter-spacing: .38em; padding-left: .38em; font-size: 4cqw; }

.rule {
  display: flex; align-items: center; justify-content: center; gap: 2.2cqw;
  width: 62cqw; max-width: 100%; margin: 3.4cqw auto;
  color: var(--gold);
}
.rule--short { width: 46cqw; }
.rule__line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(184, 149, 90, .15), var(--gold-line)); }
.rule__line:last-child { background: linear-gradient(90deg, var(--gold-line), rgba(184, 149, 90, .15)); }
.rule__orn { flex: none; width: 14cqw; height: 4.4cqw; }
.rule--lotus .rule__orn { width: 10cqw; height: 6cqw; }
.rule--heart .rule__orn { width: 5.4cqw; height: 5cqw; }
.rule--leaf .rule__orn { width: 10cqw; height: 5cqw; }

.cue {
  position: absolute !important; left: 50%; bottom: 13cqw;
  width: 44px; height: 44px; margin-left: -22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(251, 247, 241, .8);
  box-shadow: 0 0 0 1px rgba(184, 149, 90, .55), 0 6px 16px -6px rgba(94, 40, 30, .35);
  opacity: 0; transition: opacity 1s var(--ease) 2.2s;
}
.is-open .cue { opacity: 1; animation: cue 2.6s ease-in-out 3.2s infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.cue svg { width: 20px; height: 20px; fill: none; stroke: var(--burgundy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================
   Bismillah
   ===================================================================== */
.scene--bism#bismillah { --pad-t: 62cqw; --pad-b: 50cqw; padding-inline: 10cqw; }
.bismillah {
  font-family: var(--f-arabic);
  font-size: 9.4cqw;
  line-height: 2.1;
  word-spacing: .05em;
  background: linear-gradient(110deg, #86652F 0%, #A9844A 38%, #E6CF98 47%, #A9844A 56%, #7E5E2C 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: foil 7s ease-in-out 1s infinite;
}
@keyframes foil {
  0%, 55% { background-position: 100% 0; }
  85%, 100% { background-position: 0 0; }
}
.bism-en {
  margin-top: .5cqw;
  font-size: 4.15cqw; line-height: 1.45;
  letter-spacing: .02em;
  color: var(--burgundy-deep);
}
.bism-en span { display: block; }
.rule--lotus { margin-top: 5cqw; width: 54cqw; }

/* =====================================================================
   EngagementHero
   ===================================================================== */
.hero__title { display: flex; flex-direction: column; align-items: center; margin-top: 2cqw; }
.hero__title:focus { outline: none; }
.hero__script {
  font-family: var(--f-script); font-weight: 400;
  font-size: 18.5cqw; line-height: 1.02;
  color: var(--burgundy);
  padding: 0 2cqw;
}
.hero__caps {
  margin-top: 1.6cqw;
  font-family: var(--f-caps); font-weight: 600;
  font-size: 5.2cqw; line-height: 1.1;
  letter-spacing: .22em; padding-left: .22em;
  text-transform: uppercase;
  color: var(--burgundy-deep);
}
.scene__body--hero .rule { margin: 4.2cqw auto 3.4cqw; }
.couple {
  display: flex; align-items: center; justify-content: center; gap: 1.2cqw;
  white-space: nowrap;
}
.couple__name { font-family: var(--f-script); font-size: 10.6cqw; line-height: 1.25; color: var(--burgundy); }
.couple__rings { width: 9.4cqw; height: auto; margin-top: -1.5cqw; }

/* =====================================================================
   FormalInvitation
   ===================================================================== */
#invitation { --pad-t: 52cqw; --pad-b: 42cqw; }
.formal__intro { font-size: 4.3cqw; letter-spacing: .06em; color: var(--ink-soft); }
.formal__hosts {
  margin-top: 1.8cqw;
  font-size: 5.6cqw; line-height: 1.22; font-weight: 500;
  color: var(--burgundy-deep);
}
.formal__hosts span, .formal__lede span { display: block; }
.formal__lede {
  margin-top: 2.2cqw;
  font-size: 3.95cqw; line-height: 1.45;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.scene__body--formal .rule { margin: 3cqw auto; }
.fullname {
  font-family: var(--f-script);
  font-size: 9.8cqw; line-height: 1.12;
  color: var(--burgundy);
  text-wrap: balance;
}
.fullname span { display: block; }
.parentage {
  margin-top: .8cqw;
  font-family: var(--f-caps); font-weight: 600;
  font-size: 3.7cqw; letter-spacing: .1em;
  color: var(--ink-soft);
}
.amp {
  display: flex; align-items: center; justify-content: center; gap: 1.6cqw;
  width: 52cqw; margin: 1.4cqw auto;
  color: var(--gold);
}
.amp .rule__line { flex: 1; height: 1px; }
.amp__dot { width: 1.3cqw; height: 1.3cqw; background: var(--gold); transform: rotate(45deg); flex: none; }
.amp__glyph { font-family: var(--f-script); font-size: 9.4cqw; line-height: 1; color: var(--burgundy); padding: 0 1cqw; }

/* =====================================================================
   RingsMoment
   ===================================================================== */
.moment {
  position: relative;
  height: 128cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.moment__art {
  position: absolute; left: 0; right: 0; top: -10cqw; bottom: -10cqw; z-index: 0;
  background: url("assets/scene-satin.webp") 50% 100% / 100% auto no-repeat var(--satin);
  transform: translate3d(0, var(--py, 0px), 0) scaleX(-1);
  will-change: transform;
}
.moment__art::after { /* a soft pool of light where the rings rest */
  content: ""; position: absolute; left: 10%; right: 10%; top: 14%; height: 58%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 250, 238, .85), rgba(255, 250, 238, 0) 70%);
}
.moment__body { position: relative; z-index: 1; margin-top: -14cqw; }
.rings { width: 58cqw; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(94, 40, 30, .18)); }
.rings__spark { transform-origin: 99px 35.5px; animation: spark 5s ease-in-out 1.5s infinite; }
@keyframes spark {
  0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  80% { opacity: 1; transform: scale(1.15) rotate(45deg); }
  90% { opacity: .6; transform: scale(.8) rotate(90deg); }
}
.rings__glint { opacity: .75; stroke-dasharray: 40; stroke-dashoffset: 40; animation: glint-ring 6s ease-in-out 2s infinite; }
@keyframes glint-ring {
  0%, 60% { stroke-dashoffset: 40; opacity: 0; }
  70% { opacity: .9; }
  85%, 100% { stroke-dashoffset: -40; opacity: 0; }
}
.moment__script { margin-top: 1cqw; font-family: var(--f-script); font-size: 12.5cqw; line-height: 1.1; color: var(--burgundy); }
.moment__caps {
  font-family: var(--f-caps); font-weight: 600;
  font-size: 4.2cqw; letter-spacing: .42em; padding-left: .42em;
  text-transform: uppercase; color: var(--gold-text);
}

/* =====================================================================
   DateSection
   ===================================================================== */
#date { --pad-t: 58cqw; --pad-b: 46cqw; }
.rule--cal { width: 72cqw; gap: 1.4cqw; margin: 4cqw auto 5cqw; }
.rule__cal { width: 9.6cqw; height: 9.6cqw; flex: none; color: var(--gold); }
.rule__sprig { width: 8.4cqw; height: 4.2cqw; flex: none; }
.rule__sprig--l { transform: scaleX(-1); }
.date__row {
  display: flex; flex-direction: column; align-items: center; gap: 1.6cqw;
  font-family: var(--f-caps); font-weight: 600;
  color: var(--burgundy);
}
.date__day { font-size: 7cqw; line-height: 1.1; letter-spacing: .18em; padding-left: .18em; text-transform: uppercase; }
.date__star { display: flex; align-items: center; gap: 1.4cqw; color: var(--gold); }
.date__star svg { width: 3.8cqw; height: 3.8cqw; fill: currentColor; }
.date__dash { width: 7cqw; height: 1px; background: var(--gold-line); }
.date__time { font-size: 5.8cqw; line-height: 1.1; letter-spacing: .03em; font-variant-numeric: lining-nums; white-space: nowrap; }
#date .rule--short { margin: 4.4cqw auto; }
.date__full {
  font-family: var(--f-caps); font-weight: 600;
  font-size: 5.5cqw; line-height: 1.1;
  letter-spacing: .13em; padding-left: .13em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--burgundy);
  white-space: nowrap;
}

/* =====================================================================
   CountdownTimer
   ===================================================================== */
#countdown { --pad-t: 46cqw; --pad-b: 44cqw; }
.count__title {
  font-family: var(--f-caps); font-weight: 600;
  font-size: 5.1cqw; line-height: 1.3;
  letter-spacing: .12em; padding-left: .12em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.count__title span, .count__note span { display: block; white-space: nowrap; }
.scene__body--count .rule { margin: 2.6cqw auto; }
.timer {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4cqw;
  width: 74cqw;
  margin: 4.6cqw 0 3.4cqw;
}
.tile {
  position: relative;
  aspect-ratio: 100 / 124;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 124' preserveAspectRatio='none'%3E%3Cpath d='M10 3H90Q90 10 97 10V114Q90 114 90 121H10Q10 114 3 114V10Q10 10 10 3Z' fill='%23FFFDF8' fill-opacity='.6' stroke='%23B8955A' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M13 6.8H87Q87.9 12.3 93.2 13.2V110.8Q87.9 111.7 87 117.2H13Q12.1 111.7 6.8 110.8V13.2Q12.1 12.3 13 6.8Z' fill='none' stroke='%23B8955A' stroke-opacity='.55' stroke-width='.7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.tile::before, .tile::after { /* little filigree crowning each frame */
  content: ""; position: absolute; left: 50%; width: 9cqw; height: 3cqw; margin-left: -4.5cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 20'%3E%3Cpath d='M32 3.2l3.2 6.8-3.2 6.8-3.2-6.8z' fill='%23B8955A'/%3E%3Cpath d='M27.6 10c-3.6 0-5.2-4.6-9-4.2-2.8.3-3.2 3.7-.8 4.2M36.4 10c3.6 0 5.2-4.6 9-4.2 2.8.3 3.2 3.7.8 4.2M27.6 10c-3.6 0-5.2 4.6-9 4.2-2.8-.3-3.2-3.7-.8-4.2M36.4 10c3.6 0 5.2 4.6 9 4.2 2.8-.3 3.2-3.7.8-4.2' fill='none' stroke='%23B8955A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tile::before { top: -1.6cqw; background-color: transparent; }
.tile::after { bottom: -1.6cqw; transform: rotate(180deg); }
.tile__num {
  font-family: var(--f-caps); font-weight: 600;
  font-size: 9.2cqw; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--burgundy);
}
.tile__label {
  margin-top: 1.6cqw;
  font-style: italic; font-size: 3.2cqw; line-height: 1;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.count__state { display: flex; flex-direction: column; align-items: center; margin: 4cqw 0 3cqw; animation: fade-up 1.2s var(--ease) both; }
.count__state[hidden] { display: none; }
.count__script { font-family: var(--f-script); font-size: 11cqw; line-height: 1.15; color: var(--burgundy); }
.count__caps { font-family: var(--f-caps); font-weight: 600; font-size: 4.2cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--burgundy-deep); }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.count__note { font-style: italic; font-size: 3.8cqw; line-height: 1.4; color: var(--ink-soft); text-wrap: balance; }

/* =====================================================================
   VenueSection
   ===================================================================== */
#venue { --pad-t: 47cqw; --pad-b: 44cqw; }
.venue__rule { display: flex; width: 30cqw; margin: 2.6cqw auto 3cqw; }
.venue__rule .rule__line { background: linear-gradient(90deg, transparent, var(--gold-line), transparent); transform-origin: 50% 50% !important; }
.venue__name {
  font-family: var(--f-caps); font-weight: 500;
  font-size: 12.4cqw; line-height: .98;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.venue__name span { display: block; }
.venue__address {
  margin-top: 3.6cqw;
  font-size: 4.3cqw; line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}
#venue .rule { margin: 3.6cqw auto 5cqw; }

.btn-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 2.6cqw;
  min-height: max(46px, 12.6cqw); padding: 0 5.4cqw;
  border-radius: 1.6cqw;
  background: linear-gradient(180deg, #8C2A3E, #6A1B2C 70%, #5E1626);
  color: #FBF1E2;
  font-family: var(--f-caps); font-weight: 600;
  font-size: 5.2cqw; letter-spacing: .03em;
  box-shadow:
    inset 0 0 0 .75cqw #6E1D2E,
    inset 0 0 0 calc(.75cqw + 1px) rgba(216, 191, 142, .95),
    0 0 0 1px rgba(184, 149, 90, .9),
    0 10px 22px -10px rgba(94, 22, 38, .75);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  overflow: hidden;
}
.btn-plaque::after, .btn-pill::after { /* metallic sweep on hover/focus */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 236, 200, .28) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  transition: background-position .9s var(--ease);
}
.btn-plaque:hover::after, .btn-plaque:focus-visible::after,
.btn-pill:hover::after, .btn-pill:focus-visible::after { background-position: 150% 0; }
.btn-plaque:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-plaque:active { transform: scale(.98); }
.btn-plaque__orn { width: 7cqw; height: 3.5cqw; color: var(--gold-light); transform: scaleX(-1); }
.btn-plaque__orn--r { transform: none; }

/* =====================================================================
   LocationQR
   ===================================================================== */
#location { --pad-t: 44cqw; --pad-b: 44cqw; }
.loc__title { display: flex; flex-direction: column; align-items: center; }
.loc__big {
  margin-top: .6cqw;
  font-family: var(--f-caps); font-weight: 500;
  font-size: 10.6cqw; line-height: 1;
  letter-spacing: .06em; padding-left: .06em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.scene__body--loc .rule { margin: 2.6cqw auto 3.6cqw; }
.qr {
  position: relative; display: block;
  width: 42cqw; padding: 2.6cqw;
  background: #FFFDF8;
  border-radius: 1.4cqw;
  box-shadow:
    0 0 0 1px var(--gold),
    inset 0 0 0 1.2cqw #FFFDF8,
    inset 0 0 0 calc(1.2cqw + .7px) var(--gold-line),
    0 12px 26px -16px rgba(94, 40, 30, .55);
  transition: transform .3s var(--ease);
}
.qr:hover { transform: translateY(-2px); }
.qr__frame { display: block; padding: 1.2cqw; }
.qr__code { width: 100%; height: auto; image-rendering: pixelated; }
.loc__hint { margin-top: 3cqw; font-style: italic; font-size: 4.1cqw; letter-spacing: .08em; color: var(--ink-soft); }

.cal { position: relative; margin-top: 4.4cqw; display: flex; flex-direction: column; align-items: center; }
.btn-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 2.6cqw;
  min-height: max(46px, 12.4cqw); padding: 0 6cqw 0 4.4cqw;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #8C2A3E, #6A1B2C 70%, #5E1626);
  color: #FBF1E2;
  font-family: var(--f-caps); font-weight: 600;
  font-size: 4.2cqw; letter-spacing: .16em; text-transform: uppercase;
  box-shadow:
    inset 0 0 0 .7cqw #6E1D2E,
    inset 0 0 0 calc(.7cqw + 1px) rgba(216, 191, 142, .95),
    0 0 0 1px rgba(184, 149, 90, .9),
    0 10px 22px -10px rgba(94, 22, 38, .75);
  overflow: hidden;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.btn-pill:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-pill:active { transform: scale(.98); }
.btn-pill__icon { width: 6.4cqw; height: 6.4cqw; color: var(--gold-light); flex: none; }
.btn-pill__sep { width: 1px; align-self: stretch; margin: 2.8cqw 0; background: rgba(216, 191, 142, .7); }

.cal__menu {
  display: flex; align-items: center; justify-content: center; gap: 2.4cqw;
  margin-top: 3cqw;
  padding: 1.4cqw 3cqw;
  border-radius: 999px;
  background: rgba(255, 253, 248, .9);
  box-shadow: 0 0 0 1px var(--gold-line), 0 8px 18px -12px rgba(94, 40, 30, .5);
  animation: fade-up .5s var(--ease) both;
}
.cal__menu[hidden] { display: none; }
.cal__opt {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.4cqw;
  font-family: var(--f-caps); font-weight: 600; font-size: 3.8cqw; letter-spacing: .02em;
  white-space: nowrap;
  color: var(--burgundy);
  text-decoration: underline; text-decoration-color: rgba(184, 149, 90, .6); text-underline-offset: 4px;
}
.cal__dot { width: 1.2cqw; height: 1.2cqw; background: var(--gold); transform: rotate(45deg); }

/* =====================================================================
   RSVPContacts
   ===================================================================== */
#rsvp { --pad-t: 54cqw; --pad-b: 42cqw; }
.rsvp__title { display: flex; flex-direction: column; align-items: center; }
.rsvp__script { margin-top: 1.4cqw; font-family: var(--f-script); font-size: 15.5cqw; line-height: 1.05; color: var(--burgundy); padding: 0 3cqw; }
.scene__body--rsvp .rule { margin: 1.4cqw auto 2.6cqw; }
.rsvp__hosts { font-size: 3.8cqw; line-height: 1.4; letter-spacing: .04em; color: var(--ink); text-wrap: balance; }

.contacts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3cqw;
  width: 72cqw; margin-top: 4.6cqw;
}
.contact {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 3.6cqw 2.2cqw 3cqw;
  border-radius: 1.4cqw;
  background: rgba(255, 253, 248, .6);
  box-shadow:
    0 0 0 1px var(--gold-line),
    inset 0 0 0 1cqw rgba(255, 253, 248, 0),
    inset 0 0 0 calc(1cqw + .7px) rgba(184, 149, 90, .4);
}
.contact__fleur { width: 11cqw; height: 3.4cqw; color: var(--gold); }
.contact__name {
  margin-top: 1.6cqw;
  font-family: var(--f-caps); font-weight: 600;
  font-size: 4.9cqw; line-height: 1.12;
  color: var(--burgundy-deep);
}
.contact__name span { display: block; }
.contact__rule { width: 60%; height: 1px; margin: 2.4cqw 0; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.contact__phone {
  display: flex; align-items: center; justify-content: center; gap: 1.4cqw;
  font-family: var(--f-caps); font-weight: 600;
  font-size: 4.1cqw; line-height: 1.2; letter-spacing: .02em;
  font-variant-numeric: lining-nums;
  color: var(--ink);
  white-space: nowrap;
}
.contact__phone svg { width: 3.4cqw; height: 3.4cqw; fill: var(--burgundy); flex: none; }
.contact__actions { display: flex; flex-direction: column; gap: 1.8cqw; width: 100%; margin-top: 3cqw; }
.btn-mini {
  display: flex; align-items: center; justify-content: center; gap: 1.6cqw;
  min-height: max(40px, 10.4cqw);
  border-radius: 999px;
  font-family: var(--f-caps); font-weight: 600;
  font-size: 4.1cqw; letter-spacing: .04em;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.btn-mini svg { width: 3.8cqw; height: 3.8cqw; flex: none; }
.btn-mini:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-mini:active { transform: scale(.97); }
.btn-mini--call {
  background: linear-gradient(180deg, #8C2A3E, #6A1B2C);
  color: #FBF1E2;
  box-shadow: inset 0 0 0 1px rgba(216, 191, 142, .9), 0 6px 14px -8px rgba(94, 22, 38, .7);
}
.btn-mini--call svg { fill: #F1DDB6; }
.btn-mini--wa {
  background: linear-gradient(180deg, #FFFDF8, #F6EEE2);
  color: var(--burgundy-deep);
  box-shadow: inset 0 0 0 1px var(--gold), 0 6px 14px -9px rgba(94, 40, 30, .5);
}
.btn-mini--wa svg { fill: #3F8A5C; }

/* =====================================================================
   ClosingSection
   ===================================================================== */
#closing { --pad-b: 34cqw; }
.closing__msg {
  font-size: 5.6cqw; line-height: 1.38;
  letter-spacing: .05em;
  color: #6A4E2E;
}
.closing__msg span { display: block; }
.scene__body--closing .rule { margin: 3.6cqw auto; }
.closing__seal { width: 30cqw; margin: 2cqw auto 1cqw; filter: drop-shadow(0 6px 10px rgba(80, 20, 25, .28)); }
.closing__names { font-family: var(--f-script); font-size: 10cqw; line-height: 1.25; color: var(--burgundy); }
.rule--leaf { width: 44cqw; margin: 1cqw auto 0 !important; }

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal], .js [data-reveal] * { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .js [data-reveal="line"] .rule__line { transform: none; }
  .intro__glints { display: none; }
  .bismillah { animation: none; background-position: 50% 0; }
  .rings__spark, .rings__glint { animation: none; opacity: 0; }
  .cue { opacity: 1; transition: none; }
  .intro, .intro__stage, .intro__scene, .intro__veil { transition-duration: .35s !important; transition-delay: 0s !important; }
  .intro.is-revealing .intro__stage { transform: none; }
  .intro.is-revealing .intro__scene { transform: translate(-50%, -50%); filter: none; }
}