/* ===== Luxury Wedding Invitation Tokens ===== */
:root {
  color-scheme: light;
  --paper: #f6ebe4;
  --gold: #9b8532;
  --gold-bright: #e6c567;
  --rose: #a8274f;
  --deep: #24141b;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
  background: #1c1417;
}
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
body {
  background: radial-gradient(circle at 50% 20%, #3a222b 0%, #170e12 100%);
  overflow-x: hidden;
  font-family: "Cinzel", "Cormorant SC", Georgia, serif;
  color: #3b2820;
  margin: 0;
}
body.intro-locked {
  overflow: hidden !important;
  height: 100dvh;
  touch-action: none;
}

.page {
  max-width: 480px;
  background: linear-gradient(180deg, #fdf8ee 0%, #f6dcd0 16%, #fbeeea 30%, #fcf7f1 46%, #fbe4d6 64%, #fbe6dc 82%, #ece3da 100%);
  box-shadow: 0 0 65px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(230, 197, 103, 0.22);
}

/* ===== 00 · Interactive Car Splash Overlay ===== */
.car-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(15, 10, 12, 0.92);
  backdrop-filter: blur(12px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.9s;
}
.car-intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.car-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  max-height: 920px;
  overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.75);
  background: #2b3137;
}
.road-bg-wrap {
  position: absolute;
  inset: -8% 0 0 0;
  will-change: transform;
}
.road-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: contrast(1.03) saturate(1.06);
}
.road-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 16, 22, 0.55) 0%, rgba(12, 16, 22, 0.08) 24%, rgba(12, 16, 22, 0.08) 72%, rgba(10, 13, 18, 0.78) 100%),
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

/* Top Welcome Badge on Road */
.intro-header {
  position: absolute;
  top: max(5.5%, 28px);
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  text-align: center;
  z-index: 4;
  pointer-events: none;
}
.intro-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(18, 22, 29, 0.68);
  border: 1px solid rgba(245, 214, 138, 0.55);
  backdrop-filter: blur(8px);
  color: #f9e6b3;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.intro-title {
  margin: 10px 0 2px;
  font-family: "Great Vibes", "Pinyon Script", cursive;
  font-size: 10.5cqw;
  font-weight: 400;
  color: #fffdf9;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), 0 0 28px rgba(235, 192, 99, 0.45);
  line-height: 1.1;
}
.intro-sub {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 4cqw;
  color: rgba(255, 248, 235, 0.92);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

/* Car Cutout & Light Effects */
.car-rig {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 43.5%;
  transform: translate(-50%, -48%);
  z-index: 3;
  will-change: transform;
  pointer-events: none;
}
.car-shadow {
  position: absolute;
  inset: 3% -6% -4% -6%;
  background: radial-gradient(ellipse at 50% 52%, rgba(0, 0, 0, 0.72) 25%, rgba(0, 0, 0, 0.35) 58%, transparent 76%);
  filter: blur(10px);
  z-index: 1;
}
.car-sprite {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 2;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.52));
}

/* Headlight Beams */
.headlight {
  position: absolute;
  top: -36%;
  width: 44%;
  height: 42%;
  background: linear-gradient(0deg, rgba(255, 250, 220, 0.85) 0%, rgba(255, 244, 185, 0.32) 45%, transparent 100%);
  clip-path: polygon(38% 100%, 62% 100%, 100% 0%, 0% 0%);
  filter: blur(6px);
  opacity: 0;
  transform-origin: 50% 100%;
  transform: scaleY(0.4);
  transition: opacity 0.35s ease, transform 0.45s ease;
  z-index: 1;
  mix-blend-mode: screen;
}
.headlight.hl-left {
  left: 2%;
  transform: rotate(-5deg) scaleY(0.4);
}
.headlight.hl-right {
  right: 2%;
  transform: rotate(5deg) scaleY(0.4);
}
.car-rig.lights-on .headlight {
  opacity: 1;
}
.car-rig.lights-on .headlight.hl-left {
  transform: rotate(-5deg) scaleY(1);
}
.car-rig.lights-on .headlight.hl-right {
  transform: rotate(5deg) scaleY(1);
}

