/* =============================================
   DHASHA NANCY — style.css v2
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600&family=Dancing+Script:wght@400;600;700&display=swap');

/* ==================== VARIABLES ==================== */
:root {
  --pink: #F4A7B9;
  --rose: #C96480;
  --deep-rose: #9B3A57;
  --cream: #FFF5F0;
  --petal: #FFD6E0;
  --warm-night: #1A0A12;
  --warm-dark: #2D1420;
  --gold: #E8C99A;
  --text-dark: #2D1420;
  --text-mid: #7A4A5A;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-script: 'Dancing Script', cursive;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: all 0.4s var(--ease-smooth);
}

/* ==================== RESET ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  background: var(--warm-night);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  cursor: none;
}

button { font-family: inherit; cursor: pointer; }

/* ==================== CURSOR ==================== */
#cursor {
  width: 16px; height: 16px;
  background: var(--rose);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: width 0.2s, height 0.2s;
}
#cursor-trail {
  width: 7px; height: 7px;
  background: var(--pink);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  opacity: 0.45;
}

/* ==================== PETALS ==================== */
#petals-container {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -28px;
  background: var(--petal);
  width: 11px; height: 14px;
  border-radius: 50% 0 50% 0;
  opacity: 0;
  animation: petalFall linear infinite;
}
.petal:nth-child(even) { border-radius: 0 50% 0 50%; background: #FFB6C8; }
.petal:nth-child(3n) { background: var(--pink); width: 8px; height: 10px; }

@keyframes petalFall {
  0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
  8% { opacity: 0.65; }
  92% { opacity: 0.3; }
  100% { transform: translateY(110vh) rotate(600deg) translateX(55px); opacity: 0; }
}

/* ==================== INTRO OVERLAY ==================== */
#intro-overlay {
  position: fixed; inset: 0;
  background: #080308;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 1s var(--ease-smooth), transform 1.1s var(--ease-smooth);
}
#intro-overlay.closing {
  opacity: 0;
  transform: scale(1.07);
  pointer-events: none;
}

/* Gradient orbs */
.i-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  animation: orbIn 2.5s ease forwards, orbDrift var(--dur, 9s) ease-in-out infinite;
}
.i-orb-1 { width: 500px; height: 500px; background: #7A1A35; top: -150px; left: -150px; --dur: 10s; animation-delay: 0.2s, 2.7s; }
.i-orb-2 { width: 380px; height: 380px; background: #4A0A20; bottom: -100px; right: -80px; --dur: 8s; animation-delay: 0.5s, 3s; }
.i-orb-3 { width: 250px; height: 250px; background: #C96480; top: 35%; right: 15%; --dur: 12s; animation-delay: 0.8s, 3.3s; opacity: 0; }
.i-orb-4 { width: 180px; height: 180px; background: #E8C99A; bottom: 25%; left: 20%; --dur: 7s; animation-delay: 1s, 3.5s; }

@keyframes orbIn { to { opacity: 0.13; } }
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(25px, -30px) scale(1.06); }
  66% { transform: translate(-18px, 18px) scale(0.94); }
}

/* Stars */
.i-star {
  position: absolute;
  width: 2px; height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  animation: starTwinkle var(--sd, 3s) ease infinite var(--dl, 0s);
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Intro Content */
.intro-content {
  position: relative; z-index: 5;
  text-align: center;
  padding: 0 24px;
  animation: introIn 1.4s var(--ease-spring) 0.4s both;
}
@keyframes introIn {
  from { opacity: 0; transform: translateY(50px) scale(0.88); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.intro-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 167, 185, 0.4);
  margin-bottom: 24px;
}

/* ===  Dhasha ♥ Nancy title === */
.intro-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 20px);
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.intro-name {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 9vw, 6rem);
  font-weight: 700;
  color: white;
  line-height: 1;
  display: inline-block;
  animation: nameFade 1s ease both;
}
.intro-name:nth-child(1) { animation-delay: 0.6s; }
.intro-name:nth-child(3) { animation-delay: 1s; }
@keyframes nameFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.intro-heart-icon {
  font-size: clamp(2rem, 6vw, 4rem);
  display: inline-block;
  color: var(--rose);
  animation: heartBeat 1.3s ease infinite, nameFade 0.8s ease 0.8s both;
  filter: drop-shadow(0 0 20px rgba(201, 100, 128, 0.7));
  line-height: 1;
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.4); }
  30% { transform: scale(1.1); }
  45% { transform: scale(1.28); }
  60% { transform: scale(1); }
}

.intro-sub {
  font-family: var(--font-script);
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: rgba(255, 245, 240, 0.45);
  margin-top: 6px;
  margin-bottom: 52px;
  animation: nameFade 0.8s ease 1.2s both;
}

/* === Wax Seal Button === */
.seal-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  animation: nameFade 0.8s ease 1.5s both;
}
.seal-btn:hover .seal-disc { transform: scale(1.1) rotate(10deg); }
.seal-btn:hover .seal-label { opacity: 0.8; letter-spacing: 0.3em; }

