/* =========================================================================
   GLOBAL RESET & VARIABLES
   ========================================================================= */
:root {
  --paper-0: #fff5f7;
  --paper-1: #fde2e8;
  --paper-2: #fcc2d0;
  --rose-deep: #6a041d;
  --rose: #a80f43;
  --rose-lift: #d4235c;
  --wine: #4a0014;
  --gold-1: #ffcf6a;
  --gold-2: #e8a23d;
  --ink: #591d28;
  --ink-soft: #8c4a58;
  --cream: #fffaf5;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --section-transition: 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  background: #12060c;
  color: #3a1a1a;
  font-family: "Cormorant Garamond", Georgia, serif;
  transition: background 0.6s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, textarea {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/* Birthday Card is now Section 1 → warm cream background */
body[data-active-section="1"] {
  background: #FBF6F0;
}

/* Archery is now Section 2 → dark cinematic background */
body[data-active-section="2"] {
  background: #12060c;
}

/* Gift Box is now Section 3 → warm parchment background */
body[data-active-section="3"] {
  background: #f8f0dc;
}

/* Scrapbook is now Section 5 → deep burgundy background */
body[data-active-section="5"] {
  background: #3d0711;
}

/* Letter is Section 6 → deep romantic wine background */
body[data-active-section="6"] {
  background: #2b0510;
}

/* Final Surprise is Section 7 → magical midnight cosmic rose */
body[data-active-section="7"] {
  background: #15020a;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

button {
  font-family: inherit;
}

/* =========================================================================
   TIME LOCK SCREEN
   Full-page countdown cover that blocks access until Sep 28 2026 11:59 PM
   ========================================================================= */

/* ── Overlay Shell ──────────────────────────────────────────────────────── */
.tls-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999999; /* Top of stack — above phone lock screen */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Cormorant Garamond', Georgia, serif;
  background: #0d0208;
}

/* Hidden state — smoothly fades out & scales when countdown ends */
.tls-overlay.tls--unlocking {
  animation: tlsFadeOut 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes tlsFadeOut {
  0%   { opacity: 1; transform: scale(1); }
  60%  { opacity: 0.7; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* ── Ambient Background ─────────────────────────────────────────────────── */
.tls-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.tls-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}

.tls-orb--1 {
  width: 65vmax;
  height: 65vmax;
  top: -20vmax;
  left: -15vmax;
  background: radial-gradient(circle, #6a041d 0%, #2a000a 55%, transparent 75%);
  animation: tlsOrbDrift 18s ease-in-out infinite alternate;
}

.tls-orb--2 {
  width: 50vmax;
  height: 50vmax;
  bottom: -15vmax;
  right: -10vmax;
  background: radial-gradient(circle, #c9184a 0%, #5a0018 50%, transparent 72%);
  animation: tlsOrbDrift 22s ease-in-out infinite alternate-reverse;
  opacity: 0.35;
}

.tls-orb--3 {
  width: 38vmax;
  height: 38vmax;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #d4235c 0%, #800020 45%, transparent 68%);
  animation: tlsOrbPulse 8s ease-in-out infinite;
  opacity: 0.2;
}

@keyframes tlsOrbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4vmax, 3vmax) scale(1.08); }
}

@keyframes tlsOrbPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.2; }
  50%       { transform: translate(-50%, -50%) scale(1.3); opacity: 0.35; }
}

/* Particle stars */
.tls-particles {
  position: absolute;
  inset: 0;
}

.tls-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 200, 220, 0.75);
  animation: tlsParticleFade var(--pd, 4s) ease-in-out var(--pdelay, 0s) infinite alternate;
}

@keyframes tlsParticleFade {
  0%   { opacity: 0.1; transform: translateY(0) scale(1); }
  100% { opacity: 0.7; transform: translateY(-8px) scale(1.4); }
}

/* ── Central Card ───────────────────────────────────────────────────────── */
.tls-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 5vh, 52px) clamp(24px, 6vw, 60px);
  gap: clamp(18px, 3vh, 32px);
  max-width: min(680px, 94vw);
  width: 100%;

  /* Glassmorphic card */
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(201, 24, 74, 0.08) 40%,
    rgba(106, 4, 29, 0.12) 100%
  );
  border: 1px solid rgba(255, 143, 163, 0.18);
  border-radius: 28px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 rgba(255, 200, 220, 0.15) inset;

  animation: tlsCardEnter 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes tlsCardEnter {
  0%   { opacity: 0; transform: translateY(28px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Lock Icon ──────────────────────────────────────────────────────────── */
.tls-lock-wrap {
  position: relative;
  width: clamp(64px, 12vw, 96px);
  height: clamp(64px, 12vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tls-lock-pulse {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(201, 24, 74, 0.5);
  animation: tlsPulseRing 2.4s ease-out infinite;
}

.tls-lock-pulse--2 {
  inset: -22px;
  border-color: rgba(201, 24, 74, 0.25);
  animation-delay: 0.8s;
}

@keyframes tlsPulseRing {
  0%   { transform: scale(0.9); opacity: 0.8; }
  80%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

.tls-lock-icon {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 16px rgba(201, 24, 74, 0.6))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

/* ── Header Text ────────────────────────────────────────────────────────── */
.tls-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tls-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(11px, 2.5vw, 14px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 143, 163, 0.8);
  margin: 0;
}

.tls-title {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(36px, 9vw, 72px);
  font-weight: 400;
  color: #fff0f3;
  line-height: 1;
  text-shadow:
    0 0 40px rgba(212, 35, 92, 0.8),
    0 2px 12px rgba(0, 0, 0, 0.6);
  margin: 4px 0;
}

.tls-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 400;
  color: rgba(255, 200, 215, 0.7);
  line-height: 1.6;
  margin: 0;
}

.tls-date-highlight {
  display: inline-block;
  margin-top: 4px;
  font-weight: 600;
  color: #ffccd5;
  font-size: clamp(14px, 3.2vw, 17px);
  background: linear-gradient(90deg, #c9184a, #ff8fa3, #c9184a);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tlsShimmer 3s linear infinite;
}

@keyframes tlsShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Countdown ──────────────────────────────────────────────────────────── */
.tls-countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 2vw, 16px);
  width: 100%;
}

.tls-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tls-unit-card {
  position: relative;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(201, 24, 74, 0.18) 100%
  );
  border: 1px solid rgba(255, 143, 163, 0.2);
  border-radius: 14px;
  padding: clamp(10px, 2.5vw, 18px) clamp(12px, 3vw, 22px);
  min-width: clamp(58px, 13vw, 90px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 200, 220, 0.15);
  overflow: hidden;
}

/* Shimmer sweep on each card */
.tls-unit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: tlsCardShimmer 3.5s ease-in-out infinite;
}

@keyframes tlsCardShimmer {
  0%   { left: -100%; }
  60%  { left: 160%; }
  100% { left: 160%; }
}

.tls-num {
  display: block;
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: clamp(28px, 8vw, 56px);
  font-weight: 700;
  color: #fff0f3;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow:
    0 0 20px rgba(212, 35, 92, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.5);
  /* Flip animation on number change */
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.15s ease;
}

.tls-num.tls-flip {
  animation: tlsFlip 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tlsFlip {
  0%   { transform: scaleY(1.08) translateY(-3px); }
  60%  { transform: scaleY(0.92); }
  100% { transform: scaleY(1) translateY(0); }
}

.tls-label {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(9px, 2vw, 12px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 143, 163, 0.65);
}

.tls-sep {
  font-family: 'Cinzel', serif;
  font-size: clamp(24px, 6vw, 44px);
  font-weight: 700;
  color: rgba(201, 24, 74, 0.6);
  padding-bottom: 28px; /* visually align with number baseline */
  line-height: 1;
  animation: tlsBlink 2s ease-in-out infinite;
}

@keyframes tlsBlink {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 0.2; }
}

/* ── Footer Message ─────────────────────────────────────────────────────── */
.tls-footer-msg {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 3.2vw, 18px);
  font-weight: 500;
  color: rgba(255, 200, 215, 0.6);
  letter-spacing: 0.03em;
  margin: 0;
  animation: tlsFooterPulse 4s ease-in-out infinite;
}

@keyframes tlsFooterPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* ── Floating Hearts ────────────────────────────────────────────────────── */
.tls-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.tls-heart {
  position: absolute;
  bottom: -50px;
  left: var(--x, 50%);
  font-size: calc(18px * var(--sz, 1));
  opacity: 0;
  animation: tlsHeartFloat 6s ease-in var(--d, 0s) infinite;
}

@keyframes tlsHeartFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  15%  { opacity: 0.9; }
  80%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-110vh) scale(1.2) rotate(15deg); }
}

/* ── Mobile Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .tls-card {
    padding: 28px 18px;
    gap: 18px;
    border-radius: 20px;
  }

  .tls-sep {
    padding-bottom: 20px;
  }

  .tls-countdown {
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .tls-unit-card {
    min-width: 50px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  .tls-num {
    font-size: 26px;
  }
}

/* =========================================================================
   APPLICATION SECTIONS SYSTEM
   ========================================================================= */
.app-section {
  display: none;
  opacity: 0;
  width: 100%;
  min-height: 100vh;
  position: relative;
  transition: opacity var(--section-transition), transform var(--section-transition);
  transform: translateY(12px) scale(0.99);
}

