/* ============================================================
   FOR SAIVANI — Warm Ivory, Champagne Gold & Royal Wine Theme
   ============================================================ */

/* 1. Design Tokens ------------------------------------------ */
:root {
  --bg: #fffbf5;
  --bg-alt: #f8eee0;
  --bg-deep: #140810;
  
  --ink: #26130d;
  --ink-soft: #594037;
  --ink-muted: #8c736a;
  
  --wine: #961c2e;
  --wine-deep: #540d1b;
  --wine-soft: #cf8493;
  --wine-glow: rgba(150, 28, 46, 0.35);
  
  --rose: #f5ccd7;
  --rose-soft: #fdf2f5;
  --rose-deep: #851c30;
  
  --gold: #dfa85b;
  --gold-soft: #b8863f;
  --gold-bright: #ffd488;
  --gold-dim: rgba(223, 168, 91, 0.3);
  
  --card: rgba(255, 253, 248, 0.94);
  --card-solid: #fffbf5;
  --border: rgba(150, 28, 46, 0.18);
  --border-gold: rgba(223, 168, 91, 0.7);
  
  --shadow-sm: 0 4px 20px -2px rgba(84, 13, 27, 0.1);
  --shadow-md: 0 16px 40px -8px rgba(84, 13, 27, 0.16);
  --shadow-lg: 0 30px 70px -15px rgba(84, 13, 27, 0.22);
  --shadow-glow: 0 0 50px rgba(223, 168, 91, 0.45), 0 0 25px rgba(245, 204, 215, 0.35);
  
  --ease: cubic-bezier(0.16, 0.84, 0.28, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --script: 'Dancing Script', cursive;
}

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

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 1.6s var(--ease-soft);
}

body.locked {
  overflow: hidden;
  height: 100vh;
}

/* 2. Typography --------------------------------------------- */
.serif {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.script {
  font-family: var(--script);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 700;
}

.divider {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--wine);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
}

.divider::before, .divider::after {
  content: "";
  height: 1px;
  width: 50px;
  background: linear-gradient(to right, transparent, var(--wine-soft), transparent);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
}

h2 em {
  font-family: var(--serif);
  font-style: italic;
  background: linear-gradient(135deg, #851c30 0%, #c43854 50%, #b8863f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  max-width: 64ch;
}

/* 3. Ambient Layers ----------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.rays {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 70% 60% at 10% 15%, rgba(247, 194, 207, 0.55), transparent 70%),
    radial-gradient(ellipse 65% 65% at 90% 80%, rgba(245, 214, 160, 0.5), transparent 65%),
    radial-gradient(ellipse 50% 50% at 50% 45%, rgba(255, 235, 220, 0.4), transparent 75%),
    radial-gradient(circle at 80% 20%, rgba(226, 91, 116, 0.22), transparent 50%);
}

.petals, .bokeh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.petal {
  position: absolute;
  top: -40px;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, #ffc0cb, #f48fb1 55%, #c2185b 120%);
  border-radius: 80% 20% 75% 25% / 60% 30% 70% 40%;
  opacity: 0.75;
  box-shadow: 0 2px 8px rgba(194, 24, 91, 0.25);
  animation: fallPetal linear infinite;
  will-change: transform;
}

@keyframes fallPetal {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  100% { transform: translate3d(20vw, 110vh, 0) rotate(720deg); }
}

.dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe082 0%, #ffb74d 60%, transparent 80%);
  box-shadow: 0 0 12px rgba(255, 183, 77, 0.6);
  opacity: 0.65;
  animation: driftDot 14s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes driftDot {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate3d(25px, -35px, 0) scale(1.4); opacity: 0.9; }
}

/* 4. Password Gate (Medallion Locket) ----------------------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(ellipse at center, #fffaf2 0%, #faeee0 65%, #ebd3bf 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--ink);
  padding: 2rem 1.5rem;
  overflow-y: auto;
  transition: opacity 1.4s var(--ease-soft), transform 1.4s var(--ease-soft), filter 1.4s var(--ease-soft);
}

.gate.dismiss {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(18px);
  pointer-events: none;
}

.gate .flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.gate.flashing .flash {
  opacity: 1;
}

.gate .locket {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: 2rem;
  display: grid;
  place-items: center;
  animation: locketBreathe 4.5s ease-in-out infinite;
}

@keyframes locketBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 15px 30px rgba(138, 26, 42, 0.2)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 20px 40px rgba(138, 26, 42, 0.35)); }
}

.locket svg {
  width: 100%;
  height: 100%;
}

.locket .halo {
  position: absolute;
  inset: -35px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 194, 150, 0.45), transparent 65%);
  animation: locketHalo 5s ease-in-out infinite;
}

@keyframes locketHalo {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}

.gate h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  color: var(--wine-deep);
  letter-spacing: 0.02em;
  font-style: italic;
  text-align: center;
}

.gate .sub {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

.gate form {
  margin-top: 2.4rem;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.gate input {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  padding: 0.65rem 1.6rem;
  min-width: 270px;
  text-align: center;
  letter-spacing: 0.12em;
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s var(--ease);
}

.gate input::placeholder {
  color: var(--ink-muted);
  font-style: italic;
}

.gate input:focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 4px rgba(138, 26, 42, 0.12), var(--shadow-md);
}

.gate button {
  background: linear-gradient(135deg, var(--wine), var(--wine-deep));
  color: #fffaf0;
  border: 1px solid var(--wine);
  padding: 0.75rem 1.8rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(90, 18, 32, 0.25);
  transition: all 0.4s var(--ease);
}

.gate button:hover {
  background: var(--wine-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(90, 18, 32, 0.35);
}

.gate .hint {
  margin-top: 1.4rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
}

.gate .err {
  color: #c42445;
  font-size: 0.74rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 1rem;
  height: 1.2em;
  opacity: 0;
  transition: opacity 0.35s;
}

.gate .err.on {
  opacity: 1;
}

/* 5. Hero Section ------------------------------------------- */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 2rem 5rem;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, #fffcf8 0%, #faefe0 45%, #fce7ec 75%, var(--bg-alt) 100%);
}

