/* =================================================================
   Happy Birthday Chiyansi 🎀 — style.css
   Barbie Dream House × Pinterest × Apple-quality motion
   Palette: Pink · Lavender · Peach · White · Baby Blue
================================================================= */

/* ---------------- ROOT / TOKENS ---------------- */
:root{
  --pink:      #ff5fa2;
  --pink-soft: #ffb3d1;
  --lavender:  #c9a7ff;
  --peach:     #ffcba5;
  --baby-blue: #a9d8ff;
  --white:     #fff7fb;
  --ink:       #6a3b5e;
  --ink-soft:  #9a6a86;

  --grad-hero: linear-gradient(135deg,#ffd6ec 0%,#f3d9ff 35%,#ffe3d1 70%,#d6ecff 100%);
  --glass-bg:  rgba(255,255,255,.55);
  --glass-brd: rgba(255,255,255,.75);
  --shadow-soft: 0 20px 60px rgba(255,95,162,.20);
  --shadow-lift: 0 30px 80px rgba(201,167,255,.35);

  --font-display: 'Pacifico', cursive;
  --font-script:  'Dancing Script', cursive;
  --font-body:    'Poppins', sans-serif;
  --font-round:   'Quicksand', sans-serif;
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  overscroll-behavior-y:contain;   /* stops iOS/Android rubber-band scroll from fighting the scratch card & gift shake */
  cursor:none;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;   /* no ugly gray flash box on tap (Android Chrome) */
}

/* Hide custom cursor niceties on touch devices */
@media (hover:none){
  body{ cursor:auto; }
  .cursor,.cursor-glow{ display:none !important; }
}

img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:none; }
@media (hover:none){ button{ cursor:pointer; } }

/* Every tappable element responds instantly on touch — no ~300ms
   double-tap-zoom detection wait before the click/pop/flip fires. */
button, .balloon, .cake, .room-obj, .cookie, .envelope, .gift-box,
.polaroid, .flip-card, .ow-env, .cassette, [tabindex]{ touch-action:manipulation; }

/* Stop iOS's long-press "copy / look up / save" menu and accidental text
   selection from popping up while rapidly tapping emoji-based game pieces */
button, .balloon, .cake, .room-obj, .cookie, .envelope, .gift-box, .polaroid,
.flip-card, .ow-env, .cassette, .music-btn, .flip-face, .cd-box{
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}

/* ---------------- CUSTOM CURSOR ---------------- */
.cursor{
  position:fixed; top:0; left:0; z-index:99999;
  font-size:22px; pointer-events:none;
  transform:translate(-50%,-50%);
  transition:transform .12s ease;
  filter:drop-shadow(0 0 6px rgba(255,95,162,.8));
  will-change:transform;
}
.cursor.click{ transform:translate(-50%,-50%) scale(1.6); }
.cursor-glow{ display:none !important; }  /* removed: glowing blob behind the cursor */

/* ---------------- BACKGROUND ---------------- */
.bg-gradient{
  position:fixed; inset:0; z-index:-3;
  background:var(--grad-hero);
  background-size:300% 300%;
  animation:gradShift 18s ease infinite;
}
/* Cute drifting hearts + polka-dot pattern over the gradient */
.bg-gradient::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.85;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M28 40c-4-8-16-6-16 4 0 8 16 16 16 16s16-8 16-16c0-10-12-12-16-4z' fill='%23ff9ecb' opacity='0.4'/%3E%3Cpath d='M104 98c-3-6-12-4.5-12 3 0 6 12 12 12 12s12-6 12-12c0-7.5-9-9-12-3z' fill='%23c9a7ff' opacity='0.38'/%3E%3Ccircle cx='112' cy='24' r='3' fill='%23ffffff' opacity='0.55'/%3E%3Ccircle cx='30' cy='112' r='2.5' fill='%23a9d8ff' opacity='0.5'/%3E%3Cpath d='M70 66l1.6 3.4 3.4 1.6-3.4 1.6L70 76l-1.6-3.4L65 71l3.4-1.6z' fill='%23ffffff' opacity='0.45'/%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(255,255,255,.5) 2px, transparent 3px),
    radial-gradient(circle, rgba(255,150,200,.28) 2px, transparent 3px);
  background-size:140px 140px, 60px 60px, 60px 60px;
  background-position:0 0, 0 0, 30px 30px;
  animation:bgDrift 55s linear infinite;
}
@keyframes bgDrift{ to{ background-position:140px 280px, 60px 60px, 90px 90px; } }
/* Dreamy soft pastel blobs floating for depth */
.bg-gradient::after{
  content:''; position:absolute; inset:-25%; pointer-events:none; filter:blur(40px);
  background:
    radial-gradient(closest-side, rgba(255,158,203,.55), transparent) 8% 18%/42% 42% no-repeat,
    radial-gradient(closest-side, rgba(201,167,255,.5), transparent) 82% 28%/46% 46% no-repeat,
    radial-gradient(closest-side, rgba(169,216,255,.45), transparent) 62% 82%/50% 50% no-repeat,
    radial-gradient(closest-side, rgba(255,203,165,.45), transparent) 18% 78%/40% 40% no-repeat;
  animation:blobFloat 26s ease-in-out infinite;
}
@keyframes blobFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(2%,-3%) scale(1.08); }
  66%{ transform:translate(-2%,2%) scale(.96); }
}
@media (prefers-reduced-motion:reduce){
  .bg-gradient::before,.bg-gradient::after{ animation:none; }
}
/* Phones: a full-screen blurred, animated pseudo-element is one of the
   heaviest things a mobile GPU can be asked to repaint every frame.
   Shrink the blur radius and slow the loop so it stays smooth. */
@media (max-width:640px){
  .bg-gradient::after{ filter:blur(24px); animation-duration:34s; }
  .bg-gradient::before{ animation-duration:70s; }
}
@keyframes gradShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.mouse-gradient{ display:none !important; }  /* removed: glowing spotlight that followed the cursor */
.floating-layer{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.floating-layer span{
  position:absolute; bottom:-40px; opacity:.85;
  animation:floatUp linear infinite;
  will-change:transform;
}
@keyframes floatUp{
  0%{ transform:translateY(0) rotate(0); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.9; }
  100%{ transform:translateY(-115vh) rotate(360deg); opacity:0; }
}

/* ---------------- MUSIC BUTTON ---------------- */
.music-btn{
  position:fixed; right:22px; bottom:22px; z-index:9000;
  width:58px; height:58px; border:none; border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--lavender));
  color:#fff; font-size:24px; box-shadow:var(--shadow-soft);
  display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.music-btn:hover{ transform:scale(1.12) rotate(8deg); }