/* Tail Light Glow */
.taillight {
  position: absolute;
  bottom: 2%;
  width: 24%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, #ff2a4b 0%, rgba(255, 30, 66, 0.65) 50%, transparent 100%);
  filter: blur(5px);
  opacity: 0.45;
  z-index: 3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.taillight.tl-left { left: 8%; }
.taillight.tl-right { right: 8%; }
.car-rig.lights-on .taillight {
  opacity: 1;
  transform: scale(1.45);
}

/* Exhaust / Spark Trail Container */
.exhaust-box {
  position: absolute;
  bottom: -6%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 90px;
  z-index: 1;
  pointer-events: none;
}
.exhaust-puff {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 215, 0.78) 0%, rgba(230, 197, 103, 0.32) 55%, transparent 100%);
  filter: blur(2px);
}

/* Bottom "Start the Car" Control Dock */
.car-cta-dock {
  position: absolute;
  left: 50%;
  bottom: max(5%, 24px);
  transform: translateX(-50%);
  width: 88%;
  z-index: 5;
  text-align: center;
}
.start-car-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 310px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 232, 163, 0.85);
  background: linear-gradient(135deg, #9c1b45 0%, #c83e5b 50%, #d88941 100%);
  background-size: 200% 200%;
  color: #fff;
  font-family: "Cinzel", Georgia, serif;
  font-size: 4.3cqw;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow:
    0 14px 34px rgba(168, 39, 79, 0.55),
    0 0 0 5px rgba(255, 255, 255, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.45);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  animation: pulseBtn 2.4s ease-in-out infinite;
}
.start-car-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-24deg);
  animation: btnSweep 3.2s ease-in-out infinite;
}
.start-car-btn:hover, .start-car-btn:focus {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 40px rgba(216, 137, 65, 0.65),
    0 0 0 6px rgba(255, 232, 163, 0.24);
  color: #fff;
}
.start-car-btn:active {
  transform: translateY(1px) scale(0.99);
}
.start-car-btn .key-ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  padding: 4px;
}
.start-hint {
  margin: 10px 0 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 3cqw;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 246, 232, 0.88);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.start-hint .dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd97d;
  box-shadow: 0 0 10px #ffd97d;
  animation: dotBlink 1.3s ease-in-out infinite alternate;
}

@keyframes pulseBtn {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.018); }
}
@keyframes btnSweep {
  0% { left: -120%; }
  55%, 100% { left: 160%; }
}
@keyframes dotBlink {
  from { opacity: 0.35; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.3); }
}

/* Replay Car Intro Button */
#replayCar {
  position: fixed;
  z-index: 30;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: max(14px, calc(50% - 226px));
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(168, 39, 79, 0.35);
  background: rgba(255, 248, 243, 0.9);
  backdrop-filter: blur(8px);
  color: #8f1d42;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(120, 60, 40, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
#replayCar:hover {
  transform: translateY(-1px);
  background: #fff;
}

/* ===== Scenes ===== */
.scene {
  container-type: inline-size;
  aspect-ratio: 9 / 16;
  margin-top: -9%;
}
.scene.hero {
  margin-top: 0;
}
.art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.scene:not(.hero) .art {
  -webkit-mask-image: linear-gradient(transparent, #000 5.5%);
  mask-image: linear-gradient(transparent, #000 5.5%);
}
.art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 40%;
  will-change: transform;
}
.art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(255, 245, 232, 0.06) 0%, rgba(40, 18, 24, 0.1) 100%);
  pointer-events: none;
}

/* ===== 0 · Hero Wind-Swaying Flowers & Shimmer Overlay ===== */
.hero-wind-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.wind-sprig {
  position: absolute;
  will-change: transform;
  filter: drop-shadow(0 4px 8px rgba(90, 40, 75, 0.16));
}
/* Left purple botanical sprigs swaying in the breeze */
.wind-sprig.sprig-l1 {
  left: 7.5%;
  top: 26%;
  width: 16%;
  transform-origin: 85% 95%;
  animation: windSwayLeft1 4.2s ease-in-out infinite alternate;
}
.wind-sprig.sprig-l2 {
  left: 6.2%;
  top: 41%;
  width: 17%;
  transform-origin: 90% 88%;
  animation: windSwayLeft2 3.7s ease-in-out -1.2s infinite alternate;
}
.wind-sprig.sprig-l3 {
  left: 9.5%;
  top: 56%;
  width: 18%;
  transform-origin: 88% 15%;
  animation: windSwayLeft3 4.6s ease-in-out -2.1s infinite alternate;
}
/* Top roses & leaves gentle breeze sway */
.wind-sprig.rose-top-l {
  left: 28%;
  top: 17.5%;
  width: 14%;
  transform-origin: 70% 85%;
  animation: windSwayRose 3.9s ease-in-out -0.6s infinite alternate;
}
.wind-sprig.rose-top-r {
  left: 55%;
  top: 22.5%;
  width: 15%;
  transform-origin: 25% 80%;
  animation: windSwayRoseR 4.4s ease-in-out -1.7s infinite alternate;
}