.hero .inner {
  position: relative;
  z-index: 5;
  max-width: 960px;
}

.hero h1 {
  font-size: clamp(3.2rem, 9.5vw, 8.2rem);
  font-style: italic;
  line-height: 0.96;
}

.hero h1 .happy {
  display: block;
  font-size: 0.42em;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-style: normal;
  color: var(--wine);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.hero h1 .name {
  display: block;
  background: linear-gradient(135deg, #540d1b 0%, #961c2e 30%, #c43854 55%, #dfa85b 78%, #540d1b 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
  font-weight: 600;
  filter: drop-shadow(0 6px 24px rgba(150, 28, 46, 0.22));
}

.hero .tagline {
  font-family: var(--script);
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--wine);
  margin-top: 1rem;
  line-height: 1.2;
  text-shadow: 0 2px 14px rgba(150, 28, 46, 0.15);
}

.hero .kicker {
  margin-top: 2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--ink-soft);
  max-width: 52ch;
  margin-inline: auto;
  line-height: 1.85;
}

.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  opacity: 0.75;
  animation: scrollHintFloat 3s ease-in-out infinite;
}

.scroll-hint::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--wine-soft), transparent);
}

@keyframes scrollHintFloat {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.4; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

/* 6. Chapter Sections --------------------------------------- */
.chapter {
  min-height: 85vh;
  padding: 14vh 8vw;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  place-content: center;
  gap: 2.2rem;
}

.chapter .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--wine);
  font-size: 1.2rem;
  letter-spacing: 0.35em;
}

.chapter h2 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-style: italic;
  color: var(--ink);
  max-width: 19ch;
  line-height: 1.15;
}

.chapter h2 em {
  color: var(--wine);
  font-style: italic;
}

.chapter .body {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  color: var(--ink-soft);
  max-width: 58ch;
  line-height: 1.9;
}

.chapter.right {
  justify-items: end;
  text-align: right;
}

.chapter.right h2, .chapter.right .body {
  margin-left: auto;
}

.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: var(--wine);
  max-width: 26ch;
  line-height: 1.3;
  border-left: 2px solid var(--gold);
  padding-left: 1.8rem;
  margin-top: 1rem;
}

/* 7. Featured Memory Portraits: Childhood & Present ----------- */
.moment-section {
  padding: 16vh 6vw;
  position: relative;
  text-align: center;
}

.childhood-moment {
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 220, 230, 0.7) 0%, rgba(255, 235, 195, 0.5) 45%, var(--bg) 100%);
}

.later-moment {
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 210, 225, 0.75) 0%, rgba(255, 228, 180, 0.55) 45%, var(--bg) 100%);
}

.moment-card-wrap {
  margin: 5vh auto 0;
  max-width: 480px;
  position: relative;
  z-index: 2;
}

