/* ═══════════════════════════════════════════════════════════
   🎀  Birthday Website — style.css
   Theme: Modern Minimalist Hello Kitty (Pink · White · Gold)
   ═══════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ────────────────────────────────────────── */
:root {
  --pink:       #FF8FB1;
  --pink-light: #FFD6E7;
  --pink-dark:  #E05C8A;
  --gold:       #D4AF37;
  --gold-light: #F5E27A;
  --gold-dark:  #A07820;
  --white:      #FFFAF8;
  --cream:      #FFF0F5;
  --forest-dk:  #1B5E20;
  --forest-md:  #2E7D32;
  --forest-lt:  #388E3C;
  --forest-pl:  #43A047;
  --forest-pal: #66BB6A;
  --grass:      #4CAF50;
  --sky-top:    #87CEEB;
  --sky-bot:    #B8E4FF;
  --sun-col:    #FFD54F;
  --wood-dk:    #5D4037;
  --wood-md:    #795548;
  --wood-lt:    #A1887F;
  --room-wall:  #FFF3E0;
  --room-floor: #D7AE7A;
  --warm-amber: rgba(255,180,50,0.12);
  --r: .5rem; --r-lg: 1.5rem; --r-xl: 2rem;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Sarabun', sans-serif;
  background: #000;
  overflow: hidden;
  width: 100vw; height: 100vh;
}

/* ── SCENE BASE ───────────────────────────────────────────── */
.scene {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  transition: opacity .6s ease;
}
.hidden { display: none !important; }
.overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.overlay.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════
   🌲  SCENE 1 — LUSH FOREST
   ══════════════════════════════════════════════════════════ */