@keyframes windSwayLeft1 {
  0%   { transform: rotate(-5.5deg) skewX(-3deg) scale(1); }
  50%  { transform: rotate(4deg) skewX(2.5deg) scale(1.02); }
  100% { transform: rotate(-2deg) skewX(-1.5deg) scale(0.99); }
}
@keyframes windSwayLeft2 {
  0%   { transform: rotate(4.5deg) skewX(3deg) translateX(0); }
  50%  { transform: rotate(-6deg) skewX(-3.5deg) translateX(-2px); }
  100% { transform: rotate(3deg) skewX(1.5deg) translateX(1px); }
}
@keyframes windSwayLeft3 {
  0%   { transform: rotate(-4deg) skewY(-2deg); }
  50%  { transform: rotate(5.5deg) skewY(2.5deg); }
  100% { transform: rotate(-2.5deg) skewY(-1deg); }
}
@keyframes windSwayRose {
  0%   { transform: rotate(-4.5deg) scale(0.98); }
  100% { transform: rotate(5deg) scale(1.03); }
}
@keyframes windSwayRoseR {
  0%   { transform: rotate(4.5deg) scale(1.02); }
  100% { transform: rotate(-5deg) scale(0.98); }
}

/* Subtle animated golden ring halo on Hero */
.hero-ring-glow {
  position: absolute;
  left: 49.5%;
  top: 47.2%;
  width: 68%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(226, 183, 84, 0.38);
  box-shadow: 0 0 28px rgba(235, 192, 99, 0.25), inset 0 0 24px rgba(235, 192, 99, 0.18);
  pointer-events: none;
  animation: ringPulse 4.5s ease-in-out infinite alternate;
}
@keyframes ringPulse {
  from { opacity: 0.45; transform: translate(-50%, -50%) scale(0.99); }
  to   { opacity: 0.9; transform: translate(-50%, -50%) scale(1.015); }
}