.seal-disc {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #E87090, #C96480 46%, #8A2D50);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  transition: transform 0.5s var(--ease-spring), box-shadow 0.4s ease;
  box-shadow:
    0 0 0 8px rgba(201, 100, 128, 0.14),
    0 0 0 16px rgba(201, 100, 128, 0.05),
    0 12px 40px rgba(201, 100, 128, 0.45);
  animation: sealPulse 2.5s ease infinite;
  position: relative;
}
.seal-disc::after {
  content: '';
  position: absolute; inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
}
@keyframes sealPulse {
  0%,100% { box-shadow: 0 0 0 8px rgba(201,100,128,0.14), 0 0 0 16px rgba(201,100,128,0.05), 0 12px 40px rgba(201,100,128,0.45); }
  50% { box-shadow: 0 0 0 14px rgba(201,100,128,0.1), 0 0 0 28px rgba(201,100,128,0.03), 0 12px 60px rgba(201,100,128,0.6), 0 0 100px rgba(244,167,185,0.12); }
}

.seal-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  transition: letter-spacing 0.4s ease, opacity 0.4s ease;
}

/* ==================== SECTION SYSTEM ==================== */
.section {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 24px 88px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.65s var(--ease-smooth), transform 0.65s var(--ease-smooth);
  transform: translateY(22px);
  overflow-y: auto; overflow-x: hidden;
  gap: 20px;
}
.section.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  z-index: 20;
}
.section.prev-out {
  opacity: 0;
  transform: translateY(-22px);
  z-index: 15;
  pointer-events: none;
}

/* ==================== CONTINUE BUTTON ==================== */
.cont-btn {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 5px;
  background: none; border: none;
  opacity: 0;
  animation: fadeIn 0.6s ease 1.2s forwards;
}
.cont-ring {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,100,128,0.3);
  background: rgba(201,100,128,0.07);
  display: flex; align-items: center; justify-content: center;
  color: var(--rose); font-size: 1.1rem;
  transition: var(--transition);
  animation: ringPulse 2.2s ease infinite;
}
@keyframes ringPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,100,128,0.35); }
  50% { box-shadow: 0 0 0 10px rgba(201,100,128,0); }
}
.cont-btn:hover .cont-ring {
  background: var(--rose); color: white;
  border-color: var(--rose); transform: scale(1.1);
}
.cont-lbl {
  font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(201,100,128,0.45);
}

/* ==================== NAV DOTS ==================== */
#nav-dots {
  position: fixed; right: 14px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px;
  z-index: 100;
}
.nav-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(244,167,185,0.2);
  cursor: pointer;
  transition: var(--transition);
}
.nav-dot.active { background: var(--rose); transform: scale(1.7); }
@media (max-width: 480px) { #nav-dots { display: none; } }

/* ==================== SCREEN 1 — ENTRY ==================== */
#screen-entry {
  background: linear-gradient(155deg, #FDEEF3 0%, #F8D0E0 45%, #F0A0BC 80%, #E07898 100%);
  text-align: center;
}
.entry-greet {
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: var(--deep-rose);
  animation: fadeUp 1s ease 0.2s both;
}
.entry-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 700; color: var(--warm-night);
  line-height: 1.18;
  animation: fadeUp 1s ease 0.5s both;
}
.entry-h1 .hl { color: var(--deep-rose); font-style: italic; }
.entry-desc {
  max-width: 360px;
  font-size: clamp(0.88rem, 2.5vw, 1rem);
  color: var(--text-mid); line-height: 1.85;
  animation: fadeUp 1s ease 0.8s both;
}

/* ==================== SCREEN 2 — MAILBOX ==================== */
#screen-mailbox {
  background: linear-gradient(180deg, #F5EFE6 0%, #E8DDD0 100%);
  position: relative;
}

/* Ground strip */
.ground-strip {
  position: absolute;
  bottom: 28%;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(180,150,110,0.4) 20%, rgba(180,150,110,0.4) 80%, transparent);
}

