/* ==========================================================================
   Felix & Irene (许逸飞 & 陈诗雨) — 2026.12.19 Wedding Invitation Stylesheet
   ========================================================================== */

:root {
  --burgundy-deep: #3d0709;
  --burgundy-main: #780f13;
  --burgundy-card: #821418;
  --cream-paper: #f4ece1;
  --cream-btn: #f3efe6;
  --gold-soft: #e6c39c;
  --ink-crimson: #9e1b14;
  --serif-cn: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "PMingLiU", Georgia, serif;
  --serif-en: "Didot", "Bodoni MT", "Playfair Display", "Times New Roman", Georgia, serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  background-color: #1c0305;
  color: var(--cream-paper);
  font-family: var(--serif-cn);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 18%, rgba(120, 18, 24, 0.38) 0%, rgba(24, 3, 5, 0.98) 72%),
    #1a0305;
  overflow-x: hidden;
}

/* Lock vertical scroll before opening the envelope on Section 1 */
body.is-locked {
  overflow: hidden;
  height: 100dvh;
}

/* Main centered mobile-proportioned stage */
.invitation-shell {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background-color: var(--burgundy-main);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 228, 205, 0.08);
  overflow: hidden;
}

/* Generic PSD Coordinate Stage */
.psd-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
}

.psd-layer {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}

.psd-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   Floating BGM Toggle (Top-Right)
   ========================================================================== */
.bgm-toggle {
  position: fixed;
  top: 16px;
  right: max(16px, calc(50vw - 214px));
  z-index: 120;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 225, 0.42);
  background: rgba(58, 8, 11, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38);
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.bgm-toggle:hover {
  transform: scale(1.06);
  border-color: rgba(244, 236, 225, 0.75);
}

.bgm-toggle svg {
  width: 19px;
  height: 19px;
}

.bgm-toggle.is-playing .bgm-disc {
  animation: spinSlow 5.5s linear infinite;
}

.bgm-toggle:not(.is-playing)::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 1.5px;
  background: rgba(244, 236, 225, 0.85);
  transform: rotate(-42deg);
  border-radius: 2px;
}

.bgm-note {
  position: absolute;
  font-size: 12px;
  color: rgba(244, 236, 225, 0.85);
  pointer-events: none;
  opacity: 0;
}

.bgm-toggle.is-playing .bgm-note-1 {
  animation: floatNote1 2.4s ease-out infinite;
}
.bgm-toggle.is-playing .bgm-note-2 {
  animation: floatNote2 2.4s ease-out 1.2s infinite;
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

@keyframes floatNote1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-12px, -24px) scale(1.1) rotate(-14deg); }
}

@keyframes floatNote2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  30% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(10px, -26px) scale(1.05) rotate(15deg); }
}

/* ==========================================================================
   Section 1: Cover Envelope, Sliding Card, Circle & Cats
   ========================================================================== */
.sec-cover {
  aspect-ratio: 1125 / 1950;
  background-color: #460708;
  perspective: 1200px;
}

/* Card slot clipped above the bottom of the envelope (y=1890 -> 1690 in S1) */
.cover-card-slot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 86.67%; /* 1690 / 1950 */
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}

.cover-card-rig {
  position: absolute;
  left: 9.8667%;   /* 111 / 1125 */
  top: 15.8343%;   /* 268 / 1690 inside slot -> y=268 in S1! */
  width: 81.6%;    /* 918 / 1125 */
  aspect-ratio: 918 / 1075;
  transform: translate3d(0, 74%, 0);
  opacity: 0;
  transition:
    transform 1.48s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.28s ease;
  will-change: transform, opacity;
}

.sec-cover.is-opening .cover-card-rig,
.sec-cover.is-opened .cover-card-rig {
  opacity: 1;
  transform: translate3d(0, 0%, 0);
}

.cover-card-img {
  width: 100%;
  height: 100%;
  display: block;
  box-shadow: 0 -8px 28px rgba(20, 2, 3, 0.35);
}