.moment-card {
  background: rgba(255, 253, 248, 0.95);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(223, 168, 91, 0.8);
  border-radius: 26px;
  padding: 1.6rem 1.6rem 2.2rem;
  box-shadow: 0 20px 50px -10px rgba(84, 13, 27, 0.2), 0 0 45px rgba(223, 168, 91, 0.45);
  transition: transform 0.6s var(--ease-soft), box-shadow 0.6s var(--ease-soft), border-color 0.6s;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.moment-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 25px 60px -10px rgba(84, 13, 27, 0.25), 0 0 60px rgba(223, 168, 91, 0.65);
}

.moment-frame {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #f0e6da;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.08);
}

.moment-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 1.2s var(--ease-soft);
}

.childhood-moment .moment-frame img {
  object-position: center 15%;
}

.later-moment .moment-frame img {
  object-position: center 15%;
}

.moment-card:hover .moment-frame img {
  transform: scale(1.05);
}

.moment-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  color: var(--wine-deep);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-sm);
}

.moment-card h3, .memory-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.65rem, 3.2vw, 2.1rem);
  color: var(--wine-deep);
  margin-top: 1.4rem;
  line-height: 1.3;
}

.moment-card p, .memory-sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.15rem;
  margin: 0.5rem auto 0;
  line-height: 1.65;
  max-width: 38ch;
}

/* 8. Special Resilience Letter Section ----------------------- */
.letter-section {
  padding: 18vh 6vw;
  text-align: center;
  position: relative;
  background: radial-gradient(ellipse at 50% 50%, var(--rose-soft) 0%, var(--bg) 70%);
}

.letter-section header {
  margin-bottom: 5vh;
}

.envelope {
  width: min(520px, 90vw);
  aspect-ratio: 5/3;
  margin: 4vh auto 0;
  position: relative;
  perspective: 1600px;
  cursor: pointer;
}

.env-body {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(160deg, #fdf9f5, #f3e6d8);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transition: transform 1.4s var(--ease-soft);
  transform-style: preserve-3d;
}

.env-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(160deg, #faebd7, #edd4be);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transition: transform 1.4s var(--ease-soft);
  z-index: 3;
  border-bottom: 1px solid rgba(223, 194, 150, 0.6);
}

.env-seal {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e25b74, #8a1a2a);
  box-shadow: 0 8px 25px rgba(90, 18, 32, 0.4), 0 0 20px rgba(226, 91, 116, 0.4);
  z-index: 4;
  display: grid;
  place-items: center;
  color: #fff4d4;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 600;
  transition: transform 1s var(--ease-soft), opacity 1s var(--ease-soft);
}

.envelope.open .env-flap {
  transform: rotateX(180deg);
}

.envelope.open .env-seal {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.envelope.open .env-body {
  transform: translateY(-14px);
}

.letter-card {
  margin: 3.5rem auto 0;
  max-width: 680px;
  background: rgba(255, 253, 249, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-gold);
  padding: 3.4rem 2.8rem;
  border-radius: 18px;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity 1.2s var(--ease-soft) 0.3s, transform 1.2s var(--ease-soft) 0.3s;
  text-align: left;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 2;
}

.letter-card.reveal {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.letter-card p {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
}

.letter-card.reveal p {
  opacity: 1;
  transform: none;
}

.letter-card.reveal p:nth-child(1) { transition-delay: 0.4s; }
.letter-card.reveal p:nth-child(2) { transition-delay: 0.8s; }
.letter-card.reveal p:nth-child(3) { transition-delay: 1.2s; }
.letter-card.reveal p:nth-child(4) { transition-delay: 1.6s; }
.letter-card.reveal p:nth-child(5) { transition-delay: 2.0s; }
.letter-card.reveal p:nth-child(6) { transition-delay: 2.4s; }
.letter-card.reveal .sign { transition-delay: 2.8s; }

.letter-card p + p {
  margin-top: 1.4rem;
}

.letter-card .sign {
  margin-top: 2rem;
  font-family: var(--script);
  color: var(--wine);
  font-size: 2rem;
  text-align: right;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
}

.letter-card.reveal .sign {
  opacity: 1;
  transform: none;
}

.tap-hint {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 500;
}

/* 9. Timeline of Milestones & Growth ------------------------- */
.journey {
  padding: 16vh 6vw;
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}

.journey header {
  text-align: center;
  margin-bottom: 8vh;
}

.journey h2 {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-style: italic;
  margin-top: 1rem;
}

.timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding-left: 2.2rem;
  border-left: 1px dashed rgba(138, 26, 42, 0.35);
}

.tl-item {
  padding: 2.5rem 0 2.5rem 2.2rem;
  position: relative;
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -2.8rem;
  top: 2.9rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--wine);
  box-shadow: 0 0 0 6px rgba(138, 26, 42, 0.15);
  transform: scale(0);
  transition: transform 0.8s var(--ease-soft);
}

.tl-item.in::before {
  transform: scale(1);
}

.tl-item .when {
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 600;
}

.tl-item h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  margin: 0.5rem 0 0.7rem;
  color: var(--wine-deep);
}