.app-section.active {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* The birthday-card section uses flexbox for centering.
   .app-section.active sets display:block which would override it,
   so we restore flex here with higher specificity. */
.app-section.s3-section.active {
  display: flex;
}

/* Section 4 (I Love You Surprise) also uses flex layout. */
.app-section.s4-section.active {
  display: flex;
}

/* Section 6 (Dedicated Love Letter) uses flex layout. */
.app-section.s6-section.active {
  display: flex;
}

/* Section 7 (Final Surprise & Love Confession) uses flex layout. */
.app-section.s7-section.active {
  display: flex;
}


/* =========================================================================
   GLOBAL SECTION NAV — Prev / Next floating pill
   ========================================================================= */
/* =========================================================================
   IN-SECTION NEXT BUTTONS & NAVIGATION SYSTEM
   Replaces old floating navigation pill bar with dedicated, section-integrated
   buttons and ambient action navigation.
   ========================================================================= */

/* Hide legacy global navigation pill bar completely */
.sec-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Primary In-Section Next Button Component ── */
.section-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #d4235c 0%, #c9184a 45%, #800020 100%);
  color: #ffffff;
  border: 1.5px solid rgba(255, 214, 224, 0.45);
  border-radius: 9999px;
  padding: 11px 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 24px -4px rgba(212, 35, 92, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: all 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* Shimmer highlight sweep */
.section-next-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}

.section-next-btn:hover::before {
  animation: btnShineSweep 1.1s ease-in-out infinite;
}

@keyframes btnShineSweep {
  0% { left: -120%; }
  100% { left: 180%; }
}

.section-next-btn:hover {
  transform: translateY(-2.5px) scale(1.03);
  background: linear-gradient(135deg, #e6396f 0%, #d4235c 50%, #900a2a 100%);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 12px 30px -4px rgba(212, 35, 92, 0.65),
    0 0 16px rgba(255, 143, 163, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.section-next-btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 4px 14px rgba(212, 35, 92, 0.4);
}

.section-next-btn .btn-arrow {
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-next-btn:hover .btn-arrow {
  transform: translateX(4px);
}


/* ── Section Specific Integrated Button Variants ── */

/* Section 1: Screen 3 button row */
.s1-next-btn {
  background: linear-gradient(135deg, #d4235c 0%, #a80f43 100%);
  border-color: #ffd6e0;
  padding: clamp(9px, 1.4vh, 13px) clamp(20px, 4vw, 30px);
}

/* Section 2: Wish Action */
.wish__action {
  margin-top: clamp(14px, 2.5vh, 24px);
  display: flex;
  justify-content: center;
}

.s2-wish-next-btn {
  background: linear-gradient(135deg, #e6396f 0%, #c9184a 50%, #800020 100%);
  padding: 13px 28px;
  font-size: 15.5px;
  box-shadow: 0 8px 30px rgba(230, 57, 111, 0.55);
}

/* Section 3: Page 2 Content Action */
.s3-nav-action {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.s3-next-btn {
  background: linear-gradient(135deg, #ff758f 0%, #c9184a 100%);
  padding: 12px 26px;
}

/* Section 4: Virtual Hug Actions */
.s4-hug-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.s4-hug-next-btn {
  background: linear-gradient(135deg, #c9184a 0%, #880e4f 100%);
  padding: 12px 26px;
  font-size: 14.5px;
  border-color: rgba(255, 205, 210, 0.5);
}

/* Section 5: Carousel Controls Button */
.s5-controls-next-btn {
  padding: 7px 16px;
  font-size: 12.5px;
  border-radius: 30px;
  gap: 6px;
  background: linear-gradient(135deg, #9b2242 0%, #6b152b 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #fae1dd;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.s5-controls-next-btn:hover {
  background: linear-gradient(135deg, #b81d33 0%, #800e1d 100%);
  border-color: #ffd700;
  color: #ffffff;
}

/* Section 6: Luxury Desk Letter Action */
.s6-nav-footer {
  margin-top: 26px;
  display: flex;
  justify-content: center;
}

.s6-next-btn {
  background: linear-gradient(135deg, #e2a76f 0%, #c9184a 60%, #800028 100%);
  border-color: rgba(255, 230, 200, 0.6);
  padding: 14px 32px;
  font-size: 15.5px;
  box-shadow:
    0 10px 30px -4px rgba(201, 24, 74, 0.5),
    0 0 20px rgba(226, 167, 111, 0.3);
}

.s6-next-btn:hover {
  background: linear-gradient(135deg, #f0b780 0%, #d4235c 60%, #9c0032 100%);
  box-shadow:
    0 14px 36px -4px rgba(201, 24, 74, 0.7),
    0 0 25px rgba(226, 167, 111, 0.45);
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
  .s2-wish-next-btn,
  .s6-next-btn {
    padding: 11px 22px;
    font-size: 14px;
  }
}

/* ========================================================================= */


/* =========================================================================
   PAGE 4 : SECTION 1 ARCHERY & BLOOMING TREE STYLING
   ========================================================================= */
.page4-section {
  background: #12060c;
  overflow: hidden;
  height: 100vh;
  position: relative;
}

.scene {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.tree {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.hero {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 88% at 50% 24%, #fff5f8 0%, var(--paper-0) 38%, var(--paper-1) 74%, var(--paper-2) 100%);
}

.hero__bg:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(78vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 150, 180, 0.55), rgba(220, 120, 150, 0.16) 46%, transparent 70%);
  filter: blur(6px);
}

.hero__motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mote {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 220, 0.9), rgba(255, 170, 195, 0.15) 55%, transparent 72%);
  will-change: transform, opacity;
}

.hero__eyebrow {
  position: absolute;
  top: 13%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(15px, 3.6vw, 26px);
  letter-spacing: 0.06em;
  color: #9e3655;
  text-shadow: 0 1px 10px rgba(255, 240, 245, 0.9);
  opacity: 0;
}

.targetWrap {
  position: absolute;
  top: 33%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.target {
  position: relative;
  width: clamp(120px, 27vw, 208px);
  aspect-ratio: 100/92;
  will-change: transform;
  transform-origin: 50% 60%;
}

.target__heart {
  position: absolute;
  inset: 0;
  display: block;
}

.heart__glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 230%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 40, 100, 0.55), rgba(168, 15, 64, 0.18) 42%, transparent 68%);
  filter: blur(4px);
  pointer-events: none;
  will-change: transform, opacity;
}

.heart__svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 60%;
  filter: drop-shadow(0 10px 22px rgba(168, 15, 64, 0.34)) drop-shadow(0 3px 6px rgba(120, 10, 48, 0.3));
  will-change: transform;
}

.archery {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(100px, 18vw, 168px);
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  will-change: transform;
}

.archery:active {
  cursor: grabbing;
}

.archery:focus-visible {
  outline: none;
}

.archery:focus-visible .bow {
  filter: drop-shadow(0 0 0 3px rgba(255, 255, 255, 0.85)) drop-shadow(0 10px 18px rgba(120, 50, 20, 0.4));
}

.bow {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(90, 40, 15, 0.3));
  overflow: visible;
}

.aim {
  position: absolute;
  left: 50%;
  bottom: 32%;
  width: 2px;
  height: 190%;
  margin-left: -1px;
  transform-origin: bottom center;
  background: linear-gradient(0deg, rgba(230, 40, 100, 0.6) 0%, rgba(168, 15, 64, 0.22) 52%, transparent 78%);
  opacity: 0;
  pointer-events: none;
}

.arrow {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  bottom: 36%;
  width: 17.5%;
  height: auto;
  overflow: visible;
  will-change: transform;
  filter: drop-shadow(0 5px 7px rgba(90, 40, 15, 0.36));
}

.hero__hint {
  position: absolute;
  bottom: 8.5%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(13px, 3.1vw, 19px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a84d68;
  opacity: 0;
}

.flood {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, var(--rose-lift), var(--rose) 46%, var(--rose-deep) 100%);
  z-index: 5;
  opacity: 0;
  transform: scale(0.001);
  will-change: transform, opacity;
  pointer-events: none;
}

.field {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 8%, #d4235c 0%, var(--rose) 42%, var(--rose-deep) 78%, var(--wine) 100%);
  color: #fff;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.blob--1 {
  width: 58vmax;
  height: 58vmax;
  left: -18vmax;
  top: -16vmax;
  background: radial-gradient(circle, rgba(230, 50, 110, 0.9), transparent 62%);
}

.blob--2 {
  width: 46vmax;
  height: 46vmax;
  right: -14vmax;
  top: 22vmax;
  background: radial-gradient(circle, rgba(180, 20, 70, 0.75), transparent 64%);
}

.blob--3 {
  width: 52vmax;
  height: 52vmax;
  left: 24vmax;
  bottom: -22vmax;
  background: radial-gradient(circle, rgba(120, 10, 45, 0.8), transparent 66%);
}

.fgrid {
  position: absolute;
  inset: -6%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: clamp(38px, 7vw, 74px) clamp(38px, 7vw, 74px);
  will-change: transform;
}

.fvignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(128% 96% at 50% 44%, transparent 50%, rgba(50, 6, 18, 0.5) 100%);
}

.camera {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(4px, 1.2vh, 12px);
  padding: 0 6vw;
  text-align: center;
  will-change: transform;
}

.kEyebrow {
  font-family: Cormorant Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 3.6vw, 27px);
  letter-spacing: 0.08em;
  color: #ffd2dc;
  opacity: 0;
  transform: translateY(10px);
  margin-bottom: clamp(2px, 1vh, 10px);
}

.headline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  line-height: 0.92;
  filter: drop-shadow(0 6px 34px rgba(60, 8, 24, 0.34)) drop-shadow(0 2px 3px rgba(80, 10, 30, 0.42));
}

.hl__line {
  display: block;
}

.mask {
  display: inline-block;
  overflow: hidden;
  padding: 0.14em 0.06em;
  margin: -0.14em -0.06em;
}

.hl__word {
  display: inline-block;
  font-weight: 900;
  font-size: clamp(28px, 8vw, 100px);
  letter-spacing: -0.02em;
  color: #fff0f3;
}

.hl__ch {
  display: inline-block;
  will-change: transform;
}

.uline {
  width: clamp(150px, 40vw, 380px);
  height: auto;
  margin-top: clamp(4px, 1.4vh, 14px);
  color: var(--gold-1);
  filter: drop-shadow(0 2px 8px rgba(255, 180, 90, 0.5));
}

.kSub {
  margin-top: clamp(12px, 2.4vh, 26px);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(14px, 3.4vw, 24px);
  letter-spacing: 0.05em;
  color: #ffd8e2;
  opacity: 0;
  transform: translateY(10px);
}

.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 16vh;
  background: #12040b;
  z-index: 3;
  will-change: transform;
  pointer-events: none;
}

.bar--top { top: 0; }
.bar--bot { bottom: 0; }

.bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffd6e0 30%, #ff758fd9 55%, #c9184a00 74%);
  z-index: 8;
  opacity: 0;
  transform: scale(0.001);
  will-change: transform, opacity;
  pointer-events: none;
}

.wish {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translate(-50%);
  width: 90%;
  max-width: 520px;
  z-index: 100;
  pointer-events: none;
  color: var(--ink);
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wish.is-in {
  visibility: visible;
  pointer-events: auto !important;
}

.wish__action {
  pointer-events: auto !important;
  margin-top: clamp(14px, 2.5vh, 24px);
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 110;
}

.s2-wish-next-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 120;
}

.wish:before {
  content: "";
  position: absolute;
  inset: -18% -24% -24% -16%;
  background: radial-gradient(84% 98% at 34% 52%, #fffaf3f0, #fffaf399 48%, #fffaf300 80%);
  z-index: -1;
  opacity: 0;
  transition: opacity 1s ease;
}

.wish.is-in:before {
  opacity: 1;
}

.wish__eyebrow {
  font-family: Cormorant Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(13px, 3.2vw, 24px);
  letter-spacing: 0.05em;
  color: #8c3652;
  text-shadow: 0 1px 2px #fff5f8, 0 0 8px rgba(255, 245, 248, 0.95);
  margin-bottom: 0.8em;
}

.wish__heroWrap {
  position: relative;
  display: inline-block;
}

.wish__heroWrap:before {
  content: "";
  position: absolute;
  inset: -26% -12% -22%;
  background: radial-gradient(60% 70% at 46% 52%, rgba(230, 40, 100, 0.45), rgba(168, 15, 64, 0.18) 52%, transparent 74%);
  filter: blur(14px);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

.wish__heroWrap:after {
  content: "✦";
  position: absolute;
  right: -1%;
  top: -14%;
  font-size: clamp(15px, 3.6vw, 32px);
  color: #ffe1a0;
  text-shadow: 0 0 12px rgba(255, 205, 120, 0.95);
  opacity: 0;
  pointer-events: none;
}

.wish__hero {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(40px, 9.6vw, 86px);
  line-height: 0.98;
  padding: 0.2em 0;
  margin: -0.22em 0 -0.14em;
  background: linear-gradient(180deg, #d4235c, #a80f43, #720026);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(255, 250, 252, 0.98)) drop-shadow(0 2px 6px rgba(110, 15, 45, 0.45));
  clip-path: inset(0 100% -28% -10%);
  transform-origin: 50% 60%;
}

.wish__rule {
  display: block;
  width: clamp(46px, 13vw, 110px);
  height: 2px;
  margin: 0.12em 0 0.48em;
  background: linear-gradient(90deg, var(--gold-2), rgba(232, 162, 61, 0));
  box-shadow: 0 0 8px #fff7f0e6;
  transform-origin: left center;
}

.wish__sub {
  font-family: Cormorant Garamond, Georgia, serif;
  font-weight: 600;
  font-size: clamp(12px, 2.9vw, 20px);
  letter-spacing: 0.03em;
  color: #632034;
  text-shadow: 0 1px 2px #fff5f8, 0 0 8px rgba(255, 245, 248, 0.98);
}

.wish__eyebrow, .wish__rule, .wish__sub {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(5px);
  transition: opacity 0.8s ease, transform 0.9s var(--ease-out), filter 0.8s ease;
}

.wish__rule {
  transform: translateY(12px) scaleX(0.3);
}

.wish.is-in .wish__eyebrow, .wish.is-in .wish__sub {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.wish.is-in .wish__rule {
  opacity: 1;
  transform: translateY(0) scaleX(1);
  transition-delay: 1.35s;
}

.wish.is-in .wish__sub {
  transition-delay: 1.55s;
}

.wish.is-in .wish__hero {
  animation: write 1.2s cubic-bezier(0.62, 0.04, 0.24, 1) 0.35s forwards, wishBreath 4s ease-in-out 1.9s infinite;
}

@keyframes wishBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes write {
  0% { clip-path: inset(0 100% -28% -10%); }
  to { clip-path: inset(0 -10% -28% -10%); }
}






/* =========================================================================
   PAGE 5 : SECTION 2 GIFT BOX, PASSKEY & ROMANTIC LETTER STYLING
   ========================================================================= */
.page5-section {
  background: #f8f0dc;
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #3a1a1a;
  position: relative;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

#gift-landing {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at center, #f8f0dc 0%, #faecc8 50%, #f7e5c0 100%);
}

#gift-landing.hidden {
  display: none !important;
}

.gift-fade-veil {
  position: absolute;
  inset: 0;
  background-color: #faf0e6;
  opacity: 1;
  transition: opacity 900ms ease-out;
  pointer-events: none;
  z-index: 0;
}

#gift-landing.state-curtain .gift-fade-veil,
#gift-landing.state-bloom .gift-fade-veil {
  opacity: 0;
}

.gift-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.gift-click-wrap {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.8vh, 1.2rem);
  padding: 1rem;
  box-sizing: border-box;
  transition: opacity 0.4s ease;
}

#gift-landing.state-bloom .gift-click-wrap,
#gift-landing.state-curtain .gift-click-wrap {
  opacity: 0;
  pointer-events: none;
}

.gift-box-btn {
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  outline: none;
  animation: gift-bob 3s ease-in-out infinite;
}

@keyframes gift-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.gift-box-btn img {
  width: min(55vw, 280px);
  max-height: clamp(140px, 32vh, 280px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(128, 0, 0, 0.25));
  transition: transform 0.3s ease;
  display: block;
}

.gift-box-btn:hover img {
  transform: scale(1.06);
}

.gift-box-btn:active img {
  transform: scale(0.95);
}

.gift-caption {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.6rem, 4.8vw, 3rem);
  color: #800000;
  margin: 0;
}

.gift-hint {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(0.95rem, 2.2vw, 1.2rem);
  color: #a0522d;
  margin: 0;
  opacity: 0.75;
}

.bloom-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  contain: layout paint style;
}

.bloom-flower {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  /* NOTE: do NOT use contain:paint here — it clips the element to its own
     bounding box and prevents the curtain-open translate from being visible.
     The parent .bloom-field already carries contain:layout paint style. */
  backface-visibility: hidden;
}

.bloom-flower.in {
  /* bloom-rain plays first, bloom-float starts only after it settles (--fdelay)
     so they never compete on the compositor simultaneously. */
  animation:
    bloom-rain var(--rdur) cubic-bezier(0.19, 0.75, 0.24, 1) var(--ldelay, 0s) both,
    bloom-float var(--dur) ease-in-out var(--fdelay, 0s) infinite;
}

.bloom-flower.curtain-open {
  animation: none;
  /* steep ease-in: starts slow, then rockets off-screen for a cinematic sweep */
  transition:
    transform 1.1s cubic-bezier(0.55, 0, 1, 0.45) var(--cdelay, 0s),
    opacity   1.0s cubic-bezier(0.6,  0, 1, 1)    var(--cdelay, 0s);
  transform: translate3d(calc(var(--fx) + var(--cx, 0px)), calc(var(--fy) + var(--cy, 0px)), 0)
    rotate(calc(var(--rot-end, 0deg) + var(--cx, 0px) * 0.02deg)) scale(0.88);
  opacity: 0;
}

@keyframes bloom-rain {
  0% {
    transform: translate3d(var(--fx), calc(var(--fy) - var(--fall)), 0)
      rotate(var(--rot-start, -30deg)) scale(0.88);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  55% {
    transform: translate3d(calc(var(--fx) + var(--sway1, 20px)), calc(var(--fy) - var(--fall) * 0.4), 0)
      rotate(calc(var(--rot-start, -30deg) * 0.3)) scale(0.98);
  }
  100% {
    transform: translate3d(var(--fx), var(--fy), 0)
      rotate(var(--rot-end, 0deg)) scale(1);
    opacity: 1;
  }
}

@keyframes bloom-float {
  /* Simplified: only moves Y. No redundant translate3d + rotate re-calculation.
     The element is already at rest position from bloom-rain fill:both. */
  0%, 100% { transform: translate3d(var(--fx), var(--fy), 0) rotate(var(--rot-end, 0deg)); }
  50%       { transform: translate3d(var(--fx), calc(var(--fy) - 8px), 0) rotate(var(--rot-end, 0deg)); }
}


/* --- PAGE 2 & PAGE 3 OF SECTION 2 --- */
#page2, #page3 {
  display: none !important;
  position: relative;
  background: #f8f0dc;
}

#page2:not(.shown), #page3:not(.shown) {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#page2.shown, #page3.shown {
  display: flex !important;
  animation: p2-appear 0.8s ease-out forwards;
}

@keyframes p2-appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.page2-tint {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, #fdf8ee 0%, #f8f0dc 60%, #f0e2c4 100%);
  pointer-events: none;
  z-index: 0;
}

#page2 {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* On small phones, allow page2 to scroll vertically */
@media (max-width: 480px) {
  #page2 {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}

.page2-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(1rem, 3.5vh, 2.8rem) 1.2rem clamp(2rem, 5vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  max-height: 100dvh;
  overflow: hidden;
}

/* On small phones, remove height clipping from content wrapper */
@media (max-width: 480px) {
  .page2-content {
    max-height: none;
    overflow: visible;
    padding: 1.2rem 0.8rem 2rem;
    justify-content: flex-start;
  }
}

.p5-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.p5-hero h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.8rem, 5.5vw, 3.4rem);
  color: #800000;
  margin-bottom: 0.2rem;
  line-height: 1.15;
}

.p5-hero .p5-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2.8vw, 1.4rem);
  color: #7a3e3e;
  margin-bottom: clamp(0.5rem, 1.8vh, 1.2rem);
}

/* Mobile: tighter heading & sub to save vertical space */
@media (max-width: 480px) {
  .p5-hero h1 {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    margin-bottom: 0.1rem;
  }

  .p5-hero .p5-sub {
    font-size: clamp(0.85rem, 3.5vw, 1.05rem);
    margin-bottom: 0.5rem;
  }
}

.centre-wrap {
  width: 100%;
  max-width: clamp(280px, 50vw, 460px);
  margin: 0 auto clamp(0.6rem, 1.8vh, 1.2rem);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(128, 0, 0, 0.22), 0 0 0 6px rgba(255, 255, 255, 0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.centre-wrap:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 50px rgba(128, 0, 0, 0.28), 0 0 0 7px rgba(255, 255, 255, 0.9);
}

.centre-wrap img {
  width: 100%;
  max-height: clamp(200px, 44vh, 350px);
  height: auto;
  object-fit: contain;
  display: block;
}

/* Phone screen optimization: make the image prominent to fill the screen */
@media (max-width: 600px) {
  .centre-wrap {
    width: 92%;
    max-width: min(90vw, 380px);
    margin: 0 auto clamp(0.5rem, 1.8vh, 1rem);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(128, 0, 0, 0.25), 0 0 0 5px rgba(255, 255, 255, 0.85);
  }

  .centre-wrap img {
    width: 100%;
    max-height: clamp(220px, 46vh, 320px);
    height: auto;
    object-fit: contain;
  }
}

/* =========================================================================
   DUO PHOTO SCENE — Premium Cinematic Redesign
   Iron Man (left) | Heart divider | Virat (right)
   ========================================================================= */

/* ── Outer wrapper ── */
.duo-scene {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 560px;
  margin: 40px auto clamp(0.6rem, 2vh, 1.4rem);
  position: relative;
}

/* ── Cinematic Portrait Card — Transparent background ── */
.duo-cin-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* No background, no border, no clip — let PNG transparency show */
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  max-width: 220px;
  cursor: default;
  /* Add extra top padding to accommodate the thought cloud above */
  padding-top: 110px;
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.2);
  will-change: transform;
}

.duo-cin-card:hover {
  transform: translateY(-6px) scale(1.03);
}

/* Photo: transparent PNG, fills naturally */
.duo-cin-img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  object-position: top center;
  display: block;
  /* Drop shadow gives depth without a bg box */
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.45))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: filter 0.4s ease, transform 0.4s ease;
}

/* ── Mobile: compact image height ── */
@media (max-width: 480px) {
  .duo-cin-img {
    max-height: clamp(200px, 60vw, 300px);
  }
}

.duo-cin-card:hover .duo-cin-img {
  transform: scale(1.04);
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.6))
          drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

/* ── Thought Bubble Wrapper (positioned absolutely above the image) ── */
.duo-think-wrap {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 180px;
  z-index: 20;
  pointer-events: none;
}