/* SKY */
.sky {
  position: absolute; inset: 0; height: 62%;
  background: linear-gradient(175deg, #5BB8F5 0%, #87CEEB 40%, #B8E4FF 70%, #d4f0ff 100%);
  overflow: hidden;
}

/* SUN */
.sun {
  position: absolute; top: 8%; left: 12%;
  width: clamp(70px,10vw,120px); height: clamp(70px,10vw,120px);
  animation: sunPulse 4s ease-in-out infinite;
}
.sun-core {
  position: absolute; inset: 18%;
  background: radial-gradient(circle, #FFE082 40%, #FFD54F 100%);
  border-radius: 50%;
  box-shadow: 0 0 30px 12px rgba(255,213,79,.5);
}
.sun-ray-ring {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0deg, #FFE082 5deg, transparent 10deg,
    transparent 30deg, #FFE082 35deg, transparent 40deg,
    transparent 60deg, #FFE082 65deg, transparent 70deg,
    transparent 90deg, #FFE082 95deg, transparent 100deg,
    transparent 120deg,#FFE082 125deg,transparent 130deg,
    transparent 150deg,#FFE082 155deg,transparent 160deg,
    transparent 180deg,#FFE082 185deg,transparent 190deg,
    transparent 210deg,#FFE082 215deg,transparent 220deg,
    transparent 240deg,#FFE082 245deg,transparent 250deg,
    transparent 270deg,#FFE082 275deg,transparent 280deg,
    transparent 300deg,#FFE082 305deg,transparent 310deg,
    transparent 330deg,#FFE082 335deg,transparent 340deg,
    transparent 360deg
  );
  animation: spinSun 20s linear infinite;
}
.sun-glow {
  position: absolute; inset: -30%;
  background: radial-gradient(circle, rgba(255,224,130,.18) 40%, transparent 70%);
  border-radius: 50%;
}
@keyframes sunPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes spinSun  { to{transform:rotate(360deg)} }

/* LIGHT BEAMS */
.beam {
  position: absolute; top: 0;
  width: 3%; height: 85%;
  background: linear-gradient(180deg, rgba(255,255,220,.25) 0%, transparent 100%);
  transform-origin: top center;
  animation: beamSway 6s ease-in-out infinite;
}
.beam-1 { left: 18%; transform: rotate(-12deg); animation-delay: 0s; }
.beam-2 { left: 35%; transform: rotate(-5deg);  animation-delay: 1s; }
.beam-3 { left: 55%; transform: rotate(8deg);   animation-delay: 2s; }
@keyframes beamSway { 0%,100%{opacity:.4} 50%{opacity:.7} }

/* CLOUDS */
.cloud { position: absolute; animation: cloudDrift linear infinite; }
.cloud-a { top: 10%; left: -20%; width: 160px; animation-duration: 40s; animation-delay: -5s; }
.cloud-b { top: 18%; left: -30%; width: 120px; animation-duration: 55s; animation-delay:-20s; }
.cloud-c { top:  6%; left: -15%; width: 100px; animation-duration: 70s; animation-delay:-35s; }
@keyframes cloudDrift { to { transform: translateX(130vw); } }
.c-puff {
  position: absolute;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
}
.cloud-a .cp-1 { width:60px;height:52px; top:0; left:40px; }
.cloud-a .cp-2 { width:80px;height:60px; top:12px;left:50px; }
.cloud-a .cp-3 { width:50px;height:42px; top:4px; left:95px; }
.cloud-a .c-base{ position:absolute; width:140px;height:40px; bottom:0; left:10px; background:rgba(255,255,255,.85); border-radius:24px; }
.cloud-b .cp-1 { width:45px;height:40px; top:0; left:30px; }
.cloud-b .cp-2 { width:60px;height:46px; top:8px;left:38px; }
.cloud-b .cp-3 { width:38px;height:34px; top:2px;left:70px; }
.cloud-b .c-base{ position:absolute; width:105px;height:32px; bottom:0; left:8px; background:rgba(255,255,255,.85); border-radius:20px; }
.cloud-c .cp-1 { width:38px;height:34px; top:0; left:22px; }
.cloud-c .cp-2 { width:50px;height:40px; top:6px;left:28px; }
.cloud-c .c-base{ position:absolute; width:88px;height:28px; bottom:0; left:6px; background:rgba(255,255,255,.85); border-radius:18px; }

/* HILLS */
.hills { position:absolute; bottom:35%; left:0; width:100%; height:28%; }
.hill {
  position:absolute; bottom:0;
  border-radius:50% 50% 0 0;
  background: var(--forest-dk);
}
.h1 { width:55%; height:90%; left:-5%; background: linear-gradient(180deg,#2E7D32,#1B5E20); }
.h2 { width:48%; height:80%; right:-3%; background: linear-gradient(180deg,#388E3C,#2E7D32); }
.h3 { width:35%; height:70%; left:30%; background: linear-gradient(180deg,#43A047,#2E7D32); }

/* TREE LAYERS */
.tree-layer { position:absolute; width:100%; bottom:28%; }
.layer-back  { bottom:32%; }
.layer-front { bottom:18%; }

.tree {
  position:absolute; bottom:0;
  left: var(--tx);
  display:flex; flex-direction:column; align-items:center;
  animation: treeSway 4s ease-in-out infinite;
  transform-origin: bottom center;
}
.tree:nth-child(odd)  { animation-direction: alternate; }
.tree:nth-child(even) { animation-delay:.7s; }
@keyframes treeSway { 0%,100%{transform:rotate(-.6deg)} 50%{transform:rotate(.6deg)} }

/* Tree sizes */
.t-sm  .foliage { --fw:44px; --fh:38px; }
.t-sm  .trunk   { width:10px;height:26px; }
.t-md  .foliage { --fw:64px; --fh:54px; }
.t-md  .trunk   { width:14px;height:36px; }
.t-lg  .foliage { --fw:88px; --fh:72px; }
.t-lg  .trunk   { width:18px;height:52px; }
.t-xl  .foliage { --fw:110px;--fh:88px; }
.t-xl  .trunk   { width:22px;height:64px; }

/* Foliage tiers */
.foliage {
  width: var(--fw,60px); height: var(--fh,50px);
  background: radial-gradient(ellipse at 50% 30%, #66BB6A 0%, #388E3C 60%, #2E7D32 100%);
  border-radius: 50% 50% 40% 40%;
  margin-bottom:-14px;
  position:relative; z-index:2;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));
}
.ftop { transform:scale(.75); z-index:3; }
.fmid { transform:scale(1);   z-index:2; }
.fbot { transform:scale(1.2); z-index:1; }
.trunk,.trunklg {
  background: linear-gradient(90deg,#6D4C41,#5D4037 50%,#795548);
  border-radius:3px 3px 0 0;
  z-index:1;
}
.trunklg { width:22px!important; height:72px!important; }

/* Layer-back trees smaller */
.layer-back .foliage { filter: brightness(.82) saturate(.9); }
.layer-back .tree    { transform:scale(.72); transform-origin:bottom center; }

/* GROUND */
.ground-layer { position:absolute; bottom:0; left:0; width:100%; height:36%; }
.grass-top {
  position:absolute; top:0; left:0; width:100%; height:38px;
  background: linear-gradient(180deg,#6ABF69 0%,#57A055 100%);
  border-radius:60% 60% 0 0 / 40% 40% 0 0;
}
.ground-fill {
  position:absolute; top:22px; left:0; width:100%; bottom:0;
  background: linear-gradient(180deg,#57A055 0%,#4CAF50 30%,#3d9142 100%);
}

/* FLOWERS */
.flowers-row { position:absolute; top:0; left:0; width:100%; height:100%; }
.flower {
  position:absolute; bottom:28px; left:var(--fx);
  display:flex; flex-direction:column; align-items:center;
  animation: flowerSway 3s ease-in-out infinite;
  transform-origin: bottom center;
}
.flower:nth-child(even) { animation-delay:1s; }
@keyframes flowerSway { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
.f-bloom {
  width:14px; height:14px; border-radius:50%;
  position:relative;
}
.f-bloom::before,.f-bloom::after {
  content:''; position:absolute; border-radius:50%;
  width:8px; height:8px;
}
.f-bloom.yellow { background:#FFD54F; box-shadow:0 0 0 5px #FFF176; }
.f-bloom.pink   { background:#F48FB1; box-shadow:0 0 0 5px #FCE4EC; }
.f-bloom.white  { background:#fff;    box-shadow:0 0 0 5px #f3f3f3; }
.f-stem { width:2px; height:22px; background:#4CAF50; }

/* BUTTERFLIES */
.butterfly {
  position:absolute;
  animation: bfFly 12s ease-in-out infinite;
}
.bf-1 { top:38%; left:25%; animation-delay:0s; }
.bf-2 { top:44%; left:65%; animation-delay:-5s; }
@keyframes bfFly {
  0%   { transform:translate(0,0)    rotate(0deg); }
  25%  { transform:translate(40px,-30px) rotate(15deg); }
  50%  { transform:translate(80px,0)  rotate(0deg); }
  75%  { transform:translate(40px,30px) rotate(-15deg); }
  100% { transform:translate(0,0)    rotate(0deg); }
}
.bw {
  width:16px; height:10px; background:#64B5F6;
  border-radius:50%; display:inline-block;
  animation: bfFlap .3s ease-in-out infinite alternate;
}
.bwl { transform-origin:right center; }
.bwr { transform-origin:left  center; margin-left:-4px; }
@keyframes bfFlap { to { transform:scaleY(.25); } }

/* ═══════════════════════════════════════════════════════
   👩  MOM CHARACTER (FOREST SCENE)
   ═══════════════════════════════════════════════════════ */
.mom-wrap {
  position:absolute;
  bottom:26%; left:clamp(30%,38%,42%);
  transform:translateX(-50%);
  z-index:20;
}
.mom-char { position:relative; display:flex; flex-direction:column; align-items:center; }

/* Hair back */
.m-hair-back {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:clamp(38px,5.8vw,56px); height:clamp(52px,7.5vw,72px);
  background: linear-gradient(180deg,#5D4037,#3E2723);
  border-radius:50% 50% 30% 30%;
  z-index:1;
}
/* Head */
.m-head {
  position:relative; z-index:3;
  width:clamp(44px,6.5vw,62px); height:clamp(42px,6.2vw,60px);
  background: linear-gradient(160deg,#FFCCBC,#FFAB91);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
/* Kitty Bow */
.kitty-bow {
  position:absolute; top:-14px; right:-4px;
  display:flex; align-items:center; gap:2px;
  z-index:5;
}
.kb-wing {
  width:12px; height:9px;
  background: linear-gradient(135deg,#FF8FB1,#FF6B9D);
  border-radius:50%;
  transform:rotate(-30deg);
}
.kbr { transform:rotate(30deg); }
.kb-knot {
  width:7px; height:7px;
  background:#FFB8D0;
  border-radius:50%;
  border:1.5px solid #FF8FB1;
}
.kb-sm .kb-wing { width:9px; height:7px; }
.kb-sm .kb-knot { width:5px; height:5px; }

/* Face */
.m-face { position:relative; width:100%; height:100%; }
.m-eye {
  position:absolute; top:36%; width:6px; height:7px;
  background:#333; border-radius:50%;
}
.mel { left:28%; }
.mer { right:28%; }
.m-blush {
  position:absolute; top:52%; width:10px; height:6px;
  background:rgba(255,100,120,.35); border-radius:50%;
}
.mbl { left:15%; }
.mbr { right:15%; }
.m-smile {
  position:absolute; bottom:22%; left:50%; transform:translateX(-50%);
  width:14px; height:8px;
  border-bottom:2.5px solid #E57373; border-radius:0 0 10px 10px;
}
/* Hair front bangs */
.m-hair-front {
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  width:105%; height:38%;
  background: linear-gradient(180deg,#5D4037 0%,#4E342E 80%);
  border-radius:40% 40% 30% 30%;
  z-index:4;
}

/* Body */
.m-body {
  position:relative; z-index:2;
  width:clamp(30px,4.5vw,44px); height:clamp(36px,5.2vw,50px);
  background: linear-gradient(160deg,#FCE4EC,#F8BBD0);
  border-radius:8px 8px 6px 6px;
  margin-top:-4px;
}
.m-collar {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:40%; height:35%;
  background:#fff;
  border-radius:0 0 6px 6px;
}
/* Arms */
.m-arm {
  position:absolute; top:6px;
  width:clamp(8px,1.2vw,12px); height:clamp(28px,4vw,38px);
  background: linear-gradient(180deg,#FFCCBC,#FFAB91);
  border-radius:8px;
}
.m-arm-r {
  right:-10px;
  transform-origin:top center;
  animation: waveArm 1.2s ease-in-out infinite;
}
.m-arm-l { left:-10px; transform:rotate(12deg); }
@keyframes waveArm {
  0%,100%{transform:rotate(-30deg)} 50%{transform:rotate(20deg)}
}

/* Skirt */
.m-skirt {
  width:clamp(36px,5.5vw,52px); height:clamp(28px,4vw,38px);
  background: linear-gradient(160deg,#FF8FB1,#FF6B9D);
  border-radius:4px 4px 16px 16px;
  clip-path:polygon(0 0,100% 0,115% 100%,-15% 100%);
  margin-top:-2px; z-index:2;
}

/* Legs */
.m-legs { display:flex; gap:6px; z-index:2; }
.m-leg {
  display:flex; flex-direction:column; align-items:center;
  width:clamp(10px,1.4vw,14px); height:clamp(26px,3.8vw,36px);
  background:linear-gradient(180deg,#FFCCBC,#FFAB91);
  border-radius:4px;
}
.m-shoe {
  width:clamp(14px,2.2vw,20px); height:clamp(8px,1.2vw,11px);
  background:#5D4037; border-radius:50% 50% 30% 30%;
  margin-top:auto; margin-left:2px;
}

/* ═══════════════════════════════════════════════════════
   🐦  BLUE BIRD
   ═══════════════════════════════════════════════════════ */
.bird-wrap {
  position:absolute;
  bottom:40%; right:-160px;
  z-index:30;
  pointer-events:none;
}
.bird { position:relative; display:flex; align-items:center; }
.b-body {
  width:44px; height:28px;
  background: linear-gradient(135deg,#64B5F6,#1565C0);
  border-radius:50% 60% 50% 40%;
  position:relative;
  z-index:2;
}
.b-head {
  position:absolute; top:-14px; left:2px;
  width:22px; height:20px;
  background: linear-gradient(135deg,#42A5F5,#1565C0);
  border-radius:50%;
}
.b-beak {
  position:absolute; right:-7px; top:8px;
  width:10px; height:6px;
  background:#FFA726;
  border-radius:2px 50% 50% 2px;
}
.b-eye {
  position:absolute; top:4px; right:4px;
  width:5px; height:5px;
  background:#fff; border-radius:50%;
}
.b-eye::after {
  content:''; position:absolute; top:1px; left:1px;
  width:3px; height:3px; background:#111; border-radius:50%;
}
.b-tail {
  position:absolute; right:-12px; top:4px;
  width:16px; height:10px;
  background: linear-gradient(135deg,#1976D2,#0D47A1);
  border-radius:2px 50% 50% 2px;
  clip-path:polygon(0 0,100% 30%,100% 70%,0 100%);
}
.b-wing {
  position:absolute;
  width:30px; height:16px;
  background: linear-gradient(135deg,#64B5F6,#42A5F5);
  border-radius:50%;
  left:4px;
  animation: birdFlap .25s ease-in-out infinite alternate;
}
.b-wing-top { top:-12px; transform-origin:bottom center; }
.b-wing-bot { bottom:-6px; transform-origin:top center;   }
@keyframes birdFlap {
  from { transform:scaleY(1); }
  to   { transform:scaleY(.3); }
}
.b-letter {
  position:absolute; bottom:-20px; left:10px;
  font-size:18px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
  animation: letterSway .8s ease-in-out infinite alternate;
}
@keyframes letterSway { to { transform:rotate(8deg) translateY(2px); } }

/* ═══════════════════════════════════════════════════════
   💌  CTA BUTTON (Receive Letter)
   ═══════════════════════════════════════════════════════ */
.cta-wrap {
  position:absolute; bottom:12%; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:40;
}
.receive-btn {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px;
  padding:14px 36px;
  background: linear-gradient(135deg,#FF8FB1,#FF6B9D,#E05C8A);
  color:#fff;
  border:none; border-radius:50px; cursor:pointer;
  font-family:'Sarabun',sans-serif; font-size:clamp(15px,2.2vw,20px); font-weight:700;
  letter-spacing:.04em;
  box-shadow: 0 6px 24px rgba(224,92,138,.5), 0 2px 8px rgba(0,0,0,.15);
  animation: btnFloat 2.5s ease-in-out infinite;
  transition: transform .15s, box-shadow .15s;
}
.receive-btn:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 10px 32px rgba(224,92,138,.65); }
.receive-btn:active{ transform:scale(.97); }
.rbtn-icon { font-size:1.4em; }
.rbtn-shimmer {
  position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  animation:shimmer 2.5s linear infinite;
}
@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(200%)} }
@keyframes btnFloat {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.cta-hint {
  color:#fff; font-size:clamp(12px,1.6vw,15px); font-weight:500;
  text-shadow:0 1px 4px rgba(0,0,0,.25);
  animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100%{opacity:.7} 50%{opacity:1} }

/* ══════════════════════════════════════════════════════
   📜  SCENE 2 — LETTER MODAL
   ══════════════════════════════════════════════════════ */
.overlay-blur {
  position:fixed; inset:0;
  background:rgba(30,10,20,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.letter-modal {
  position:relative; z-index:5;
  background: linear-gradient(160deg, #fff9fb 0%, #fff 50%, #fff5f8 100%);
  border: 2px solid rgba(212,175,55,.4);
  border-radius:clamp(16px,2.5vw,28px);
  box-shadow:
    0 32px 80px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.6) inset,
    0 8px 32px rgba(212,175,55,.15);
  padding:clamp(20px,4vw,40px) clamp(18px,3.5vw,36px);
  width:min(680px,94vw);
  max-height:90vh;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  animation: modalIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
  scrollbar-width:thin; scrollbar-color:var(--pink-light) transparent;
}
.letter-modal::-webkit-scrollbar { width:4px; }
.letter-modal::-webkit-scrollbar-thumb { background:var(--pink-light); border-radius:4px; }

@keyframes modalIn {
  from { opacity:0; transform:scale(.85) translateY(30px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* Gold corner ornaments */
.gold-corner {
  position:absolute; width:32px; height:32px;
  pointer-events:none; z-index:10;
}
.gold-corner::before,.gold-corner::after {
  content:''; position:absolute;
  background:var(--gold);
}
.gold-corner::before { width:100%; height:3px; }
.gold-corner::after  { width:3px; height:100%; }
.gc-tl { top:12px; left:12px; }
.gc-tr { top:12px; right:12px; transform:scaleX(-1); }
.gc-bl { bottom:12px; left:12px; transform:scaleY(-1); }
.gc-br { bottom:12px; right:12px; transform:scale(-1); }

/* Modal header */
.lm-header { text-align:center; }
.header-deco { font-size:28px; color:var(--gold); opacity:.7; line-height:1; }
.lm-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(28px,5vw,48px);
  font-weight:600; font-style:italic;
  background:linear-gradient(135deg,#E05C8A,var(--gold),#FF8FB1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.1; margin:.2em 0;
}
.lm-subtitle {
  font-family:'Sarabun',sans-serif; font-size:clamp(13px,2vw,17px);
  color:#999; font-weight:400; letter-spacing:.06em;
}
.gold-divider {
  width:60px; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:.8em auto 0;
}

/* ── SINGLE PHOTO (replaces carousel) ────────────────────── */
.single-photo-wrap {
  position: relative;
  width: 100%;
  border-radius: clamp(12px, 1.8vw, 18px);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  aspect-ratio: 3/4;
  max-height: 55vh;
  background: linear-gradient(135deg, #FCE4EC, #FFD6E7);
}
.single-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: inherit;
}
.single-photo-fallback {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  font-size: 52px;
  background: linear-gradient(135deg, #FCE4EC, #FFD6E7, #FFF0F5);
}
.single-photo-fallback span {
  font-size: 15px; color: #E05C8A; font-weight: 600;
}

/* ── CAROUSEL (keep for compatibility but hidden) ─────────── */
.carousel-wrap {
  position:relative; width:100%;
  border-radius:clamp(12px,1.8vw,18px);
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.carousel-viewport {
  width:100%; overflow:hidden;
  border-radius:inherit;
  aspect-ratio:16/9;
}
.carousel-track {
  display:flex;
  width:100%; height:100%;
  transition: none;
}
.c-slide {
  min-width:100%; height:100%;
  position:relative;
  background:linear-gradient(135deg,#FCE4EC,#F8BBD0);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.c-slide img {
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  border-radius:inherit;
}
.slide-fallback {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-size:48px; gap:10px;
  background:linear-gradient(135deg,#FCE4EC,#FFD6E7,#FFF0F5);
}
.slide-fallback span { font-size:16px; color:#E05C8A; font-weight:600; }
.c-slide img:not([style*="display:none"]) + .slide-fallback { display:none; }
.slide-caption {
  position:absolute; bottom:0; left:0; right:0;
  padding:10px 16px;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
  color:#fff; font-size:clamp(12px,1.6vw,15px);
  text-align:center; font-weight:500;
}

/* Carousel arrows */
.car-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px;
  background:rgba(255,255,255,.85);
  border:none; border-radius:50%; cursor:pointer;
  font-size:16px; color:#E05C8A; font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  transition:all .2s; z-index:5;
}
.car-arrow:hover { background:#FF8FB1; color:#fff; transform:translateY(-50%) scale(1.1); }
.car-prev { left:10px; }
.car-next { right:10px; }

/* Dot indicators */
.car-dots {
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:5;
}
.car-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.8);
  cursor:pointer; transition:all .25s;
}
.car-dot.active { background:#fff; transform:scale(1.35); }

/* ── LETTER BODY ──────────────────────────────────────── */
.letter-body {
  position:relative; width:100%; text-align:center;
  padding:10px 24px 16px;
}
.lb-quote-mark {
  position:absolute;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(60px,10vw,90px);
  color:rgba(212,175,55,.18);
  line-height:.8;
  pointer-events:none;
}
.lq-open { top:-16px; left:0; }
.lq-close{ bottom:-28px; right:0; }
.letter-text {
  font-family:'Sarabun',sans-serif;
  font-size:clamp(15px,2.2vw,20px);
  line-height:1.9;
  color:#5D4037;
  font-weight:400;
}
.love-line {
  font-size:clamp(17px,2.5vw,22px);
  font-weight:700;
  color:#E05C8A;
}
.letter-sig {
  margin-top:14px;
  font-family:'Dancing Script',cursive;
  font-size:clamp(16px,2.2vw,22px);
  color:var(--gold-dark);
  opacity:.85;
}

/* ── FINISH BUTTON ────────────────────────────────────── */
.finish-btn {
  display:block; width:fit-content;
  padding:13px 44px;
  background:linear-gradient(135deg,var(--gold),#F5E27A,var(--gold-dark));
  color:#5D3200; border:none; border-radius:50px; cursor:pointer;
  font-family:'Sarabun',sans-serif; font-size:clamp(14px,2vw,18px); font-weight:700;
  letter-spacing:.05em;
  box-shadow:0 6px 20px rgba(160,120,32,.4);
  position:relative; overflow:hidden;
  transition:all .2s;
}
.finish-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  animation:shimmer 2s linear infinite;
}
.finish-btn:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 10px 28px rgba(160,120,32,.55); }

/* ══════════════════════════════════════════════════════
   🏠  SCENE 3 — COZY HOUSE
   ══════════════════════════════════════════════════════ */
#scene-house { background:var(--room-wall); }
.room { position:absolute; inset:0; }

/* WALL */
.room-wall {
  position:absolute; top:0; left:0; right:0; height:62%;
  background: linear-gradient(180deg,#FFF3E0 0%,#FFE0B2 100%);
}
.wallpaper-grid {
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(212,175,55,.07) 0px,rgba(212,175,55,.07) 1px,transparent 1px,transparent 48px),
    repeating-linear-gradient(90deg,rgba(212,175,55,.07) 0px,rgba(212,175,55,.07) 1px,transparent 1px,transparent 48px);
}

/* Picture frames */
.pic-frame {
  position:absolute; top:10%;
  width:clamp(40px,6vw,64px); height:clamp(40px,6vw,64px);
  background:#fff; border:3px solid var(--gold);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:2px 2px 8px rgba(0,0,0,.12);
}
.pf-1 { left:6%; }
.pf-2 { left:14%; }
.pf-inner { font-size:clamp(16px,3vw,28px); }

/* WINDOW */
.win-wrap {
  position:absolute; top:6%; left:50%; transform:translateX(-50%);
  width:clamp(120px,18vw,220px);
}
.win-frame {
  position:relative; overflow:hidden;
  width:100%; padding-top:70%;
  border:clamp(8px,1.2vw,14px) solid #8D6E63;
  border-radius:4px;
  box-shadow:4px 4px 16px rgba(0,0,0,.25), inset 0 0 0 3px #A1887F;
}
.win-outside {
  position:absolute; inset:0;
  background:linear-gradient(180deg,#87CEEB,#B8E4FF 60%,#A5D6A7 100%);
}
.win-sun {
  position:absolute; top:8%; right:15%;
  width:20%; padding-top:20%;
  background:radial-gradient(circle,#FFE082,#FFD54F);
  border-radius:50%;
  box-shadow:0 0 10px 4px rgba(255,213,79,.4);
}
.win-tree {
  position:absolute; bottom:0;
  width:20%; padding-top:40%;
  background:linear-gradient(180deg,#388E3C,#1B5E20);
  border-radius:50% 50% 10% 10%;
}
.wt1 { left:15%; }
.wt2 { right:15%; }
.win-cross-h {
  position:absolute; top:50%; left:0; right:0; height:clamp(6px,1vw,10px);
  background:#8D6E63; transform:translateY(-50%); z-index:2;
}
.win-cross-v {
  position:absolute; top:0; bottom:0; left:50%; width:clamp(6px,1vw,10px);
  background:#8D6E63; transform:translateX(-50%); z-index:2;
}

/* Curtains */
.curtain {
  position:absolute; top:-8px; width:32%; bottom:-8px;
  background:linear-gradient(90deg,#FF8FB1,#FF6B9D);
  border-radius:4px;
}
.cur-l { left:-8px; border-radius:0 8px 8px 0; }
.cur-r { right:-8px; border-radius:8px 0 0 8px; }
.curtain-top {
  position:absolute; top:-14px; left:-14px; right:-14px; height:18px;
  background:linear-gradient(90deg,#E05C8A,#FF8FB1,#E05C8A);
  border-radius:4px;
}

/* BIRTHDAY BANNER */
.banner {
  position:absolute; top:2%; right:8%;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.banner-text {
  font-family:'Dancing Script',cursive;
  font-size:clamp(14px,2.5vw,24px);
  color:#E05C8A;
  text-shadow:1px 1px 2px rgba(0,0,0,.1);
}
.bunting { display:flex; gap:4px; }
.flag {
  width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:14px solid var(--fc,#FF8FB1);
}

/* BOOKSHELF */
.bookshelf {
  position:absolute; top:5%; right:2%;
  width:clamp(70px,10vw,120px);
}
.bs-shelf {
  width:100%; height:clamp(12px,1.6vw,18px);
  background:linear-gradient(180deg,#A1887F,#795548);
  border-radius:3px;
  box-shadow:0 3px 6px rgba(0,0,0,.2);
}
.bs-books { display:flex; align-items:flex-end; gap:3px; padding:4px 6px 0; }
.book {
  border-radius:2px 2px 0 0;
  flex-shrink:0;
}
.bk-r { width:10px;height:clamp(28px,4vw,44px); background:linear-gradient(180deg,#EF9A9A,#E57373); }
.bk-b { width:12px;height:clamp(22px,3.2vw,36px); background:linear-gradient(180deg,#90CAF9,#42A5F5); }
.bk-g { width:9px; height:clamp(32px,4.5vw,50px); background:linear-gradient(180deg,#A5D6A7,#66BB6A); }
.bk-o { width:11px;height:clamp(25px,3.6vw,40px); background:linear-gradient(180deg,#FFCC80,#FFA726); }
.bk-p { width:10px;height:clamp(20px,3vw,34px);  background:linear-gradient(180deg,#CE93D8,#AB47BC); }
.bs-plant { position:absolute; top:-22px; left:6px; font-size:clamp(14px,2.2vw,20px); }

/* FLOOR LAMP */
.floor-lamp {
  position:absolute; bottom:38%; right:5%;
  display:flex; flex-direction:column; align-items:center;
  width:clamp(24px,3.5vw,40px);
}
.fl-shade {
  width:clamp(40px,6vw,64px); height:clamp(20px,3vw,32px);
  background:linear-gradient(160deg,#FFF9C4,#FFE082);
  border-radius:6px 6px 12px 12px;
  clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);
  box-shadow:0 0 20px 8px rgba(255,213,79,.35);
}
.fl-pole {
  width:clamp(4px,.6vw,6px); height:clamp(120px,18vw,190px);
  background:linear-gradient(90deg,#BDBDBD,#E0E0E0,#BDBDBD);
  border-radius:2px;
}
.fl-base {
  width:clamp(24px,3.5vw,40px); height:clamp(8px,1.2vw,12px);
  background:linear-gradient(90deg,#9E9E9E,#E0E0E0);
  border-radius:50%;
}
.fl-glow {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:clamp(80px,12vw,150px); height:clamp(80px,12vw,150px);
  background:radial-gradient(circle,rgba(255,213,79,.22),transparent 70%);
  border-radius:50%; pointer-events:none;
  animation:lampGlow 2.5s ease-in-out infinite;
}
@keyframes lampGlow { 0%,100%{opacity:.8} 50%{opacity:1} }

/* SOFA */
.sofa {
  position:absolute; bottom:37%; left:50%; transform:translateX(-50%);
  width:clamp(200px,32vw,380px);
}
.sofa-back {
  width:100%; height:clamp(55px,8vw,100px);
  background:linear-gradient(160deg,#EF9A9A,#E57373,#C62828);
  border-radius:14px 14px 0 0;
  box-shadow:inset 0 4px 12px rgba(0,0,0,.1);
}
.sofa-arm {
  position:absolute; top:0; bottom:0;
  width:clamp(24px,3.5vw,42px);
  background:linear-gradient(180deg,#E57373,#C62828);
  border-radius:10px 10px 6px 6px;
}
.sf-arm-l { left:0; top:clamp(-10px,-1.5vw,-14px); border-radius:12px 4px 4px 12px; }
.sf-arm-r { right:0;top:clamp(-10px,-1.5vw,-14px); border-radius:4px 12px 12px 4px; }
.sofa-seat {
  width:100%; height:clamp(30px,4.5vw,55px);
  background:linear-gradient(160deg,#EF9A9A,#E57373);
  border-radius:0 0 6px 6px;
}
.sofa-cushion {
  position:absolute; top:0; width:40%; height:100%;
  background:linear-gradient(160deg,rgba(255,255,255,.18),transparent);
  border-radius:8px; border:1px solid rgba(255,255,255,.2);
}
.sfc-1 { left:5%; }
.sfc-2 { right:5%; }
.sofa-legs { display:flex; justify-content:space-between; padding:0 16px; }
.sf-leg {
  width:clamp(12px,1.8vw,20px); height:clamp(10px,1.4vw,16px);
  background:#B71C1C; border-radius:0 0 4px 4px;
}

/* CAKE TABLE */
.b-table {
  position:absolute; bottom:37%; right:18%;
  display:flex; flex-direction:column; align-items:center;
}
.bt-surface {
  width:clamp(80px,12vw,140px); height:clamp(8px,1.2vw,14px);
  background:linear-gradient(180deg,#A1887F,#795548);
  border-radius:4px;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:clamp(8px,1.2vw,14px);
}
.bt-leg {
  width:clamp(8px,1.2vw,12px); height:clamp(40px,6vw,70px);
  background:#8D6E63; border-radius:0 0 4px 4px;
}
.btl-l { margin-right:clamp(50px,8vw,100px); }

/* CAKE */
.cake {
  position:relative; margin-bottom:-12px;
  display:flex; flex-direction:column; align-items:center;
}
.candles { display:flex; gap:8px; margin-bottom:2px; }
.candle {
  width:6px; height:clamp(16px,2.4vw,24px);
  background:linear-gradient(180deg,#FFD54F,#FF8F00);
  border-radius:3px 3px 0 0;
  position:relative;
}
.flame {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:8px; height:12px;
  background:radial-gradient(ellipse at 50% 100%,#FF6F00,#FFA726 50%,#FFF9C4 100%);
  border-radius:50% 50% 30% 30%;
  animation:flicker .4s ease-in-out infinite alternate;
  box-shadow:0 0 6px 3px rgba(255,143,0,.5);
}
@keyframes flicker {
  from{transform:translateX(-50%) scale(1) rotate(-2deg)}
  to  {transform:translateX(-50%) scale(.9) rotate(2deg)}
}
.cake-layer {
  border-radius:6px;
  position:relative; overflow:hidden;
}
.ck-top {
  width:clamp(36px,5.5vw,64px); height:clamp(16px,2.4vw,26px);
  background:linear-gradient(160deg,#F8BBD0,#F48FB1);
}
.ck-mid {
  width:clamp(44px,6.5vw,76px); height:clamp(18px,2.6vw,28px);
  background:linear-gradient(160deg,#FCE4EC,#F8BBD0);
}
.ck-bot {
  width:clamp(54px,8vw,92px); height:clamp(20px,3vw,34px);
  background:linear-gradient(160deg,#FF8FB1,#FF6B9D);
}
.ck-top::after,.ck-mid::after,.ck-bot::after {
  content:'';
  position:absolute; bottom:4px; left:0; right:0; height:3px;
  background:rgba(255,255,255,.4); border-radius:2px;
}

/* FLOOR */
.room-floor {
  position:absolute; bottom:0; left:0; right:0; height:42%;
  background: linear-gradient(180deg,#D7AE7A 0%,#C49A6C 100%);
  overflow:hidden;
}
.plank {
  position:absolute; height:100%;
  background:linear-gradient(90deg,rgba(0,0,0,.04),transparent,rgba(0,0,0,.04));
  border-left:1px solid rgba(0,0,0,.06);
}
.pk1{left:0%}   .pk2{left:14%}  .pk3{left:28%}  .pk4{left:42%}
.pk5{left:58%}  .pk6{left:72%}  .pk7{left:86%}
.rug {
  position:absolute; bottom:0; left:30%; right:30%; height:55%;
  background:linear-gradient(135deg,#FF8FB1,#FFD6E7 40%,#FF8FB1 70%,#FFD6E7);
  border-radius:clamp(12px,2vw,24px);
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  border:clamp(4px,.6vw,7px) solid #FF6B9D;
  opacity:.8;
}

/* WARM GLOW overlay */
.warm-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 80% 30%, rgba(255,213,79,.14) 0%,transparent 60%),
             radial-gradient(ellipse at 20% 80%, rgba(255,143,0,.08) 0%,transparent 50%);
}

/* ═══════════════════════════════════════════════════════
   🤗  HUG SCENE — SON + MOM
   ═══════════════════════════════════════════════════════ */
.hug-stage {
  position:absolute; bottom:39%; left:50%; transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:clamp(-20px,-3vw,-10px);
  z-index:20;
}
.char-wrap { display:flex; flex-direction:column; align-items:center; }

/* === SON === */
.son-wrap { z-index:2; }
.son-char { display:flex; flex-direction:column; align-items:center; }
.sn-hair-back {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:clamp(36px,5.5vw,52px); height:clamp(44px,6.5vw,60px);
  background:linear-gradient(180deg,#4E342E,#3E2723);
  border-radius:50% 50% 30% 30%; z-index:1;
}
.sn-head {
  position:relative; z-index:3;
  width:clamp(46px,7vw,64px); height:clamp(44px,6.6vw,62px);
  background:linear-gradient(160deg,#FFCCBC,#FFAB91);
  border-radius:50%;
  box-shadow:0 3px 8px rgba(0,0,0,.14);
}
.sn-face { position:relative; width:100%; height:100%; }
.sn-eye {
  position:absolute; top:36%; width:6px; height:7px;
  background:#333; border-radius:50%;
}
.snl { left:26%; }
.snr { right:26%; }
.sn-smile {
  position:absolute; bottom:22%; left:50%; transform:translateX(-50%);
  width:16px; height:9px;
  border-bottom:2.5px solid #E57373;
  border-radius:0 0 12px 12px;
}
.sn-hair-front {
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  width:105%; height:35%;
  background:linear-gradient(180deg,#4E342E,#3E2723);
  border-radius:40% 40% 30% 30%; z-index:4;
}
/* Son body — blue shirt */
.sn-body {
  position:relative; z-index:2;
  width:clamp(36px,5.5vw,52px); height:clamp(46px,7vw,64px);
  background:linear-gradient(160deg,#90CAF9,#1565C0);
  border-radius:8px 8px 6px 6px; margin-top:-4px;
}
.sn-arm {
  position:absolute; top:4px;
  width:clamp(10px,1.5vw,14px); height:clamp(44px,6.5vw,60px);
  background:linear-gradient(180deg,#90CAF9,#1565C0);
  border-radius:8px;
}
/* Left arm wraps around mom's shoulders */
.sn-arm-l {
  left:-12px;
  transform:rotate(30deg) translateY(10px);
  z-index:5;
}
.sn-arm-r { right:-12px; transform:rotate(-10deg); }
/* Son pants */
.sn-pants {
  width:clamp(36px,5.5vw,52px); height:clamp(24px,3.5vw,36px);
  background:linear-gradient(160deg,#455A64,#263238);
  border-radius:4px 4px 8px 8px; z-index:2;
}
.sn-legs { display:flex; gap:4px; z-index:2; }
.sn-leg {
  display:flex; flex-direction:column; align-items:center;
  width:clamp(12px,1.8vw,16px); height:clamp(28px,4.2vw,42px);
  background:linear-gradient(180deg,#455A64,#263238);
  border-radius:4px;
}
.sn-shoe {
  width:clamp(16px,2.4vw,22px); height:clamp(9px,1.4vw,13px);
  background:#212121; border-radius:50% 50% 30% 30%;
  margin-top:auto; margin-left:3px;
}

/* === MOM (house scene) === */
.mh-wrap { z-index:3; margin-left:clamp(-18px,-2.5vw,-10px); }
.mh-char { display:flex; flex-direction:column; align-items:center; }
.mh-hair-back {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:clamp(34px,5vw,48px); height:clamp(46px,7vw,64px);
  background:linear-gradient(180deg,#5D4037,#3E2723);
  border-radius:50% 50% 30% 30%; z-index:1;
}
.mh-head {
  position:relative; z-index:3;
  width:clamp(40px,6vw,56px); height:clamp(38px,5.8vw,54px);
  background:linear-gradient(160deg,#FFCCBC,#FFAB91);
  border-radius:50%;
  box-shadow:0 3px 8px rgba(0,0,0,.14);
}
.mh-face { position:relative; width:100%; height:100%; }
.mh-eye {
  position:absolute; top:36%; width:5px; height:6px;
  background:#333; border-radius:50%;
}
.mhl { left:27%; }
.mhr { right:27%; }
.mh-blush {
  position:absolute; top:52%; width:9px; height:5px;
  background:rgba(255,100,120,.35); border-radius:50%;
}
.mhbl { left:12%; }
.mhbr { right:12%; }
.happy-tear {
  position:absolute; top:44%; left:18%;
  width:4px; height:8px;
  background:rgba(130,200,255,.7);
  border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
  animation:tearDrop 2.5s ease-in infinite;
}
@keyframes tearDrop {
  0%   { opacity:0; transform:translateY(0); }
  30%  { opacity:1; }
  100% { opacity:0; transform:translateY(12px); }
}
.mh-smile {
  position:absolute; bottom:22%; left:50%; transform:translateX(-50%);
  width:13px; height:7px;
  border-bottom:2.5px solid #E57373;
  border-radius:0 0 10px 10px;
}
.mh-hair-front {
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  width:105%; height:38%;
  background:linear-gradient(180deg,#5D4037,#4E342E);
  border-radius:40% 40% 30% 30%; z-index:4;
}
/* Mom body — pink dress */
.mh-body {
  position:relative; z-index:2;
  width:clamp(28px,4.2vw,40px); height:clamp(34px,5vw,48px);
  background:linear-gradient(160deg,#FCE4EC,#F8BBD0);
  border-radius:8px 8px 4px 4px; margin-top:-4px;
}
.mh-arm {
  position:absolute; top:4px;
  width:clamp(7px,1vw,11px); height:clamp(26px,3.8vw,36px);
  background:linear-gradient(180deg,#FFCCBC,#FFAB91);
  border-radius:8px;
}
/* Mom hugs back */
.mh-arm-l { left:-9px;  transform:rotate(-20deg) translateY(4px); }
.mh-arm-r { right:-9px; transform:rotate(20deg)  translateY(4px); }
.mh-skirt {
  width:clamp(32px,5vw,46px); height:clamp(24px,3.5vw,34px);
  background:linear-gradient(160deg,#FF8FB1,#FF6B9D);
  border-radius:4px 4px 14px 14px;
  clip-path:polygon(0 0,100% 0,115% 100%,-15% 100%);
  z-index:2;
}
.mh-legs { display:flex; gap:5px; z-index:2; }
.mh-leg {
  width:clamp(9px,1.3vw,13px); height:clamp(22px,3.2vw,30px);
  background:linear-gradient(180deg,#FFCCBC,#FFAB91);
  border-radius:4px;
  display:flex; flex-direction:column; align-items:center;
}
.mh-shoe {
  width:clamp(12px,1.8vw,18px); height:clamp(7px,1vw,10px);
  background:#5D4037; border-radius:50% 50% 30% 30%;
  margin-top:auto; margin-left:2px;
}

/* ── ENDING CARD ────────────────────────────────────── */
.ending-card {
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border:2px solid rgba(212,175,55,.45);
  border-radius:clamp(12px,2vw,20px);
  padding:clamp(14px,2.5vw,24px) clamp(24px,4vw,48px);
  text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  animation:cardAppear .8s cubic-bezier(.34,1.56,.64,1) forwards;
  z-index:40;
}
@keyframes cardAppear {
  from{opacity:0;transform:translateX(-50%) translateY(30px);}
  to  {opacity:1;transform:translateX(-50%) translateY(0);}
}
.ec-line1 {
  font-family:'Sarabun',sans-serif;
  font-size:clamp(14px,2.2vw,20px); color:#888; font-weight:400;
  margin-bottom:8px;
}
.ec-line2 {
  font-family:'Dancing Script',cursive;
  font-size:clamp(18px,3vw,28px); color:#E05C8A; font-weight:700;
}

/* ── FLOATING HEARTS ───────────────────────────────── */
.hearts-stage { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:35; }
.heart-particle {
  position:absolute; font-size:clamp(14px,2vw,22px);
  animation:heartRise var(--dur,4s) ease-out forwards;
  opacity:0;
}
@keyframes heartRise {
  0%   { opacity:1;  transform:translateY(0) scale(.8) rotate(var(--rot,0deg)); }
  80%  { opacity:.8; }
  100% { opacity:0;  transform:translateY(-180px) scale(1.3) rotate(var(--rot2,10deg)); }
}

/* ══════════════════════════════════════════════════════
   🎬  SCENE TRANSITIONS
   ══════════════════════════════════════════════════════ */
.scene-fade-out {
  animation:sceneFadeOut .8s ease-in-out forwards;
}
.scene-fade-in {
  animation:sceneFadeIn .8s ease-in-out forwards;
}
@keyframes sceneFadeOut {
  to { opacity:0; transform:scale(1.04); filter:blur(3px); }
}
@keyframes sceneFadeIn {
  from { opacity:0; transform:scale(.97); filter:blur(3px); }
  to   { opacity:1; transform:scale(1);   filter:blur(0); }
}

/* HUG animation on scene enter */
.hug-stage .char-wrap {
  opacity:0; transform:translateY(40px);
}
.hug-stage.hug-animate .son-wrap {
  animation:charRise .7s .3s cubic-bezier(.34,1.4,.64,1) forwards;
}
.hug-stage.hug-animate .mh-wrap {
  animation:charRise .7s .55s cubic-bezier(.34,1.4,.64,1) forwards;
}
@keyframes charRise {
  to { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════════════════
   📱  RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width:600px) {
  .mom-wrap     { bottom:28%; left:42%; }
  .cta-wrap     { bottom:8%; }
  .letter-modal { padding:16px 14px; gap:12px; }
  .lm-title     { font-size:24px; }
  .car-arrow    { width:28px; height:28px; font-size:13px; }
  .hug-stage    { bottom:40%; }
  .ending-card  { width:90%; }
  .win-wrap     { width:130px; }
  .sofa         { width:220px; }
  .b-table      { right:6%; }
  .bookshelf    { display:none; }
}
@media (min-width:1400px) {
  .sofa  { width:420px; }
  .room-wall { height:60%; }
}
@media (max-height:600px) and (orientation:landscape) {
  .mom-wrap  { bottom:22%; }
  .cta-wrap  { bottom:4%; }
  .hug-stage { bottom:36%; }
}