/* Hand-drawn red circle around 19 */
.card-red-circle-wrap {
  position: absolute;
  left: 41.285%;   /* 379 / 918 */
  top: 82.698%;    /* 889 / 1075 */
  width: 19.172%;  /* 176 / 918 */
  height: 14.14%;  /* 152 / 1075 */
}

.card-red-circle-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.circle-reveal-stroke {
  opacity: 0;
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
}

.sec-cover.is-card-ready .circle-reveal-stroke {
  opacity: 1;
  animation: drawRedCircle 0.85s cubic-bezier(0.35, 0, 0.25, 1) forwards;
}

@keyframes drawRedCircle {
  to { stroke-dashoffset: 0; }
}

/* Sleeping cat (bottom-left of card) + floating z z */
.cat-left-wrap {
  position: absolute;
  left: 22.44%;    /* 206 / 918 */
  top: 50.605%;    /* 544 / 1075 */
  width: 25.272%;  /* 232 / 918 */
  height: 10.698%; /* 115 / 1075 */
  transform-origin: 50% 90%;
}

.cat-left-img {
  width: 100%;
  height: 100%;
  display: block;
}

.sec-cover.is-cats-alive .cat-left-img {
  animation: catSleepBreath 3.2s ease-in-out infinite;
}

@keyframes catSleepBreath {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.015, 1.055) translateY(-1.5%); }
}

.cat-zzz {
  position: absolute;
  color: var(--ink-crimson);
  font-family: "Georgia", serif;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

.cat-zzz-1 {
  right: 22%;
  top: -8%;
  font-size: clamp(12px, 3.2vw, 15px);
}

.cat-zzz-2 {
  right: 30%;
  top: -34%;
  font-size: clamp(14px, 3.8vw, 18px);
}

.sec-cover.is-cats-alive .cat-zzz-1 {
  animation: zzzFloat1 2.8s ease-in-out infinite;
}

.sec-cover.is-cats-alive .cat-zzz-2 {
  animation: zzzFloat2 2.8s ease-in-out 0.65s infinite;
}

@keyframes zzzFloat1 {
  0% { opacity: 0; transform: translate(0, 6px) scale(0.75); }
  25% { opacity: 0.95; }
  75% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-4px, -10px) scale(1.05); }
}

@keyframes zzzFloat2 {
  0% { opacity: 0; transform: translate(0, 8px) scale(0.8); }
  28% { opacity: 0.98; }
  78% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-6px, -14px) scale(1.12); }
}

/* Stretching / Yawning cat (top-right of card — 10-frame TPS morph sheet) */
.cat-right-stage {
  position: absolute;
  left: 57.1895%;   /* 525 / 918 */
  top: 26.2326%;    /* 282 / 1075 */
  width: 25.7081%;  /* 236 / 918 */
  height: 21.7674%; /* 234 / 1075 */
  transform-origin: 55% 92%;
  pointer-events: none;
  will-change: transform;
}

.cat-right-sprite {
  position: absolute;
  inset: 0;
  background-size: 1000% 100%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  will-change: background-position, opacity;
}

.sec-cover.is-card-primed .cat-right-sprite,
.sec-cover.is-opening .cat-right-sprite,
.sec-cover.is-opened .cat-right-sprite {
  background-image: url("./assets/s1_cat_right_sheet.webp");
}

#cat-sprite-b {
  opacity: 0;
}

/* Front Envelope Pocket + Closed Envelope Layers */
.cover-front-pocket {
  left: 0;
  top: 58.4615%; /* 1140 / 1950 */
  width: 100%;
  z-index: 8;
}

.cover-closed-base {
  left: 0;
  top: 54.8718%; /* 1070 / 1950 */
  width: 100%;
  z-index: 9;
  transition: opacity 0.32s ease;
}