/* The main thought cloud */
.duo-think-cloud {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50px;
  padding: 10px 16px;
  text-align: center;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.18),
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(200, 30, 80, 0.12);
  /* Gentle float animation */
  animation: thinkCloudFloat 3.4s ease-in-out infinite;
  position: relative;
}

/* Virat cloud floats slightly offset so they don't sync */
.duo-cin-card--virat .duo-think-cloud {
  animation-delay: 1.1s;
}

@keyframes thinkCloudFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

.duo-think-text {
  font-family: 'Fredoka', 'Nunito', 'Segoe UI', cursive, sans-serif;
  font-size: clamp(0.65rem, 1.8vw, 0.82rem);
  font-weight: 600;
  color: #5a0018;
  line-height: 1.35;
  display: block;
  white-space: nowrap;
}

/* ── Thought Bubble Dots (3 circles descending from cloud to image) ── */
.duo-think-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  animation: thinkCloudFloat 3.4s ease-in-out infinite;
}

.duo-cin-card--virat .duo-think-dots {
  animation-delay: 1.1s;
}

.duo-think-dot {
  display: block;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 0 0 1.5px rgba(200, 30, 80, 0.12);
}

/* Large dot (closest to cloud) */
.duo-think-dot--lg {
  width: 12px;
  height: 12px;
  animation: dotPulse 3.4s ease-in-out infinite;
}

/* Medium dot */
.duo-think-dot--md {
  width: 8px;
  height: 8px;
  animation: dotPulse 3.4s ease-in-out 0.18s infinite;
}

/* Small dot (closest to character head) */
.duo-think-dot--sm {
  width: 5px;
  height: 5px;
  animation: dotPulse 3.4s ease-in-out 0.36s infinite;
}

.duo-cin-card--virat .duo-think-dot--lg { animation-delay: 1.1s; }
.duo-cin-card--virat .duo-think-dot--md { animation-delay: 1.28s; }
.duo-cin-card--virat .duo-think-dot--sm { animation-delay: 1.46s; }

@keyframes dotPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.2); }
}

/* ── Centre Heart Divider ── */
.duo-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  flex-shrink: 0;
  z-index: 5;
  position: relative;
  /* Push down to align with image, not the top padding */
  margin-top: 110px;
}

.duo-divider-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 100, 130, 0.6),
    transparent
  );
  border-radius: 2px;
}

.duo-divider-heart {
  font-size: 1.4rem;
  line-height: 1;
  animation: heartbeat 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 80, 120, 0.7));
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.25); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.15); }
  70%       { transform: scale(1); }
}

/* ── Tablet / mid-range: smaller cards ── */
@media (max-width: 600px) {
  .duo-scene {
    max-width: 96vw;
    gap: 0;
  }

  .duo-cin-card {
    max-width: 42vw;
    padding-top: 80px;
  }

  .duo-think-wrap {
    max-width: 130px;
  }

  .duo-think-text {
    font-size: 0.6rem;
    white-space: normal;
  }

  .duo-divider {
    margin-top: 80px;
    padding: 0 6px;
  }

  .duo-divider-line {
    height: 24px;
  }

  .duo-divider-heart {
    font-size: 1rem;
  }
}

/* ── Phone portrait (≤480px): Stacked vertically for larger readability ── */
@media (max-width: 480px) {
  .duo-scene {
    /* Stack vertically to make images and text larger */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    max-width: 100vw;
    margin-bottom: 1.5rem;
  }

  .duo-cin-card {
    max-width: 80vw;
    padding-top: clamp(70px, 20vw, 90px);
  }

  .duo-think-wrap {
    max-width: clamp(200px, 60vw, 260px);
  }

  .duo-think-cloud {
    padding: 10px 16px;
    border-radius: 30px;
  }

  .duo-think-text {
    font-size: clamp(0.85rem, 4vw, 1.1rem);
    white-space: normal;
    line-height: 1.35;
  }

  .duo-think-dot--lg { width: 12px; height: 12px; }
  .duo-think-dot--md { width: 8px; height: 8px; }
  .duo-think-dot--sm { width: 5px; height: 5px; }

  .duo-divider {
    flex-direction: row; /* Horizontal divider for column layout */
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 0;
  }

  .duo-divider-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 100, 130, 0.6),
      transparent
    );
  }

  .duo-divider-heart {
    font-size: 1.4rem;
  }
}

/* ── Very small phones (≤360px): even tighter ── */
@media (max-width: 360px) {
  .duo-cin-card {
    max-width: 85vw;
    padding-top: 60px;
  }

  .duo-think-wrap {
    max-width: 200px;
  }

  .duo-think-text {
    font-size: 0.8rem;
  }

  .duo-divider {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .duo-divider-line {
    width: 40px;
    height: 2px;
  }
}

.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #a0522d;
  font-size: 1.1rem;
  margin: clamp(0.4rem, 1.4vh, 1rem) 0 0;
}

.flourish .heart {
  font-size: 1.4rem;
  color: #800000;
}

@media (max-width: 480px) {
  .flourish {
    font-size: 0.9rem;
    margin: 0.3rem 0 0;
    gap: 6px;
  }
  .flourish .heart {
    font-size: 1.1rem;
  }
  .s3-nav-action {
    margin-top: 10px;
  }
}

.smile-section {
  width: 100%;
  margin: 2rem 0 3rem;
}

.smile-card {
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(128, 0, 0, 0.12);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: 0 12px 36px rgba(128, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.smile-card.in {
  opacity: 1;
  transform: translateY(0);
}

.smile-card p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.3rem, 3.4vw, 1.85rem);
  line-height: 1.6;
  color: #4a1e1e;
  margin: 0;
}

.hl-smile { color: #d46a11; font-weight: 600; font-style: italic; }
.hl-peace { color: #2e7d32; font-weight: 600; font-style: italic; }
.hl-love  { color: #c2185b; font-weight: 600; font-style: italic; }
.hl-home  { color: #6a1b9a; font-weight: 600; font-style: italic; }

.smile-card .deco {
  position: absolute;
  color: rgba(128, 0, 0, 0.18);
  font-size: 1.4rem;
}
.smile-card .d1 { top: 12px; left: 16px; }
.smile-card .d2 { top: 12px; right: 16px; }
.smile-card .d3 { bottom: 12px; left: 16px; }
.smile-card .d4 { bottom: 12px; right: 16px; }

/* --- PHOTO GRID & ROMANTIC LETTER SECTION --- */
.photo-grid-section {
  width: 100%;
  margin: 3rem 0 4rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 85vw), 1fr));
  gap: 24px;
  width: 100%;
  justify-items: center;
}

.photo-card {
  background: #ffffff;
  padding: 12px 12px 36px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  transform: translateY(40px) rotate(var(--rot, 0deg));
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  max-width: 260px;
}

.photo-card.in {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg));
}

.photo-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  background: #fdf5e6;
  border-radius: 2px;
}

.letter-section {
  width: 100%;
  margin: 2rem 0 4rem;
}

.letter-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(128, 0, 0, 0.12);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  box-shadow: 0 16px 48px rgba(128, 0, 0, 0.08);
  text-align: left;
}

.letter-card p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.4rem, 3.2vw, 1.85rem);
  line-height: 1.8;
  color: #3e1a1a;
  margin: 0;
}

.letter-card .word {
  opacity: 0;
  display: inline-block;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.letter-card .word.in {
  opacity: 1;
  transform: translateY(0);
}

.heart-divider {
  margin: 3rem 0;
  font-size: 2rem;
  color: #800000;
}

#footer-section h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: #800000;
  margin-bottom: 0.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

#footer-section p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: #7a3e3e;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease 0.2s;
}

#footer-section h2.in, #footer-section p.in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   SECTION TRANSITION MODAL / DIALOGUE STYLES
   ========================================================================= */
.transition-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}

.transition-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.transition-modal-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(28, 6, 18, 0.8) 0%, rgba(8, 2, 6, 0.93) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Floating Heart Orb (above card) ── */
.trans-orb {
  position: relative;
  z-index: 1;
  margin-bottom: -34px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  transform: translateY(-20px) scale(0.6);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
              opacity 0.4s ease 0.1s;
}

.transition-modal.is-open .trans-orb {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.trans-orb__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 35, 92, 0.35);
  animation: orbRingPulse 2.5s ease-in-out infinite;
}
.trans-orb__ring--1 { width: 72px; height: 72px; animation-delay: 0s; }
.trans-orb__ring--2 { width: 92px; height: 92px; border-color: rgba(212, 35, 92, 0.16); animation-delay: 0.65s; }

.trans-orb__core {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff5f8 0%, #fde8ef 40%, #f9c8d6 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 8px 28px rgba(212, 35, 92, 0.52),
    0 2px 8px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: orbHeartBeat 2s ease-in-out infinite;
}

.trans-orb__heart {
  width: 30px;
  height: 27px;
  filter: drop-shadow(0 2px 6px rgba(168, 15, 64, 0.55));
}

@keyframes orbRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%       { transform: scale(1.13); opacity: 1; }
}

@keyframes orbHeartBeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.16); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.09); }
  56%      { transform: scale(1); }
}

/* ── Modal Card ── */
.transition-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(254, 246, 249, 0.95) 52%,
    rgba(249, 236, 242, 0.92) 100%
  );
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 28px;
  padding: 3rem 2.2rem 2.4rem;
  text-align: center;
  box-shadow:
    0 32px 72px rgba(100, 15, 44, 0.32),
    0 8px 24px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(32px) scale(0.9);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
  overflow: hidden;
}

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

/* Rose accent top strip */
.transition-modal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, transparent 0%, #d4235c 20%, #ff6699 50%, #d4235c 80%, transparent 100%);
  border-radius: 28px 28px 0 0;
}

/* Corner petal dots */
.trans-modal-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 28px; }
.trans-petal { position: absolute; border-radius: 50% 0 50% 0; opacity: 0.11; }
.trans-petal--1 { width: 10px; height: 10px; top: 14px; left: 18px;  background: #d4235c; transform: rotate(-20deg); }
.trans-petal--2 { width: 7px;  height: 7px;  top: 16px; right: 52px; background: #e8a23d; transform: rotate(40deg); border-radius: 50%; }
.trans-petal--3 { width: 7px;  height: 7px;  bottom: 20px; left: 22px; background: #e8a23d; transform: rotate(60deg); border-radius: 50%; }
.trans-petal--4 { width: 10px; height: 10px; bottom: 20px; right: 18px; background: #d4235c; transform: rotate(20deg); }

/* Ambient glow */
.trans-modal-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 220px;
  background: radial-gradient(circle, rgba(212, 35, 92, 0.2), transparent 68%);
  filter: blur(36px);
  pointer-events: none;
}

/* ── Close Button (SVG X, rotates on hover) ── */
.trans-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(128, 0, 0, 0.05);
  border: 1px solid rgba(168, 15, 64, 0.12);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a4a5e;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease, border-color 0.2s ease;
  z-index: 2;
}

.trans-modal-close:hover {
  background: rgba(212, 35, 92, 0.11);
  border-color: rgba(212, 35, 92, 0.26);
  color: #800020;
  transform: rotate(90deg) scale(1.08);
}

/* ── SVG Badge Row ── */
.trans-modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 0.6rem;
}

.trans-icon-star {
  color: #e8a23d;
  animation: transTwinkle 2.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 1px 4px rgba(232, 162, 61, 0.65));
}

.trans-icon-heart-sm {
  color: #d4235c;
  animation: transHeartPulse 1.9s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(212, 35, 92, 0.5));
}

@keyframes transTwinkle {
  0%   { transform: scale(0.78) rotate(-14deg); opacity: 0.62; }
  100% { transform: scale(1.28) rotate(14deg); opacity: 1; }
}

@keyframes transHeartPulse {
  0%, 100% { transform: scale(1); }
  42%      { transform: scale(1.24); }
  62%      { transform: scale(0.95); }
}

/* ── Title ── */
.trans-modal-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b06080;
  margin: 0 0 0.55rem;
}

/* ── Ornamental Rule ── */
.trans-modal-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 1rem;
}

.trans-rule-line {
  display: block;
  height: 1px;
  width: 52px;
  background: linear-gradient(90deg, transparent, rgba(212, 35, 92, 0.32), transparent);
}

/* ── Main Message ── */
.trans-modal-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.4rem, 4.2vw, 1.95rem);
  font-weight: 700;
  line-height: 1.3;
  color: #2c0d18;
  margin: 0 0 1.9rem;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.88);
}

/* ── Continue Button ── */
.trans-modal-continue-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 28px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(130deg, #e0306a 0%, #a80f43 55%, #780022 100%);
  color: #ffffff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 10px 28px rgba(212, 35, 92, 0.46),
    0 2px 8px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              background 0.3s ease;
}

/* Shimmer sweep effect */
.trans-btn-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 66%
  );
  background-size: 220% 100%;
  background-position: -120% 0;
  animation: btnShimmer 2.8s ease-in-out infinite 1.4s;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes btnShimmer {
  0%   { background-position: -120% 0; opacity: 0; }
  8%   { opacity: 1; }
  65%  { background-position: 220% 0; opacity: 1; }
  75%  { opacity: 0; }
  100% { background-position: 220% 0; opacity: 0; }
}

.trans-btn-label { position: relative; z-index: 1; }

.trans-modal-continue-btn > svg {
  position: relative;
  z-index: 1;
  transition: transform 0.28s ease;
}

.trans-modal-continue-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 16px 38px rgba(212, 35, 92, 0.56),
    0 4px 12px rgba(0, 0, 0, 0.18);
  background: linear-gradient(130deg, #eb3d74 0%, #bc1650 55%, #880030 100%);
}

.trans-modal-continue-btn:hover > svg { transform: translateX(5px); }

.trans-modal-continue-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 6px 18px rgba(212, 35, 92, 0.34);
}

/* =========================================================================
   RESPONSIVE DESIGN
   ========================================================================= */
@media (max-width: 640px) {
  .letter-card {
    padding: 2rem 1.5rem;
  }
  .transition-modal-card {
    padding: 2.5rem 1.6rem 2rem;
    border-radius: 22px;
  }
  .trans-orb { width: 68px; height: 68px; margin-bottom: -28px; }
  .trans-orb__core { width: 48px; height: 48px; }
  .trans-orb__heart { width: 26px; height: 23px; }
  .trans-orb__ring--1 { width: 62px; height: 62px; }
  .trans-orb__ring--2 { width: 78px; height: 78px; }
}


/* =========================================================================
   SECTION 3 : BIRTHDAY CARD — INTERACTIVE STATE MACHINE
   ========================================================================= */

/* Body theme when section 1 (birthday card) is active — already set above */


/* ── Section wrapper ──────────────────────────────────────────────────── */
.s3-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #FBF6F0;
}

/* ── Corner Blobs ─────────────────────────────────────────────────────── */
.s3-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.s3-blob--tl {
  width: 600px;
  height: 680px;
  top: -220px;
  left: -220px;
  background: radial-gradient(ellipse at 30% 40%, #801B3E 0%, #6E1534 60%, transparent 100%);
  border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%;
  filter: blur(4px);
  opacity: 0.92;
}

.s3-blob--br {
  width: 560px;
  height: 640px;
  bottom: -220px;
  right: -220px;
  background: radial-gradient(ellipse at 65% 65%, #801B3E 0%, #6E1534 55%, transparent 100%);
  border-radius: 55% 45% 38% 62% / 52% 60% 40% 48%;
  filter: blur(4px);
  opacity: 0.88;
}

/* ── Grid-Paper Card ──────────────────────────────────────────────────── */
.s3-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  background: #FFFDF9;
  background-image:
    linear-gradient(to right, #EBD6DB 1px, transparent 1px),
    linear-gradient(to bottom, #EBD6DB 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Screens ─────────────────────────────────────────────── */
.s3-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  padding: clamp(1rem, 3.5vh, 3rem) clamp(1rem, 4vw, 2.5rem);
  gap: clamp(0.3rem, 1.2vh, 0.8rem);
  animation: s3FadeIn 0.42s cubic-bezier(.22,1,.36,1) both;
  box-sizing: border-box;
  overflow: hidden;
}

.s3-screen--hidden {
  display: none;
}

@keyframes s3FadeIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Cat Sticker ────────────────────────────────────────────── */
.s3-cat-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(0.4rem, 1.4vh, 1.2rem);
  flex-shrink: 0;
}

.s3-cat-img {
  width: clamp(120px, 22vmin, 240px);
  max-height: clamp(110px, 22vh, 220px);
  height: auto;
  border-radius: 0;
  object-fit: contain;
  border: none;
  box-shadow: none;
  background: transparent;
  animation: s3CatBounce 3s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}

.s3-cat-img:hover {
  transform: scale(1.06) rotate(-3deg);
}

.s3-cat-img--angry {
  animation: s3CatShake 0.6s ease-in-out infinite;
}

.s3-cat-img--happy {
  animation: s3CatHappy 2.4s ease-in-out infinite;
}

@keyframes s3CatBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes s3CatShake {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-7deg); }
  40%      { transform: rotate(7deg); }
  60%      { transform: rotate(-5deg); }
  80%      { transform: rotate(5deg); }
}