.tl-item p {
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.85;
}

/* 10. Star Constellation of Wishes -------------------------- */
.constellation {
  position: relative;
  min-height: 100vh;
  padding: 16vh 6vw;
  overflow: hidden;
  background: radial-gradient(ellipse at 35% 25%, #2a1420 0%, #160a12 65%, #0d040a 100%);
  color: #fffdf9;
}

.constellation header {
  text-align: center;
  margin-bottom: 6vh;
  position: relative;
  z-index: 3;
}

.constellation header .eyebrow {
  color: var(--gold-bright);
}

.constellation header h2 {
  color: #ffffff;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  font-style: italic;
  margin-top: 1rem;
}

.constellation header h2 em {
  color: var(--gold-bright);
}

.constellation header p {
  color: #ebd0d5;
  font-family: var(--serif);
  font-style: italic;
  margin: 1rem auto 0;
  max-width: 52ch;
  font-size: 1.18rem;
}

.sky {
  position: relative;
  max-width: 1050px;
  margin: 0 auto;
  height: min(72vh, 600px);
}

.sky svg.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.45;
}

.sky svg.lines line {
  stroke: var(--gold);
  stroke-width: 0.75;
  stroke-dasharray: 4 6;
}

.star {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 40% 40%, #ffffff, #dfc296 40%, rgba(223, 194, 150, 0.2) 75%, transparent);
  cursor: pointer;
  box-shadow: 0 0 16px rgba(223, 194, 150, 0.9), 0 0 35px rgba(223, 194, 150, 0.5);
  animation: starTwinkle 3.6s ease-in-out infinite;
  transition: transform 0.4s var(--ease);
  z-index: 2;
}

.star::after {
  content: attr(data-label);
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--gold-bright);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  letter-spacing: 0.04em;
  pointer-events: none;
}

.star:hover {
  transform: translate(-50%, -50%) scale(1.55);
}

.star:hover::after {
  opacity: 1;
}

.star.opened {
  background: radial-gradient(circle at 40% 40%, #ffe4e8, var(--wine-soft) 45%, rgba(196, 36, 69, 0.25) 75%, transparent);
  box-shadow: 0 0 20px rgba(226, 107, 130, 0.95), 0 0 45px rgba(196, 36, 69, 0.55);
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.7; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.45); }
}

.memory-card {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(14, 5, 11, 0.85);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 0.7s var(--ease-soft);
}

.memory-card.on {
  display: flex;
  opacity: 1;
}

.memory-card .card {
  max-width: 520px;
  background: rgba(255, 253, 249, 0.98);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 2.8rem 2.4rem;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 0.8s var(--ease-soft), opacity 0.8s var(--ease-soft);
  text-align: left;
  position: relative;
}

.memory-card.on .card {
  transform: none;
  opacity: 1;
}

.memory-card .card .when {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 600;
}

.memory-card .card h3 {
  font-family: var(--serif);
  font-style: italic;
  color: var(--wine-deep);
  font-size: 2rem;
  margin: 0.6rem 0 1rem;
}

.memory-card .card p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.18rem;
  line-height: 1.9;
}

.memory-card .close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  background: none;
  border: none;
  color: var(--wine);
  font-family: var(--serif);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

/* 11. Playful Birthday Quiz --------------------------------- */
.quiz {
  min-height: 100vh;
  padding: 16vh 6vw;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 50%, var(--bg) 0%, var(--bg-alt) 100%);
}

.quiz .stage {
  margin-top: 3rem;
  width: min(680px, 92vw);
  min-height: 340px;
  position: relative;
}

.quiz-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft), filter 0.8s var(--ease-soft);
}

.quiz-step.active {
  opacity: 1;
  transform: none;
  filter: blur(0);
  pointer-events: auto;
}

.quiz-q {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  color: var(--wine-deep);
  max-width: 24ch;
  line-height: 1.3;
}

.quiz-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.6rem;
}

.quiz-opt {
  background: var(--card-solid);
  border: 1px solid var(--border-gold);
  color: var(--wine-deep);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.4s var(--ease);
  box-shadow: var(--shadow-sm);
}