.sec-cover.is-opening .cover-closed-base,
.sec-cover.is-opened .cover-closed-base {
  opacity: 0;
}

.cover-closed-flap {
  left: 0;
  top: 56.6154%; /* 1104 / 1950 */
  width: 100%;
  z-index: 10;
  transform-origin: 50% 3%;
  backface-visibility: hidden;
  transition:
    transform 0.72s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease 0.36s;
}

.sec-cover.is-opening .cover-closed-flap,
.sec-cover.is-opened .cover-closed-flap {
  transform: rotateX(175deg);
  opacity: 0;
}

/* Interactive Wax Seal Trigger Button (Concentric with perceived 3D oval rim of red wax seal) */
.seal-trigger {
  position: absolute;
  left: 51.20%;
  top: 71.13%;
  width: 18.05%;
  aspect-ratio: 1.057 / 1;
  padding: 0;
  display: block;
  transform: translate(-50%, -50%);
  z-index: 20;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
}

.seal-trigger::before,
.seal-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 224, 195, 0.58);
  transform-origin: 50% 50%;
  animation: sealPulse 2.4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
  pointer-events: none;
}

.seal-trigger::after {
  animation-delay: 1.2s;
}

.sec-cover.is-opening .seal-trigger,
.sec-cover.is-opened .seal-trigger {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

@keyframes sealPulse {
  0% { transform: scale(1.02); opacity: 0.88; }
  100% { transform: scale(1.50); opacity: 0; }
}

.cover-open-hint {
  position: absolute;
  left: 50%;
  bottom: 5.8%;
  transform: translateX(-50%);
  z-index: 20;
  text-align: center;
  color: rgba(246, 234, 220, 0.88);
  font-size: 13px;
  letter-spacing: 0.24em;
  white-space: nowrap;
  cursor: pointer;
  animation: hintBreath 2.4s ease-in-out infinite;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
}

.cover-open-hint span {
  display: block;
  margin-top: 5px;
  font-family: var(--serif-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  opacity: 0.65;
}

/* Cancel hintBreath animation immediately upon opening so it never overlaps cover-scroll-hint */
.sec-cover.is-opening .cover-open-hint,
.sec-cover.is-opened .cover-open-hint {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
}

/* Scroll down hint once envelope is opened */
.cover-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 3.4%;
  transform: translate(-50%, 10px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: rgba(246, 234, 220, 0.78);
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sec-cover.is-cats-alive .cover-scroll-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

.cover-scroll-chevron {
  width: 14px;
  height: 14px;
  border-right: 1.5px solid rgba(246, 234, 220, 0.75);
  border-bottom: 1.5px solid rgba(246, 234, 220, 0.75);
  transform: rotate(45deg);
  animation: scrollBounce 1.8s ease-in-out infinite;
}

@keyframes hintBreath {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(-2px) rotate(45deg); opacity: 0.45; }
  50% { transform: translateY(4px) rotate(45deg); opacity: 0.95; }
}

/* ==========================================================================
   Section 2: Love Calling — Vintage Rotary Phone (1 - 2 - 1 - 9)
   ========================================================================== */
.sec-phone {
  aspect-ratio: 1125 / 1760;
  background-color: #6b0e12;
  margin-top: -1px;
}

.s2-header-layer {
  left: 4.8889%;   /* 55 / 1125 */
  top: 1.1364%;    /* 20 / 1760 */
  width: 91.5556%; /* 1030 / 1125 */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.95s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.sec-phone.in-view .s2-header-layer {
  opacity: 1;
  transform: translateY(0);
}

/* Rotary Dial Assembly Container (880x880 centered on true axle 572.51, 1017.35 in S2) */
.dial-assembly {
  position: absolute;
  left: 11.7787%;  /* 132.51 / 1125 */
  top: 32.8040%;   /* 577.35 / 1760 */
  width: 78.2222%; /* 880 / 1125 */
  aspect-ratio: 1 / 1;
  z-index: 4;
  cursor: pointer;
}

/* Rotating Carrier (880x880 square — exact 50% 50% axle!) */
.dial-rotor-carrier {
  position: absolute;
  inset: 0;
  z-index: 4;
  transform-origin: 50% 50%;
  transform: translate3d(0, 0, 0) rotate(0deg);
  will-change: transform;
  backface-visibility: hidden;
}

.dial-rotor-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
}

/* Persistent Glowing Blue Hearts inside Holes 1, 2, 9 (exact 2-6.jpg slices in 880x880) */
.dial-rotor-heart {
  position: absolute;
  width: 12.7273%; /* 112 / 880 */
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.22s ease, filter 0.25s ease;
}

.dial-rotor-heart.heart-1 { left: 72.0455%; top: 33.8636%; } /* 634/880, 298/880 */
.dial-rotor-heart.heart-2 { left: 62.8409%; top: 26.2500%; } /* 553/880, 231/880 */
.dial-rotor-heart.heart-9 { left: 36.8182%; top: 73.6364%; } /* 324/880, 648/880 */

.dial-rotor-heart.is-lit {
  opacity: 1;
}

.dial-rotor-heart.is-pulsing {
  opacity: 1;
  filter: brightness(1.12);
}

/* Stationary Brass Finger Stop on top of rotor */
.s2-finger-stop {
  z-index: 8;
}

/* Center Nameplate Texts ('Wedding' + 1-by-1 Date Glyphs) */
.s2-txt-wedding {
  z-index: 3;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.s2-txt-wedding.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.s2-date-glyph {
  z-index: 3;
  opacity: 0;
  transform: translateY(5px) scale(0.94);
  transform-origin: 50% 60%;
  transition:
    opacity 0.28s ease,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.s2-date-glyph.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ==========================================================================
   Section 3: Keyhole 3D Pop-Out (3.新郎新娘介绍)
   ========================================================================== */
.sec-keyhole {
  aspect-ratio: 1125 / 2510;
  margin-top: -28%; /* 315 / 1125 = 28% exact overlap for torn paper edge! */
  z-index: 5;
}

.s3-word-wedding {
  z-index: 2;
  opacity: 0;
  transform: translate3d(-28px, 14px, 0);
  transition: opacity 1.1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.s3-word-invitation {
  z-index: 2;
  opacity: 0;
  transform: translate3d(28px, -10px, 0);
  transition: opacity 1.1s ease 0.18s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}

.s3-keyhole-card {
  z-index: 3;
  opacity: 0;
  transform: scale(0.93) translateY(24px);
  transition: opacity 1s ease 0.12s, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.s3-popout {
  z-index: 4;
  opacity: 0;
  transform: scale(0.89) translateY(34px);
  transform-origin: 50% 85%;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32));
  transition: opacity 1.05s ease 0.34s, transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.34s;
}

.s3-copy {
  z-index: 4;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.95s ease 0.52s, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.52s;
}

.sec-keyhole.in-view .s3-word-wedding,
.sec-keyhole.in-view .s3-word-invitation {
  opacity: 1;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

.sec-keyhole.in-view .s3-keyhole-card,
.sec-keyhole.in-view .s3-popout,
.sec-keyhole.in-view .s3-copy {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ==========================================================================
   Section 4: Reception Itinerary, Satin Curtains & Bobbleheads (4.喜宴流程)
   ========================================================================== */
.sec-itinerary {
  aspect-ratio: 1125 / 2416;
  margin-top: -23.6444%; /* 266 / 1125 exact PSD overlap! */
  z-index: 6;
}

/* Exact anatomical neck & jaw hinge pivots (42.33% 91.75% & 46.13% 58.18%) + pure rotation (zero translateY!) */
.s4-head-groom {
  z-index: 3;
  transform-origin: 42.33% 91.75%;
  pointer-events: auto;
  cursor: pointer;
  animation: bobbleGroom 2.8s ease-in-out infinite;
}

.s4-head-bride {
  z-index: 3;
  transform-origin: 46.13% 58.18%;
  pointer-events: auto;
  cursor: pointer;
  animation: bobbleBride 3.0s ease-in-out -0.85s infinite;
}

.s4-head-groom.is-excited {
  animation: bobbleExcited 0.56s ease-in-out 2;
}

.s4-head-bride.is-excited {
  animation: bobbleExcitedBride 0.56s ease-in-out 2;
}

@keyframes bobbleGroom {
  0%, 100% { transform: rotate(-2.7deg); }
  50% { transform: rotate(2.7deg); }
}

@keyframes bobbleBride {
  0%, 100% { transform: rotate(2.4deg); }
  50% { transform: rotate(-2.4deg); }
}

@keyframes bobbleExcited {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5.2deg); }
  75% { transform: rotate(5.2deg); }
}

@keyframes bobbleExcitedBride {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(4.8deg); }
  75% { transform: rotate(-4.8deg); }
}

.s4-step {
  z-index: 4;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.sec-itinerary.in-view .s4-step-0 { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.sec-itinerary.in-view .s4-step-1 { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.sec-itinerary.in-view .s4-step-2 { opacity: 1; transform: translateY(0); transition-delay: 0.46s; }
.sec-itinerary.in-view .s4-step-3 { opacity: 1; transform: translateY(0); transition-delay: 0.64s; }

.s4-curtains {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  transform-origin: 50% 8%;
  transform: scaleX(1.055);
  transition: transform 1.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sec-itinerary.in-view .s4-curtains {
  transform: scaleX(1);
}

/* ==========================================================================
   Section 5: Wedding Guide Embossed Card (5.喜宴指南)
   ========================================================================== */
.sec-guide {
  aspect-ratio: 1125 / 1695;
  background-color: #2b100c;
  margin-top: -1px;
  z-index: 5;
}

.sec-guide .psd-bg {
  transform: scale(0.965) translateY(18px);
  opacity: 0.85;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease;
}

.sec-guide.in-view .psd-bg {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.s5-item {
  z-index: 3;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.sec-guide.in-view .s5-item-0 { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
.sec-guide.in-view .s5-item-1 { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.sec-guide.in-view .s5-item-2 { opacity: 1; transform: translateY(0); transition-delay: 0.44s; }
.sec-guide.in-view .s5-item-3 { opacity: 1; transform: translateY(0); transition-delay: 0.60s; }
.sec-guide.in-view .s5-item-4 { opacity: 1; transform: translateY(0); transition-delay: 0.76s; }

/* ==========================================================================
   Section 6: Love Story — Polaroids, Poems, Phone Shots & Candlelight
   ========================================================================== */
.sec-story {
  aspect-ratio: 1125 / 5145;
  background-color: var(--burgundy-main);
  margin-top: -1px;
  z-index: 5;
}

/* Scroll-triggered sub-blocks inside Section 6 */
.story-anim {
  opacity: 0;
  transition: opacity 0.95s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-fade-up { transform: translateY(26px); }
.story-bw-strip {
  transform: translate3d(46px, 28px, 0) rotate(6.5deg);
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28));
}

.story-pola-left {
  z-index: 3;
  transform: translate3d(-62px, 38px, 0) rotate(-10deg);
  filter: drop-shadow(0 10px 22px rgba(24, 2, 3, 0.32));
  pointer-events: auto;
  cursor: pointer;
}

.story-pola-right {
  z-index: 4;
  transform: translate3d(62px, 38px, 0) rotate(9deg);
  filter: drop-shadow(0 10px 22px rgba(24, 2, 3, 0.34));
  pointer-events: auto;
  cursor: pointer;
}

.story-pola-mid {
  z-index: 8;
  transform: translate3d(0, -36px, 0) scale(1.14) rotate(-3deg);
  filter: drop-shadow(0 14px 26px rgba(28, 3, 4, 0.46));
  pointer-events: auto;
  cursor: pointer;
}

.story-phone-left {
  transform: translate3d(-54px, 18px, 0) rotate(-2.5deg);
  box-shadow: 0 14px 32px rgba(24, 2, 3, 0.36);
}

.story-phone-right {
  transform: translate3d(54px, 18px, 0) rotate(2.5deg);
  box-shadow: 0 14px 32px rgba(24, 2, 3, 0.36);
}

.story-staircase-wrap {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(20, 2, 3, 0.44);
  opacity: 0;
  transform: translateY(28px) scale(0.975);
  transition: opacity 1.1s ease, transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-anim.is-revealed,
.story-staircase-wrap.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

/* Preserve natural physical card overlap (left:3, right:4, mid:8) on hover so pola-mid never fractures */
.story-pola-left.is-revealed,
.story-pola-right.is-revealed,
.story-pola-mid.is-revealed {
  transition:
    opacity 0.85s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

.story-pola-left.is-revealed:hover {
  transition-delay: 0s !important;
  transform: translate3d(-5px, -6px, 0) scale(1.028) rotate(-1.6deg);
  filter: drop-shadow(0 18px 30px rgba(20, 2, 3, 0.48));
  z-index: 3;
}

.story-pola-right.is-revealed:hover {
  transition-delay: 0s !important;
  transform: translate3d(5px, -6px, 0) scale(1.028) rotate(1.5deg);
  filter: drop-shadow(0 18px 30px rgba(20, 2, 3, 0.48));
  z-index: 4;
}

.story-pola-mid.is-revealed:hover {
  transition-delay: 0s !important;
  transform: translate3d(0, -7px, 0) scale(1.04) rotate(-1.2deg);
  filter: drop-shadow(0 20px 34px rgba(20, 2, 3, 0.56));
  z-index: 8;
}

/* Warm flickering candlelight halos over bottom-right candelabra on IMG_2268 */
.candle-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 138, 0.55) 0%, rgba(255, 160, 64, 0.22) 42%, rgba(255, 140, 40, 0) 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: candleFlicker 2.6s ease-in-out infinite alternate;
}

.candle-1 { left: 74%; top: 82%; width: 12%; aspect-ratio: 1 / 1; animation-delay: 0s; }
.candle-2 { left: 79%; top: 79%; width: 14%; aspect-ratio: 1 / 1; animation-delay: -0.7s; }
.candle-3 { left: 82%; top: 83%; width: 12%; aspect-ratio: 1 / 1; animation-delay: -1.3s; }
.candle-4 { left: 88%; top: 81%; width: 12%; aspect-ratio: 1 / 1; animation-delay: -1.9s; }

@keyframes candleFlicker {
  0% { opacity: 0.55; transform: scale(0.9) translateY(1px); }
  45% { opacity: 0.92; transform: scale(1.08) translateY(-2px); }
  75% { opacity: 0.68; transform: scale(0.96) translateY(0px); }
  100% { opacity: 1; transform: scale(1.14) translateY(-2px); }
}

/* ==========================================================================
   Section 7: Custom Editorial Venue Map Card (Default Amap) & Guest RSVP Form
   ========================================================================== */
.sec-rsvp {
  background-color: var(--burgundy-main);
  padding: 26px 8.6% 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -2px;
  z-index: 5;
}

.s7-title-flow {
  width: 26.5%;
  aspect-ratio: 245 / 110;
  height: auto;
  display: block;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}

.sec-rsvp.in-view .s7-title-flow {
  opacity: 1;
  transform: translateY(0);
}

/* Bespoke Luxury Hotel & Vector Map Card */
.venue-luxury-card {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #5d0c10 0%, #47080b 100%);
  border: 1px solid rgba(230, 195, 156, 0.42);
  box-shadow: 0 18px 42px rgba(22, 2, 4, 0.42), inset 0 1px 0 rgba(255, 238, 220, 0.14);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease 0.12s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s, box-shadow 0.28s ease;
}

.sec-rsvp.in-view .venue-luxury-card {
  opacity: 1;
  transform: translateY(0);
}

.venue-luxury-card:hover {
  box-shadow: 0 22px 48px rgba(20, 2, 4, 0.54), inset 0 1px 0 rgba(255, 238, 220, 0.22);
}

.venue-map-link {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  overflow: hidden;
  border-bottom: 1px solid rgba(230, 195, 156, 0.3);
  cursor: pointer;
}

.venue-map-svg {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.venue-map-link:hover .venue-map-svg {
  transform: scale(1.024);
}

.svg-pin-Wave {
  transform-box: fill-box;
  transform-origin: center;
  animation: svgPinRadar 2.4s ease-out infinite;
}

.svg-pin-wave-2 {
  animation-delay: 1.2s;
}

@keyframes svgPinRadar {
  0% { transform: scale(0.45); opacity: 0.92; }
  100% { transform: scale(2.15); opacity: 0; }
}

.venue-amap-pill {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(120, 15, 19, 0.88);
  border: 1px solid rgba(230, 195, 156, 0.55);
  color: #fbf4ea;
  font-size: 12px;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(28, 3, 5, 0.26);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.venue-card-body {
  padding: 16px 16px 18px;
  text-align: left;
}

.venue-hotel-cn {
  color: #fbf4ea;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.35;
}

.venue-hotel-en {
  margin-top: 3px;
  font-family: var(--serif-en);
  color: var(--gold-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.88;
}

.venue-addr-line {
  margin-top: 9px;
  color: rgba(246, 238, 228, 0.92);
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.venue-time-line {
  margin-top: 3px;
  color: rgba(230, 195, 156, 0.82);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.venue-actions-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.venue-btn-amap {
  flex: 1;
  height: 40px;
  border-radius: 9px;
  background: var(--cream-btn);
  color: #6a1316;
  font-family: var(--serif-cn);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(22, 2, 4, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.venue-btn-amap:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

.venue-btn-copy {
  height: 40px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid rgba(230, 195, 156, 0.45);
  background: rgba(244, 236, 225, 0.08);
  color: #f6efe6;
  font-family: var(--serif-cn);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.venue-btn-copy:hover {
  background: rgba(244, 236, 225, 0.18);
  border-color: rgba(230, 195, 156, 0.75);
}

/* Native RSVP Form in natural flow below Venue Card */
.rsvp-form {
  position: relative;
  width: 82%;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 6;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease 0.24s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.24s;
}

.sec-rsvp.in-view .rsvp-form {
  opacity: 1;
  transform: translateY(0);
}

.rsvp-field {
  position: relative;
  width: 100%;
  height: clamp(42px, 10.8vw, 48px);
  border: 1.4px solid rgba(246, 239, 230, 0.88);
  border-radius: 9px;
  background: rgba(92, 12, 16, 0.42);
  display: flex;
  align-items: center;
  padding: 0 14px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.rsvp-field:focus-within {
  border-color: #ffffff;
  background: rgba(74, 9, 12, 0.72);
  box-shadow: 0 0 0 3px rgba(246, 239, 230, 0.14);
}

.rsvp-req {
  color: rgba(246, 239, 230, 0.92);
  font-size: 14px;
  margin-right: 6px;
  transform: translateY(-2px);
}

.rsvp-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #faf4ec;
  font-family: var(--serif-cn);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.rsvp-input::placeholder {
  color: rgba(246, 239, 230, 0.86);
}

.rsvp-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.stepper-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(246, 239, 230, 0.38);
  background: rgba(246, 239, 230, 0.08);
  color: #f6efe6;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepper-btn:hover {
  background: rgba(246, 239, 230, 0.2);
}

.rsvp-submit {
  width: 100%;
  height: clamp(42px, 10.8vw, 48px);
  border: none;
  border-radius: 9px;
  background: var(--cream-btn);
  color: #6a1316;
  font-family: var(--serif-cn);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(28, 3, 5, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.rsvp-submit:hover {
  background: #fbf8f3;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(28, 3, 5, 0.4);
}

.rsvp-submit:active {
  transform: translateY(1px);
}

/* ==========================================================================
   Section 8: Back Cover — Red Velvet Heart Spotlight (8.封底)
   ========================================================================== */
.sec-finale {
  aspect-ratio: 1125 / 1775;
  background-color: var(--burgundy-main);
  margin-top: -2px;
  z-index: 5;
}

/* Breathing Heart-Shaped Stage Spotlight */
.heart-spotlight-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 92%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.42;
  animation: spotlightBreath 4.2s ease-in-out infinite;
}

@keyframes spotlightBreath {
  0%, 100% {
    opacity: 0.26;
    transform: translate(-50%, -50%) scale(0.97) rotate(-0.8deg);
  }
  50% {
    opacity: 0.62;
    transform: translate(-50%, -51%) scale(1.035) rotate(0.8deg);
  }
}

.s8-title-gold {
  z-index: 4;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  filter: drop-shadow(0 6px 20px rgba(32, 3, 4, 0.55));
  transition: opacity 1.15s ease 0.15s, transform 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.sec-finale.in-view .s8-title-gold {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: goldShimmer 4.5s ease-in-out 1.4s infinite;
}

@keyframes goldShimmer {
  0%, 100% { filter: drop-shadow(0 6px 20px rgba(32, 3, 4, 0.55)) brightness(1); }
  50% { filter: drop-shadow(0 6px 26px rgba(255, 190, 128, 0.35)) brightness(1.12); }
}

.finale-dust-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* ==========================================================================
   Modals (Map Navigation Sheet & RSVP Toast/Dialog) & Preview Helper Bar
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(18, 2, 4, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(180deg, #5e0f13 0%, #42090c 100%);
  border: 1px solid rgba(244, 236, 225, 0.28);
  border-radius: 18px;
  padding: 24px 20px 20px;
  color: var(--cream-paper);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(16px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-backdrop.is-open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.modal-sub {
  font-size: 13px;
  color: rgba(244, 236, 225, 0.76);
  line-height: 1.6;
  margin-bottom: 18px;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(244, 236, 225, 0.28);
  background: rgba(244, 236, 225, 0.1);
  color: var(--cream-paper);
  font-family: var(--serif-cn);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.modal-btn:hover {
  background: rgba(244, 236, 225, 0.2);
}

.modal-btn-primary {
  background: var(--cream-btn);
  color: #6a1316;
  border-color: transparent;
  font-weight: 600;
}

.modal-btn-primary:hover {
  background: #ffffff;
}

/* Floating Heart Tap Particle */
.tap-heart {
  position: fixed;
  z-index: 150;
  pointer-events: none;
  color: #ff6b7a;
  font-size: 16px;
  animation: tapHeartFloat 1s ease-out forwards;
}

@keyframes tapHeartFloat {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 48px)) scale(1.35); }
}

/* Discreet Animation Review Helper Pill (Bottom-Left) */
.preview-dock {
  position: fixed;
  left: max(12px, calc(50vw - 218px));
  bottom: 14px;
  z-index: 130;
  font-family: system-ui, -apple-system, sans-serif;
}

.preview-dock-toggle {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(244, 236, 225, 0.3);
  background: rgba(42, 6, 8, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(244, 236, 225, 0.9);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.preview-dock-panel {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 220px;
  background: rgba(36, 5, 7, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244, 236, 225, 0.24);
  border-radius: 14px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.preview-dock.is-expanded .preview-dock-panel {
  display: flex;
}

.preview-dock-item {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: rgba(244, 236, 225, 0.08);
  color: #f4ece1;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.preview-dock-item:hover {
  background: rgba(244, 236, 225, 0.2);
}