@keyframes s3CatHappy {
  0%, 100% { transform: translateY(0) scale(1); }
  25%      { transform: translateY(-8px) scale(1.03) rotate(3deg); }
  75%      { transform: translateY(-5px) scale(1.02) rotate(-2deg); }
}

/* ── Typography ───────────────────────────────────────────── */
.s3-title {
  font-family: 'Shrikhand', 'Paytone One', 'Alfa Slab One', serif;
  font-size: clamp(2.2rem, 7.5vw, 5.2rem);
  color: #541228;
  text-align: center;
  line-height: 1.05;
  margin: 0.2rem 0 0.3rem;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 24px rgba(84, 18, 40, 0.15);
  flex-shrink: 0;
}

.s3-title--sm {
  font-size: clamp(1.8rem, 6.5vw, 4rem);
}

.s3-cursive {
  font-family: 'Caveat', 'Dancing Script', cursive;
  font-size: clamp(1.3rem, 4.4vw, 2.3rem);
  font-weight: 600;
  color: #541228;
  text-align: center;
  line-height: 1.3;
  margin: 0.1rem 0;
  flex-shrink: 0;
}

.s3-cursive--sub {
  color: #8C2D4A;
  font-weight: 400;
  font-size: clamp(1.1rem, 3.6vw, 1.8rem);
  margin-bottom: 0.3rem;
}

.s3-cursive--big {
  font-size: clamp(1.4rem, 4.8vw, 2.4rem);
  font-weight: 700;
  color: #541228;
  margin: 0.3rem 0 0.8rem;
}

/* ── Button Row ────────────────────────────────────────────── */
.s3-btn-row {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 380px;
  margin-top: clamp(0.5rem, 1.6vh, 1.1rem);
  flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.s3-btn {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  letter-spacing: 0.06em;
  color: #fff;
  background: #8C2D4A;
  border: 2px solid #6E1534;
  border-radius: 9999px;
  padding: clamp(9px, 1.4vh, 13px) clamp(24px, 5vw, 38px);
  min-width: 105px;
  text-align: center;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(.2,.7,.2,1), box-shadow 0.22s ease, background 0.22s ease;
  box-shadow: 0 4px 18px rgba(140, 45, 74, 0.28);
}

.s3-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.s3-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 28px rgba(140, 45, 74, 0.4);
  background: #A33557;
}

.s3-btn:hover::after { opacity: 1; }

.s3-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(140, 45, 74, 0.22);
}

.s3-btn--outline {
  background: transparent;
  color: #8C2D4A;
  border-color: #8C2D4A;
  box-shadow: none;
}

.s3-btn--outline:hover {
  background: rgba(140, 45, 74, 0.07);
  box-shadow: 0 4px 14px rgba(140, 45, 74, 0.15);
  color: #6E1534;
}

.s3-btn--glow {
  background: linear-gradient(135deg, #A33557 0%, #6E1534 100%);
  border-color: #6E1534;
  box-shadow:
    0 0 0 0 rgba(140, 45, 74, 0),
    0 6px 22px rgba(140, 45, 74, 0.38);
  animation: s3BtnPulse 2.2s ease-in-out infinite;
}

@keyframes s3BtnPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(140, 45, 74, 0.5), 0 6px 22px rgba(140, 45, 74, 0.38);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(140, 45, 74, 0), 0 8px 30px rgba(140, 45, 74, 0.5);
  }
}

/* ── Confetti Canvas ──────────────────────────────────────────────────── */
.s3-confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.s3-confetti-canvas.active {
  opacity: 1;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .s3-card {
    border-radius: 0;
  }
  .s3-screen {
    padding: clamp(0.8rem, 2.5vh, 1.8rem) clamp(0.8rem, 3.5vw, 1.4rem);
    gap: clamp(0.2rem, 0.8vh, 0.5rem);
  }
  .s3-cat-img {
    width: clamp(110px, 28vmin, 160px);
    max-height: clamp(100px, 18vh, 160px);
  }
  .s3-btn {
    padding: 10px 26px;
    font-size: 1.05rem;
    min-width: 95px;
  }
  .s3-btn-row {
    gap: 0.7rem;
    margin-top: clamp(0.4rem, 1.2vh, 0.8rem);
  }
  .s3-blob--tl {
    width: 240px;
    height: 280px;
    top: -100px;
    left: -100px;
  }
  .s3-blob--br {
    width: 220px;
    height: 260px;
    bottom: -100px;
    right: -100px;
  }
}


/* =========================================================================
   SECTION 4 : I LOVE YOU → SURPRISE GIFT → VIRTUAL HUG
   Body theme + Section wrapper + Inner Screens A / B / C
   ========================================================================= */

/* Body theme colour for section 4 */
body[data-active-section="4"] {
  background: #7d184d;
}

/* ── Section wrapper ──────────────────────────────────────────────────── */
.s4-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.s4-section.active {
  display: flex;
}

/* ── Inner screen base ────────────────────────────────────────────────── */
.s4-screen {
  position: absolute;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(16px) scale(0.98);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.s4-screen--active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.s4-screen--exit {
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
}


/* =========================================================================
   SCREEN A : "I ❤️ LOVE YOU ❤️" — Berry magenta background
   ========================================================================= */
#s4-screen-a {
  background: radial-gradient(ellipse at 50% 38%, #c9316c 0%, #b82e74 38%, #7d184d 100%);
  justify-content: center;
  align-items: center;
  padding: clamp(0.5rem, 1.6vh, 1.2rem) 1rem clamp(68px, 11vh, 88px);
  gap: clamp(0.4rem, 1.4vh, 1rem);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Floating hearts ambient ────────────────────────────────────────── */
.s4-hearts-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.s4-fheart {
  position: absolute;
  bottom: -40px;
  left: var(--x, 50%);
  font-size: calc(1.6rem * var(--sz, 1));
  animation: s4FloatHeart 7s ease-in infinite;
  animation-delay: var(--d, 0s);
  opacity: 0;
}

@keyframes s4FloatHeart {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.8; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) rotate(25deg); opacity: 0; }
}

/* ── Polaroid String Gallery ──────────────────────────────────────────── */
.s4-gallery {
  position: relative;
  width: 100%;
  max-width: 860px;
  height: auto;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 1.8vw, 1.4rem);
  padding-top: clamp(0.5rem, 1.5vh, 1.2rem);
  padding-bottom: 0.2rem;
  z-index: 2;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Horizontal string wire */
.s4-string {
  position: absolute;
  top: clamp(10px, 1.8vh, 18px);
  left: 2%;
  right: 2%;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.1) 0%,
    rgba(255,255,255,0.55) 20%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0.55) 80%,
    rgba(255,255,255,0.1) 100%);
  border-radius: 2px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.25);
  z-index: 1;
}

/* Polaroid card */
.s4-polaroid {
  position: relative;
  background: #fff;
  width: clamp(70px, 20vw, 140px);
  padding: clamp(4px, 0.8vw, 6px) clamp(4px, 0.8vw, 6px) clamp(12px, 2.2vw, 20px);
  border-radius: 3px;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.28),
    0 2px 6px rgba(0,0,0,0.18);
  transform: rotate(var(--rot, 0deg));
  transform-origin: top center;
  cursor: default;
  /* Hang-in animation */
  animation: s4HangIn 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
  animation-delay: var(--hang-delay, 0s);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
  z-index: 3;
  flex-shrink: 0;
  box-sizing: border-box;
}

.s4-polaroid:hover {
  box-shadow:
    0 10px 32px rgba(0,0,0,0.36),
    0 4px 12px rgba(0,0,0,0.24);
  animation: s4Swing 1.6s ease-in-out infinite;
}

@keyframes s4HangIn {
  from { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(-60px) scale(0.85); }
  to   { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(0) scale(1); }
}

@keyframes s4Swing {
  0%,100% { transform: rotate(var(--rot, 0deg)); }
  25%     { transform: rotate(calc(var(--rot, 0deg) + 4deg)); }
  75%     { transform: rotate(calc(var(--rot, 0deg) - 4deg)); }
}

/* Wooden clip at top */
.s4-clip {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(10px, 2vw, 16px);
  height: clamp(14px, 2.5vw, 20px);
  background: linear-gradient(135deg, #8B6914 0%, #c49a3c 45%, #8B6914 100%);
  border-radius: 3px 3px 4px 4px;
  border: 1.5px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  z-index: 5;
}

.s4-clip::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

/* Photo placeholder inside polaroid */
.s4-photo {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f0e8dd;
  border-radius: 2px;
}

.s4-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.s4-polaroid:hover .s4-photo img {
  transform: scale(1.05);
}

/* Heart sticker bottom-right */
.s4-heart-sticker {
  position: absolute;
  bottom: 3px;
  right: 4px;
  font-size: clamp(0.75rem, 1.8vw, 1rem);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
  animation: s4HeartPulse 2s ease-in-out infinite;
}

@keyframes s4HeartPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}

/* ── Centre Typography ────────────────────────────────────────────────── */
.s4-hero-text {
  text-align: center;
  z-index: 2;
  padding: 0.1rem 0.8rem;
  flex-shrink: 0;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

.s4-headline {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 4.8vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow:
    0 2px 18px rgba(201,24,74,0.6),
    0 0 40px rgba(255,75,130,0.35);
  line-height: 1.15;
  margin-bottom: 0.15rem;
  animation: s4GlowPulse 3s ease-in-out infinite;
}

@keyframes s4GlowPulse {
  0%,100% { text-shadow: 0 2px 18px rgba(201,24,74,0.6), 0 0 40px rgba(255,75,130,0.35); }
  50%     { text-shadow: 0 2px 28px rgba(201,24,74,0.9), 0 0 60px rgba(255,75,130,0.6); }
}

/* Typewriter paragraph */
.s4-typewriter {
  font-family: 'Patrick Hand', 'Caveat', cursive;
  font-size: clamp(0.92rem, 2.6vw, 1.25rem);
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.03em;
  min-height: 1.4em;
  max-width: min(92vw, 500px);
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
  display: inline-block;
  box-sizing: border-box;
}

/* Inline blinking cursor — sits right after the last typed character */
.s4-tw-cursor {
  display: inline;
  font-family: 'Patrick Hand', 'Caveat', cursive;
  font-size: clamp(0.92rem, 2.6vw, 1.25rem);
  color: rgba(255,255,255,0.9);
  font-weight: 700;
  margin-left: 1px;
  animation: s4Blink 0.65s step-end infinite;
  line-height: 1;
  vertical-align: baseline;
}

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

.s4-typewriter.done .s4-tw-cursor {
  display: none;
}

/* ── Bottom Row ──────────────────────────────────────────────────────── */
.s4-bottom-row {
  width: 100%;
  max-width: 760px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem clamp(0.8rem, 3vw, 2rem);
  z-index: 2;
  margin-top: clamp(0.2rem, 1vh, 0.8rem);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Birthday Cake SVG */
.s4-cake-wrap {
  flex-shrink: 0;
}

.s4-cake-svg {
  width: clamp(50px, 9vw, 85px);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.25));
}

/* Candle flame flicker */
.s4-flame {
  transform-origin: center bottom;
  animation: s4FlameFlicker 1.2s ease-in-out infinite alternate;
}

@keyframes s4FlameFlicker {
  0%   { transform: scaleY(1) scaleX(1) rotate(-2deg); opacity: 1; }
  50%  { transform: scaleY(1.18) scaleX(0.88) rotate(3deg); opacity: 0.9; }
  100% { transform: scaleY(0.9) scaleX(1.06) rotate(-3deg); opacity: 1; }
}

/* Gift trigger button */
.s4-gift-trigger {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  outline: none;
  flex-shrink: 0;
  animation: s4GiftBounce 1.8s ease-in-out infinite;
}

@keyframes s4GiftBounce {
  0%,100% { transform: translateY(0); }
  45%     { transform: translateY(-8px); }
  65%     { transform: translateY(-5px); }
}

.s4-gift-trigger:focus-visible {
  outline: 3px solid rgba(255,255,255,0.6);
  border-radius: 8px;
}

/* Outer glow ring */
.s4-gift-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,143,163,0.4) 0%, transparent 70%);
  animation: s4GlowRing 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes s4GlowRing {
  0%,100% { transform: scale(1); opacity: 0.7; }
  50%     { transform: scale(1.18); opacity: 1; }
}

.s4-gift-icon svg {
  width: clamp(46px, 8vw, 72px);
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(201,24,74,0.55));
  display: block;
}

.s4-gift-label {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-size: clamp(0.82rem, 2vw, 1rem);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  letter-spacing: 0.04em;
  display: block;
}


/* =========================================================================
   SCREENS B & C : Notebook paper tone + Maroon wave
   ========================================================================= */
#s4-screen-b,
#s4-screen-c {
  background: #faf5ef;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(0.5rem, 1.5vh, 1.2rem) 1rem clamp(70px, 11vh, 90px);
  gap: clamp(0.3rem, 1.2vh, 0.8rem);
}

/* Notebook grid overlay */
.s4-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#ebdcd0 1px, transparent 1px),
    linear-gradient(90deg, #ebdcd0 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* Left maroon fluid wave blob */
.s4-wave-blob {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(70px, 12vw, 160px);
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.s4-wave-blob svg {
  width: 100%;
  height: 100%;
}

/* ── Shared header for B & C ────────────────────────────────────────── */
.s4-b-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.2rem 0.8rem;
  text-align: center;
  flex-shrink: 0;
}

.s4-b-title {
  font-family: 'Patrick Hand', 'Caveat', cursive;
  font-size: clamp(1.2rem, 3.8vw, 2rem);
  font-weight: 700;
  color: #5a1430;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.s4-doodle-heart {
  font-size: clamp(1.2rem, 3.2vw, 1.8rem);
  animation: s4HeartPulse 2s ease-in-out infinite;
}


/* ── Screen B: Centre Gift Box ─────────────────────────────────────── */
.s4-center-gift {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.2rem 0.8rem;
}

/* Big gift button */
.s4-big-gift-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  outline: none;
  animation: s4BigGiftFloat 2.8s ease-in-out infinite;
}

@keyframes s4BigGiftFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-8px) rotate(1deg); }
}

.s4-big-gift-btn:focus-visible {
  outline: 3px solid #c9184a;
  border-radius: 10px;
}

.s4-big-gift-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233,30,99,0.22) 0%, transparent 70%);
  animation: s4GlowRing 2.5s ease-in-out infinite;
  pointer-events: none;
}

.s4-big-gift-svg {
  width: clamp(120px, 26vw, 190px);
  max-height: clamp(110px, 24vh, 180px);
  height: auto;
  filter:
    drop-shadow(0 6px 24px rgba(201,24,74,0.45))
    drop-shadow(0 2px 8px rgba(0,0,0,0.2));
  display: block;
}

/* Tap hint arrow */
.s4-tap-hint {
  position: absolute;
  right: -0.5rem;
  bottom: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.s4-tap-arrow {
  width: 54px;
  height: 38px;
}

.s4-tap-text {
  font-family: 'Caveat', 'Patrick Hand', cursive;
  font-size: 0.95rem;
  color: #c9184a;
  font-weight: 700;
  margin-left: 0.4rem;
}

/* Bottom-right party puppy */
.s4-puppy-wrap {
  position: absolute;
  right: clamp(0.6rem, 3vw, 2rem);
  bottom: clamp(66px, 11vh, 88px);
  z-index: 2;
}

.s4-puppy-svg {
  width: clamp(55px, 10vw, 95px);
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
  animation: s4PuppyBob 2.2s ease-in-out infinite;
}

@keyframes s4PuppyBob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-6px) rotate(2deg); }
}