/* Bicycle rider — positioned absolute in section */
.bicycle-rider {
  position: absolute;
  top: 44%;
  left: 110%; /* start off screen right */
  transform: translateY(-50%);
  font-size: 5.5rem;
  line-height: 1;
  opacity: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.bike-emoji { display: block; }
.letter-pkg {
  font-size: 1.5rem;
  position: absolute;
  top: -10px; right: 4px;
  animation: pkgWobble 0.35s ease-in-out infinite alternate;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
@keyframes pkgWobble {
  from { transform: rotate(-8deg) translateY(0); }
  to { transform: rotate(8deg) translateY(-3px); }
}

/* Mailbox centered */
.mailbox-center {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring);
  position: relative; z-index: 3;
  margin-top: 20px;
}
.mailbox-center:hover { transform: scale(1.05); }

.mb-box {
  width: 90px; height: 58px;
  background: linear-gradient(180deg, #EC8AA4, #C96480);
  border-radius: 46px 46px 8px 8px;
  position: relative;
  box-shadow: 0 6px 20px rgba(201,100,128,0.4);
  display: flex; align-items: center; justify-content: center;
}
.mb-slot {
  width: 42px; height: 6px;
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
  position: absolute; bottom: 14px;
}
.mb-flag-pole {
  position: absolute;
  right: -7px; top: 6px;
  width: 5px; height: 32px;
  background: var(--warm-night);
  border-radius: 2px;
}
.mb-flag {
  position: absolute;
  top: 0; right: -18px;
  width: 18px; height: 12px;
  background: var(--gold);
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
  transition: transform 0.6s var(--ease-spring);
}
.mb-flag.up { transform: rotate(-90deg); }

.mb-post {
  width: 12px; height: 42px;
  background: var(--warm-night);
  border-radius: 0 0 5px 5px;
}

.mb-label {
  font-family: var(--font-sans);
  font-size: 0.78rem; color: var(--text-mid);
  text-align: center; line-height: 1.5;
  margin-top: 8px;
}
.mb-hint-text { opacity: 0; transition: opacity 0.6s ease; }
.mb-hint-text.show { opacity: 1; animation: pulseHint 2s ease infinite; }

/* Mailbox section labels */
.mailbox-intro { text-align: center; }
.mailbox-intro .sec-label {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rose); display: block; margin-bottom: 6px;
}
.mailbox-intro h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  color: var(--warm-night); font-weight: 700;
}

/* Letter fly-up effect */
.letter-fly {
  position: fixed;
  pointer-events: none; z-index: 600;
  font-size: 4rem;
  animation: flyUp 0.75s var(--ease-spring) forwards;
}
@keyframes flyUp {
  0% { transform: translate(-50%, -50%) scale(0.5) rotate(-10deg); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 80px)) scale(2.2) rotate(15deg); opacity: 0; }
}

/* ==================== LETTER OVERLAY ==================== */
#letter-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10, 3, 8, 0.82);
  backdrop-filter: blur(10px);
  z-index: 700;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
#letter-overlay.open { display: flex; animation: fadeIn 0.3s ease; }

.letter-paper {
  position: relative;
  width: min(480px, 92vw);
  max-height: 84vh;
  overflow-y: auto;
  background: #FFFDF8;
  /* Ruled lines */
  background-image:
    linear-gradient(90deg, transparent 50px, rgba(220, 100, 100, 0.12) 50px, rgba(220, 100, 100, 0.12) 52px, transparent 52px),
    repeating-linear-gradient(transparent 0px, transparent 29px, rgba(100, 160, 220, 0.1) 29px, rgba(100, 160, 220, 0.1) 30px);
  border-radius: 4px;
  padding: 52px 36px 40px 60px;
  box-shadow:
    0 28px 80px rgba(0,0,0,0.4),
    0 0 0 1px rgba(232, 201, 154, 0.3);
  animation: paperUnfold 0.65s var(--ease-spring) both;
  scrollbar-width: thin; scrollbar-color: var(--pink) transparent;
}
.letter-paper::-webkit-scrollbar { width: 4px; }
.letter-paper::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 2px; }

/* Dog-ear top-right */
.letter-paper::after {
  content: '';
  position: absolute; top: 0; right: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #EBE0CE transparent transparent;
}

@keyframes paperUnfold {
  0% { transform: scaleY(0.05) scaleX(0.6); transform-origin: top center; opacity: 0; }
  55% { transform: scaleY(1.02) scaleX(1.01); }
  100% { transform: scaleY(1) scaleX(1); opacity: 1; }
}

.letter-x {
  position: absolute; top: 12px; left: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,100,128,0.3);
  background: none; color: var(--rose);
  font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.letter-x:hover { background: var(--rose); color: white; border-color: var(--rose); }

.letter-ribbon { font-size: 1.8rem; margin-bottom: 14px; display: block; }

.letter-from {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(201,100,128,0.22);
}

.letter-text {
  font-family: var(--font-script);
  font-size: 1.16rem;
  line-height: 2.05;
  color: #3A1E2A;
}
.letter-text p { margin-bottom: 14px; }
.letter-text p:last-child { margin-bottom: 0; }

.letter-sign {
  font-family: var(--font-script);
  font-size: 1.55rem; color: var(--deep-rose);
  text-align: right; margin-top: 28px;
  padding-top: 12px;
  border-top: 1px dashed rgba(201,100,128,0.18);
}

/* ==================== SCREEN 3 — TIMELINE / CHAPTERS ==================== */
#screen-timeline {
  background: #0D0510;
}

.ch-wrap {
  width: min(580px, 94vw);
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}

.ch-heading { text-align: center; }
.ch-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,167,185,0.4); display: block; margin-bottom: 6px;
}
.ch-main-title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 4vw, 2rem);
  color: rgba(255,255,255,0.9); font-style: italic;
}

/* Stage */
.ch-stage {
  width: 100%;
  height: min(370px, 54vh);
  border-radius: 22px;
  position: relative; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

.ch-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 28px 24px;
  opacity: 0; pointer-events: none;
  transform: translateX(50px);
  transition: opacity 0.45s ease, transform 0.45s var(--ease-smooth);
  text-align: center; gap: 6px;
}
.ch-card.active { opacity: 1; pointer-events: all; transform: translateX(0); z-index: 2; }
.ch-card.exit-l { opacity: 0; transform: translateX(-50px); z-index: 1; }