.quiz-opt:hover {
  background: var(--wine);
  color: #fffdf9;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.quiz-tease {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  color: var(--wine);
  max-width: 28ch;
  line-height: 1.35;
}

.quiz-tease small {
  display: block;
  margin-top: 1rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.quiz-next {
  margin-top: 1.6rem;
  background: transparent;
  border: 1px solid var(--wine);
  color: var(--wine);
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--sans);
  transition: all 0.4s var(--ease);
}

.quiz-next:hover {
  background: var(--wine);
  color: #fffdf9;
}

.quiz-final {
  background: var(--card-solid);
  border: 1px solid var(--border-gold);
  border-radius: 22px;
  padding: 2.8rem 2.2rem;
  box-shadow: var(--shadow-lg);
  max-width: 520px;
}

.quiz-final .seal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e25b74, #8a1a2a);
  color: #fff4d4;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin: 0 auto 1.4rem;
  box-shadow: 0 8px 24px rgba(90, 18, 32, 0.3);
}

.quiz-final h3 {
  font-family: var(--serif);
  font-style: italic;
  color: var(--wine-deep);
  font-size: 1.95rem;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.quiz-final p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.15rem;
  margin: 0 auto;
  max-width: 40ch;
  line-height: 1.75;
}

/* 12. Runaway Birthday Button Game -------------------------- */
.tb-section {
  padding: 16vh 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, var(--bg) 0%, var(--rose-soft) 50%, var(--bg) 100%);
}

.tb-card {
  width: 100%;
  max-width: 460px;
  background: var(--card-solid);
  border: 1px solid var(--border-gold);
  border-radius: 32px;
  padding: 28px 24px 34px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease-soft), border-color 0.6s, box-shadow 0.6s;
}

.tb-card.warm {
  border-color: var(--wine);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(138, 26, 42, 0.2);
}

.tb-title {
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--wine);
  text-align: center;
  font-weight: 600;
  margin: 4px 0 16px;
}

.tb-play {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 24px;
  background: #fcf6ee;
  box-shadow: inset 0 0 0 1px rgba(138, 26, 42, 0.08);
  overflow: hidden;
  touch-action: manipulation;
}

.tb-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 190px;
  min-height: 64px;
  padding: 0 28px;
  border-radius: 999px;
  border: none;
  color: #fffdf9;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  background: linear-gradient(135deg, #e25b74 0%, #c42445 60%, #8a1a2a 100%);
  box-shadow: 0 12px 30px -8px rgba(138, 26, 42, 0.45);
  transition: left 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.tb-btn.calm {
  animation: tbPulse 1.6s ease-in-out infinite;
}

@keyframes tbPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 12px 30px -8px rgba(138, 26, 42, 0.45); }
  50% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 12px 35px 0 rgba(138, 26, 42, 0.65); }
}

.tb-btn.gone {
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
}

.tb-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}

.tb-line {
  font-family: var(--serif);
  color: var(--wine-deep);
  font-size: 26px;
  line-height: 1.35;
  font-style: italic;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  max-width: 320px;
}

.tb-line.show {
  opacity: 1;
  transform: translateY(0);
}

.tb-line.small {
  font-size: 18px;
  font-style: normal;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 14px;
}

.tb-more {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--border-gold);
  background: linear-gradient(135deg, rgba(223, 194, 150, 0.35), rgba(240, 204, 213, 0.45));
  color: var(--wine-deep);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.tb-more.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tb-reasons {
  margin-top: 18px;
  background: #fffdf9;
  border: 1px solid var(--border-gold);
  border-radius: 22px;
  padding: 24px 20px;
  min-height: 220px;
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.tb-reasons.show {
  display: flex;
}

.tb-count {
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 700;
  margin-bottom: 12px;
}

.tb-reason-wrap {
  position: relative;
  width: 100%;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tb-reason {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  padding: 0 8px;
  transition: transform 0.4s var(--ease-soft), opacity 0.35s ease;
}

.tb-next {
  margin-top: 16px;
  width: 100%;
  padding: 15px;
  border-radius: 18px;
  border: none;
  background: linear-gradient(135deg, var(--wine), var(--wine-deep));
  color: #fffdf9;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(138, 26, 42, 0.4);
}

.tb-end {
  text-align: center;
  padding: 14px 6px;
}

.tb-end h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--wine);
  margin-bottom: 14px;
}