/* ===== 2B · Scratch to Reveal Section (Below Third Image) ===== */
.c-scratch {
  --g1: #7a1224;
  --g2: #c98a2c;
  --tx: #5c1320;
}
.scratch-card-box {
  position: absolute;
  left: 7.5%;
  top: 42.1%;
  width: 84.7%;
  height: 32.8%;
  border-radius: 4.2cqw;
  overflow: hidden;
  z-index: 4;
  box-shadow:
    0 14px 34px rgba(90, 45, 12, 0.24),
    0 0 0 1.5px rgba(214, 166, 66, 0.65);
  background: radial-gradient(circle at 50% 35%, #fffdf8 0%, #fbf0dc 62%, #f3dec0 100%);
  user-select: none;
  -webkit-user-select: none;
}

/* Revealed Wedding Date Layer Underneath Scratch Foil */
.scratch-underlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4% 6%;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.92), rgba(251, 237, 212, 0.88)),
    repeating-linear-gradient(45deg, rgba(201, 146, 44, 0.05) 0 8px, transparent 8px 16px);
  border: 2px solid rgba(196, 145, 48, 0.45);
  border-radius: 4.2cqw;
}
.scratch-underlay::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(168, 39, 79, 0.35);
  border-radius: 3.2cqw;
  pointer-events: none;
}
.reveal-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(168, 39, 79, 0.1);
  border: 1px solid rgba(168, 39, 79, 0.28);
  color: #8f163c;
  font-family: "Cinzel", serif;
  font-size: 2.55cqw;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.2cqw;
}
.reveal-date-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.6cqw;
  margin: 0.4cqw 0 1cqw;
}
.reveal-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 19cqw;
  padding: 1.4cqw 2.4cqw;
  border-radius: 2.6cqw;
  background: linear-gradient(145deg, #fffdf9, #f7e6c9);
  border: 1.5px solid rgba(197, 147, 45, 0.65);
  box-shadow: 0 6px 16px rgba(130, 75, 20, 0.12);
}
.reveal-pill .num {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 6.4cqw;
  font-weight: 700;
  line-height: 1.05;
  background: linear-gradient(135deg, #8b1336 0%, #c98827 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.reveal-pill .lbl {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 2.15cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7c5b24;
  margin-top: 2px;
}
.reveal-couple {
  font-family: "Great Vibes", cursive;
  font-size: 6.8cqw;
  color: #8b1336;
  line-height: 1.1;
  margin: 0.4cqw 0 0;
  text-shadow: 0 2px 8px rgba(255, 248, 238, 0.9);
}
.reveal-venue {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 3.3cqw;
  color: #6b4c1b;
  margin: 0;
}

/* Pop animation when scratch completes */
.scratch-card-box.is-revealed .scratch-underlay {
  animation: revealCelebrate 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes revealCelebrate {
  0%   { transform: scale(0.95); }
  55%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Interactive Scratch Canvas on Top */
.scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  z-index: 3;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.scratch-canvas:active {
  cursor: grabbing;
}
.scratch-card-box.is-revealed .scratch-canvas {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
}

/* Floating Hand Hint Pill */
.scratch-hint-pill {
  position: absolute;
  left: 50%;
  top: 77.2%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(122, 18, 36, 0.9);
  border: 1px solid rgba(246, 211, 129, 0.7);
  color: #fff9ec;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 2.75cqw;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 20px rgba(122, 18, 36, 0.28);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  animation: hintBob 1.8s ease-in-out infinite alternate;
}
.scratch-hint-pill.is-done {
  background: linear-gradient(135deg, #8b1336, #c98827);
}
@keyframes hintBob {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-4px); }
}

/* Flower Shower Layer (Triggered on Scratch Completion) */
.flower-shower {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
}
.falling-flower {
  position: absolute;
  top: -12%;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 8px rgba(120, 30, 50, 0.22));
}

/* ===== Text & Scene Colors ===== */
.tg {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.c-invite { --g1: #8f163c; --g2: #d6556e; --tx: #6c5618; --x: 51%; }
.c-henna  { --g1: #9b1740; --g2: #e2805f; --tx: #7b651d; }
.c-naach  { --g1: #141958; --g2: #6855c9; --tx: #7a641d; --x: 65%; }
.c-haldi  { --g1: #966506; --g2: #eab93e; --tx: #846408; --x: 35.2%; }
.c-final  { --g1: #9c1238; --g2: #d6982f; --tx: #78621c; }
.c-dio    { --g1: #9f1f47; --g2: #df826d; --tx: #715b19; }

/* ===== Upgraded Royal Typography ===== */
.t {
  position: absolute;
  left: var(--x, 50%);
  top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  width: max-content;
  color: var(--tx);
  line-height: 1.32;
  font-family: "Cinzel", "Cormorant SC", Georgia, serif;
  font-weight: 600;
  font-size: 4.35cqw;
  letter-spacing: 0.045em;
  text-shadow: 0 1px 12px rgba(255, 249, 244, 0.88), 0 0 4px rgba(255, 249, 244, 0.75);
}
.ln {
  display: block;
  overflow: hidden;
  padding: 0.08em 0;
}
.li {
  display: block;
}
.sc, .nm, .dd {
  background: linear-gradient(105deg, var(--g1) 0%, var(--g2) 38%, #c9962c 62%, var(--g1) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(255, 248, 242, 0.65));
  width: auto;
}
.sc, .nm {
  font-family: "Great Vibes", "Pinyon Script", "Snell Roundhand", cursive;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.18;
  padding: 0.16em 0.34em;
}
.sc {
  font-size: 9.8cqw;
}
.nm {
  font-size: 14.2cqw;
}
.shine {
  animation: shine 6s ease-in-out infinite alternate;
}
@keyframes shine {
  to { background-position: 100% 0; }
}
.an {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 4.3cqw;
  color: var(--g1);
}
.sb {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 3.65cqw;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.it {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 4.1cqw;
  letter-spacing: 0.02em;
}
.dd {
  font-family: "Cinzel Decorative", "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 10.6cqw;
  letter-spacing: 0.02em;
  padding: 0.06em 0.28em;
}
.dd sup {
  font-family: "Cormorant Garamond", serif;
  font-size: 0.42em;
  font-style: italic;
  vertical-align: top;
  position: relative;
  top: 0.14em;
  margin-left: 0.04em;
}
.bd {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.75cqw;
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: 0.02em;
}
.ev {
  font-family: "Plus Jakarta Sans", "Cormorant SC", sans-serif;
  font-size: 3.55cqw;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.orn {
  position: absolute;
  left: var(--x, 50%);
  top: calc(var(--y) * 1%);
  width: 48%;
  height: 1.5px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, var(--g2), var(--g1), var(--g2), transparent);
}
.orn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2cqw;
  height: 2cqw;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, var(--g2), var(--g1));
  box-shadow: 0 0 0 0.8cqw var(--bgc, rgba(255, 244, 238, 0.92));
}

/* ===== Hero Controls & Music Toggle ===== */
.open.s-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.8%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 6px 14px;
  cursor: pointer;
  color: #8f163c;
  text-decoration: none;
  box-shadow: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.open.s-scroll-cue .scroll-lbl {
  font-family: "Cormorant Garamond", "Cinzel", Georgia, serif;
  font-style: italic;
  font-size: 3.15cqw;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: #8b2248;
  opacity: 0.9;
  text-shadow: 0 1px 6px rgba(255, 250, 244, 0.95);
}
.open.s-scroll-cue .s-curve-arrow {
  width: 7.8cqw;
  height: 22.5cqw;
  overflow: visible;
  filter: drop-shadow(0 2px 6px rgba(158, 42, 91, 0.18));
  animation: sArrowFloat 2.4s ease-in-out infinite alternate;
}
.open.s-scroll-cue .s-curve-path {
  stroke-dasharray: 180;
  stroke-dashoffset: 0;
  animation: sCurveFlow 3.2s ease-in-out infinite;
}
@keyframes sArrowFloat {
  0%   { transform: translateY(-2px); }
  100% { transform: translateY(5px); }
}
@keyframes sCurveFlow {
  0%   { stroke-dashoffset: 180; opacity: 0.45; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.85; }
}
.open.s-scroll-cue:hover, .open.s-scroll-cue:focus {
  transform: translateX(-50%) translateY(3px);
  opacity: 1;
}
.open:focus-visible, #mb:focus-visible, .start-car-btn:focus-visible {
  outline: 3px solid #ffd97d;
  outline-offset: 3px;
}
#mb {
  position: fixed;
  z-index: 30;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: max(14px, calc(50% - 226px));
  width: 46px;
  height: 46px;
  gap: 3px;
  padding: 0;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(255, 248, 243, 0.92), rgba(255, 248, 243, 0.92)) padding-box,
    conic-gradient(from 0deg, #a8274f, #e0a458, #a8274f) border-box;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(120, 60, 40, 0.22);
}
#mb i {
  display: block;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--rose);
}
#mb[aria-pressed="true"] i {
  animation: eq 0.9s ease-in-out infinite;
}
#mb[aria-pressed="true"] i:nth-child(2) { animation-delay: -0.3s; }
#mb[aria-pressed="true"] i:nth-child(3) { animation-delay: -0.6s; }
#mb[aria-pressed="true"] i:nth-child(4) { animation-delay: -0.15s; }
@keyframes eq {
  50% { transform: scaleY(3); }
}
#prog {
  position: fixed;
  z-index: 40;
  left: 0;
  top: 0;
  height: 3.5px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #a8274f, #e0a458, #1d2160);
}

/* ===== Particles ===== */
.fx {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}
.fx.sparkle {
  width: 3.2cqw;
  height: 3.2cqw;
  background: radial-gradient(circle, #fff7d6, #e6b84f 55%, #c98a1d);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.fx.petal {
  width: 3.6cqw;
  height: 2.4cqw;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #ffc2c6, #f27a8d);
}
.fx.pearl {
  width: 1.7cqw;
  height: 1.7cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #e8e2d6 60%, #b3ab9a);
}
.fx.haldi {
  width: 2.3cqw;
  height: 1.6cqw;
  border-radius: 50%;
  background: linear-gradient(#f6c945, #d98a12);
}
.fx.firefly {
  width: 2.2cqw;
  height: 2.2cqw;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0%, #f5c84c 55%, transparent 100%);
  box-shadow: 0 0 10px rgba(245, 200, 76, 0.85);
}

/* ===== Hidden-until-animated (only when JS runs) ===== */
.js .t, .js .orn {
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .shine, #mb i, .start-car-btn, .start-car-btn::before, .wind-sprig {
    animation: none !important;
  }
}