/* ── Screen C: Virtual Hug ──────────────────────────────────────────── */
#s4-screen-c {
  display: flex;
  flex-direction: column;
}

.s4-hug-center {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.8rem;
}

.s4-hug-illustration {
  animation: s4HugSway 3s ease-in-out infinite;
}

@keyframes s4HugSway {
  0%,100% { transform: scale(1) translateY(0); }
  50%     { transform: scale(1.03) translateY(-5px); }
}

/* Hug GIF */
.s4-hug-gif {
  width: min(80vw, 270px);
  max-height: clamp(110px, 22vh, 190px);
  height: auto;
  display: block;
  border-radius: 14px;
  filter: drop-shadow(0 8px 28px rgba(201,24,74,0.22));
  -webkit-user-drag: none;
  user-select: none;
  object-fit: contain;
}

/* Floating hearts above bears */
.s4-bear-heart {
  animation: s4BearHeartFloat 2.4s ease-in-out infinite;
}

@keyframes s4BearHeartFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

.s4-hug-caption {
  font-family: 'Patrick Hand', 'Caveat', cursive;
  font-size: clamp(1rem, 3vw, 1.35rem);
  color: #7d184d;
  font-weight: 700;
  text-align: center;
  margin-top: 0.4rem;
  letter-spacing: 0.02em;
}

/* Bouquet + balloon bottom-right */
.s4-bouquet-wrap {
  position: absolute;
  right: clamp(0.6rem, 2.5vw, 1.6rem);
  bottom: clamp(66px, 11vh, 88px);
  z-index: 2;
}

.s4-bouquet-svg {
  width: clamp(52px, 9vw, 100px);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.18));
  animation: s4BouquetSway 3.5s ease-in-out infinite;
}

@keyframes s4BouquetSway {
  0%,100% { transform: rotate(-3deg) translateY(0); }
  50%     { transform: rotate(3deg) translateY(-5px); }
}


/* =========================================================================
   SECTION 4 RESPONSIVE TWEAKS
   ========================================================================= */
@media (max-width: 680px) {
  #s4-screen-a {
    padding: clamp(0.4rem, 1.2vh, 0.8rem) 0.8rem clamp(64px, 10vh, 80px);
    gap: clamp(0.3rem, 1vh, 0.6rem);
  }

  .s4-bottom-row {
    padding: 0.1rem 0.4rem;
  }

  .s4-puppy-wrap {
    right: 0.4rem;
  }

  .s4-tap-hint {
    display: none;
  }
}

@media (max-width: 420px) {
  #s4-screen-a {
    padding: 0.4rem 0.5rem clamp(60px, 9.5vh, 76px);
  }
  .s4-gallery {
    gap: 3px;
    padding-top: 0.3rem;
  }
  .s4-hero-text {
    padding: 0.1rem 0.1rem;
  }
}


/* =========================================================================
   SECTION 5 : VINTAGE SCRAPBOOK BIRTHDAY CAROUSEL
   ========================================================================= */

/* ── Section shell ── */
.s5-section {
  background: radial-gradient(ellipse at 30% 20%, #5a0e1c 0%, #3d0711 45%, #2a0009 100%);
  /* Fine woven canvas texture via repeating gradient */
  background-image:
    radial-gradient(ellipse at 30% 20%, #5a0e1c 0%, #3d0711 45%, #2a0009 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.018) 2px,
      rgba(255,255,255,0.018) 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.012) 2px,
      rgba(255,255,255,0.012) 3px
    );
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.app-section.s5-section.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Twinkle stars ── */
.s5-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.s5-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: #fff;
  animation: s5Twinkle 2.4s var(--d) ease-in-out infinite alternate;
}

@keyframes s5Twinkle {
  0%   { opacity: 0.08; transform: scale(0.6); }
  50%  { opacity: 0.9;  transform: scale(1.4); }
  100% { opacity: 0.2;  transform: scale(0.8); }
}

/* ── Navigation arrows ── */
.s5-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(251,245,232,0.35);
  background: rgba(61,7,17,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fbf5e8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s;
}
.s5-nav:hover:not(:disabled) {
  background: rgba(139,21,34,0.9);
  border-color: rgba(251,245,232,0.6);
  transform: translateY(-50%) scale(1.08);
}
.s5-nav:active:not(:disabled) {
  transform: translateY(-50%) scale(0.96);
}
.s5-nav:disabled {
  opacity: 0.25;
  cursor: default;
}
.s5-nav--prev { left: 14px; }
.s5-nav--next { right: 14px; }

/* ── Carousel Bottom Controls (Progress Bar + Dots + Auto-Scroll Toggle) ── */
.s5-carousel-controls {
  position: absolute;
  bottom: clamp(74px, 10vh, 88px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 25;
  background: rgba(42, 0, 9, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 14px;
  border-radius: 30px;
  border: 1px solid rgba(251, 245, 232, 0.25);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.s5-progress-bar-track {
  width: 50px;
  height: 4px;
  background: rgba(251, 245, 232, 0.18);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.s5-progress-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #c9956a, #fbf5e8);
  border-radius: 4px;
  transition: width 0.08s linear;
}

.s5-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.s5-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(251,245,232,0.5);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s, width 0.25s;
  padding: 0;
}
.s5-dot--active {
  background: #fbf5e8;
  border-color: #fbf5e8;
  width: 18px;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(251, 245, 232, 0.6);
}
.s5-dot:hover:not(.s5-dot--active) {
  background: rgba(251,245,232,0.4);
}

.s5-autoplay-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(251, 245, 232, 0.12);
  border: 1px solid rgba(251, 245, 232, 0.25);
  color: #fbf5e8;
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  user-select: none;
}
.s5-autoplay-toggle:hover {
  background: rgba(201, 149, 106, 0.3);
  border-color: rgba(251, 245, 232, 0.5);
  transform: scale(1.04);
}
.s5-autoplay-toggle.is-paused {
  background: rgba(139, 21, 34, 0.55);
  border-color: rgba(245, 210, 160, 0.4);
  color: #f5d2a0;
}

/* ── Track (slide container) ── */
.s5-track-wrap {
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  padding: 0 50px;
  cursor: grab;
  box-sizing: border-box;
}
.s5-track-wrap.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.s5-track {
  display: flex;
  width: 100%;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ── Panel shell ── */
.s5-panel {
  flex: 0 0 100%;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vh, 20px) 16px clamp(110px, 16vh, 135px);
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Panel inner wrapper (two-column default) ── */
.s5-panel-inner {
  display: flex;
  gap: clamp(18px, 3.5vw, 36px);
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1080px;
  max-height: 100%;
  box-sizing: border-box;
  animation: s5PanelIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes s5PanelIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PANEL 1 : COVER SLIDE
   ========================================================================== */
.s5-cover-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fbf5e8;
  box-sizing: border-box;
}

.s5-cover-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: #c9956a;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.s5-cover-happy {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fbf5e8;
  text-transform: uppercase;
  line-height: 1;
}

.s5-cover-birthday {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(3rem, 9vw, 5.8rem);
  color: #f5d2a0;
  line-height: 1;
  margin: -3px 0;
  text-shadow: 0 2px 28px rgba(139,21,34,0.6);
}

.s5-cover-beloved {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  color: #d4a8a0;
  text-transform: uppercase;
  margin-top: 2px;
}

.s5-cover-flourish {
  margin: 4px 0 8px;
}

.s5-cover-verse {
  font-family: 'Courier Prime', monospace;
  font-size: clamp(0.85rem, 1.8vw, 0.96rem);
  font-style: italic;
  color: rgba(251,245,232,0.8);
  line-height: 1.5;
  max-width: 320px;
}

/* ── Right: postcard ── */
/* ── Right: Vintage Keepsake Envelope / Photo Card ── */
.s5-cover-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.s5-postcard {
  position: relative;
  width: min(90vw, 290px);
  min-height: auto;
  background: linear-gradient(135deg, #fefdf8 0%, #f6edd9 100%);
  border-radius: 6px;
  border: 1px solid rgba(201, 149, 106, 0.4);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55), inset 0 0 25px rgba(212, 175, 55, 0.08);
  transform: rotate(1.8deg);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
  box-sizing: border-box;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.s5-postcard:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.65), inset 0 0 30px rgba(212, 175, 55, 0.12);
}

/* Corner filigree accents */
.s5-card-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: #d4af37;
  border-style: solid;
  opacity: 0.75;
  pointer-events: none;
}
.s5-card-corner--tl { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.s5-card-corner--tr { top: 6px; right: 6px; border-width: 2px 2px 0 0; }
.s5-card-corner--bl { bottom: 6px; left: 6px; border-width: 0 0 2px 2px; }
.s5-card-corner--br { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; }

.s5-postcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(139, 100, 60, 0.3);
  padding-bottom: 6px;
}

.s5-postcard-label {
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #8b5e3c;
  text-transform: uppercase;
}

.s5-postcard-date {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: #c9956a;
  font-weight: 600;
}

/* Postage stamp photo frame */
.s5-stamp-frame {
  position: relative;
  align-self: center;
  padding: 6px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  /* Scalloped postage stamp edges using radial-gradient clip path */
  mask-image: radial-gradient(circle at 8px 0, transparent 4px, black 4.5px),
              radial-gradient(circle at calc(100% - 8px) 0, transparent 4px, black 4.5px);
}

.s5-stamp-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 1px;
  filter: sepia(0.15) contrast(1.05);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.15);
}

.s5-stamp-cancellation {
  position: absolute;
  top: 10px;
  left: -8px;
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(139, 21, 34, 0.65);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-18deg);
  pointer-events: none;
  font-family: 'Cinzel', serif;
  color: rgba(139, 21, 34, 0.7);
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
  box-shadow: inset 0 0 0 1px rgba(139, 21, 34, 0.3);
}

/* Wax seal overlay */
.s5-wax-seal {
  position: absolute;
  bottom: -10px;
  right: -8px;
  z-index: 5;
  filter: drop-shadow(2px 6px 12px rgba(0,0,0,0.55));
  animation: s5WaxFloat 3.5s ease-in-out infinite alternate;
  transform: scale(0.92);
}
@keyframes s5WaxFloat {
  from { transform: translateY(0) rotate(-2deg) scale(0.9); }
  to   { transform: translateY(-4px) rotate(2deg) scale(0.94); }
}

.s5-cover-ribbon {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: #f5d2a0;
  background: rgba(139, 21, 34, 0.45);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}


/* ==========================================================================
   PANEL 2 : CLIPBOARD
   ========================================================================== */
.s5-panel-inner--clipboard {
  justify-content: center;
  align-items: center;
  gap: 28px;
}

.s5-clipboard {
  position: relative;
  background: #e8ddd0;
  border-radius: 6px 6px 4px 4px;
  box-shadow: 0 10px 44px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(139,100,60,0.2);
  width: min(94vw, 400px);
  padding: 38px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}

/* Metal clip at top */
.s5-clip-metal {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 2;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}

.s5-clip-bar {
  width: 76px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(180deg, #c8a856 0%, #8a6a28 50%, #c8a856 100%);
}
.s5-clip-bar--back {
  margin-bottom: -3px;
  background: linear-gradient(180deg, #a88030 0%, #6a4a10 50%, #a88030 100%);
}
.s5-clip-spring {
  width: 46px;
  height: 14px;
  border: 3.5px solid #b89040;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: transparent;
}

.s5-clipboard-paper {
  background: #faf7f0;
  border-radius: 2px;
  padding: 10px 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(139,100,60,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.s5-clipboard-header,
.s5-clipboard-footer {
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: rgba(100,60,30,0.65);
  text-transform: uppercase;
}

/* Film strip 2×2 grid */
.s5-filmstrip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.s5-film-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #1a1a1a;
  padding: 4px 2px 2px;
  border-radius: 2px;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
}

.s5-film-perf {
  display: flex;
  gap: 3px;
  width: 100%;
  justify-content: center;
}
.s5-film-perf span {
  display: block;
  width: 6px;
  height: 3px;
  background: #3a3a3a;
  border-radius: 1px;
}

.s5-film-photo {
  width: 100%;
  aspect-ratio: 4/3;
  height: auto;
  max-height: 105px;
  overflow: hidden;
}
.s5-film-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.25) contrast(1.08);
  display: block;
}

.s5-film-label {
  font-family: 'Courier Prime', monospace;
  font-size: 0.58rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
}

/* Porcelain plate */
.s5-porcelain-plate {
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
  opacity: 0.92;
  animation: s5PlateFloat 4s ease-in-out infinite alternate;
}
.s5-porcelain-plate svg {
  width: 135px;
  height: 135px;
}
@keyframes s5PlateFloat {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-6px) rotate(2deg); }
}


/* ==========================================================================
   PANEL 3 : LOVE LETTER & POLAROIDS
   ========================================================================== */
.s5-panel-inner--letter {
  align-items: center;
  gap: 22px;
  box-sizing: border-box;
}

/* Aged letter sheet */
.s5-letter-sheet {
  flex: 1;
  min-width: 260px;
  max-width: min(94vw, 410px);
  background: linear-gradient(160deg, #fdf6e3, #f8eecf 60%, #f0e3ba);
  border-radius: 2px;
  padding: 16px 18px 18px;
  box-shadow: 4px 6px 30px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(139,100,60,0.18);
  position: relative;
  border-left: 2px solid rgba(180,120,60,0.35);
  background-image:
    linear-gradient(160deg, #fdf6e3, #f8eecf 60%, #f0e3ba),
    repeating-linear-gradient(
      transparent 0,
      transparent 26px,
      rgba(139,100,60,0.13) 26px,
      rgba(139,100,60,0.13) 27px
    );
  background-size: 100% 100%, 100% 27px;
  background-position: 0 0;
  min-height: auto;
  max-height: clamp(340px, 58vh, 460px);
  box-sizing: border-box;
}

.s5-letter-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.s5-letter-date {
  font-family: 'Courier Prime', monospace;
  font-size: 0.78rem;
  color: rgba(100,60,20,0.7);
  font-style: italic;
  flex: 0 0 auto;
}
.s5-letter-rule {
  flex: 1;
  height: 1px;
  background: rgba(139,100,60,0.25);
}

.s5-letter-salutation {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: #5a2a0a;
  margin-bottom: 6px;
  line-height: 1;
}

.s5-letter-body {
  font-family: 'Courier Prime', monospace;
  font-size: clamp(0.82rem, 1.7vw, 0.92rem);
  line-height: 1.5;
  color: #4a2a10;
  margin-bottom: 6px;
}

.s5-letter-sign {
  font-family: 'Courier Prime', monospace;
  font-size: 0.85rem;
  color: #4a2a10;
  margin-top: 8px;
  line-height: 1.4;
}
.s5-letter-name {
  font-family: 'Pinyon Script', cursive;
  font-size: 1.55rem;
  color: #8b1522;
  display: block;
}

/* Pressed flower corner accent */
.s5-pressed-flower {
  position: absolute;
  bottom: 8px;
  left: 10px;
  opacity: 0.82;
  filter: blur(0.2px);
}
.s5-pressed-flower svg {
  width: 44px;
  height: 52px;
}

/* Polaroid stack */
.s5-polaroid-stack {
  flex: 0 0 auto;
  position: relative;
  width: 270px;
  height: 380px;
  box-sizing: border-box;
}

.s5-polaroid-frame {
  position: absolute;
  background: #fff;
  box-shadow: 4px 8px 28px rgba(0,0,0,0.45);
  padding: 10px 10px 36px;
  border-radius: 2px;
  box-sizing: border-box;
}
.s5-polaroid-frame--main {
  width: 225px;
  bottom: 0;
  left: 10px;
  transform: rotate(-3deg);
  z-index: 2;
}
.s5-polaroid-frame--back {
  width: 200px;
  top: 10px;
  right: 0;
  transform: rotate(6deg);
  z-index: 1;
  opacity: 0.85;
}

.s5-polaroid-img-wrap {
  overflow: hidden;
  border-radius: 1px;
}
.s5-polaroid-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: sepia(0.15) contrast(1.05);
}

.s5-polaroid-caption {
  font-family: 'Caveat', cursive;
  font-size: 1rem;
  color: #3a2010;
  text-align: center;
  padding-top: 6px;
  line-height: 1.2;
}

/* Washi tape strip */
.s5-washi {
  position: absolute;
  width: 48px;
  height: 13px;
  background-color: color-mix(in srgb, var(--washi-col, #d4a6c8) 55%, transparent);
  transform: rotate(var(--washi-angle, 0deg));
  z-index: 3;
  border-radius: 1px;
  opacity: 0.75;
}

/* Mini postage stamps */
.s5-stamp-mini {
  position: absolute;
  z-index: 4;
}
.s5-stamp-mini--1 {
  top: 30px;
  right: 10px;
  transform: rotate(8deg);
}
.s5-stamp-mini--2 {
  top: 80px;
  right: 6px;
  transform: rotate(-5deg);
}
.s5-stamp-mini-inner {
  width: 32px;
  height: 38px;
  background: #fdf6e3;
  border: 3px solid #fdf6e3;
  box-shadow: 0 0 0 1.5px #c8b99a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #8b1522;
  line-height: 1.2;
}
.s5-stamp-mini-inner span {
  font-family: 'Cinzel', serif;
  font-size: 0.35rem;
  letter-spacing: 0.1em;
  color: #5a2a0a;
  text-transform: uppercase;
}


/* ==========================================================================
   PANEL 4 : ROMANTIC KEEPSAKE & LACE FRAME
   ========================================================================== */
.s5-panel-inner--keepsake {
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3.5vw, 40px);
  flex-wrap: nowrap;
  box-sizing: border-box;
}

/* Left: Keepsake text note */
.s5-keepsake-left {
  flex: 1;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  box-sizing: border-box;
}

.s5-keepsake-badge {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.64rem, 1.6vw, 0.74rem);
  letter-spacing: 0.22em;
  color: #c9956a;
  text-transform: uppercase;
  background: rgba(201,149,106,0.12);
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(201,149,106,0.3);
  display: inline-block;
}

.s5-keepsake-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 700;
  background: linear-gradient(135deg, #ffffff 0%, #f5d2a0 60%, #c9956a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
  margin: 2px 0;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.6));
}