.tb-replay {
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid var(--wine);
  background: transparent;
  color: var(--wine);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.tb-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* 13. Pop the Birthday Balloons Game ------------------------ */
.ph-section {
  position: relative;
  padding: 16vh 5vw 18vh;
  background: linear-gradient(180deg, var(--bg) 0%, #faeef2 55%, var(--bg) 100%);
  overflow: hidden;
  color: var(--ink);
}

.ph-inner {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.ph-stage {
  position: relative;
  height: 430px;
  border-radius: 28px;
  background: var(--card-solid);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  cursor: crosshair;
  touch-action: manipulation;
  margin-top: 2rem;
}

.ph-count {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wine);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-gold);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  z-index: 3;
  font-weight: 600;
}

.ph-start {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #fffdf9;
  background: linear-gradient(135deg, var(--wine), var(--wine-deep));
  border: none;
  border-radius: 999px;
  padding: 1rem 1.8rem;
  cursor: pointer;
  box-shadow: 0 12px 30px -8px rgba(138, 26, 42, 0.5);
  transition: transform 0.25s var(--ease), opacity 0.3s ease;
}

.ph-start:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.ph-start.gone {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
}

.ph-balloon {
  position: absolute;
  width: 48px;
  height: 58px;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 8px 16px rgba(138, 26, 42, 0.2));
  transition: transform 0.18s var(--ease);
  z-index: 2;
}

.ph-balloon:hover {
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1.15);
}

.ph-balloon.pop {
  animation: balloonPop 0.5s var(--ease) forwards;
  pointer-events: none;
}

@keyframes balloonPop {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(0.2); }
}

.ph-word {
  position: absolute;
  pointer-events: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--wine);
  transform: translate(-50%, -50%);
  animation: phFloatWord 1.8s ease-out forwards;
  z-index: 3;
  font-weight: 600;
}

@keyframes phFloatWord {
  0% { opacity: 0; transform: translate(-50%, -50%) translateY(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-65px); }
}

.ph-final {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background: rgba(255, 253, 249, 0.95);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s var(--ease-soft);
  z-index: 4;
}

.ph-final.on {
  opacity: 1;
  pointer-events: auto;
}

.ph-final h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--wine-deep);
  margin-bottom: 0.8rem;
}

.ph-final p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 0 auto 1.2rem;
  font-size: 1.15rem;
}

.ph-final .again {
  background: none;
  border: 1px solid var(--wine);
  color: var(--wine);
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.ph-final .again:hover {
  background: var(--wine);
  color: #fffdf9;
}

/* 14. Birthday Wish Jar ------------------------------------- */
.wish-section {
  position: relative;
  padding: 16vh 6vw;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #faeef0 0%, var(--bg) 70%);
}

.wish-section .eyebrow {
  color: var(--wine);
}

.wish-section h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  color: var(--ink);
  margin-top: 1rem;
  line-height: 1.15;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}

.wish-section h2 em {
  color: var(--wine);
}

.wish-section p.wish-sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 1rem auto 0;
  max-width: 48ch;
  font-size: 1.18rem;
}

.wish-jar-wrap {
  margin: 6vh auto 0;
  max-width: 520px;
  position: relative;
  z-index: 2;
}

.wish-jar {
  width: 220px;
  height: 280px;
  margin: 0 auto;
  position: relative;
  filter: drop-shadow(0 20px 40px rgba(138, 26, 42, 0.2));
  cursor: pointer;
}

.wish-jar svg {
  width: 100%;
  height: 100%;
}

.wish-btn {
  margin-top: 2rem;
  background: linear-gradient(135deg, var(--wine), var(--wine-deep));
  color: #fffdf9;
  border: none;
  padding: 1rem 2.2rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(138, 26, 42, 0.4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
  font-weight: 700;
}

.wish-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(138, 26, 42, 0.55);
}

.wish-paper {
  margin: 3vh auto 0;
  max-width: 480px;
  background: #fffdf9;
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 2.4rem 2.2rem;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transform: rotate(-1.2deg);
  opacity: 0;
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
  font-family: var(--script);
  color: var(--wine-deep);
  font-size: 1.75rem;
  line-height: 1.6;
  min-height: 120px;
  position: relative;
}

.wish-paper.on {
  opacity: 1;
  transform: rotate(-1.2deg) translateY(0);
}

.wish-paper::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px dashed rgba(223, 194, 150, 0.5);
  border-radius: 8px;
  pointer-events: none;
}

.wish-count {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.wish-float {
  position: absolute;
  pointer-events: none;
  font-size: 1.4rem;
  opacity: 0;
  animation: wishFloatUp 3s ease-out forwards;
}

@keyframes wishFloatUp {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-160px) scale(1.15); }
}