.music-btn.playing .music-icon{ animation:spin 3s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.music-toast{
  position:fixed; right:22px; bottom:90px; z-index:9000;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  padding:10px 16px; border-radius:30px; font-family:var(--font-round);
  font-weight:600; color:var(--pink); box-shadow:var(--shadow-soft);
  opacity:0; transform:translateY(10px) scale(.9); pointer-events:none;
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
.music-toast.show{ opacity:1; transform:translateY(0) scale(1); }

/* ---------------- LOADER ---------------- */
.loader{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#ff9ecb,#c9a7ff 60%,#ffc7a8);
  transition:opacity .8s ease, visibility .8s;
}
.loader.hide{ opacity:0; visibility:hidden; }
.loader-content{ text-align:center; padding:20px; position:relative; z-index:2; }
.loader-gift{ font-size:70px; animation:giftBounce 1.4s ease-in-out infinite; }
@keyframes giftBounce{
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-18px) rotate(4deg); }
}
.loader-quote{
  font-family:var(--font-script); font-size:clamp(1.6rem,5vw,2.8rem);
  color:#fff; margin:18px 0 26px; text-shadow:0 4px 20px rgba(255,95,162,.5);
  line-height:1.3;
}
.loader-bar{
  width:min(320px,80vw); height:14px; margin:0 auto;
  background:rgba(255,255,255,.4); border-radius:20px; overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.1);
}
.loader-fill{ height:100%; width:0%; border-radius:20px;
  background:linear-gradient(90deg,#fff,#ffe3f1); transition:width .2s; }
.loader-percent{ color:#fff; font-family:var(--font-round); font-weight:600; margin-top:12px; letter-spacing:1px; }
.loader-hearts{ position:absolute; inset:0; overflow:hidden; }
.loader-hearts span{ position:absolute; bottom:-30px; font-size:20px; animation:floatUp linear infinite; }

/* ---------------- GLASS CARD (shared) ---------------- */
.glass-card{
  background:var(--glass-bg);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1.5px solid var(--glass-brd);
  border-radius:32px;
  box-shadow:var(--shadow-soft);
}

/* ---------------- SCREENS / SECTIONS ---------------- */
/* dvh = the REAL visible height on mobile (100vh is taller than what you can
   see once the address bar is showing, so content gets clipped/jumps as it
   hides). dvh is declared second so old browsers just keep the vh fallback. */
.screen{ min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; }
.section{ padding:clamp(60px,10vh,120px) clamp(18px,5vw,60px); position:relative; }
.section-title{
  font-family:var(--font-display); text-align:center;
  font-size:clamp(1.9rem,5vw,3.4rem); color:var(--pink);
  text-shadow:0 4px 18px rgba(255,95,162,.25); margin-bottom:10px;
}
.section-sub{ text-align:center; font-family:var(--font-round); font-weight:600;
  color:var(--ink-soft); margin-bottom:40px; font-size:clamp(1rem,2.5vw,1.2rem); }

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------------- INTRO SCREEN ---------------- */
.intro-card{ text-align:center; padding:clamp(30px,6vw,60px); max-width:600px; }
.intro-title{ font-family:var(--font-display); font-size:clamp(2rem,7vw,3.6rem); color:var(--pink); line-height:1.15; }
.intro-sub{ font-family:var(--font-script); font-size:clamp(1.4rem,4vw,2rem); color:var(--lavender); margin:14px 0 30px; }
.intro-ready{ font-family:var(--font-round); font-weight:700; font-size:1.4rem; color:var(--ink); margin-bottom:24px; }
.intro-buttons{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; position:relative; }

.big-btn{
  border:none; border-radius:50px; padding:18px 44px;
  font-family:var(--font-round); font-weight:700; font-size:1.3rem; color:#fff;
  box-shadow:var(--shadow-soft); transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  position:relative; overflow:hidden;
}
.yes-btn{ background:linear-gradient(135deg,var(--pink),#ff85b8); }
.no-btn{ background:linear-gradient(135deg,var(--lavender),var(--baby-blue)); }
.big-btn:hover{ animation:btnBounce .6s ease; box-shadow:var(--shadow-lift); }
@keyframes btnBounce{
  0%,100%{ transform:translateY(0) scale(1); }
  30%{ transform:translateY(-12px) scale(1.06); }
  60%{ transform:translateY(-4px) scale(1.02); }
}
.no-btn.runaway{ position:fixed; z-index:8000; left:0; top:0; transition:left .35s ease, top .35s ease; }
/* Skip the hover-bounce transform once it's escaping — it's already fully
   clamped inside the viewport by JS, and an added translateY on top of
   that could nudge it back past an edge. */
.no-btn.runaway:hover{ animation:none; }

/* Ripple */
.ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.6);
  transform:scale(0); animation:rippleFx .6s ease-out; pointer-events:none; }
@keyframes rippleFx{ to{ transform:scale(4); opacity:0; } }

/* ---------------- POPUP ---------------- */
.popup-overlay{
  position:fixed; inset:0; z-index:9500; display:grid; place-items:center;
  background:rgba(120,60,100,.35); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.popup-overlay.show{ opacity:1; visibility:visible; }
.popup-card{ text-align:center; padding:40px 34px; max-width:460px; margin:20px;
  transform:scale(.8); transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.popup-overlay.show .popup-card{ transform:scale(1); }
.popup-text{ font-family:var(--font-script); font-size:clamp(1.4rem,4vw,2rem);
  color:var(--pink); line-height:1.4; margin-bottom:24px; white-space:pre-line; }
.mini-btn{
  border:none; border-radius:40px; padding:12px 30px; color:#fff;
  font-family:var(--font-round); font-weight:700; font-size:1.05rem;
  background:linear-gradient(135deg,var(--pink),var(--lavender));
  box-shadow:var(--shadow-soft); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.mini-btn:hover{ transform:translateY(-4px) scale(1.05); }

/* ---------------- MAIN CONTENT ---------------- */
.main-content{ display:none; }
.main-content.show{ display:block; animation:fadeIn 1s ease; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ---------------- HERO ---------------- */
.hero{ min-height:100vh; min-height:100dvh; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden; }
.hero-inner{ position:relative; z-index:2; padding:20px; }
/* soft dreamy halo behind the title so it pops off the busy background */
.hero-inner::before{
  content:''; position:absolute; inset:-8% -14%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,.35) 55%, transparent 75%);
  filter:blur(6px);
}
.hero-eyebrow{ display:inline-block; font-family:var(--font-round); font-weight:700; letter-spacing:3px;
  color:#fff; text-transform:uppercase; font-size:.85rem;
  background:linear-gradient(135deg,var(--pink),var(--lavender));
  padding:8px 22px; border-radius:40px; box-shadow:0 8px 20px rgba(255,95,162,.35);
  margin-bottom:6px; }
.hero-title{ font-family:var(--font-display); font-size:clamp(2.2rem,8vw,4.4rem);
  color:var(--pink); line-height:1.12; margin:14px 0 4px; }
.script-huge{ font-family:var(--font-script); font-weight:700; line-height:1.05;
  font-size:clamp(3.4rem,14vw,7.5rem); color:var(--lavender); display:inline-block; }
.typing{ font-family:var(--font-round); font-weight:600; font-size:clamp(1.05rem,3.2vw,1.5rem);
  color:var(--ink); min-height:2em; margin:10px 0 26px;
  display:inline-block; background:rgba(255,255,255,.6); backdrop-filter:blur(8px);
  padding:10px 26px; border-radius:40px; border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 8px 24px rgba(201,167,255,.25); }
.typing::after{ content:'|'; color:var(--pink); animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* Cake */
.cake-wrap{ margin-top:20px; }
.cake{ width:200px; height:180px; margin:0 auto; position:relative; transition:transform .3s; }
@media (hover:hover){ .cake:hover{ transform:scale(1.04); } }
.cake-plate{ position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:220px; height:24px; border-radius:50%; background:rgba(255,255,255,.7); box-shadow:var(--shadow-soft); }
.cake-layer{ position:absolute; left:50%; transform:translateX(-50%); border-radius:14px; }
.layer-bottom{ bottom:16px; width:180px; height:52px; background:linear-gradient(#ffd0e6,#ffb3d1); }
.layer-middle{ bottom:64px; width:150px; height:46px; background:linear-gradient(#e9d0ff,#c9a7ff); }
.layer-top{ bottom:106px; width:120px; height:42px; background:linear-gradient(#ffe3d1,#ffcbadaa); }
.candles{ position:absolute; bottom:148px; left:50%; transform:translateX(-50%); display:flex; gap:14px; }
.candle{ width:8px; height:34px; border-radius:4px; background:linear-gradient(#fff,#ffd6ec); position:relative; }
.flame{ position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  width:12px; height:18px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,#fff6b0,#ff9d3d 60%,#ff5a2c);
  box-shadow:0 0 14px 4px rgba(255,180,80,.7); transform-origin:bottom center;
  animation:flicker .35s ease-in-out infinite alternate; }
@keyframes flicker{
  from{ transform:translateX(-50%) scale(1) rotate(-3deg); opacity:.9; }
  to{ transform:translateX(-50%) scale(1.08) rotate(3deg); opacity:1; }
}
.cake.blown .flame{ opacity:0; transform:translateX(-50%) scaleY(.2); box-shadow:none; }
.cake-hint{ font-family:var(--font-round); font-weight:600; color:var(--ink-soft); margin-top:22px; }

.scroll-cue{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:var(--font-round); font-weight:600; font-size:.9rem; color:var(--ink-soft);
  background:rgba(255,255,255,.65); padding:8px 20px; border-radius:30px;
  border:1.5px solid rgba(255,255,255,.9); box-shadow:0 6px 18px rgba(255,95,162,.15);
  animation:bob 1.6s ease-in-out infinite; white-space:nowrap; }
@keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(8px);} }

/* Floating stickers */
.floating-stickers span{ position:absolute; font-size:clamp(24px,4vw,42px); opacity:.85;
  animation:stickerFloat ease-in-out infinite; will-change:transform; }
@keyframes stickerFloat{
  0%,100%{ transform:translateY(0) rotate(-6deg); }
  50%{ transform:translateY(-24px) rotate(6deg); }
}

/* ---------------- COUNTDOWN ---------------- */
.countdown{ display:flex; gap:clamp(10px,3vw,26px); justify-content:center; flex-wrap:wrap; }
.cd-box{ background:var(--glass-bg); backdrop-filter:blur(14px); border:1.5px solid var(--glass-brd);
  border-radius:26px; padding:20px clamp(14px,3vw,30px); min-width:88px; text-align:center; box-shadow:var(--shadow-soft); }
.cd-box span{ display:block; font-family:var(--font-display); font-size:clamp(1.8rem,5vw,3rem); color:var(--pink); }
.cd-box small{ font-family:var(--font-round); font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px; }
.countdown-msg{ text-align:center; margin-top:24px; font-family:var(--font-script);
  font-size:clamp(1.6rem,5vw,2.6rem); color:var(--lavender); }

/* ---------------- TIMELINE ---------------- */
.timeline{ max-width:900px; margin:0 auto; position:relative; }
.timeline::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:4px;
  transform:translateX(-50%); border-radius:4px;
  background:repeating-linear-gradient(var(--pink) 0 14px,transparent 14px 26px); }
.tl-item{ position:relative; width:50%; padding:20px 34px; box-sizing:border-box; }
.tl-item:nth-child(odd){ left:0; text-align:right; }
.tl-item:nth-child(even){ left:50%; }
.tl-card{ background:var(--glass-bg); backdrop-filter:blur(14px); border:1.5px solid var(--glass-brd);
  border-radius:24px; padding:16px; box-shadow:var(--shadow-soft); transition:transform .35s; text-align:left; }
.tl-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-lift); }
.tl-photo{ background:linear-gradient(135deg,#ffe3f1,#eadcff); border-radius:16px;
  height:120px; display:grid; place-items:center; font-family:var(--font-round);
  font-weight:600; color:var(--ink-soft); font-size:.85rem; text-align:center; padding:8px; margin-bottom:12px;
  overflow:hidden; }
/* Once a real photo loads, drop the fixed box — the card sizes itself to
   the photo's own aspect ratio instead of cropping it to a fixed height. */
.tl-photo.has-photo{ height:auto; display:block; padding:0; }
.tl-photo.has-photo img{ width:100%; height:auto; max-height:340px; object-fit:cover; border-radius:16px; display:block; }
.tl-caption{ font-family:var(--font-script); font-size:1.35rem; color:var(--pink); }
.tl-date{ font-family:var(--font-round); font-weight:600; color:var(--ink-soft); font-size:.8rem; margin:4px 0; }
.tl-note{ font-family:var(--font-body); font-size:.9rem; color:var(--ink); font-style:italic; }
.tl-dot{ position:absolute; top:34px; width:20px; height:20px; border-radius:50%;
  background:var(--pink); box-shadow:0 0 0 5px rgba(255,95,162,.25); }
.tl-item:nth-child(odd) .tl-dot{ right:-10px; }
.tl-item:nth-child(even) .tl-dot{ left:-10px; }

@media (max-width:640px){
  .timeline::before{ left:20px; }
  .tl-item{ width:100%; left:0 !important; text-align:left !important; padding-left:48px; }
  .tl-item:nth-child(odd){ text-align:left; }
  .tl-dot{ left:10px !important; right:auto !important; }
}

/* ---------------- POLAROID GALLERY ---------------- */
.polaroid-board{ display:flex; flex-wrap:wrap; justify-content:center; gap:26px; max-width:1000px; margin:0 auto; }
.polaroid{ background:#fff; padding:12px 12px 40px; border-radius:6px;
  box-shadow:0 14px 34px rgba(150,90,130,.28); transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
  position:relative; width:190px; }
.polaroid .pol-img{ height:180px; border-radius:3px; display:grid; place-items:center;
  background:linear-gradient(135deg,#ffd6ec,#e0d0ff); color:var(--ink-soft);
  font-family:var(--font-round); font-weight:600; font-size:.8rem; text-align:center; padding:8px; overflow:hidden; }
/* Real photo loaded: size the polaroid window to the photo's own aspect
   ratio (capped so a tall portrait shot doesn't tower over the board). */
.polaroid .pol-img.has-photo{ height:auto; display:block; padding:0; }
.polaroid .pol-img.has-photo img{ width:100%; height:auto; max-height:260px; object-fit:cover; border-radius:3px; display:block; }
.polaroid .pol-cap{ font-family:var(--font-script); text-align:center; color:var(--pink);
  font-size:1.1rem; margin-top:8px; }
.polaroid::after{ content:'✨'; position:absolute; top:6px; right:10px; opacity:0; transition:opacity .3s; }
@media (hover:hover){
  .polaroid:hover{ transform:rotate(0deg) translateY(-14px) scale(1.05); box-shadow:0 30px 60px rgba(150,90,130,.4); z-index:5; }
  .polaroid:hover::after{ opacity:1; animation:sparkleTwinkle 1s ease infinite; }
}
@keyframes sparkleTwinkle{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.4) rotate(20deg); } }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:9600; display:grid; place-items:center;
  background:rgba(80,40,70,.7); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:.4s; padding:20px; }
.lightbox.show{ opacity:1; visibility:visible; }
.lightbox-inner{ background:#fff; padding:16px 16px 26px; border-radius:10px; max-width:min(90vw,520px);
  transform:scale(.85); transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.lightbox.show .lightbox-inner{ transform:scale(1); }
.lightbox-img{ height:min(60vh,420px); border-radius:6px; display:grid; place-items:center;
  background:linear-gradient(135deg,#ffd6ec,#e0d0ff); color:var(--ink-soft);
  font-family:var(--font-round); font-weight:600; text-align:center; padding:14px; overflow:hidden; }
/* Fullscreen view: show the photo at its own natural aspect ratio (no
   forced box/crop), just capped so it never outgrows the screen. */
.lightbox-img.has-photo{ height:auto; display:block; padding:0; background:none; }
.lightbox-img.has-photo img{ width:auto; height:auto; max-width:100%; max-height:80vh; object-fit:contain; border-radius:6px; display:block; margin:0 auto; }
.lightbox-cap{ font-family:var(--font-script); text-align:center; color:var(--pink); font-size:1.5rem; margin-top:12px; }

/* ---------------- REASONS (flip cards) ---------------- */
.reasons-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:18px; max-width:1100px; margin:0 auto; }
.flip-card{ perspective:1000px; height:150px; }
.flip-inner{ position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.34,1.3,.5,1);
  transform-style:preserve-3d; }
.flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
@media (hover:hover){ .flip-card:hover .flip-inner{ transform:rotateY(180deg); } }
.flip-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:22px;
  display:grid; place-items:center; padding:16px; text-align:center; box-shadow:var(--shadow-soft); }
.flip-front{ background:linear-gradient(135deg,#fff0f7,#ffe3f1); }
.flip-back{ background:linear-gradient(135deg,var(--lavender),var(--baby-blue)); transform:rotateY(180deg); color:#fff; }
.flip-front .r-num{ position:absolute; top:10px; left:14px; font-family:var(--font-display); color:var(--pink-soft); font-size:1.4rem; }
.flip-front p{ font-family:var(--font-round); font-weight:600; color:var(--ink); font-size:1rem; }
.flip-back p{ font-family:var(--font-script); font-size:1.25rem; line-height:1.3; }

/* ---------------- QUIZ ---------------- */
.quiz-card{ max-width:600px; margin:0 auto; padding:34px; text-align:center; }
.quiz-q{ font-family:var(--font-round); font-weight:700; font-size:1.35rem; color:var(--pink); margin-bottom:22px; }
.quiz-options{ display:grid; gap:14px; }
.quiz-opt{ border:2px solid var(--pink-soft); background:#fff; border-radius:18px; padding:14px;
  font-family:var(--font-round); font-weight:600; color:var(--ink); transition:all .25s; }
.quiz-opt:hover{ background:var(--pink-soft); color:#fff; transform:translateX(6px); }
.quiz-opt.correct{ background:linear-gradient(135deg,var(--pink),var(--lavender)); color:#fff; border-color:transparent; }
.quiz-feedback{ margin-top:20px; font-family:var(--font-script); font-size:1.6rem; color:var(--lavender); min-height:1.6em; }
.quiz-progress{ font-family:var(--font-round); font-weight:600; color:var(--ink-soft); margin-bottom:14px; }

/* ---------------- LOVE METER ---------------- */
.meter-shell{ max-width:600px; height:36px; margin:0 auto; background:rgba(255,255,255,.5);
  border:2px solid var(--glass-brd); border-radius:30px; overflow:hidden; box-shadow:inset 0 2px 8px rgba(0,0,0,.08); }
.meter-fill{ height:100%; width:0%; border-radius:30px;
  background:linear-gradient(90deg,var(--pink),var(--lavender),var(--baby-blue)); background-size:200% 100%;
  animation:gradShift 3s linear infinite; transition:width .1s; }
.meter-value{ text-align:center; margin-top:18px; font-family:var(--font-display);
  font-size:clamp(1.4rem,4vw,2.4rem); color:var(--pink); word-break:break-all; }

/* ---------------- WISHES / LETTER PAPER ---------------- */
.letter-paper{ max-width:700px; margin:0 auto; padding:clamp(28px,5vw,50px);
  background:linear-gradient(#fffdf8,#fff5fb); border-radius:20px;
  box-shadow:var(--shadow-soft); position:relative; }
.letter-paper::before{ content:''; position:absolute; left:34px; top:0; bottom:0; width:2px; background:rgba(255,150,190,.35); }
.typewriter{ font-family:var(--font-round); font-weight:500; font-size:clamp(1rem,2.6vw,1.25rem);
  line-height:1.9; color:var(--ink); white-space:pre-wrap; min-height:12em; }
.typewriter::after{ content:'|'; color:var(--pink); animation:blink 1s step-end infinite; }

/* ---------------- TRAVEL ---------------- */
.map-illustration{ position:relative; max-width:500px; height:120px; margin:0 auto 40px;
  background:linear-gradient(135deg,#d6ecff,#eadcff); border-radius:24px; box-shadow:var(--shadow-soft); overflow:hidden; }
.map-pin{ position:absolute; font-size:32px; animation:bob 2s ease-in-out infinite; }
.pin1{ left:18%; top:20%; }
.pin2{ right:18%; bottom:20%; animation-delay:.5s; }
.map-route{ position:absolute; left:22%; top:35%; width:56%; height:3px;
  background:repeating-linear-gradient(90deg,var(--pink) 0 10px,transparent 10px 18px); transform:rotate(20deg); }
.travel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:18px; max-width:1000px; margin:0 auto; }
.travel-card{ background:var(--glass-bg); backdrop-filter:blur(14px); border:1.5px solid var(--glass-brd);
  border-radius:24px; padding:22px 14px; text-align:center; box-shadow:var(--shadow-soft); transition:transform .35s; }
.travel-card:hover{ transform:translateY(-8px) rotate(-2deg); box-shadow:var(--shadow-lift); }
.travel-emoji{ font-size:44px; }
.travel-name{ font-family:var(--font-script); font-size:1.3rem; color:var(--pink); margin-top:8px; }

/* ---------------- DREAM ROOM ---------------- */
.dream-room{ max-width:760px; margin:0 auto; background:linear-gradient(160deg,#ffe3f1,#f0e0ff 60%,#ffe8d6);
  border-radius:30px; padding:clamp(24px,5vw,50px); box-shadow:var(--shadow-soft);
  border:6px solid #fff; position:relative; }
.room-shelf{ display:flex; justify-content:space-around; align-items:flex-end; gap:14px;
  padding:14px 0; border-bottom:6px solid rgba(255,255,255,.7); }
.room-shelf:last-child{ border-bottom:none; }
.room-obj{ font-size:clamp(38px,8vw,60px); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 8px 14px rgba(180,110,160,.35)); }
@media (hover:hover){ .room-obj:hover{ transform:scale(1.25) rotate(-8deg); } }
.mirror{ animation:mirrorShine 3s ease-in-out infinite; }
@keyframes mirrorShine{ 0%,100%{ filter:drop-shadow(0 0 4px #fff); } 50%{ filter:drop-shadow(0 0 18px #fff); } }

/* ---------------- ENVELOPE ---------------- */
.envelope-wrap{ display:grid; place-items:center; }
.envelope{ position:relative; width:min(340px,86vw); height:220px; }
.env-back{ position:absolute; inset:0; background:linear-gradient(135deg,#ffc0dd,#e0b3ff); border-radius:12px; }
.env-front{ position:absolute; inset:0; z-index:4; border-radius:12px;
  background:linear-gradient(135deg,#ff9ecb,#d4a3ff);
  clip-path:polygon(0 40%,50% 100%,100% 40%,100% 100%,0 100%); }
.env-flap{ position:absolute; top:0; left:0; right:0; height:120px; z-index:5;
  background:linear-gradient(135deg,#ff85b8,#c9a7ff);
  clip-path:polygon(0 0,50% 75%,100% 0); transform-origin:top; transition:transform .6s ease; }
.env-letter{ position:absolute; left:6%; right:6%; bottom:10px; z-index:3; height:180px;
  background:#fffdf8; border-radius:8px; padding:16px; overflow:auto;
  box-shadow:0 6px 20px rgba(0,0,0,.12); transition:transform .7s ease .3s; transform:translateY(0); }
.env-heart{ position:absolute; z-index:6; left:50%; top:52%; transform:translate(-50%,-50%);
  font-size:26px; transition:opacity .3s; }
.envelope.open .env-flap{ transform:rotateX(180deg); z-index:1; }
.envelope.open .env-letter{ transform:translateY(-120px); z-index:6; }
.envelope.open .env-heart{ opacity:0; }
.handwriting{ font-family:var(--font-script); font-size:1.15rem; color:var(--ink); line-height:1.5; }
.env-hint{ margin-top:26px; font-family:var(--font-round); font-weight:600; color:var(--ink-soft); }

/* ---------------- GIFT BOX ---------------- */
.gift-wrap{ display:grid; place-items:center; text-align:center; }
.gift-box{ position:relative; width:160px; height:150px; }
.gift-box.shake{ animation:shake .5s ease infinite; }
@keyframes shake{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} }
.gift-body{ position:absolute; bottom:0; width:160px; height:110px; border-radius:12px;
  background:linear-gradient(135deg,#ff9ecb,#ff5fa2); }
.gift-body::after{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:26px; height:100%; background:rgba(255,255,255,.55); }
.gift-lid{ position:absolute; top:20px; left:-8px; width:176px; height:40px; border-radius:10px;
  background:linear-gradient(135deg,#ffb3d1,#ff85b8); z-index:2; transition:transform .5s ease; transform-origin:center; }
.gift-bow{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:40px; z-index:3; transition:transform .5s; }
.gift-box.opened .gift-lid{ transform:translateY(-60px) rotate(-14deg); opacity:0; }
.gift-box.opened .gift-bow{ transform:translate(-50%,-70px) rotate(20deg); opacity:0; }
.gift-hint{ font-family:var(--font-round); font-weight:600; color:var(--ink-soft); margin-top:26px; }
.gift-reveal{ max-height:0; overflow:hidden; opacity:0; transition:all .8s ease; margin-top:20px; }
.gift-reveal.show{ max-height:600px; opacity:1; }
.gift-msg{ font-family:var(--font-script); font-size:clamp(1.4rem,4vw,2rem); color:var(--pink); margin-bottom:18px; }

/* Photo placeholders */
.placeholder-photo{ background:linear-gradient(135deg,#ffe3f1,#eadcff); border:2px dashed var(--pink-soft);
  border-radius:18px; padding:40px 20px; font-family:var(--font-round); font-weight:600; color:var(--ink-soft);
  text-align:center; max-width:360px; margin:0 auto; overflow:hidden; }
.placeholder-photo.has-photo{ padding:0; border-style:solid; max-width:none; }
.placeholder-photo img{ display:block; width:auto; height:auto; max-width:100%; max-height:420px; object-fit:contain; border-radius:14px; margin:0 auto; }
.placeholder-note{ font-family:var(--font-round); font-weight:600; color:var(--white);
  background:rgba(255,255,255,.15); display:inline-block; padding:8px 18px; border-radius:20px; margin-top:20px; }

/* ---------------- BALLOONS ---------------- */
.balloon-field{ position:relative; max-width:1000px; margin:0 auto; min-height:420px;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.balloon{ width:80px; height:100px; border-radius:50% 50% 50% 50%/45% 45% 55% 55%;
  position:relative; cursor:none; transition:transform .3s; animation:balloonBob 3s ease-in-out infinite;
  display:grid; place-items:center; touch-action:manipulation; }
  /* touch-action:manipulation skips the browser's ~300ms double-tap-zoom
     detection wait, so the pop fires the instant you tap instead of "late" */
@media (hover:none){ .balloon{ cursor:pointer; } }
.balloon::after{ content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:10px solid inherit; }
.balloon .b-string{ position:absolute; bottom:-40px; left:50%; width:2px; height:40px; background:rgba(150,100,140,.5); }
@keyframes balloonBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }
@media (hover:hover){ .balloon:hover{ transform:scale(1.08); } }
/* hover scoped out on touch devices — an unscoped :hover here makes iOS Safari
   require a first tap just to satisfy :hover before a second tap fires click */
.balloon.popped{ animation:balloonPop .4s ease forwards; pointer-events:none; }
@keyframes balloonPop{ 0%{ transform:scale(1.2);} 100%{ transform:scale(0); opacity:0; } }
.balloon-msg{ position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-family:var(--font-round); font-weight:700; color:var(--pink); font-size:.9rem;
  background:var(--glass-bg); border-radius:20px; padding:8px; opacity:0; transform:scale(.6); transition:.4s;
  pointer-events:none; }  /* stays out of the way so it never steals the tap meant for the balloon */
.balloon-slot.revealed .balloon-msg{ opacity:1; transform:scale(1); }
.balloon-slot{ position:relative; width:80px; height:120px; }
.balloon-score{ text-align:center; margin-top:30px; font-family:var(--font-round); font-weight:700; color:var(--ink); font-size:1.2rem; }

/* ---------------- GENERATOR CARDS ---------------- */
.gen-card{ max-width:560px; margin:0 auto; padding:36px; text-align:center; }
.gen-output{ font-family:var(--font-script); font-size:clamp(1.4rem,4vw,2rem); color:var(--pink);
  min-height:3em; display:grid; place-items:center; line-height:1.3; margin-bottom:22px; }
.gen-output.pop{ animation:popIn .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn{ 0%{ transform:scale(.7); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

/* ---------------- LOCK ---------------- */
.lock-card{ max-width:460px; margin:0 auto; padding:40px 30px; text-align:center; }
.lock-icon{ font-size:60px; transition:transform .5s; }
.lock-icon.unlocked{ transform:rotate(-20deg) scale(1.2); }
.lock-hint{ font-family:var(--font-round); font-weight:600; color:var(--ink-soft); margin:14px 0 22px; }
.lock-input{ width:100%; padding:14px 20px; border:2px solid var(--pink-soft); border-radius:30px;
  font-family:var(--font-round); font-size:1.1rem; text-align:center; color:var(--ink); outline:none; margin-bottom:16px; }
.lock-input:focus{ border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,95,162,.2); }
.lock-error{ color:#e0508a; font-family:var(--font-round); font-weight:600; margin-top:12px; min-height:1.4em; }

/* ---------------- HIDDEN SURPRISE ---------------- */
.hidden-surprise{ display:none; text-align:center; min-height:80vh; min-height:80dvh; place-items:center;
  background:linear-gradient(135deg,#ff9ecb,#c9a7ff); border-radius:40px; margin:20px;
  position:relative; overflow:hidden; }
.hidden-surprise.show{ display:grid; animation:fadeIn 1s ease; }
.surprise-big{ font-family:var(--font-display); font-size:clamp(2rem,7vw,4rem); color:#fff;
  text-shadow:0 6px 30px rgba(255,95,162,.6); line-height:1.2; position:relative; z-index:2; }

/* ---------------- GALAXY ---------------- */
.galaxy{ background:linear-gradient(160deg,#2a1240,#4a1d5e 50%,#7a2d6e); border-radius:40px;
  margin:20px; position:relative; overflow:hidden; min-height:90vh; min-height:90dvh; display:grid; place-items:center; }
.stars-layer{ position:absolute; inset:0; }
.stars-layer span{ position:absolute; background:#fff; border-radius:50%; animation:twinkle ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.2; transform:scale(.6);} 50%{ opacity:1; transform:scale(1.2);} }
.moon{ position:absolute; top:8%; right:10%; font-size:clamp(60px,12vw,110px); animation:bob 4s ease-in-out infinite;
  filter:drop-shadow(0 0 30px rgba(255,240,180,.6)); }
.galaxy-inner{ position:relative; z-index:2; text-align:center; padding:20px; }
.galaxy-text{ font-family:var(--font-script); font-size:clamp(1.6rem,5vw,3rem); color:#fff; line-height:1.5;
  text-shadow:0 4px 30px rgba(0,0,0,.4); }

/* ---------------- ENDING ---------------- */
.ending{ text-align:center; }
.ending-tease{ font-family:var(--font-script); font-size:clamp(1.6rem,5vw,2.6rem); color:var(--lavender); margin-bottom:24px; }
.last-btn{ background:linear-gradient(135deg,var(--pink),var(--lavender),var(--baby-blue));
  background-size:200% 100%; animation:gradShift 4s linear infinite; font-size:1.5rem; padding:22px 54px; }

/* ---------------- FINALE ---------------- */
.finale{ position:fixed; inset:0; height:100vh; height:100dvh; z-index:9800; display:grid; place-items:center; text-align:center;
  background:linear-gradient(135deg,#ff9ecb,#c9a7ff 50%,#ffc7a8); opacity:0; visibility:hidden; transition:opacity 1s, visibility 1s; overflow:hidden; }
.finale.show{ opacity:1; visibility:visible; }
.finale-content{ position:relative; z-index:3; padding:20px; }
.finale-cake{ font-size:clamp(70px,16vw,130px); animation:giftBounce 1.4s ease-in-out infinite; }
.finale-title{ font-family:var(--font-display); font-size:clamp(2rem,8vw,4.5rem); color:#fff;
  text-shadow:0 6px 30px rgba(255,95,162,.6); margin:14px 0; line-height:1.1; }
.finale-sub{ font-family:var(--font-script); font-size:clamp(1.3rem,4vw,2rem); color:#fff; min-height:1.6em; white-space:pre-line; }

/* ---------------- FX CANVAS ---------------- */
.fx-canvas{ position:fixed; inset:0; z-index:9900; pointer-events:none; }
.fireworks-layer,.finale-fireworks{ position:absolute; inset:0; pointer-events:none; }

/* ---------------- ACCESSIBILITY ---------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* focus states */
button:focus-visible,.lock-input:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--lavender); outline-offset:3px; }

/* =================================================================
   🌈✨ SUPER-CUTE "OUT OF THIS WORLD" UPGRADE LAYER ✨🌈
   Extra kawaii polish layered on top of the base styles.
================================================================= */

/* ---- Candy pastel scrollbar ---- */
html{ scrollbar-width:thin; scrollbar-color:var(--pink-soft) transparent; }
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--pink),var(--lavender));
  border-radius:20px; border:3px solid var(--white);
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(var(--lavender),var(--baby-blue)); }

/* ---- Text selection ---- */
::selection{ background:var(--pink-soft); color:#fff; }

/* ---- Dreamy animated gradient text on big titles ----
   NOTE: text fill is transparent, so text-shadow must be OFF here
   (a shadow bleeds through transparent glyphs as a blurry smear).
   Depth comes from filter:drop-shadow, which hugs the glyph shape. */
.section-title,.intro-title,.hero-title,.finale-title,.surprise-big{
  background:linear-gradient(100deg,#ff4d97,#d24dff 40%,#ff7ab8 70%,#ff4d97);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:rainbowText 9s linear infinite;
  text-shadow:none;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.65)) drop-shadow(0 10px 24px rgba(255,77,151,.28));
  padding-bottom:.08em;             /* room for descenders in script fonts */
}
@keyframes rainbowText{ to{ background-position:250% 50%; } }
/* On saturated pink overlays, pink-on-pink fails — use a shimmering white instead */
.finale-title,.surprise-big{
  background:linear-gradient(100deg,#ffffff,#ffe0f0 40%,#ffffff 70%,#fff3e6);
  background-size:250% 100%;
  filter:drop-shadow(0 6px 26px rgba(160,40,100,.45));
}
.script-huge{
  -webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,#9d5cff,#ff4d97 45%,#b06bff 80%,#9d5cff);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text;
  animation:rainbowText 7s linear infinite;
  padding:0 .18em .14em;            /* keep Dancing Script flourishes uncropped */
}

/* ---- Cute wobble on section titles ---- */
.section-title{ display:inline-block; width:100%; }
@media (hover:hover){ .section-title:hover{ animation:rainbowText 9s linear infinite, wobble 1s ease; } }
@keyframes wobble{
  0%,100%{ transform:rotate(0); }
  25%{ transform:rotate(-2deg) scale(1.02); }
  75%{ transform:rotate(2deg) scale(1.02); }
}

/* ---- Jelly buttons (squishy bounce) ---- */
.big-btn,.mini-btn{ transition:transform .35s cubic-bezier(.34,1.7,.5,1), box-shadow .3s, filter .3s; }
.big-btn:active,.mini-btn:active{ transform:scale(.9); }

/* ---- Sparkle ring around glass cards ---- */
.glass-card{ position:relative; }
.intro-card::after,.gen-card::after,.quiz-card::after,.lock-card::after,.popup-card::after{
  content:'✨'; position:absolute; top:-14px; right:-8px; font-size:26px;
  animation:sparkleTwinkle 2s ease-in-out infinite; pointer-events:none;
}
.intro-card::before{
  content:'🎀'; position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-size:40px; animation:bob 2.4s ease-in-out infinite; pointer-events:none;
}

/* ---- Kawaii faces on photo placeholders ---- */
.tl-photo, .pol-img, .lightbox-img, .placeholder-photo{ position:relative; }
.tl-photo::before, .pol-img::before{
  content:'(｡♥‿♥｡)'; position:absolute; top:8px; left:0; right:0; text-align:center;
  font-size:1rem; color:var(--pink); opacity:.7;
}
/* once a real photo loads, JS adds .has-photo — hide the placeholder face so it doesn't sit on top of her actual picture */
.tl-photo.has-photo::before, .pol-img.has-photo::before{ display:none; }

/* ---- Soft floating hearts baked into corners of cards ---- */
.tl-card,.travel-card,.gen-card,.quiz-card{ overflow:hidden; }
.travel-card::after{
  content:'💗'; position:absolute; bottom:-6px; right:-6px; font-size:34px; opacity:.18;
  transition:transform .4s;
}
.travel-card:hover::after{ transform:scale(1.4) rotate(-15deg); opacity:.35; }

/* ---- Pulsing glow on music + last button ---- */
.music-btn{ animation:cuteGlow 2.4s ease-in-out infinite; }
@keyframes cuteGlow{
  0%,100%{ box-shadow:0 10px 30px rgba(255,95,162,.35); }
  50%{ box-shadow:0 12px 44px rgba(201,167,255,.6), 0 0 0 8px rgba(255,150,200,.12); }
}
.last-btn{ animation:gradShift 4s linear infinite, cuteGlow 2s ease-in-out infinite; }

/* ---- Heartbeat on YES button to lure clicks ---- */
.yes-btn{ animation:heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat{
  0%,100%{ transform:scale(1); }
  15%{ transform:scale(1.08); }
  30%{ transform:scale(1); }
  45%{ transform:scale(1.05); }
}
.yes-btn:hover{ animation:btnBounce .6s ease; }

/* ---- Cuter loader: bouncing bear + dotted ring ---- */
.loader-gift::after{
  content:'🎀'; position:absolute; margin-left:-18px; margin-top:-8px; font-size:28px;
  animation:bob 1.5s ease-in-out infinite;
}
.loader-content::before{
  content:'🧸✨🎂✨🎈'; display:block; font-size:20px; letter-spacing:6px;
  margin-bottom:6px; animation:bob 2s ease-in-out infinite;
}

/* ---- Flip card cuter glow ---- */
.flip-card{ transition:transform .3s; }
@media (hover:hover){ .flip-card:hover{ transform:translateY(-6px); } }
.flip-back{ box-shadow:0 14px 40px rgba(201,167,255,.5); }
.flip-front{ box-shadow:0 8px 24px rgba(255,95,162,.2); }

/* ---- Polaroid tape decoration ---- */
.polaroid::before{
  content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:60px; height:22px; background:rgba(201,167,255,.5); border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

/* ---- Cute dashed frame + shimmer on countdown boxes ---- */
.cd-box{ animation:cuteGlow 3s ease-in-out infinite; }
.cd-box:nth-child(2){ animation-delay:.3s; }
.cd-box:nth-child(3){ animation-delay:.6s; }
.cd-box:nth-child(4){ animation-delay:.9s; }

/* ---- Twinkles that JS scatters across the page ---- */
.twinkle{ position:fixed; z-index:50; pointer-events:none; font-size:16px;
  animation:twinklePop 1.4s ease forwards; }
@keyframes twinklePop{
  0%{ transform:scale(0) rotate(0); opacity:0; }
  40%{ transform:scale(1.2) rotate(90deg); opacity:1; }
  100%{ transform:scale(0) rotate(180deg); opacity:0; }
}

/* ---- Cute pill dividers between sections ---- */
.section + .section::before{
  content:'· ♡ · ✧ · ♡ ·'; display:block; text-align:center; letter-spacing:4px;
  color:var(--pink-soft); font-size:1.1rem; margin-bottom:30px; opacity:.8;
}

/* ---- Bouncy entrance for reveal (cuter) ---- */
.reveal{ transition:opacity .8s ease, transform .8s cubic-bezier(.34,1.56,.64,1); }

/* ---- Balloon shine ---- */
.balloon::before{
  content:''; position:absolute; top:16px; left:18px; width:20px; height:26px;
  background:rgba(255,255,255,.6); border-radius:50%; filter:blur(1px);
}

/* ---- Gift box cuter idle wiggle ---- */
.gift-bow{ animation:bob 1.6s ease-in-out infinite; }

/* ---- Dream room: cozy inner glow ---- */
.dream-room{ box-shadow:var(--shadow-soft), inset 0 0 60px rgba(255,255,255,.5); }

/* ---- Envelope hover lift ---- */
.envelope{ transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
@media (hover:hover){ .envelope:hover{ transform:translateY(-8px) scale(1.02); } }

/* ---- Cursor: cuter pulse ---- */
.cursor{ animation:cursorPulse 1.4s ease-in-out infinite; }
@keyframes cursorPulse{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(255,95,162,.8)); } 50%{ filter:drop-shadow(0 0 12px rgba(255,150,200,1)); } }

/* ---- Extra rounded, softer glass everywhere ---- */
.glass-card,.tl-card,.cd-box,.travel-card,.gen-card,.quiz-card{ border-radius:32px; }

/* ---- Real photos: gentle fade-in as they lazy-load, and no native
   long-press "save image" callout fighting the tap-to-zoom interaction ---- */
.tl-photo img,.polaroid .pol-img img,.lightbox-img img,.placeholder-photo img{
  opacity:0; animation:photoFadeIn .45s ease forwards;
  -webkit-touch-callout:none; -webkit-user-drag:none; user-select:none;
}
@keyframes photoFadeIn{ to{ opacity:1; } }

/* ---- Mobile: keep it adorable & tidy ---- */
@media (max-width:520px){
  .intro-buttons{ gap:14px; }
  .big-btn{ padding:16px 34px; font-size:1.15rem; }
  .section + .section::before{ font-size:.95rem; }
}
/* Lighter backdrop-filter blur on phones — frosted-glass blur is one of
   the most GPU-costly effects, and here it's used on a dozen+ cards that
   can all be on screen while scrolling. A smaller radius looks nearly
   identical but is far cheaper to composite every frame. */
@media (max-width:640px){
  .glass-card,.cd-box,.tl-card,.travel-card,.typing,.scroll-cue{ backdrop-filter:blur(8px) saturate(1.2); -webkit-backdrop-filter:blur(8px) saturate(1.2); }
  .popup-overlay,.lightbox,.ow-modal{ backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
}

/* ---- Small phones: denser grids so cards don't stack 1-per-row ---- */
@media (max-width:420px){
  .reasons-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .travel-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .openwhen-grid{ grid-template-columns:1fr; }
  .flip-card{ height:130px; }
  .polaroid{ width:min(44vw,190px); }
  .cake{ width:170px; height:154px; }
  .cake-plate{ width:190px; }
}

/* =================================================================
   🪙 SCRATCH CARD
================================================================= */
.scratch-wrap{ display:grid; place-items:center; gap:24px; }
.scratch-card{ position:relative; width:min(420px,88vw); height:230px; border-radius:26px;
  overflow:hidden; box-shadow:var(--shadow-soft); }
.scratch-under{ position:absolute; inset:0; display:grid; place-items:center; padding:26px; text-align:center;
  background:linear-gradient(135deg,#fff0f7,#eadcff 60%,#ffe8d6); }
.scratch-msg{ font-family:var(--font-script); font-size:clamp(1.4rem,4.5vw,2rem); color:var(--pink); line-height:1.35; }
.scratch-canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:none;
  touch-action:none; border-radius:26px; }
@media (hover:none){ .scratch-canvas{ cursor:grab; } }

/* =================================================================
   💌 OPEN WHEN... WALL
================================================================= */
.openwhen-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:20px; max-width:900px; margin:0 auto; }
.ow-env{ position:relative; height:150px; border-radius:18px; cursor:none;
  background:linear-gradient(135deg,#ffd0e6,#e0c3ff); box-shadow:var(--shadow-soft);
  display:grid; place-items:center; padding:18px; text-align:center; overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
@media (hover:none){ .ow-env{ cursor:pointer; } }
.ow-env::before{ content:''; position:absolute; top:0; left:0; right:0; height:60%;
  background:linear-gradient(135deg,#ff9ecb,#c9a7ff);
  clip-path:polygon(0 0,50% 70%,100% 0); opacity:.9; }
@media (hover:hover){ .ow-env:hover{ transform:translateY(-8px) scale(1.03); box-shadow:var(--shadow-lift); } }
.ow-label{ position:relative; z-index:2; font-family:var(--font-round); font-weight:700;
  color:var(--ink); margin-top:30px; }
.ow-tag{ position:absolute; top:10px; z-index:2; font-size:22px; }
/* modal for opened note */
.ow-modal{ position:fixed; inset:0; z-index:9600; display:grid; place-items:center; padding:20px;
  background:rgba(120,60,100,.4); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:.4s; }
.ow-modal.show{ opacity:1; visibility:visible; }
.ow-note{ background:linear-gradient(#fffdf8,#fff5fb); border-radius:20px; padding:36px 30px;
  max-width:440px; box-shadow:var(--shadow-lift); transform:scale(.8) rotate(-3deg); transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  border:2px dashed var(--pink-soft); }
.ow-modal.show .ow-note{ transform:scale(1) rotate(0); }
.ow-note h3{ font-family:var(--font-display); color:var(--pink); font-size:1.4rem; margin-bottom:14px; }
.ow-note p{ font-family:var(--font-script); font-size:1.4rem; color:var(--ink); line-height:1.4; margin-bottom:22px; }

/* =================================================================
   🏆 CERTIFICATE OF CUTENESS
================================================================= */
.certificate{ max-width:600px; margin:0 auto; padding:clamp(28px,5vw,48px); text-align:center;
  background:linear-gradient(160deg,#fffdf8,#fff0f7); border-radius:28px; position:relative;
  border:3px double var(--pink); box-shadow:var(--shadow-soft);
  outline:6px solid rgba(255,255,255,.7); outline-offset:-16px; }
.cert-seal{ position:absolute; top:-26px; left:50%; transform:translateX(-50%); font-size:54px;
  filter:drop-shadow(0 6px 12px rgba(255,180,60,.5)); animation:bob 2.4s ease-in-out infinite; }
.cert-top{ font-family:var(--font-round); font-weight:700; letter-spacing:4px; color:var(--lavender);
  margin-top:20px; font-size:.85rem; }
.cert-title{ font-family:var(--font-display); font-size:clamp(1.4rem,4.5vw,2.2rem); color:var(--pink); margin:6px 0; }
.cert-award{ font-family:var(--font-round); color:var(--ink-soft); font-size:.95rem; }
.cert-name{ font-family:var(--font-script); font-size:clamp(2.4rem,9vw,4rem); color:var(--lavender);
  margin:6px 0; line-height:1; }
.cert-body{ font-family:var(--font-body); font-size:.9rem; color:var(--ink); line-height:1.6; margin:14px auto; max-width:440px; }
.cert-footer{ display:flex; justify-content:space-around; margin-top:26px; flex-wrap:wrap; gap:16px; }
.cert-sign{ display:flex; flex-direction:column; align-items:center; }
.cert-sign span{ font-family:var(--font-script); font-size:1.4rem; color:var(--pink); border-bottom:2px solid var(--pink-soft); padding-bottom:2px; }
.cert-sign small{ font-family:var(--font-round); color:var(--ink-soft); font-size:.7rem; margin-top:4px; text-transform:uppercase; letter-spacing:1px; }
.certificate:hover{ transform:rotate(-1deg) scale(1.01); transition:transform .4s; }

/* =================================================================
   🎤 MIC BLOW BUTTON
================================================================= */
.mic-btn{ margin-top:14px; font-size:.95rem; padding:10px 22px;
  background:linear-gradient(135deg,var(--baby-blue),var(--lavender)); }
.mic-btn.listening{ animation:cuteGlow 1s ease-in-out infinite; }
.mic-status{ font-family:var(--font-round); font-weight:600; color:var(--ink-soft); margin-top:10px; min-height:1.4em; }

/* =================================================================
   📼 CASSETTE PLAYER
================================================================= */
.cassette{ position:relative; width:min(420px,90vw); margin:0 auto; padding:22px 20px 28px;
  border-radius:22px; cursor:none; box-shadow:var(--shadow-lift);
  background:linear-gradient(160deg,#ff9ecb,#c9a7ff);
  border:5px solid #fff; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
@media (hover:none){ .cassette{ cursor:pointer; } }
@media (hover:hover){ .cassette:hover{ transform:translateY(-6px) rotate(-1deg); } }
.cass-label{ background:#fffdf8; border-radius:10px; padding:8px 14px; margin-bottom:16px;
  display:flex; justify-content:space-between; align-items:center; box-shadow:inset 0 0 0 2px var(--pink-soft); }
.cass-title{ font-family:var(--font-script); color:var(--pink); font-size:1.3rem; }
.cass-sub{ font-family:var(--font-round); font-weight:600; color:var(--ink-soft); font-size:.7rem; text-transform:uppercase; letter-spacing:1px; }
.cass-window{ background:#3a2338; border-radius:14px; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cass-reel{ width:64px; height:64px; border-radius:50%; background:radial-gradient(circle,#fff 0 22%, #d9b8e6 22% 40%, #6a4a68 40%);
  display:grid; place-items:center; box-shadow:inset 0 0 0 6px rgba(255,255,255,.15); }
.cass-reel span{ width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px #b98fd0;
  position:relative; }
.cass-reel span::before,.cass-reel span::after{ content:''; position:absolute; left:50%; top:50%;
  width:5px; height:22px; background:#b98fd0; transform:translate(-50%,-50%); border-radius:3px; }
.cass-reel span::after{ transform:translate(-50%,-50%) rotate(90deg); }
.cassette.playing .cass-reel{ animation:reelSpin 1.6s linear infinite; }
@keyframes reelSpin{ to{ transform:rotate(360deg); } }
.cass-tape{ flex:1; height:6px; background:linear-gradient(90deg,#b98fd0,#fff,#b98fd0); border-radius:4px; opacity:.7; }
.cass-holes{ display:flex; justify-content:center; gap:60px; margin-top:12px; }
.cass-holes i{ width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.5); box-shadow:inset 0 2px 4px rgba(0,0,0,.2); }
.cass-play{ position:absolute; right:16px; bottom:14px; width:40px; height:40px; border-radius:50%;
  background:#fff; color:var(--pink); display:grid; place-items:center; font-size:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.2); }
.cassette.playing .cass-play{ font-size:14px; }

/* =================================================================
   🥠 FORTUNE COOKIE
================================================================= */
.fortune-wrap{ display:grid; place-items:center; gap:22px; }
.cookie{ font-size:0; position:relative; width:120px; height:120px; cursor:none;
  display:grid; place-items:center; }
@media (hover:none){ .cookie{ cursor:pointer; } }
.cookie-half{ font-size:90px; line-height:1; position:absolute; transition:transform .5s cubic-bezier(.34,1.56,.64,1); filter:drop-shadow(0 8px 12px rgba(200,140,80,.4)); }
@media (hover:hover){ .cookie:hover .cookie-half{ transform:scale(1.06); } }
.cookie.cracked .top{ transform:translate(-30px,-14px) rotate(-24deg); }
.cookie.cracked .bottom{ transform:translate(30px,14px) rotate(24deg); }
.cookie.cracked{ animation:cookieShake .4s ease; }
@keyframes cookieShake{ 0%,100%{ transform:rotate(0);} 25%{ transform:rotate(-6deg);} 75%{ transform:rotate(6deg);} }
.fortune-slip{ max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  background:#fffdf8; border:2px dashed var(--pink-soft); border-radius:12px; padding:0;
  transition:all .6s cubic-bezier(.22,1,.36,1); }
.fortune-slip.show{ max-width:460px; opacity:1; padding:16px 22px; white-space:normal; }
.fortune-slip p{ font-family:var(--font-script); font-size:clamp(1.2rem,3.5vw,1.6rem); color:var(--pink); line-height:1.35; }

/* =================================================================
   ✨ CONSTELLATION
================================================================= */
.constellation-wrap{ max-width:820px; margin:0 auto; text-align:center;
  background:linear-gradient(160deg,#2a1240,#3d1a52 60%,#5a2168); border-radius:30px;
  padding:clamp(20px,4vw,40px); box-shadow:var(--shadow-lift); overflow:hidden; }
#constellationCanvas{ width:100%; height:auto; display:block; }
.constellation-msg{ font-family:var(--font-script); font-size:clamp(1.4rem,4vw,2.2rem); color:#fff;
  margin-top:16px; opacity:0; transition:opacity 1.2s ease; text-shadow:0 2px 20px rgba(255,150,220,.6); }
.constellation-msg.show{ opacity:1; }

/* =================================================================
   🎂 COUNTDOWN-OVER BIRTHDAY SURPRISE
================================================================= */
.bday-surprise{ position:fixed; inset:0; height:100vh; height:100dvh; z-index:9850; display:grid; place-items:center; text-align:center;
  background:linear-gradient(135deg,#ff7fb5,#c9a7ff 50%,#ffb98f); opacity:0; visibility:hidden;
  transition:opacity .8s, visibility .8s; overflow:hidden; padding:20px; }
.bday-surprise.show{ opacity:1; visibility:visible; }
.bday-content{ position:relative; z-index:3; }
.bday-cake{ font-size:clamp(70px,15vw,120px); animation:giftBounce 1.3s ease-in-out infinite; }
.bday-eyebrow{ font-family:var(--font-round); font-weight:600; letter-spacing:2px; color:#fff; opacity:.85; text-transform:uppercase; font-size:.9rem; }
.bday-title{ font-family:var(--font-display); font-size:clamp(2.2rem,9vw,4.5rem); color:#fff;
  text-shadow:0 6px 30px rgba(255,95,162,.6); line-height:1.05; margin:8px 0; }
.bday-sub{ font-family:var(--font-script); font-size:clamp(1.3rem,4vw,2rem); color:#fff; margin-bottom:24px; line-height:1.4; }
.bday-fireworks{ position:absolute; inset:0; pointer-events:none; }