.s5-keepsake-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.98rem, 2.3vw, 1.22rem);
  color: rgba(251,245,232,0.95);
  line-height: 1.5;
}

.s5-keepsake-tagline {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.64rem, 1.6vw, 0.74rem);
  letter-spacing: 0.22em;
  color: #f5d2a0;
  opacity: 0.95;
  margin-top: 2px;
}

/* Replay Scrapbook Button (Grand Finale CTA) */
.s5-replay-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #b81d33 0%, #780d1b 100%);
  color: #fceade;
  font-family: 'Cinzel', serif;
  font-size: clamp(0.72rem, 1.8vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 24px;
  border: 1px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 6px 20px rgba(184, 29, 51, 0.45), 0 0 15px rgba(212, 175, 55, 0.2);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.s5-replay-btn:hover {
  background: linear-gradient(135deg, #d62828 0%, #9e121b 100%);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 28px rgba(214, 40, 40, 0.6), 0 0 22px rgba(212, 175, 55, 0.4);
  color: #ffffff;
}
.s5-replay-btn:active {
  transform: translateY(0) scale(0.98);
}
.s5-replay-btn svg {
  transition: transform 0.4s ease;
}
.s5-replay-btn:hover svg {
  transform: rotate(-180deg);
}

/* Hanging Ribbon & Pin Motif for Slide 4 Frame */
.s5-frame-hanging-motif {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.s5-frame-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd700, #b8860b 65%, #5c4308);
  box-shadow: 0 3px 8px rgba(0,0,0,0.65), inset 0 1px 2px rgba(255,255,255,0.6);
  position: relative;
  z-index: 2;
}

.s5-frame-ribbon-loop {
  width: 2px;
  height: 22px;
  background: linear-gradient(to bottom, #d4af37, #8b1522);
  margin-top: -4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Antique Filigree Lace Frame */
.s5-lace-frame-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  margin-top: 10px;
}

.s5-lace-frame {
  position: relative;
  width: clamp(170px, 25vw, 260px);
  min-height: clamp(220px, 34vh, 330px);
  background: linear-gradient(150deg, #4a0d18 0%, #220309 100%);
  border: 2px solid #d4af37;
  outline: 1px solid rgba(212, 175, 55, 0.35);
  outline-offset: -6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 52px rgba(0,0,0,0.7), inset 0 0 45px rgba(212,175,55,0.15);
  overflow: hidden;
  animation: s5FrameGentleSway 6s ease-in-out infinite alternate;
  box-sizing: border-box;
}

@keyframes s5FrameGentleSway {
  from { transform: rotate(-1.2deg); }
  to   { transform: rotate(1.2deg); }
}

.s5-lace-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.s5-frame-photo {
  position: relative;
  z-index: 1;
  padding: clamp(8px, 1.4vh, 14px);
}

.s5-frame-photo img {
  display: block;
  width: clamp(125px, 19vw, 195px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  filter: sepia(0.12) contrast(1.06);
  border-radius: 2px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.s5-frame-bow {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
}
.s5-frame-bow svg {
  width: 85px;
  height: 52px;
}


/* ==========================================================================
   RESPONSIVE & MOBILE VIEWPORT HEIGHT FITTING
   ========================================================================== */
@media (max-width: 1100px) {
  .s5-panel-inner { max-width: 900px; gap: 20px; }
  .s5-clipboard { width: 350px; }
  .s5-lace-frame { width: 230px; min-height: 290px; }
  .s5-frame-photo img { width: 175px; }
  .s5-polaroid-stack { width: 240px; height: 340px; }
  .s5-polaroid-frame--main { width: 200px; }
  .s5-polaroid-frame--back { width: 180px; }
  .s5-postcard { width: 250px; }
  .s5-stamp-img { width: 115px; height: 115px; }
}

@media (max-width: 780px) {
  .s5-track-wrap { padding: 0 8px; }
  .s5-nav {
    width: 34px;
    height: 34px;
    z-index: 30;
  }
  .s5-nav--prev { left: 4px; }
  .s5-nav--next { right: 4px; }

  .s5-panel {
    padding: clamp(6px, 1.5vh, 12px) 6px clamp(90px, 14vh, 115px);
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    min-height: auto;
    overflow: hidden;
    box-sizing: border-box;
  }

  .s5-panel-inner {
    flex-direction: column;
    gap: clamp(4px, 1.2vh, 10px);
    align-items: center;
    justify-content: center;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 4px;
  }

  /* Panel 1 Cover on Mobile */
  .s5-cover-left {
    text-align: center;
    align-items: center;
    width: 100%;
    gap: 2px;
  }
  .s5-cover-tag { font-size: 0.65rem; letter-spacing: 0.16em; margin-bottom: 0; }
  .s5-cover-happy { font-size: clamp(1.1rem, 3.8vw, 1.6rem); }
  .s5-cover-birthday { font-size: clamp(2.2rem, 7.5vw, 3.4rem); margin: -2px 0; }
  .s5-cover-beloved { font-size: 0.72rem; letter-spacing: 0.16em; margin-top: 0; }
  .s5-cover-flourish {
    display: flex;
    justify-content: center;
    transform: scale(0.75);
    margin: -6px 0;
  }
  .s5-cover-verse {
    text-align: center;
    margin: 0 auto;
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
    line-height: 1.35;
  }

  .s5-postcard {
    width: clamp(160px, 46vw, 230px);
    padding: 10px 10px 12px;
    transform: none;
    margin: 0 auto;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    gap: 8px;
  }
  .s5-stamp-frame { padding: 4px; }
  .s5-stamp-img { width: clamp(75px, 20vw, 105px); height: clamp(75px, 20vw, 105px); }
  .s5-wax-seal { width: 44px; height: 44px; bottom: -6px; right: -6px; transform: scale(0.75); }
  .s5-wax-seal svg { width: 44px; height: 44px; }
  .s5-cover-ribbon { font-size: 0.54rem; padding: 3px 10px; margin-top: 2px; }

  /* Panel 2 Clipboard on Mobile */
  .s5-clipboard {
    width: min(92vw, 320px);
    max-height: calc(100dvh - 120px);
    padding: 26px 8px 10px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .s5-clipboard-header { font-size: 0.65rem; margin-bottom: 4px; }
  .s5-clipboard-paper { padding: 8px 8px 10px; gap: 6px; }
  .s5-filmstrip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  .s5-film-photo {
    width: clamp(50px, 15vw, 75px);
    height: clamp(50px, 15vw, 75px);
    max-height: 80px;
  }
  .s5-film-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .s5-film-label { font-size: 0.52rem; }
  .s5-clipboard-footer { font-size: 0.6rem; margin-top: 4px; }
  .s5-porcelain-plate { display: none; }

  /* Panel 3 Love Letter on Mobile */
  .s5-letter-sheet {
    min-height: auto;
    width: min(94vw, 360px);
    max-height: calc(100dvh - 120px);
    padding: 10px 12px 8px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .s5-letter-header { margin-bottom: 3px; }
  .s5-letter-date { font-size: 0.62rem; }
  .s5-letter-salutation { font-size: 0.92rem; margin-bottom: 2px; }
  .s5-letter-body {
    font-size: clamp(0.74rem, 2.2vw, 0.86rem);
    line-height: 1.28;
    margin-bottom: 3px;
  }
  .s5-letter-sign { font-size: 0.8rem; margin-top: 3px; }
  .s5-letter-name { font-size: 0.92rem; }
  .s5-pressed-flower { width: 32px; height: 38px; bottom: 6px; right: 8px; left: auto; }
  .s5-pressed-flower svg { width: 32px; height: 38px; }
  .s5-polaroid-stack { display: none; }

  /* Panel 4 Keepsake on Mobile */
  .s5-keepsake-left {
    text-align: center;
    align-items: center;
    max-width: 320px;
    gap: 3px;
  }
  .s5-keepsake-badge { font-size: 0.58rem; padding: 2px 10px; }
  .s5-keepsake-title { font-size: clamp(1.3rem, 4.5vw, 1.9rem); margin: 1px 0; }
  .s5-keepsake-text { font-size: clamp(0.82rem, 2.4vw, 0.98rem); line-height: 1.3; text-align: center; }
  .s5-keepsake-tagline { font-size: 0.56rem; margin-top: 1px; }
  .s5-replay-btn { margin-top: 6px; padding: 6px 14px; font-size: 0.64rem; }

  .s5-lace-frame-wrap { margin-top: 4px; }
  .s5-frame-hanging-motif { top: -16px; }
  .s5-frame-pin { width: 10px; height: 10px; }
  .s5-frame-ribbon-loop { height: 14px; }
  .s5-lace-frame {
    width: clamp(140px, 40vw, 200px);
    min-height: clamp(170px, 28vh, 230px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  }
  .s5-frame-photo { padding: 6px; }
  .s5-frame-photo img { width: clamp(110px, 30vw, 155px); }
  .s5-frame-bow { transform: translateX(-50%) scale(0.7); bottom: -12px; }

  .s5-keepsake-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .s5-replay-btn--letter {
    background: linear-gradient(135deg, #d4235c 0%, #a80f43 100%);
    border-color: rgba(255, 143, 163, 0.6);
  }
  .s5-replay-btn--letter:hover {
    background: linear-gradient(135deg, #ff4d6d 0%, #c9184a 100%);
  }

/* ==========================================================================
   SECTION 6 : DEDICATED TYPEWRITER LOVE LETTER STYLING
   ========================================================================== */
.s6-section {
  background: radial-gradient(circle at 50% 30%, #3a0818 0%, #1c020a 70%, #100005 100%);
  align-items: center;
  justify-content: center;
  padding: 40px 16px 90px;
  min-height: 100vh;
  position: relative;
  overflow-y: auto;
  box-sizing: border-box;
}

.s6-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.s6-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: #ffccd5;
  box-shadow: 0 0 8px #ff758f;
  animation: s6StarTwinkle 2.5s ease-in-out infinite alternate;
  animation-delay: var(--d);
}
@keyframes s6StarTwinkle {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.3); }
}

.s6-container {
  width: 100%;
  max-width: 620px;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.s6-tw-card {
  width: min(94vw, 600px);
  background: linear-gradient(165deg, rgba(48, 9, 22, 0.95) 0%, rgba(24, 3, 10, 0.95) 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.75), 0 0 35px rgba(212, 35, 92, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.s6-tw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.35);
  padding-bottom: 12px;
}

.s6-tw-badge {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.68rem, 1.8vw, 0.8rem);
  letter-spacing: 0.22em;
  color: #f5d2a0;
  text-transform: uppercase;
  background: rgba(212, 175, 55, 0.14);
  padding: 5px 14px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.35);
}

.s6-tw-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.s6-tw-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  color: #ffd6e0;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.22s ease;
}

.s6-tw-btn:hover {
  background: rgba(212, 35, 92, 0.4);
  border-color: rgba(255, 143, 163, 0.6);
  color: #fff;
  transform: translateY(-1px);
}

.s6-tw-paper {
  background: linear-gradient(160deg, #fdf6e3, #f7ebd0 70%, #efe1be);
  border-radius: 10px;
  padding: 24px 26px;
  box-shadow: inset 0 0 18px rgba(139, 100, 60, 0.18), 0 6px 20px rgba(0, 0, 0, 0.35);
  border-left: 4px solid rgba(212, 35, 92, 0.5);
  color: #3d1e10;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
  max-height: clamp(280px, 50vh, 420px);
  overflow-y: auto;
  box-sizing: border-box;
}

.s6-tw-paper::-webkit-scrollbar {
  width: 6px;
}
.s6-tw-paper::-webkit-scrollbar-thumb {
  background: rgba(139, 100, 60, 0.35);
  border-radius: 4px;
}

.s6-tw-salutation {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(2rem, 5vw, 2.5rem);
  color: #7a1525;
  line-height: 1;
}

.s6-tw-body {
  font-family: 'Courier Prime', monospace;
  font-size: clamp(0.88rem, 1.9vw, 1rem);
  line-height: 1.65;
  color: #2b1408;
  white-space: pre-wrap;
  word-break: break-word;
}

.s6-tw-cursor {
  display: inline-block;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  color: #c9184a;
  margin-left: 2px;
  animation: s6TwBlink 0.7s infinite;
}

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

.s6-tw-sign {
  font-family: 'Courier Prime', monospace;
  font-size: 0.92rem;
  color: #4a2a10;
  margin-top: 10px;
  line-height: 1.45;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.s6-tw-sign.is-visible {
  opacity: 1;
}

.s6-tw-name {
  font-family: 'Pinyon Script', cursive;
  font-size: 1.8rem;
  color: #8b1522;
  display: block;
}

.s6-tw-footer {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.s6-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #b81d33 0%, #780d1b 100%);
  color: #fceade;
  font-family: 'Cinzel', serif;
  font-size: clamp(0.72rem, 1.8vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 24px;
  border: 1px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 6px 20px rgba(184, 29, 51, 0.45), 0 0 15px rgba(212, 175, 55, 0.2);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.s6-replay-btn:hover {
  background: linear-gradient(135deg, #d62828 0%, #9e121b 100%);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 28px rgba(214, 40, 40, 0.6), 0 0 22px rgba(212, 175, 55, 0.4);
  color: #ffffff;
}

  /* Controls */
  .s5-carousel-controls {
    bottom: clamp(62px, 9.5vh, 76px);
    gap: 8px;
    padding: 4px 12px;
  }
  .s5-progress-bar-track { width: 36px; height: 3px; }
  .s5-dot { width: 7px; height: 7px; }
  .s5-dot--active { width: 14px; }
  .s5-autoplay-toggle { font-size: 0.58rem; padding: 3px 8px; }
}

@media (max-width: 480px) {
  .s5-track-wrap { padding: 0 4px; }
  .s5-nav {
    width: 28px;
    height: 28px;
  }
  .s5-nav svg { width: 16px; height: 16px; }
  .s5-nav--prev { left: 2px; }
  .s5-nav--next { right: 2px; }

  .s5-panel {
    padding: 4px 2px clamp(84px, 13vh, 105px);
  }

  .s5-panel-inner {
    max-height: 100%;
    gap: 4px;
  }

  .s5-cover-happy { font-size: 1.1rem; }
  .s5-cover-birthday { font-size: clamp(2rem, 8.5vw, 2.9rem); }
  .s5-cover-beloved { font-size: 0.68rem; }

  .s5-postcard { width: clamp(140px, 42vw, 190px); }
  .s5-stamp-img { width: 68px; height: 68px; }

  .s5-clipboard { width: 92vw; padding: 22px 6px 8px; }
  .s5-film-photo { width: 52px; height: 52px; }

  .s5-letter-sheet { width: 94vw; padding: 8px 10px 6px; }
  .s5-letter-body { font-size: 0.72rem; line-height: 1.25; }

  .s5-lace-frame { width: clamp(135px, 38vw, 175px); min-height: clamp(160px, 26vh, 210px); }
  .s5-frame-photo img { width: clamp(100px, 28vw, 135px); }

  .s5-carousel-controls {
    bottom: clamp(58px, 9vh, 72px);
    gap: 6px;
    padding: 3px 10px;
  }
  .s5-progress-bar-track { width: 28px; }
  .s5-autoplay-text { font-size: 0.54rem; }
}

/* =========================================================================
   PHONE UNLOCK SCREEN (PASSCODE 2923)
   Authentic smartphone lock screen with glassmorphic aesthetic,
   dynamic clock, wrong-PIN shake animation, tactile feedback & smooth unlock.
   ========================================================================= */

body.body--locked {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none;
}

.pls-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0d0309;
  font-family: "Poppins", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.35s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
  user-select: none;
  -webkit-user-select: none;
}

/* When successfully unlocked: slide up & fade out smoothly */
.pls-overlay.pls--unlocked {
  opacity: 0;
  transform: translateY(-105%);
  filter: blur(16px);
  pointer-events: none;
}

.pls-overlay.pls--unlocked .pls-phone-body {
  transform: translateY(-70px) scale(0.95);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.85s ease;
}

/* ── Wallpaper Backdrop & Ambient Lighting ── */
.pls-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 18%, #4a001e 0%, #1d030f 45%, #0a0107 100%);
  overflow: hidden;
  z-index: 1;
}

.pls-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  opacity: 0.55;
  pointer-events: none;
  animation: plsPulseGlow 9s ease-in-out infinite alternate;
}

.pls-glow--1 {
  width: 320px;
  height: 320px;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #ff2a70, #960d3d);
}

.pls-glow--2 {
  width: 280px;
  height: 280px;
  bottom: 8%;
  left: 20%;
  background: radial-gradient(circle, #c9184a, #590d22);
  animation-delay: -3s;
}

.pls-glow--3 {
  width: 250px;
  height: 250px;
  bottom: 15%;
  right: 18%;
  background: radial-gradient(circle, #ff758f, #800f2f);
  animation-delay: -5s;
}

@keyframes plsPulseGlow {
  0% { transform: scale(0.92) translate(0, 0); opacity: 0.45; }
  50% { transform: scale(1.08) translate(12px, -8px); opacity: 0.65; }
  100% { transform: scale(1.02) translate(-10px, 10px); opacity: 0.5; }
}

/* Floating background stars/dust */
.pls-stars {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 100px 150px, #ffd1dc, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 250px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 320px 300px, #ffb3c1, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 180px 420px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 280px 520px, #ffccd5, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 350px 600px;
  opacity: 0.35;
  animation: plsStarDrift 30s linear infinite;
}

@keyframes plsStarDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-300px); }
}

/* ── Main Phone Container ── */
.pls-phone-body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 390px;
  height: 100%;
  max-height: 840px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: clamp(18px, 3vh, 32px) clamp(16px, 5vw, 32px) clamp(14px, 2vh, 22px);
  box-sizing: border-box;
  text-align: center;
  transition: transform 0.15s ease;
}

/* ── Wrong Passcode Shake Animation ── */
.pls-phone-body.is-shaking {
  animation: phoneScreenShake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes phoneScreenShake {
  0%, 100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-16px) rotate(-1.2deg);
  }
  30% {
    transform: translateX(14px) rotate(1.2deg);
  }
  45% {
    transform: translateX(-10px) rotate(-0.8deg);
  }
  60% {
    transform: translateX(8px) rotate(0.6deg);
  }
  75% {
    transform: translateX(-4px);
  }
  90% {
    transform: translateX(2px);
  }
}

/* ── Header: Lock Icon ── */
.pls-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: clamp(6px, 2vh, 16px);
  margin-bottom: clamp(4px, 1.5vh, 10px);
}

.pls-lock-badge {
  width: clamp(44px, 12vw, 54px);
  height: clamp(44px, 12vw, 54px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.pls-lock-svg {
  width: clamp(20px, 5.5vw, 24px);
  height: clamp(20px, 5.5vw, 24px);
  transition: all 0.35s ease;
}

.pls-lock-shackle {
  transform-origin: 7px 11px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Unlocked state for padlock */
.pls-lock-badge.is-unlocked {
  background: linear-gradient(135deg, #ff4d6d, #d90429);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 25px rgba(255, 77, 109, 0.85), 0 0 45px rgba(255, 117, 143, 0.55);
  transform: scale(1.15);
}

.pls-lock-badge.is-unlocked .pls-lock-shackle {
  transform: translateY(-4px) rotate(-28deg);
}

/* ── Passcode Prompt Section ── */
.pls-prompt-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 6px 0;
}

.pls-title {
  font-size: clamp(1.1rem, 4.2vw, 1.28rem);
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.pls-subtitle {
  font-size: clamp(0.74rem, 2.7vw, 0.84rem);
  color: rgba(255, 255, 255, 0.65);
  margin-top: 3px;
  margin-bottom: 12px;
  font-weight: 400;
}

/* ── 4 PIN Dots ── */
.pls-dots-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 8px;
}

.pls-dots {
  display: flex;
  gap: clamp(15px, 4.8vw, 22px);
  align-items: center;
  padding: 4px;
}

.pls-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.8px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.pls-dot.is-filled {
  background: #ffffff;
  border-color: #ffffff;
  transform: scale(1.18);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9), 0 0 24px rgba(255, 117, 143, 0.6);
}

.pls-dot.is-error {
  background: #ff3366 !important;
  border-color: #ff3366 !important;
  transform: scale(1.15) !important;
  box-shadow: 0 0 16px rgba(255, 51, 102, 0.95), 0 0 28px rgba(255, 51, 102, 0.6) !important;
}

.pls-dot.is-success {
  background: #ff4d6d !important;
  border-color: #ff758f !important;
  transform: scale(1.22) !important;
  box-shadow: 0 0 20px rgba(255, 77, 109, 1), 0 0 35px rgba(255, 117, 143, 0.8) !important;
}

/* Status Message / Error Banner */
.pls-status-msg {
  min-height: 22px;
  font-size: clamp(0.75rem, 2.8vw, 0.85rem);
  font-weight: 500;
  color: #ff758f;
  margin-top: 2px;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.25s ease;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.pls-status-msg.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pls-status-msg.is-success {
  color: #a7f3d0;
  text-shadow: 0 0 12px rgba(167, 243, 208, 0.7);
}

/* ── Phone Keypad (3x4 Grid) ── */
.pls-keypad {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 15px);
  width: 100%;
  max-width: 310px;
  margin: 0 auto;
}

.pls-keypad-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(12px, 3.8vw, 22px);
}

.pls-key {
  width: clamp(62px, 18vw, 75px);
  height: clamp(62px, 18vw, 75px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28),
              0 6px 18px rgba(0, 0, 0, 0.28);
  position: relative;
  overflow: hidden;
}

.pls-key::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4), transparent 70%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pls-key:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(212, 35, 92, 0.35);
}

.pls-key:active,
.pls-key.is-pressed {
  background: rgba(255, 255, 255, 0.42);
  transform: scale(0.92);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.pls-key:active::after,
.pls-key.is-pressed::after {
  opacity: 1;
}

.pls-key-num {
  font-size: clamp(1.6rem, 5.8vw, 2.05rem);
  font-weight: 300;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.pls-key-sub {
  font-size: clamp(0.52rem, 1.8vw, 0.6rem);
  font-weight: 600;
  letter-spacing: 1.8px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 1px;
  text-transform: uppercase;
}

/* Auxiliary text buttons (Hint, Delete) */
.pls-key--aux {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.pls-key--aux:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.pls-key--aux:active,
.pls-key--aux.is-pressed {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(0.94);
}

.pls-key-text {
  font-size: clamp(0.85rem, 2.9vw, 0.98rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.2px;
}

/* ── Hint Modal Toast ── */
.pls-hint-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 90%;
  max-width: 320px;
  background: rgba(30, 8, 18, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 117, 143, 0.4);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 35, 92, 0.35);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pls-hint-toast.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.pls-hint-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pls-hint-badge {
  font-size: 0.85rem;
  font-weight: 600;
  color: #ff758f;
  background: rgba(255, 117, 143, 0.15);
  padding: 4px 12px;
  border-radius: 12px;
}

.pls-hint-text {
  font-size: 0.95rem;
  color: #ffffff;
  line-height: 1.4;
  margin: 0;
}

.pls-hint-code {
  font-weight: 700;
  color: #ff4d6d;
  letter-spacing: 2px;
  font-size: 1.15rem;
  padding: 2px 8px;
  background: rgba(255, 77, 109, 0.18);
  border-radius: 6px;
}

.pls-hint-dismiss {
  margin-top: 4px;
  padding: 6px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff4d6d, #c9184a);
  border: none;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(201, 24, 74, 0.4);
  transition: transform 0.15s ease;
}

.pls-hint-dismiss:active {
  transform: scale(0.94);
}

/* ── Footer ── */
.pls-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.pls-footer-indicator {
  width: 110px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.45);
}

.pls-footer-text {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.2px;
}

/* ── Ultra-Compact / Small Mobile Adjustments ── */
@media (max-height: 680px) {
  .pls-phone-body {
    padding: 10px 14px 8px;
    justify-content: space-around;
  }
  .pls-clock { font-size: 2.7rem; }
  .pls-date { font-size: 0.8rem; }
  .pls-title { font-size: 1rem; }
  .pls-subtitle { display: none; }
  .pls-key {
    width: clamp(52px, 15vw, 60px);
    height: clamp(52px, 15vw, 60px);
  }
  .pls-key-num { font-size: 1.45rem; }
  .pls-key-sub { font-size: 0.5rem; }
  .pls-footer-text { display: none; }
}


/* =========================================================================
   BIRTHDAY LIVE COUNTER STYLING
   ========================================================================= */
.bday-counter {
  width: 100%;
  max-width: 540px;
  margin: 14px auto;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255, 245, 248, 0.94), rgba(253, 226, 232, 0.88));
  border: 1.5px solid rgba(212, 35, 92, 0.28);
  border-radius: 20px;
  box-shadow:
    0 8px 24px rgba(212, 35, 92, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
  transition: all 0.3s ease;
}

/* Dark variant for Section 4 */
.bday-counter--s4 {
  background: linear-gradient(135deg, rgba(35, 10, 22, 0.84), rgba(65, 14, 38, 0.84));
  border-color: rgba(255, 117, 143, 0.38);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 25px rgba(212, 35, 92, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  color: #fff;
  margin: 12px auto 6px;
}

.bday-counter__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}

.bday-counter__badge {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4235c;
  background: rgba(212, 35, 92, 0.12);
  padding: 3px 12px;
  border-radius: 12px;
  border: 1px solid rgba(212, 35, 92, 0.25);
}

.bday-counter--s4 .bday-counter__badge {
  color: #ff8fa3;
  background: rgba(255, 143, 163, 0.18);
  border-color: rgba(255, 143, 163, 0.32);
}

.bday-counter__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  color: #7a3244;
  margin-top: 2px;
}

.bday-counter--s4 .bday-counter__subtitle {
  color: rgba(255, 255, 255, 0.85);
}

.bday-counter__start-label {
  font-weight: 600;
  color: #c9184a;
}

.bday-counter--s4 .bday-counter__start-label {
  color: #ff758f;
}

.bday-counter__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 4px 12px;
  background: rgba(212, 35, 92, 0.12);
  border: 1px solid rgba(212, 35, 92, 0.3);
  border-radius: 14px;
  color: #c9184a;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bday-counter--s4 .bday-counter__edit-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.bday-counter__edit-btn:hover {
  background: #d4235c;
  border-color: #d4235c;
  color: #fff;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 12px rgba(212, 35, 92, 0.35);
}

.bday-counter__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: 100%;
}

.bday-counter__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(212, 35, 92, 0.18);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bday-counter--s4 .bday-counter__tile {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.bday-counter__tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 35, 92, 0.25);
  border-color: rgba(212, 35, 92, 0.4);
}

.bday-counter__icon {
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.bday-counter__value {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  font-weight: 700;
  line-height: 1.1;
  color: #800020;
}

.bday-counter--s4 .bday-counter__value {
  color: #ff8fa3;
  text-shadow: 0 0 10px rgba(255, 143, 163, 0.5);
}

.bday-counter__value--pulse {
  display: inline-block;
  animation: bdaySecPulse 1s ease-in-out infinite;
}

@keyframes bdaySecPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); color: #d4235c; }
}