/* 15. Grand Birthday Cake Finale ---------------------------- */
.cake-section {
  position: relative;
  min-height: 100vh;
  padding: 14vh 6vw;
  background: radial-gradient(ellipse at 50% 55%, #24111d 0%, #140810 55%, #080306 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  color: #fffdf9;
}

.cake-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 62%, rgba(223, 194, 150, 0.18), transparent 45%);
  pointer-events: none;
}

.cake-eyebrow {
  position: relative;
  z-index: 2;
  color: var(--gold-bright);
  font-size: 0.72rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.cake-title {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  color: #ffffff;
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: 300;
  text-align: center;
  max-width: 34ch;
  line-height: 1.25;
}

.cake-hint {
  position: relative;
  z-index: 2;
  margin-top: 1.2rem;
  color: var(--gold-bright);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  animation: pulseHint 2s ease-in-out infinite;
}

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

.cake-stage {
  position: relative;
  z-index: 2;
  margin-top: 3rem;
  width: min(520px, 90vw);
  aspect-ratio: 1 / 1.05;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 2s var(--ease-soft), filter 1.2s var(--ease-soft);
}

.cake-stage.zoom {
  transform: scale(1.18) translateY(-3%);
}

.cake-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7));
}

.candle {
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.3s var(--ease);
}

.candle:hover {
  transform: translateY(-2px);
}

.candle-hitbox {
  cursor: pointer;
  pointer-events: all;
  touch-action: manipulation;
}

.candle .wick {
  stroke: #2a1810;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.candle .flame {
  opacity: 0;
  transform-origin: center bottom;
  transform-box: fill-box;
  transition: opacity 0.35s var(--ease);
}

.candle.lit {
  cursor: default;
}

.candle.lit .candle-hitbox {
  cursor: default;
}

.candle.lit .flame {
  opacity: 1;
  animation: flameFlicker 1.6s ease-in-out infinite;
}

.candle.lit .halo {
  opacity: 1;
}

.candle .halo {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  mix-blend-mode: screen;
  pointer-events: none;
}

.cake-section.finale .candle.lit .flame {
  filter: brightness(1.4) saturate(1.2);
}

@keyframes flameFlicker {
  0%, 100% { transform: scaleY(1) scaleX(1) rotate(-0.5deg); }
  25% { transform: scaleY(1.08) scaleX(0.95) rotate(1deg); }
  50% { transform: scaleY(0.94) scaleX(1.03) rotate(-1deg); }
  75% { transform: scaleY(1.05) scaleX(0.98) rotate(0.5deg); }
}

.cake-count {
  position: relative;
  z-index: 2;
  margin-top: 1.6rem;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.cake-count b {
  color: #ffffff;
  font-weight: 400;
}

.cake-auto-light {
  position: relative;
  z-index: 2;
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cake-auto-light:hover {
  background: var(--gold-dim);
  border-color: var(--gold-bright);
  color: #ffffff;
  transform: translateY(-1px);
}

.cake-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cake-particles i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
  animation: ambientFloat 14s linear infinite;
}

@keyframes ambientFloat {
  0% { transform: translateY(20px); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-120vh); opacity: 0; }
}

.spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd28a;
  pointer-events: none;
  box-shadow: 0 0 6px #ffb060;
  animation: sparkFly 0.9s ease-out forwards;
}

@keyframes sparkFly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.finale-blackout {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-soft);
}

.finale-blackout.on {
  opacity: 1;
  pointer-events: auto;
}

.finale-blackout.fadeout {
  opacity: 0;
  pointer-events: none !important;
}

.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease-soft);
}

.fx-canvas.on {
  opacity: 1;
}

.finale-message {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 8vw;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
}

.finale-message.on {
  opacity: 1;
  pointer-events: auto;
}

.finale-message .line {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.4s var(--ease-soft), transform 1.4s var(--ease-soft);
  color: #f7edde;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.9);
}

.finale-message .line.on {
  opacity: 1;
  transform: none;
}

.finale-message .l1 {
  font-family: var(--script);
  font-size: clamp(2.6rem, 6.5vw, 4.8rem);
  color: var(--gold-bright);
  margin-bottom: 1.4rem;
  line-height: 1.15;
}

.finale-message .l2, .finale-message .l3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  max-width: 38ch;
  color: #ffffff;
  margin-top: 0.8rem;
  line-height: 1.6;
}

