@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,650;1,9..144,600&family=Parisienne&family=Inter:wght@300;400;500;600&family=Space+Mono&display=swap');

:root{
  --ink:#0a0a0f;
  --paper:#fff8f0;
  --cream:#fff6ef;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  overflow:hidden;
  height:100svh;
  position:relative;
  touch-action:manipulation;
}

/* ===== Dark glowing background (matches reference: deep red vignette) ===== */
.glow-bg{ position:fixed; inset:0; z-index:0; background:radial-gradient(ellipse at 50% 30%, #3a0a1a 0%, #1c0510 45%, #08020a 100%); }
.grain{ position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.05; mix-blend-mode:overlay; }

.glow-flower{ position:relative; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.glow-svg{ width:100%; height:100%; display:block; overflow:visible; }

.float-heart{ position:absolute; bottom:-30px; opacity:0; color:#ff6b93; animation:heartDrift linear infinite; filter:drop-shadow(0 0 4px rgba(255,107,147,.6)); }
@keyframes heartDrift{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.75; } 85%{ opacity:.6; }
  100%{ transform:translateY(-110vh) translateX(var(--drift,0px)); opacity:0; }
}

.heart-tree{ width:min(58vw,220px); display:flex; align-items:flex-end; justify-content:center; }
.heart-tree-svg{ width:100%; height:auto; overflow:visible; display:block; }

.tiny-star{ position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:.2; animation:starTwinkle ease-in-out infinite; }
@keyframes starTwinkle{ 0%,100%{ opacity:.15; } 50%{ opacity:.95; } }

.eternal-title{
  font-variant-ligatures:common-ligatures;
  text-shadow:0 0 30px rgba(255,45,106,.45);
  letter-spacing:.01em;
}
.italic-lede{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; color:rgba(255,214,224,.75); font-size:clamp(.8rem,3vw,.95rem); }
.flower-row{ display:flex; align-items:flex-end; justify-content:center; gap:0; width:100%; height:3in; margin-top:.5rem; }
.flower-row .glow-flower{ flex:1 1 0; min-width:0; margin:0 -3%; }
#sceneGarden1{ padding-left:1vw; padding-right:1vw; padding-top:6vh; }
#sceneTealFlower{ padding-left:2vw; padding-right:2vw; padding-top:6vh; }

.night-cluster{ width:min(92vw,420px); display:flex; align-items:flex-end; justify-content:center; }
.night-cluster-svg{ width:100%; height:auto; overflow:visible; display:block; }
#sceneTealFlower{ background:radial-gradient(ellipse at 50% 30%, #0d2830 0%, #071018 55%, #030608 100%); }
#sceneTealFlower .deco-layer{ z-index:0; }
#sceneTealFlower .night-cluster{ position:relative; z-index:1; }

/* ===== Light scenes (video 2 / video 4 style: warm pastel backdrop) ===== */
.light-scene{ background:radial-gradient(ellipse at 50% 35%, #fff3e8 0%, #ffe3ea 55%, #ffd3e2 100%); }
.light-scene.alt{ background:radial-gradient(ellipse at 50% 35%, #fff0f6 0%, #ffe0f0 55%, #f7d0f0 100%); }
.ht-caption{ margin-top:1rem; }
.dark-lede{ color:rgba(90,20,40,.75) !important; }
.dark-msg{ color:rgba(70,20,35,.85); }
.script-accent-dark{ font-family:'Parisienne',cursive; font-size:clamp(2.2rem,9vw,3.4rem); color:#c9376b; text-shadow:none; line-height:1.15; }

.voice-caption{
  margin-top:1rem; font-family:'Inter',sans-serif; font-weight:500;
  font-size:clamp(.95rem,4vw,1.15rem); color:#5a1428; max-width:320px;
}
.cap-word{ opacity:0; transition:opacity .1s ease; }

/* ===== Gate ===== */
#gate{
  position:fixed; inset:0; z-index:80;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8vw; cursor:pointer;
  transition:opacity .9s ease, visibility .9s ease;
}
#gate.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#gate .mark{ font-family:'Space Mono',monospace; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,246,239,.55); margin-bottom:1.2rem; }
#gate h1{ font-family:'Fraunces',serif; font-weight:600; font-style:italic; font-size:clamp(1.3rem,6vw,2rem); }
.tap-ring{ width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; margin-top:1.6rem; animation:ringPulse 2.2s ease-in-out infinite; font-size:1.4rem; }
@keyframes ringPulse{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.15); opacity:1; } }
#gate .tap-hint{ margin-top:1.2rem; font-size:.75rem; color:rgba(255,246,239,.5); }

/* ===== Stage / scenes ===== */
#stage{ position:fixed; inset:0; z-index:2; }
.scene{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:safe center;
  text-align:center; padding:9vh 7vw 5vh;
  opacity:0; pointer-events:none;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.scene::-webkit-scrollbar{ width:0; height:0; }
.scene.active{ opacity:1; pointer-events:auto; }
#sceneClosing{ background:radial-gradient(ellipse at 50% 15%, rgba(31,163,140,.28), transparent 62%); }

.kicker{ font-family:'Space Mono',monospace; font-size:clamp(.6rem,2.2vw,.72rem); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,246,239,.65); margin-bottom:.9rem; }
.headline{ font-family:'Fraunces',serif; font-weight:650; font-size:clamp(2rem,10vw,3.6rem); line-height:1.02; letter-spacing:-.01em; }
.script-accent{ font-family:'Parisienne',cursive; font-size:clamp(1.9rem,8vw,3rem); color:#ffd76b; margin-top:.2rem; line-height:1.2; }
.lede{ font-family:'Inter',sans-serif; font-weight:300; font-size:clamp(.85rem,3vw,1rem); color:rgba(255,246,239,.82); max-width:320px; margin:1rem auto 0; line-height:1.6; }

/* ===== Decorative emoji sprites (flowers / balloons / sparkles) ===== */
.deco-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.deco{ position:absolute; font-size:2rem; opacity:0; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }

/* growing tree (legacy, unused but harmless) */
.tree-wrap{ position:relative; width:120px; height:170px; margin-bottom:.5rem; }

.message-body{ font-family:'Fraunces',serif; font-size:clamp(1rem,4vw,1.2rem); font-weight:500; line-height:1.6; max-width:340px; margin:0 auto; opacity:.95; }

/* ===== Cake scene ===== */
.cake-stage{ perspective:1000px; position:relative; }
.cake-energy-ring{
  position:absolute; left:50%; bottom:6px; width:220px; height:60px;
  transform:translateX(-50%); border:1px solid rgba(255,215,107,.3);
  border-radius:50%; animation:cakeRingPulse 2.4s ease-in-out infinite; pointer-events:none;
}
@keyframes cakeRingPulse{ 0%,100%{ transform:translateX(-50%) scale(.85); opacity:.4; } 50%{ transform:translateX(-50%) scale(1.05); opacity:.85; } }
.cake-full{ position:relative; width:min(66vw,240px); height:min(66vw,240px); transform:rotateX(6deg); transform-style:preserve-3d; }
.cake-half{ position:absolute; inset:0; }
.cake-inner{ position:relative; width:100%; height:100%; }
.cake-half.left .cake-inner{ clip-path:inset(0 50% 0 0); }
.cake-half.right .cake-inner{ clip-path:inset(0 0 0 50%); }
.cake-half.cut.left{ transform:translateX(-15px) rotate(-1.5deg); }
.cake-half.cut.right{ transform:translateX(15px) rotate(1.5deg); }
.cake-half{ transition:transform .8s cubic-bezier(.22,1,.36,1); }

.plate{ position:absolute; bottom:6px; left:50%; width:92%; height:16px; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(255,255,255,.25), rgba(255,255,255,0) 70%); border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.4); }

.tier{ position:absolute; left:50%; transform:translateX(-50%); border-radius:0 0 14px 14px; box-shadow:inset 0 -14px 18px rgba(0,0,0,.15), 0 10px 20px rgba(0,0,0,.3); }
.tier::before{ content:''; position:absolute; top:-14px; left:0; width:100%; height:28px; border-radius:50%; }
.tier1{ bottom:14px; width:96%; height:88px; background:linear-gradient(180deg,#ffd9e6,#ff9fc0); }
.tier1::before{ background:radial-gradient(ellipse at 35% 30%, #ffeef4, #ffb8d3); }
.tier2{ bottom:96px; width:64%; height:66px; background:linear-gradient(180deg,#fff2d6,#ffd98a); }
.tier2::before{ background:radial-gradient(ellipse at 35% 30%, #fffaf0, #ffe4a3); }

.drip{ position:absolute; left:0; width:100%; height:16px; }
.drip1{ bottom:96px; }
.drip2{ bottom:158px; }
.drip svg{ width:100%; height:100%; display:block; }

.icing-text{
  position:absolute; left:50%; top:120px; transform:translateX(-50%);
  font-family:'Parisienne',cursive; color:#c9376b; font-size:.98rem; line-height:1.25;
  width:82%; text-shadow:0 1px 0 rgba(255,255,255,.6);
}

.candles{ position:absolute; top:64px; left:50%; transform:translateX(-50%); display:flex; gap:14px; }
.candle{ position:relative; width:6px; height:32px; border-radius:2px; background:repeating-linear-gradient(0deg,#7fd6c4,#7fd6c4 6px,#fff 6px,#fff 12px); }
.wick{ position:absolute; top:-6px; left:50%; width:1.5px; height:6px; background:#3a2a1a; transform:translateX(-50%); }
.flame{ position:absolute; top:-22px; left:50%; width:9px; height:15px; transform:translateX(-50%) scale(0); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:radial-gradient(circle at 50% 70%, #fff6c8, #ffb347 55%, #ff5d2e 90%); box-shadow:0 0 12px 4px rgba(255,170,60,.65); opacity:0; }
.flame.lit{ animation:flicker 1.6s ease-in-out infinite; }
@keyframes flicker{ 0%,100%{ transform:translateX(-50%) scale(1) rotate(-2deg); } 50%{ transform:translateX(-50%) scale(1.08,0.94) rotate(2deg); } }

.knife{ position:absolute; top:-90px; left:50%; width:14px; height:130px; transform:translateX(-50%) translateY(0) rotate(-4deg); z-index:5; touch-action:none; cursor:grab; }
.knife.dragging{ cursor:grabbing; }
.knife .blade{ width:12px; height:88px; margin:0 auto; background:linear-gradient(90deg,#e6e9ee,#ffffff 40%,#c7ccd4); border-radius:3px 3px 8px 8px; box-shadow:0 4px 10px rgba(0,0,0,.3); pointer-events:none; }
.knife .handle{ width:14px; height:36px; margin:2px auto 0; background:linear-gradient(90deg,#3a2a1a,#6b4423); border-radius:5px; pointer-events:none; }
.knife.hint-bounce{ animation:knifeBounce 1.6s ease-in-out infinite; }
@keyframes knifeBounce{ 0%,100%{ transform:translateX(-50%) translateY(0) rotate(-4deg); } 50%{ transform:translateX(-50%) translateY(14px) rotate(-4deg); } }

.cut-hint{
  margin-top:1.6rem; font-family:'Space Mono',monospace; font-size:.68rem; letter-spacing:.05em;
  color:rgba(255,246,239,.6); opacity:0;
}
.cut-hint.show{ animation:fadeIn .8s ease forwards; }

.cake-cross{
  position:absolute; left:50%; top:64px; width:10px; height:118px; transform:translateX(-50%) scaleX(0);
  background:repeating-linear-gradient(180deg,#f8e6c8 0 10px,#e8c98f 10px 14px,#fff3d8 14px 24px);
  border-radius:2px; opacity:0;
}

/* ===== Gift scene ===== */
.gift-orbit-wrap{ position:relative; width:220px; height:220px; margin:1.6rem auto 0; display:flex; align-items:center; justify-content:center; }
.orbit-ring{
  position:absolute; inset:0; border:1px solid rgba(255,215,107,.25); border-radius:50%;
  animation:ringPulse2 3s ease-in-out infinite;
}
@keyframes ringPulse2{ 0%,100%{ transform:scale(.92); opacity:.5; } 50%{ transform:scale(1); opacity:.9; } }
.orbit-particle{
  position:absolute; top:50%; left:50%; font-size:1rem;
  transform-origin:0 0;
  animation:orbitSpin linear infinite;
}
.orbit-particle.p1{ animation-duration:7s; margin:-92px 0 0 -8px; }
.orbit-particle.p2{ animation-duration:9s; animation-direction:reverse; margin:-70px 0 0 -8px; }
.orbit-particle.p3{ animation-duration:11s; margin:-100px 0 0 -8px; }
@keyframes orbitSpin{ from{ transform:rotate(0deg) translateX(0); } to{ transform:rotate(360deg) translateX(0); } }
.gift-box-lg{ width:110px; height:96px; position:relative; cursor:pointer; }
.gift-lid{ position:absolute; top:-20px; left:-8px; width:126px; height:24px; border-radius:6px; background:linear-gradient(135deg,#ff4d6d,#c9376b); transition:transform .6s cubic-bezier(.22,1,.36,1); transform-origin:left center; box-shadow:0 0 24px rgba(255,77,109,.5); }
.gift-body{ position:absolute; top:4px; left:0; width:110px; height:92px; border-radius:4px 4px 10px 10px; background:linear-gradient(160deg,#c9376b,#7a1c3d); box-shadow:0 14px 34px rgba(0,0,0,.4); }
.gift-ribbon-v{ position:absolute; top:4px; left:47px; width:16px; height:92px; background:#ffd76b; }
.gift-ribbon-h{ position:absolute; top:-20px; left:-8px; width:126px; height:14px; background:#ffd76b; z-index:2; }
.gift-box-lg.opened .gift-lid{ transform:translateY(-46px) rotate(-40deg); }
.gift-orbit-wrap:has(.opened) .orbit-ring, .gift-orbit-wrap:has(.opened) .orbit-particle{ opacity:0; transition:opacity .5s ease; }
.gift-reveal{ opacity:0; margin-top:1.4rem; max-width:320px; }

.btn{
  font-family:'Inter',sans-serif; font-weight:500; font-size:.85rem; text-decoration:none;
  padding:.85rem 1.5rem; border-radius:999px; border:1px solid rgba(255,255,255,.28);
  color:var(--cream); background:rgba(255,255,255,.06); backdrop-filter:blur(8px); cursor:pointer;
  margin-top:1.4rem; display:inline-block;
}
.btn.primary{ background:#ff4d6d; border:none; box-shadow:0 10px 30px rgba(255,77,109,.35); }
.next-btn{ margin-top:2rem; }

/* ===== Magic square gift ===== */
.magic-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem;
  width:min(84vw,320px); margin:1.6rem auto 0;
}
.magic-cell{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:clamp(1rem,4.6vw,1.35rem);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,201,222,.22);
  border-radius:10px; color:rgba(255,246,239,.5);
  opacity:0; transform:scale(.4);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, color .2s ease;
}
.magic-cell.settled{
  color:var(--cream);
  animation:settlePop .4s ease;
}
@keyframes settlePop{
  0%{ text-shadow:0 0 12px #ffd76b; }
  100%{ text-shadow:none; }
}
.magic-cell.highlight{
  background:rgba(255,45,106,.35); border-color:#ff2d6a;
  box-shadow:0 0 20px rgba(255,45,106,.55);
}
.magic-sum{
  margin-top:1rem; font-family:'Space Mono',monospace; font-size:1.1rem;
  color:#ffd76b; opacity:0; min-height:1.6rem;
}

button{ font-family:'Inter',sans-serif; }
button:focus-visible{ outline:2px solid #ffd76b; outline-offset:3px; }

.signature{ font-family:'Parisienne',cursive; font-size:1.6rem; color:#ffd76b; margin-top:1rem; }
.lucky-number{ font-family:'Space Mono',monospace; font-size:.72rem; color:rgba(255,246,239,.65); margin-top:1.2rem; max-width:280px; }
.lucky-number strong{ color:#ffd76b; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}