.bday-counter--s4 .bday-counter__value--pulse {
  animation: bdaySecPulseDark 1s ease-in-out infinite;
}

@keyframes bdaySecPulseDark {
  0%, 100% { transform: scale(1); color: #ff8fa3; }
  50% { transform: scale(1.12); color: #ffffff; text-shadow: 0 0 14px #ff4d6d; }
}

.bday-counter__unit {
  font-family: 'Poppins', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8c4a58;
  margin-top: 2px;
}

.bday-counter--s4 .bday-counter__unit {
  color: rgba(255, 255, 255, 0.7);
}

/* Mobile responsive for counter grid */
@media (max-width: 520px) {
  .bday-counter {
    padding: 12px 10px;
  }
  .bday-counter__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .bday-counter__tile {
    padding: 6px 3px;
  }
  .bday-counter__value {
    font-size: 1.25rem;
  }
}

/* =========================================================================
   BIRTHDAY DATE EDIT MODAL
   ========================================================================= */
.bday-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 16px;
}

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

.bday-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 5, 12, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.bday-modal__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(145deg, #2a0b18, #18050e);
  border: 1.5px solid rgba(255, 117, 143, 0.4);
  border-radius: 24px;
  padding: 24px 22px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 35px rgba(212, 35, 92, 0.35);
  color: #fff;
  transform: scale(0.92) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.bday-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bday-modal__close:hover {
  background: rgba(255, 77, 109, 0.4);
  border-color: #ff4d6d;
  transform: scale(1.1);
}

.bday-modal__header {
  text-align: center;
  margin-bottom: 18px;
}

.bday-modal__icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 4px;
}

.bday-modal__title {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.bday-modal__desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
  line-height: 1.35;
}

.bday-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bday-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.bday-modal__label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ff8fa3;
}

.bday-modal__input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 143, 163, 0.35);
  border-radius: 12px;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  outline: none;
  transition: all 0.2s ease;
  color-scheme: dark;
}

.bday-modal__input:focus {
  border-color: #ff4d6d;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 14px rgba(255, 77, 109, 0.4);
}

.bday-modal__presets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.bday-modal__presets-title {
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.bday-modal__presets-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bday-modal__preset-btn {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #ffd6e0;
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bday-modal__preset-btn:hover {
  background: rgba(255, 77, 109, 0.3);
  border-color: #ff4d6d;
  color: #fff;
}

.bday-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.bday-modal__btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.bday-modal__btn--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

.bday-modal__btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.bday-modal__btn--primary {
  background: linear-gradient(135deg, #ff4d6d, #c9184a);
  color: #fff;
  box-shadow: 0 4px 14px rgba(201, 24, 74, 0.4);
}

.bday-modal__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(251, 44, 98, 0.6);
}


/* =========================================================================
   SECTION 6 : MIDNIGHT GLOW DESK & PERSONAL LOVE LETTER
   High-end Midnight Violet & Rose Gold Theme (Visually distinct from S5)
   ========================================================================= */
.s6-section {
  position: relative;
  width: 100vw;
  min-height: 100dvh;
  background: radial-gradient(circle at 50% 30%, #1c0b30 0%, #0d0417 65%, #05010b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Ambient Orbs & Sparkles Layer ── */
.s6-ambient-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.s6-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: s6OrbFloat 14s ease-in-out infinite alternate;
}

.s6-glow-orb--1 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, #e0115f, transparent 70%);
  top: -60px;
  left: -80px;
}

.s6-glow-orb--2 {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, #8b5cf6, transparent 70%);
  bottom: -100px;
  right: -80px;
  animation-delay: -5s;
}

.s6-glow-orb--3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #f59e0b, transparent 70%);
  top: 40%;
  left: 60%;
  opacity: 0.35;
  animation-delay: -9s;
}

@keyframes s6OrbFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.1); }
  100% { transform: translate(-30px, 50px) scale(0.95); }
}