.finale-message .l4 {
  font-family: var(--script);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--rose);
  margin-top: 2rem;
}

.finale-restart {
  margin-top: 3rem;
  opacity: 0;
  transition: opacity 1s var(--ease-soft) 1s;
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  padding: 0.75rem 1.8rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
}

.finale-message.on .finale-restart {
  opacity: 1;
}

.finale-restart:hover {
  background: rgba(223, 194, 150, 0.2);
  color: #ffffff;
}

/* 16. Credits ----------------------------------------------- */
.credits {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10vh 2rem;
  gap: 2rem;
  position: relative;
  background: var(--bg);
}

.credits h2 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-style: italic;
  color: var(--wine-deep);
}

.credits h2 em {
  color: var(--wine);
}

.credits .roll {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.18rem;
  line-height: 2.4;
}

.credits .end {
  margin-top: 3rem;
  font-size: 0.72rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 600;
}

/* 17. Reveal Utilities -------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.85s var(--ease-soft), transform 0.85s var(--ease-soft);
  will-change: opacity, transform;
}

.reveal-up.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.stagger > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.75s var(--ease-soft), transform 0.75s var(--ease-soft);
  will-change: opacity, transform;
}

.stagger.in > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.stagger.in > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.2s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.3s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.4s; }

/* Responsive adjustments */
@media (max-width: 640px) {
  .gate input { min-width: 200px; font-size: 1.15rem; }
  .chapter { padding: 12vh 6vw; }
  .timeline { padding-left: 1.2rem; }
  .tl-item { padding-left: 1.2rem; }
  .tl-item::before { left: -1.7rem; }
  .moment-card { padding: 1.2rem 1.2rem 1.6rem; }
  .letter-card { padding: 2.2rem 1.6rem; font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* 18. Floating Music Player Widget ------------------------- */
.music-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 14px;
  background: rgba(255, 253, 249, 0.94);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(138, 26, 42, 0.16), 0 0 20px rgba(223, 194, 150, 0.2);
  backdrop-filter: blur(18px);
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.music-widget.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.music-widget:hover {
  background: #ffffff;
  border-color: var(--wine);
  box-shadow: 0 12px 36px rgba(138, 26, 42, 0.24);
}

.music-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 15px;
  width: 15px;
}

.music-bar {
  width: 3px;
  background: var(--wine);
  border-radius: 999px;
  height: 4px;
  transition: height 0.2s ease;
}

.music-widget.playing .music-bar:nth-child(1) {
  animation: eqBar1 1s ease-in-out infinite alternate;
}
.music-widget.playing .music-bar:nth-child(2) {
  animation: eqBar2 0.75s ease-in-out infinite alternate 0.15s;
}
.music-widget.playing .music-bar:nth-child(3) {
  animation: eqBar3 1.15s ease-in-out infinite alternate 0.3s;
}

@keyframes eqBar1 {
  0% { height: 3px; }
  100% { height: 14px; }
}
@keyframes eqBar2 {
  0% { height: 4px; }
  100% { height: 15px; }
}
@keyframes eqBar3 {
  0% { height: 3px; }
  100% { height: 12px; }
}

.music-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}

.music-title {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--wine-deep);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.music-sub {
  font-family: var(--sans);
  font-size: 0.65rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.music-toggle-icon {
  font-size: 0.9rem;
  margin-left: 2px;
  color: var(--wine);
  display: flex;
  align-items: center;
}

@media (max-width: 640px) {
  .music-widget {
    bottom: 16px;
    right: 16px;
    padding: 7px 12px 7px 10px;
    gap: 8px;
  }
  .music-title {
    font-size: 0.7rem;
  }
  .music-sub {
    font-size: 0.6rem;
  }
}

/* 19. Milestone 18 Accents & Emblems ----------------------- */
.milestone-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255, 235, 190, 0.95), rgba(255, 210, 225, 0.95));
  border: 1.5px solid rgba(223, 168, 91, 0.9);
  color: #540d1b;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(84, 13, 27, 0.16), 0 0 20px rgba(223, 168, 91, 0.45);
  margin-bottom: 1.4rem;
}

.cake-18-emblem {
  transform-origin: 250px 218px;
  animation: emblemPulse 3s ease-in-out infinite alternate;
}

@keyframes emblemPulse {
  0% { transform: scale(0.95); filter: drop-shadow(0 2px 8px rgba(223, 168, 91, 0.5)); }
  100% { transform: scale(1.08); filter: drop-shadow(0 4px 20px rgba(223, 168, 91, 0.95)); }
}