/* Chapter backgrounds */
.ch-wa   { background: linear-gradient(145deg, #064e3b, #065f46, #10B981 300%); }
.ch-ig   { background: linear-gradient(135deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D); }
.ch-gift { background: linear-gradient(145deg, #1A0A12, #3D1520, #8B3557); }
.ch-bike { background: linear-gradient(145deg, #1C0A00, #3D1A00, #92400E); }
.ch-beach{ background: linear-gradient(145deg, #0C4A6E, #0369A1, #0EA5E9, #38BDF8 250%); }
.ch-photo{ background: linear-gradient(145deg, #1C1917, #292524, #44403C); }
.ch-miss { background: linear-gradient(145deg, #0F0F2E, #1E1B4B, #312E81); }
.ch-call { background: linear-gradient(145deg, #0A0F1E, #0F172A, #1E3A5F); }
.ch-hug  { background: linear-gradient(145deg, #450A25, #881337, #C96480); }
.ch-baby { background: linear-gradient(145deg, #431407, #7C2D12, #C2570E); }

.ch-date-lbl {
  font-size: 0.65rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.ch-icon { font-size: 3.8rem; line-height: 1; }
.ch-title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 4vw, 1.7rem);
  font-weight: 700; color: white; line-height: 1.2;
}
.ch-caption {
  font-size: clamp(0.8rem, 2.5vw, 0.92rem);
  color: rgba(255,255,255,0.65); line-height: 1.75;
  max-width: 340px;
}
.ch-caption em { color: white; font-style: normal; }

/* WhatsApp chat preview */
.wa-chat {
  display: flex; flex-direction: column;
  gap: 6px; width: 100%; max-width: 280px;
  margin-bottom: 8px;
}
.wa-bubble {
  padding: 8px 13px; border-radius: 12px;
  font-size: 0.8rem; max-width: 220px;
}
.wa-recv { background: #DCF8C6; color: #111; border-radius: 4px 12px 12px 12px; align-self: flex-start; }
.wa-sent { background: rgba(255,255,255,0.15); color: white; border-radius: 12px 4px 12px 12px; align-self: flex-end; }
.wa-time { font-size: 0.6rem; opacity: 0.55; text-align: right; margin-top: 2px; }

/* Instagram notification */
.ig-card {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; width: 100%; max-width: 280px;
}
.ig-av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #E1306C, #833AB4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.ig-info { text-align: left; }
.ig-info strong { color: white; font-size: 0.83rem; display: block; }
.ig-info small { color: rgba(255,255,255,0.7); font-size: 0.75rem; }

.ig-reel-link { text-decoration: none; display: block; flex-shrink: 0; }
.ig-reel-thumb {
  width: 50px; height: 75px;
  background: linear-gradient(135deg, #E1306C, #833AB4);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: white;
  transition: transform 0.3s var(--ease-spring);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ig-reel-link:hover .ig-reel-thumb { transform: scale(1.1) rotate(2deg); }

/* Call screen */
.call-ui {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 18px 22px;
  text-align: center; margin-bottom: 8px;
}
.call-timer {
  font-size: 2.2rem; font-weight: 300;
  color: #4ADE80; letter-spacing: 0.06em;
}
.call-name { color: white; font-size: 0.88rem; margin: 3px 0; }
.call-status { font-size: 0.7rem; color: rgba(255,255,255,0.35); }

/* Chapter nav */
.ch-nav {
  display: flex; align-items: center;
  justify-content: center; gap: 18px;
}
.ch-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: white; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.ch-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); transform: scale(1.08); }
.ch-count { font-size: 0.75rem; color: rgba(255,255,255,0.38); letter-spacing: 0.1em; }

.ch-pip-row {
  display: flex; gap: 6px; justify-content: center;
}
.ch-pip {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
}
.ch-pip.on { background: var(--pink); transform: scale(1.4); }

/* ==================== SCREEN 4 — FLOWERS ==================== */
#screen-flowers {
  background: linear-gradient(160deg, #EEF7F1, #D8EDE0, #B5D5C5);
}
.shop-badge {
  background: var(--warm-night); color: var(--gold);
  font-family: var(--font-serif); font-size: 0.88rem; font-weight: 700;
  padding: 6px 18px; border-radius: 6px; letter-spacing: 0.04em;
  display: inline-block;
}
.flowers-head { text-align: center; }
.flowers-head .s-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 700; color: #2D4A3E; line-height: 1.25; }
.flowers-head .s-sub { color: #4A7A6A; font-size: 0.85rem; margin-top: 4px; }

.flower-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; width: 100%; max-width: 440px;
}
.flower-tile {
  background: white; border-radius: 16px;
  padding: 18px 10px; text-align: center;
  cursor: pointer; transition: var(--transition);
  border: 2px solid transparent;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
}
.flower-tile:hover { transform: translateY(-6px); border-color: var(--pink); box-shadow: 0 10px 28px rgba(0,0,0,0.1); }
.flower-tile.on { border-color: var(--rose); background: linear-gradient(180deg, #FFF0F5, white); }
.flower-tile .fe { font-size: 2.5rem; display: block; margin-bottom: 7px; transition: transform 0.35s var(--ease-spring); }
.flower-tile:hover .fe, .flower-tile.on .fe { transform: scale(1.22) rotate(-8deg); }
.flower-tile .fn { font-family: var(--font-serif); font-size: 0.85rem; color: var(--text-dark); }
.flower-tile .fh { font-size: 0.7rem; color: var(--text-mid); line-height: 1.4; margin-top: 2px; }

.bouquet-area { text-align: center; min-height: 70px; }
.bouquet-emojis { font-size: 2rem; letter-spacing: 4px; min-height: 36px; }
.bouquet-msg {
  font-family: var(--font-script); font-size: 1.05rem;
  color: #2D4A3E; max-width: 300px;
  line-height: 1.7; opacity: 0;
  transition: opacity 0.6s ease; margin: 0 auto;
}
.bouquet-msg.show { opacity: 1; }
.florist-tag { font-size: 0.72rem; color: rgba(45,74,62,0.5); font-style: italic; margin-top: 4px; }

/* ==================== SCREEN 5 — MENU ==================== */
#screen-menu { background: linear-gradient(180deg, #FFF8F0, #FEECD9); }
.sec-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); }
.sec-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 700; color: var(--warm-night); text-align: center; line-height: 1.25; }

.menu-card {
  max-width: 420px; width: 100%;
  background: white; border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.1); overflow: hidden;
}
.menu-hd {
  background: linear-gradient(160deg, var(--warm-night), var(--warm-dark));
  padding: 22px 26px; text-align: center;
}
.menu-rname { font-family: var(--font-serif); font-size: 1.45rem; color: var(--gold); }
.menu-rtag { font-size: 0.7rem; color: rgba(255,255,255,0.38); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }
.menu-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 20px; cursor: pointer;
  border-bottom: 1px solid rgba(244,167,185,0.12);
  transition: background 0.22s;
}
.menu-row:hover { background: #FFF5F0; }
.menu-row.ordered { background: linear-gradient(90deg, #FFF0F5, #FFF8F0); }
.menu-row .me { font-size: 1.55rem; min-width: 34px; text-align: center; }
.menu-row .mi { flex: 1; }
.menu-row .mn { font-family: var(--font-serif); font-size: 0.92rem; color: var(--text-dark); }
.menu-row .md { font-size: 0.73rem; color: var(--text-mid); margin-top: 1px; }
.menu-chk {
  width: 25px; height: 25px; border-radius: 50%;
  border: 1.5px solid var(--petal);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; flex-shrink: 0; transition: var(--transition);
}
.menu-row.ordered .menu-chk { background: var(--rose); border-color: var(--rose); color: white; }
.menu-ft {
  padding: 14px 20px; border-top: 1px solid rgba(244,167,185,0.22);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.menu-total-lbl { font-size: 0.85rem; color: var(--text-mid); }
.menu-total-lbl span { display: block; font-size: 0.7rem; color: var(--rose); margin-top: 1px; }
.menu-place-btn {
  padding: 10px 22px; background: var(--warm-night); color: var(--gold);
  font-size: 0.83rem; font-weight: 500; border: none; border-radius: 60px;
  transition: var(--transition);
}
.menu-place-btn:hover { background: var(--deep-rose); color: white; transform: translateY(-2px); }
.menu-confirm {
  display: none; text-align: center;
  padding: 26px 18px; font-family: var(--font-script);
  font-size: 1.08rem; color: var(--deep-rose);
  line-height: 1.85; animation: fadeIn 0.4s ease;
}
.menu-confirm.show { display: block; }

/* ==================== SCREEN 6 — CAMERA ROLL ==================== */
#screen-camera { background: linear-gradient(155deg, #FFF5F0, #FDEFC9); overflow: hidden; }

.cam-sub { font-size: 0.85rem; color: var(--text-mid); text-align: center; margin-bottom: 20px; font-style: italic; }

.camera-ui {
  position: relative;
  width: 100%; max-width: 400px;
  background: #FFF;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 15px 45px rgba(0,0,0,0.1), inset 0 0 0 4px #F0E8DF;
  display: flex; flex-direction: column; gap: 12px;
}

.cam-viewfinder {
  position: relative;
  width: 100%; aspect-ratio: 4/5;
  background: #2D1420;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 5px 20px rgba(0,0,0,0.5);
}

.cam-focus-ring {
  position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,0.15);
  margin: 10%;
  pointer-events: none;
  z-index: 10;
}
.cam-focus-ring::before, .cam-focus-ring::after {
  content: ''; position: absolute;
  width: 15px; height: 15px;
  border: 1px solid rgba(255,255,255,0.4);
}
.cam-focus-ring::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.cam-focus-ring::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.cam-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; transform: scale(1.05);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-spring);
  z-index: 1;
}
.cam-scene.active { opacity: 1; transform: scale(1); z-index: 2; }

.scene-txt {
  position: absolute; bottom: 20px;
  width: 85%; text-align: center;
  font-family: var(--font-script);
  font-size: 1.1rem; color: #FFF;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Scene: Sync */
#scene-sync { background: #3B2A36; }
.sync-items { display: flex; gap: 20px; margin-bottom: 20px; }
.sync-item { background: rgba(255,255,255,0.1); padding: 12px 18px; border-radius: 12px; font-size: 1.2rem; color: #FFF; opacity: 0; transition: opacity 0.5s ease; }
.sync-bubbles { display: flex; flex-direction: column; gap: 10px; width: 80%; }
.bubble { padding: 10px 16px; border-radius: 20px; font-family: var(--font-sans); font-size: 0.9rem; opacity: 0; transition: opacity 0.5s ease; }
.bubble.left { background: var(--pink); color: #FFF; align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.right { background: #E5E5EA; color: #000; align-self: flex-end; border-bottom-right-radius: 4px; }
.scene-txt { opacity: 0; transition: opacity 0.5s ease; }
.cam-scene.active .scene-txt { opacity: 1; }
#scene-sync .scene-txt { opacity: 0; }

/* Sync Reveal Classes */
#scene-sync.rev-1 .phone-item { opacity: 1; }
#scene-sync.rev-2 .lap-item { opacity: 1; }
#scene-sync.rev-3 .bubble { opacity: 1; }
#scene-sync.rev-3 .scene-txt { opacity: 1 !important; }


/* Scene: Beach Heart */
#scene-beach { background: linear-gradient(180deg, #87CEEB, #F0DBA8); }
.heart-cloud { font-size: 4rem; filter: drop-shadow(0 5px 15px rgba(255,255,255,0.8)); animation: floatCloud 4s ease-in-out infinite; }
@keyframes floatCloud { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } }

/* Scene: Sunset */
#scene-sunset { background: linear-gradient(135deg, #FF7E5F, #FEB47B, #86A8E7, #91EAE4); background-size: 300% 300%; animation: sunsetSky 8s ease infinite; }
@keyframes sunsetSky { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Scene: Burger */
#scene-burger { background: #FDEFC9; }
.burger-scene { font-size: 3.5rem; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15)); animation: floatBurger 3s ease-in-out infinite; }
@keyframes floatBurger { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Scene: Bathtub */
#scene-bathtub { background: linear-gradient(180deg, #E0F7FA, #B2EBF2); }
.bubbles-bg { font-size: 3rem; animation: floatBubbles 4s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); }
@keyframes floatBubbles { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.1); } }

/* Scene: Fireworks */
#scene-fireworks { background: #1A0A12; overflow: hidden; }
.fireworks-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(244,167,185,0.25) 0%, transparent 60%); animation: pulseFW 2s ease infinite; }
@keyframes pulseFW { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.fw-particle {
  position: absolute; font-size: 3rem; opacity: 0;
  animation: fwShoot 2s ease-out infinite;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.8));
}
.fw-1 { left: 20%; top: 30%; animation-delay: 0s; }
.fw-2 { left: 70%; top: 20%; animation-delay: 0.7s; font-size: 3.5rem; }
.fw-3 { left: 45%; top: 40%; animation-delay: 1.3s; font-size: 2.5rem; }
@keyframes fwShoot {
  0% { transform: translateY(100px) scale(0.1); opacity: 0; }
  30% { transform: translateY(0) scale(1); opacity: 1; }
  60% { transform: translateY(-10px) scale(1.1); opacity: 0; }
  100% { opacity: 0; }
}

/* Scene: Butterflies */
#scene-butterflies { background: #FFF5F0; overflow: hidden; }
.butterflies-cont { position: absolute; inset: 0; pointer-events: none; }
.bfly { position: absolute; font-size: 2rem; animation: flyBfly 6s ease-in-out forwards; opacity: 0; }
@keyframes flyBfly { 
  0% { transform: translate(-20px, 150px) rotate(-15deg); opacity: 0; } 
  20% { opacity: 1; } 
  80% { opacity: 1; } 
  100% { transform: translate(180px, -50px) rotate(25deg); opacity: 0; } 
}

/* Flash effect */
.cam-flash {
  position: absolute; inset: 0;
  background: #FFF; opacity: 0;
  pointer-events: none; z-index: 20;
}
.cam-flash.fire { animation: flashFire 0.4s ease-out; }
@keyframes flashFire { 0% { opacity: 1; } 100% { opacity: 0; } }

.cam-controls { display: flex; justify-content: center; padding: 10px 0; }
.cam-shutter {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 3px solid #D1C4B8;
  background: #FFF;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.15s ease;
}
.cam-shutter:active { transform: scale(0.92); }
.shutter-inner {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0E8DF, #D1C4B8);
}

.cam-cat {
  position: absolute; right: 20px; top: -16px;
  font-size: 2rem; transform: rotate(10deg);
  animation: sleepCat 3s ease-in-out infinite;
  z-index: 30;
}
@keyframes sleepCat { 0%, 100% { transform: rotate(10deg) scale(1); } 50% { transform: rotate(12deg) scale(1.05); } }

/* ==================== SCREEN 8 — DREAMS ==================== */
#screen-dreams { background: linear-gradient(155deg, #F5F0E8, #EDE5D0); }
.dreams-head { text-align: center; }

.corkboard {
  width: 100%; max-width: 620px;
  background: #C89040;
  border-radius: 14px; padding: 26px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 15px;
}
.pin-note {
  background: white; border-radius: 3px;
  padding: 16px 13px 13px;
  box-shadow: 3px 4px 10px rgba(0,0,0,0.18);
  position: relative; transition: var(--transition);
  cursor: pointer; opacity: 0; transform-origin: top center;
}
.pin-note.dropped { animation: pinDrop 0.55s var(--ease-spring) forwards; }
@keyframes pinDrop {
  from { transform: translateY(-40px) rotate(var(--rot, 0deg)); opacity: 0; }
  to { transform: translateY(0) rotate(var(--rot, 0deg)); opacity: 1; }
}
.pin-note:hover { transform: rotate(0deg) scale(1.06) !important; z-index: 10; box-shadow: 5px 7px 20px rgba(0,0,0,0.22); }
.pin-head { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FF6B6B, #C0392B); box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.pin-icon { font-size: 1.35rem; display: block; margin-bottom: 6px; }
.pin-text { font-family: var(--font-sans); font-size: 0.76rem; color: var(--text-dark); line-height: 1.5; }
.pin-photo { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--petal), var(--pink)); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--deep-rose); text-align: center; font-style: italic; overflow: hidden; }
.pin-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==================== SCREEN 9 — FINAL ==================== */
#screen-final {
  background: radial-gradient(ellipse at 50% 60%, #2A0E1C, #0D0508);
}
#screen-final::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(201,100,128,0.06) 0%, transparent 65%);
}
.final-lines {
  max-width: 500px; text-align: center;
  position: relative; z-index: 2;
}
.f-line {
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 3vw, 1.15rem);
  color: rgba(255,245,240,0.72);
  line-height: 2.05; font-style: italic; opacity: 0;
}
.f-line.in { opacity: 1; animation: fadeIn 0.9s ease forwards; }
.f-line.hl { color: var(--pink); font-size: clamp(1rem, 3.5vw, 1.35rem); }
.f-br { display: block; height: 18px; }

.final-cta {
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
  opacity: 0; transition: opacity 1s ease;
  position: relative; z-index: 2;
}
.final-cta.show { opacity: 1; }
.final-q {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  color: var(--cream); text-align: center;
  font-style: italic; line-height: 1.55;
}
.final-yes {
  padding: 18px 52px;
  background: linear-gradient(135deg, var(--rose), var(--deep-rose));
  color: white; font-size: 1rem; font-weight: 600;
  letter-spacing: 0.04em; border: none; border-radius: 60px;
  transition: var(--transition);
  animation: finalGlow 2.8s ease infinite;
}
@keyframes finalGlow {
  0%,100% { box-shadow: 0 8px 32px rgba(201,100,128,0.4); }
  50% { box-shadow: 0 8px 48px rgba(201,100,128,0.7), 0 0 80px rgba(244,167,185,0.12); }
}
.final-yes:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 48px rgba(201,100,128,0.6); }
.final-ans { display: none; text-align: center; }
.final-ans.show { display: block; animation: fadeUp 0.8s var(--ease-spring); }
.final-ans-txt {
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 4.5vw, 1.9rem);
  color: var(--pink); line-height: 1.7; margin-bottom: 12px;
}
.final-ans-sub { font-size: 0.83rem; color: rgba(255,245,240,0.35); font-style: italic; }

/* ==================== CONFETTI ==================== */
#confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 900; display: none; }
.cfetti { position: absolute; top: -10px; animation: cfettiFall linear forwards; }
@keyframes cfettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(1080deg); opacity: 0; } }

/* ==================== TOAST ==================== */
.toast {
  position: fixed; bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--warm-night); color: var(--cream);
  padding: 10px 24px; border-radius: 60px;
  font-size: 0.83rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 1000; transition: transform 0.4s var(--ease-spring);
  white-space: nowrap;
}
.toast.up { transform: translateX(-50%) translateY(0); }

/* ==================== UTILITY ANIMATIONS ==================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseHint { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ==================== MOBILE ==================== */
@media (max-width: 600px) {
  .section { padding: 36px 16px 80px; gap: 16px; }
  .flower-grid { gap: 9px; }
  .flower-tile { padding: 14px 7px; }
  .flower-tile .fe { font-size: 2.2rem; }
  .corkboard { grid-template-columns: 1fr 1fr; padding: 18px 14px; gap: 12px; }
  .mem-grid { grid-template-columns: 1fr; }
  .qcard { padding: 22px 16px; }
  .letter-paper { padding: 44px 24px 32px 48px; }
  .ch-stage { height: min(320px, 48vh); }
  .ch-icon { font-size: 3rem; }
  .ch-title { font-size: 1.2rem; }
  .bicycle-rider { font-size: 4rem; }
}

/* ==========================================================
   ENTRY SCREEN — TYPEWRITER + FLOATING WORDS
   ========================================================== */

#screen-entry { overflow: hidden; }

#entry-words-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.entry-word {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--pink);
  opacity: 0;
  pointer-events: none;
  animation: wordFloat var(--dur, 9s) ease forwards;
  white-space: nowrap;
  will-change: transform, opacity;
}
@keyframes wordFloat {
  0%   { opacity: 0;    transform: translateY(0); }
  8%   { opacity: 0.25; }
  78%  { opacity: 0.17; }
  100% { opacity: 0;    transform: translateY(-55vh); }
}

.entry-type-area {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.12em;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  pointer-events: none;
}

.entry-type-line {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  color: var(--cream);
  letter-spacing: 0.015em;
  min-height: 1.65em;
  line-height: 1.65;
  opacity: 0;
  transition: opacity 0.38s ease;
}
.entry-type-line.vis { opacity: 1; }

.etl-bro {
  font-size: clamp(3rem, 9vw, 6rem) !important;
  color: var(--pink) !important;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.05 !important;
}

.entry-type-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: var(--pink);
  margin-left: 2px;
  vertical-align: middle;
  animation: cursorBlink 0.72s ease infinite;
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.entry-main {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s ease, transform 0.85s var(--ease-spring);
  text-align: center;
  padding: 2rem;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.entry-main.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==========================================================
   FINAL SCREEN — WHATSAPP CONVERSATION UI
   ========================================================== */

.wa-convo {
  width: min(400px, 90vw);
  margin: 0 auto 20px;
  border-radius: 16px;
  overflow: hidden;
  background: #111b21;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.wa-header {
  background: #202c33;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wa-avatar-s {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--rose); color: white;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wa-avatar-r {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--deep-rose); color: white;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wa-hinfo { flex: 1; }
.wa-hname  { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; color: #e9edef; margin: 0; }
.wa-hstatus{ font-family: var(--font-sans); font-size: 0.7rem; color: #8696a0; margin: 0; }
.wa-dots   { font-size: 1.2rem; color: #8696a0; }

.wa-sent-msg, .wa-recv-msg, .wa-typing-row, .wa-reply-area {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s var(--ease-spring);
}
.wa-sent-msg { justify-content: flex-end; }
.wa-sent-msg.show, .wa-recv-msg.show,
.wa-typing-row.show, .wa-reply-area.show {
  opacity: 1; transform: translateY(0);
}

.wa-bubble-s {
  background: #005c4b; color: #e9edef;
  padding: 10px 14px;
  border-radius: 12px 12px 4px 12px;
  max-width: 80%;
  font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.55;
}
.wa-bubble-s p { margin: 0 0 4px; }

.wa-bubble-r {
  background: #202c33; color: #e9edef;
  padding: 10px 14px;
  border-radius: 12px 12px 12px 4px;
  max-width: 80%;
  font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.55;
}
.wa-bubble-r p { margin: 0 0 4px; }

.wa-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; }
.wa-time  { font-size: 0.62rem; color: rgba(233,237,239,0.5); font-family: var(--font-sans); }
.wa-ticks {
  font-size: 0.72rem; color: rgba(233,237,239,0.5);
  letter-spacing: -1.5px; transition: color 0.45s ease;
}
.wa-ticks.delivered { color: rgba(233,237,239,0.85); }
.wa-ticks.read      { color: #53bdeb; }

.wa-typing-bubble {
  background: #202c33; padding: 12px 16px;
  border-radius: 12px 12px 12px 4px;
}
.wa-typing-dots { display: flex; gap: 4px; align-items: center; height: 14px; }
.wa-typing-dots i {
  display: block; width: 6px; height: 6px;
  background: #8696a0; border-radius: 50%;
  animation: waDot 1.3s ease infinite;
}
.wa-typing-dots i:nth-child(2) { animation-delay: 0.22s; }
.wa-typing-dots i:nth-child(3) { animation-delay: 0.44s; }
@keyframes waDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

.wa-yes-btn {
  background: #005c4b;
  border: none; border-radius: 24px;
  padding: 10px 28px; color: #e9edef;
  font-family: var(--font-sans); font-size: 1rem;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s var(--ease-spring);
}
.wa-yes-btn:hover  { background: #128c7e; transform: scale(1.05); }
.wa-yes-btn:active { transform: scale(0.96); }

#final-ans {
  padding: 18px 24px 22px;
  text-align: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease-spring);
}
#final-ans.show { opacity: 1; transform: translateY(0); }

.final-ans-txt {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--cream); line-height: 1.7; margin-bottom: 10px;
}
.final-ans-sub {
  font-family: var(--font-sans);
  font-size: 0.75rem; color: var(--text-mid); letter-spacing: 0.08em;
}