.s6-hearts-wrap {
  position: absolute;
  inset: 0;
}

.s6-fheart {
  position: absolute;
  left: var(--x, 50%);
  bottom: -40px;
  font-size: calc(1rem * var(--sz, 1));
  opacity: 0;
  animation: s6HeartFloat var(--dur, 7s) linear infinite;
  animation-delay: var(--d, 0s);
  filter: drop-shadow(0 0 8px rgba(255, 117, 143, 0.8));
}

@keyframes s6HeartFloat {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { transform: translateY(-105vh) rotate(360deg); opacity: 0; }
}

/* ── Container & Desk Surface ── */
.s6-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.s6-desk {
  background: rgba(22, 11, 36, 0.72);
  border: 1.5px solid rgba(226, 167, 111, 0.35);
  border-radius: 28px;
  padding: 24px;
  box-shadow:
    0 25px 65px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(139, 92, 246, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* ── Header Controls Bar ── */
.s6-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.s6-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #f3a4b5;
  background: rgba(255, 117, 143, 0.12);
  border: 1px solid rgba(255, 117, 143, 0.3);
  padding: 6px 14px;
  border-radius: 20px;
  text-transform: uppercase;
}

.s6-badge-sparkle {
  color: #fbbf24;
}

.s6-actions {
  display: flex;
  gap: 10px;
}

.s6-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.s6-btn--replay {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.s6-btn--replay:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

/* ── Modern Luxury Stationery Pad ── */
.s6-letter-pad {
  background: linear-gradient(165deg, #ffffff 0%, #fffbf7 60%, #fff7f2 100%);
  border: 1.5px solid rgba(226, 167, 111, 0.45);
  border-radius: 20px;
  padding: 28px 30px;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  color: #2b1b24;
  position: relative;
  overflow-y: auto;
}

.s6-letter-pad::-webkit-scrollbar {
  width: 5px;
}

.s6-letter-pad::-webkit-scrollbar-thumb {
  background: rgba(201, 24, 74, 0.3);
  border-radius: 4px;
}

/* Metallic top accent */
.s6-pad-top-accent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px dashed rgba(226, 167, 111, 0.4);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.s6-pad-stamp {
  display: flex;
  align-items: center;
}

.s6-pad-date {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #c9184a;
}

/* Salutation */
.s6-letter-salutation {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #5c0f24;
  margin-bottom: 16px;
}

/* Body & Typewriter text */
.s6-letter-body {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(0.98rem, 2.6vw, 1.12rem);
  line-height: 1.85;
  color: #381f2a;
  min-height: 140px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Glowing cursor */
.s6-tw-cursor {
  display: inline-block;
  font-weight: 700;
  color: #c9184a;
  margin-left: 2px;
  animation: s6CursorBlink 0.75s steps(2, start) infinite;
  text-shadow: 0 0 8px rgba(201, 24, 74, 0.6);
}

@keyframes s6CursorBlink {
  to { opacity: 0; }
}

/* Signature block */
.s6-letter-sign {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px stroke rgba(201, 24, 74, 0.15);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: #6b1d33;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.7s ease;
}

.s6-letter-sign.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.s6-sign-name {
  display: inline-block;
  font-family: 'Dancing Script', 'Great Vibes', cursive;
  font-size: 1.65rem;
  font-weight: 700;
  color: #c9184a;
  margin-top: 4px;
  font-style: normal;
}

/* ── Footer Button (Start From Beginning) ── */
.s6-footer {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.s6-btn-start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 25px;
  background: linear-gradient(135deg, #ff4d6d, #c9184a, #800f2f);
  background-size: 200% 200%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(201, 24, 74, 0.4);
  transition: all 0.3s ease;
  animation: s6GradientShift 6s ease infinite;
}

@keyframes s6GradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.s6-btn-start:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 32px rgba(201, 24, 74, 0.6);
  border-color: #ffffff;
}

.s6-btn-start:active {
  transform: translateY(0) scale(0.98);
}

/* Mobile Responsiveness for Section 6 */
@media (max-width: 600px) {
  .s6-desk {
    padding: 18px 14px;
    border-radius: 22px;
  }
  .s6-letter-pad {
    padding: 20px 18px;
    max-height: 420px;
  }
  .s6-letter-salutation {
    font-size: 1.25rem;
  }
  .s6-letter-body {
    font-size: 0.95rem;
    line-height: 1.75;
  }
  .s6-sign-name {
    font-size: 1.4rem;
  }
  .s6-btn-start {
    padding: 10px 22px;
    font-size: 0.85rem;
  }
}

/* Section 6 Navigation Updates */
.s6-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
}

.s6-btn-start--next {
  background: linear-gradient(135deg, #ff2a6d, #d4235c, #900c3f);
  box-shadow: 0 8px 26px rgba(255, 42, 109, 0.45);
}

.s6-btn-start--subtle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffccd5;
  box-shadow: none;
  animation: none;
}

.s6-btn-start--subtle:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

/* =========================================================================
   SECTION 7 : FINAL SURPRISE & LOVE CONFESSION
   ========================================================================= */
.s7-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 100px;
  background: radial-gradient(circle at 50% 35%, #2a0515 0%, #15020a 60%, #0d0106 100%);
}

/* Ambient Glow & Floating Hearts */
.s7-ambient-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.s7-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
}

.s7-glow-orb--1 {
  width: 380px;
  height: 380px;
  top: 8%;
  left: 10%;
  background: radial-gradient(circle, #ff2a6d, transparent 70%);
  animation: s7OrbFloat 11s ease-in-out infinite alternate;
}

.s7-glow-orb--2 {
  width: 440px;
  height: 440px;
  bottom: 10%;
  right: 8%;
  background: radial-gradient(circle, #c9184a, transparent 70%);
  animation: s7OrbFloat 14s ease-in-out infinite alternate-reverse;
}

.s7-glow-orb--3 {
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #ff758f, transparent 70%);
  opacity: 0.35;
  animation: s7OrbPulse 8s ease-in-out infinite;
}

@keyframes s7OrbFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(35px, -30px) scale(1.1); }
}

@keyframes s7OrbPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.25; }
  50% { transform: translate(-50%, -50%) scale(1.22); opacity: 0.45; }
}

.s7-hearts-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.s7-fheart {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  font-size: calc(20px * var(--sz));
  opacity: 0.7;
  animation: s7FloatHeart var(--dur) linear infinite var(--d);
  filter: drop-shadow(0 0 10px rgba(255, 77, 109, 0.7));
}

@keyframes s7FloatHeart {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-110vh) rotate(360deg) scale(1.1);
    opacity: 0;
  }
}

/* Confetti Canvas */
.s7-confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
}

/* Container & Glassmorphism Cards */
.s7-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.s7-card {
  position: relative;
  width: 100%;
  background: rgba(26, 6, 17, 0.78);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 117, 143, 0.32);
  border-radius: 36px;
  padding: 40px 32px 36px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.7),
    0 0 45px rgba(212, 35, 92, 0.25) inset,
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}

.s7-card--exit {
  animation: s7CardExit 0.38s ease forwards;
}

.s7-card--enter {
  animation: s7CardEnter 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s7CardExit {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.92) translateY(20px); }
}

@keyframes s7CardEnter {
  0% { opacity: 0; transform: scale(0.9) translateY(24px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Header Badges */
.s7-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 30px;
  background: rgba(255, 77, 109, 0.14);
  border: 1px solid rgba(255, 77, 109, 0.35);
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #ff99c8;
  margin-bottom: 22px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(255, 77, 109, 0.2);
}

.s7-badge--love {
  background: rgba(255, 77, 109, 0.22);
  border-color: rgba(255, 153, 200, 0.5);
  color: #ffccd5;
}

.s7-badge-sparkle {
  color: #ffd166;
  font-size: 0.85rem;
}

/* Media GIF Wrap */
.s7-media-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s7-media-wrap--reveal {
  width: 210px;
  height: 165px;
  margin-bottom: 24px;
}

.s7-media-halo {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 109, 0.45), transparent 70%);
  animation: s7HaloBreath 3s ease-in-out infinite;
}

.s7-media-halo--warm {
  background: radial-gradient(circle, rgba(255, 117, 143, 0.55), rgba(255, 209, 102, 0.25) 50%, transparent 70%);
}

@keyframes s7HaloBreath {
  0%, 100% { transform: scale(0.95); opacity: 0.5; }
  50% { transform: scale(1.12); opacity: 0.9; }
}

.s7-cat-gif,
.s7-hug-gif {
  position: relative;
  z-index: 2;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  object-fit: contain;
  max-width: 100%;
  height: auto;
  border: 2px solid rgba(255, 255, 255, 0.22);
}

.s7-media-bubble {
  position: absolute;
  top: -6px;
  right: -16px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.95);
  color: #800f2f;
  font-family: 'Caveat', cursive;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transform: rotate(8deg);
  animation: s7BubbleWiggle 3.5s ease-in-out infinite;
}

@keyframes s7BubbleWiggle {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(12deg) translateY(-4px); }
}

.s7-floating-badge {
  position: absolute;
  z-index: 4;
  font-family: 'Caveat', cursive;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  background: rgba(201, 24, 74, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 3px 12px;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.s7-floating-badge--left {
  bottom: -6px;
  left: -12px;
  transform: rotate(-8deg);
  animation: s7FloatLeft 4s ease-in-out infinite;
}

.s7-floating-badge--right {
  top: -6px;
  right: -12px;
  transform: rotate(7deg);
  animation: s7FloatRight 4s ease-in-out infinite;
}

@keyframes s7FloatLeft {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-5px); }
}

@keyframes s7FloatRight {
  0%, 100% { transform: rotate(7deg) translateY(0); }
  50% { transform: rotate(10deg) translateY(-5px); }
}

/* Question Card Typography */
.s7-question-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.32;
  color: #ffffff;
  margin-bottom: 12px;
  text-shadow: 0 2px 14px rgba(255, 77, 109, 0.4);
}

.s7-highlight {
  display: inline-block;
  background: linear-gradient(135deg, #ffffff 0%, #ffccd5 35%, #ff758f 70%, #ff4d6d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Caveat', cursive;
  font-size: 2.35rem;
  font-weight: 700;
}

.s7-question-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  color: #ffccd5;
  opacity: 0.9;
  margin-bottom: 26px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* ONLY YES BUTTON */
.s7-btn-wrap {
  margin-bottom: 14px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.s7-yes-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 46px;
  border-radius: 50px;
  background: linear-gradient(135deg, #ff0054, #ff5400, #ff0054, #c9184a);
  background-size: 300% 300%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 12px 38px rgba(255, 0, 84, 0.55),
    0 0 24px rgba(255, 84, 0, 0.35) inset,
    0 1px 0 rgba(255,255,255,0.45) inset;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: s7BtnPulse 2.6s ease-in-out infinite, s7GradientShift 5s ease infinite;
}

@keyframes s7BtnPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 12px 38px rgba(255, 0, 84, 0.55), 0 0 24px rgba(255, 84, 0, 0.35) inset;
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 16px 48px rgba(255, 0, 84, 0.75), 0 0 35px rgba(255, 117, 143, 0.6) inset;
  }
}

@keyframes s7GradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.s7-yes-btn:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 18px 52px rgba(255, 0, 84, 0.8), 0 0 40px rgba(255, 153, 200, 0.6) inset;
  border-color: #ffffff;
}

.s7-yes-btn:active {
  transform: translateY(1px) scale(0.98);
}

.s7-btn-icon {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

.s7-btn-shimmer {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: rotate(25deg);
  animation: s7ShimmerSweep 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes s7ShimmerSweep {
  0% { left: -60%; }
  40%, 100% { left: 140%; }
}

.s7-btn-note {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  color: #ffb3c6;
  opacity: 0.8;
  margin-top: 4px;
}

.s7-note-lock {
  margin-right: 3px;
}

/* Reveal Card Content */
.s7-confession-group {
  margin-bottom: 22px;
}

.s7-confession-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}

.s7-love-line {
  font-family: 'Great Vibes', cursive;
  font-size: 3.3rem;
  font-weight: 400;
  line-height: 1.15;
  background: linear-gradient(135deg, #ffffff 10%, #ff758f 50%, #ff0054 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 24px rgba(255, 0, 84, 0.45);
}

.s7-sub-line {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}

.s7-heart-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  font-size: 1.3rem;
  animation: s7HeartRowBounce 2.2s ease-in-out infinite;
}

@keyframes s7HeartRowBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.s7-love-letter-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 117, 143, 0.22);
  border-radius: 20px;
  padding: 18px 22px;
  margin-bottom: 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) inset;
}

.s7-love-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.7;
  color: #ffedf1;
  margin: 0;
}

/* Interactive Love Generator */
.s7-interactive-actions {
  margin-bottom: 22px;
}

.s7-love-burst-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: 30px;
  background: rgba(255, 77, 109, 0.2);
  border: 1px solid rgba(255, 117, 143, 0.45);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(255, 77, 109, 0.3);
}

.s7-love-burst-btn:hover {
  background: rgba(255, 77, 109, 0.35);
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.05);
}

.s7-burst-icon {
  font-size: 1.1rem;
}

.s7-burst-counter {
  background: #ff0054;
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.s7-burst-counter.is-popping {
  transform: scale(1.4);
}

/* Floating Love Bubble Popup */
.s7-floating-love-bubble {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(36, 6, 22, 0.94);
  border: 1px solid #ff758f;
  padding: 8px 16px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 15px rgba(255, 117, 143, 0.45);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: s7FloatUpFade 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes s7FloatUpFade {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -24px) scale(1.05);
  }
  30% {
    transform: translate(-50%, -36px) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -85px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -115px) scale(0.9);
  }
}

/* Replay Buttons (Section 7 Finale) */
.s7-footer-nav {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.s7-btn-replay-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 30px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(255, 117, 143, 0.22) 0%, rgba(201, 24, 74, 0.38) 100%);
  border: 1.5px solid rgba(255, 180, 200, 0.55);
  color: #fff0f5;
  font-family: 'Poppins', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 26px rgba(201, 24, 74, 0.4),
    0 0 16px rgba(255, 117, 143, 0.25) inset;
  transition: all 0.32s cubic-bezier(0.25, 1, 0.5, 1);
}

.s7-btn-replay-all .s7-replay-svg {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.s7-btn-replay-all:hover {
  background: linear-gradient(135deg, rgba(255, 117, 143, 0.45) 0%, rgba(201, 24, 74, 0.65) 100%);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2.5px) scale(1.03);
  box-shadow:
    0 12px 32px rgba(201, 24, 74, 0.6),
    0 0 24px rgba(255, 180, 200, 0.45);
}

.s7-btn-replay-all:hover .s7-replay-svg {
  transform: rotate(-180deg);
}

.s7-btn-replay-all:active {
  transform: translateY(1px) scale(0.97);
}

/* Subtle replay button on Question Card */
.s7-question-replay {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.s7-btn-replay-subtle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 214, 224, 0.78);
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.s7-btn-replay-subtle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Mobile Responsiveness for Section 7 */
@media (max-width: 600px) {
  .s7-section {
    padding: 30px 14px 85px;
  }
  .s7-card {
    padding: 30px 18px 28px;
    border-radius: 28px;
  }
  .s7-question-title {
    font-size: 1.6rem;
  }
  .s7-highlight {
    font-size: 1.9rem;
  }
  .s7-yes-btn {
    padding: 16px 36px;
    font-size: 1.02rem;
  }
  .s7-love-line {
    font-size: 2.6rem;
  }
  .s7-sub-line {
    font-size: 1.3rem;
  }
  .s7-love-quote {
    font-size: 1rem;
    line-height: 1.6;
  }
  .s7-media-wrap {
    width: 140px;
    height: 140px;
  }
  .s7-media-wrap--reveal {
    width: 180px;
    height: 145px;
  }
}