/* =========================================================================
   FOR YOU, ALWAYS — stylesheet
   A soft, cinematic, one-path love story.
   ========================================================================= */

:root{
  /* palette */
  --blush-white:  #FFF6F5;
  --blush-pink:   #FFE9E8;
  --peach-cream:  #FDEEDB;
  --mint:         #E8F5E9;
  --lavender:     #EAE6FB;
  --sky:          #E7F5FC;
  --ivory:        #FFFBEF;

  --ink:          #4A4048;
  --ink-soft:     #6E6470;
  --gold:         #E8C77E;
  --rose:         #D98A93;
  --plum:         #8A7CA8;

  /* type */
  --font-script:  'Caveat', cursive;
  --font-serif:   'Cormorant Garamond', serif;
  --font-sans:    'Quicksand', sans-serif;

  --ease-dream: cubic-bezier(.22,.9,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--blush-white);
  overflow-x:hidden;
  cursor:default;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }

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

/* -------------------------------------------------------------------------
   CURSOR SPARKLE
   ------------------------------------------------------------------------- */
#cursor-glow{
  position:fixed; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,217,125,0.9) 0%, rgba(255,217,125,0) 70%);
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:opacity .3s ease; opacity:0; mix-blend-mode:multiply;
}

/* -------------------------------------------------------------------------
   PASSWORD GATE
   ------------------------------------------------------------------------- */
#password-screen{
  position:fixed; inset:0; z-index:10001;
  background:linear-gradient(180deg,#20203a 0%, #2f2b56 55%, #453a6c 100%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s var(--ease-dream), visibility .9s;
}
#password-screen.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.password-card{
  position:relative; z-index:2; width:min(90vw, 360px); text-align:center;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:20px; padding:2.6rem 2rem 2.2rem;
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
  animation:card-rise 1s var(--ease-dream) both;
}
.password-moon{
  width:56px; height:56px; margin:0 auto 1rem; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fffdf5, #f3e8c9 55%, #e2d19c);
  box-shadow:0 0 40px 10px rgba(255,246,220,0.3);
  animation:moon-breathe 3s ease-in-out infinite;
}
.password-title{ font-size:2rem; color:var(--gold); margin:0 0 .3rem; }
.password-subtitle{ font-size:.85rem; color:rgba(255,255,255,0.65); letter-spacing:.5px; margin:0 0 1.4rem; }
#password-form{ display:flex; flex-direction:column; gap:.9rem; }
#password-input{
  font-family:var(--font-sans); font-size:1rem; text-align:center; letter-spacing:2px;
  padding:.8rem 1rem; border-radius:40px; border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.1); color:var(--ivory); outline:none;
  transition:border-color .3s ease, background .3s ease;
}
#password-input::placeholder{ color:rgba(255,255,255,0.35); letter-spacing:2px; }
#password-input:focus{ border-color:var(--gold); background:rgba(255,255,255,0.16); }
.password-submit{ align-self:center; margin-top:.2rem; }
.password-hint{ font-size:.8rem; color:rgba(255,255,255,0.5); font-style:italic; margin:.9rem 0 0; min-height:1.2em; }
.password-error{
  font-size:.82rem; color:#f0a3a3; margin:.6rem 0 0; opacity:0; height:0; overflow:hidden;
  transition:opacity .3s ease;
}
.password-error.show{ opacity:1; height:auto; }
.password-card.shake{ animation:card-shake .45s ease; }
@keyframes card-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-10px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-6px); }
  80%{ transform:translateX(4px); }
}

/* -------------------------------------------------------------------------
   LOADING SCREEN
   ------------------------------------------------------------------------- */
#loading-screen{
  position:fixed; inset:0; z-index:10000;
  background:linear-gradient(180deg,#1b1a2e 0%, #2b2a4a 60%, #3a3560 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity 1.2s var(--ease-dream), visibility 1.2s;
}
#loading-screen.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loading-sky{ position:relative; width:140px; height:140px; margin-bottom:1.5rem; }
.loading-moon{
  position:absolute; inset:0; margin:auto; width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fffdf5, #f3e8c9 60%, #e4d6a5);
  box-shadow:0 0 40px 10px rgba(255,246,220,0.35);
  animation:moon-breathe 3s ease-in-out infinite;
}
@keyframes moon-breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
.loading-stars{ position:absolute; inset:0; }
.loading-stars::before, .loading-stars::after{
  content:''; position:absolute; width:3px; height:3px; background:#fff; border-radius:50%;
  box-shadow:
    18px 24px #fff, 60px 10px #fff, 100px 60px #fff, 8px 90px #fff,
    120px 100px #fff, 40px 120px #fff, 130px 30px #fff, 70px 80px #fff;
  animation:twinkle 2s ease-in-out infinite alternate;
}
.loading-stars::after{ animation-delay:1s; }
@keyframes twinkle{ 0%{ opacity:.3;} 100%{ opacity:1;} }
.loading-text{ color:var(--ivory); font-family:var(--font-script); font-size:1.6rem; letter-spacing:.5px; }
.dots span{ animation:dot-blink 1.4s infinite; opacity:0; }
.dots span:nth-child(2){ animation-delay:.2s;} .dots span:nth-child(3){ animation-delay:.4s;}
@keyframes dot-blink{ 0%,100%{opacity:0;} 50%{opacity:1;} }
.loading-bar-track{ width:220px; height:4px; border-radius:4px; background:rgba(255,255,255,0.15); margin-top:1.2rem; overflow:hidden; }
.loading-bar-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--gold),#fff2c8); border-radius:4px; transition:width .25s ease; }

/* -------------------------------------------------------------------------
   MUSIC CONTROLLER
   ------------------------------------------------------------------------- */
.music-controller{
  position:fixed; bottom:22px; right:22px; z-index:500;
  display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:40px; padding:.5rem .6rem;
  box-shadow:0 8px 24px rgba(120,90,120,0.15);
  transition:all .5s var(--ease-dream);
}
.music-toggle-btn{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--rose),var(--plum)); color:#fff;
  box-shadow:0 4px 12px rgba(150,110,150,0.35);
  animation:gentle-pulse 3s ease-in-out infinite;
}
@keyframes gentle-pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.07);} }
.music-panel{ display:flex; align-items:center; gap:.5rem; max-width:0; overflow:hidden; opacity:0; transition:all .4s var(--ease-dream); }
.music-controller:not(.collapsed) .music-panel{ max-width:220px; opacity:1; margin-right:.2rem; }
.music-panel button{ font-size:1rem; color:var(--ink); }
#volume-slider{ width:80px; accent-color:var(--rose); }

/* -------------------------------------------------------------------------
   CHAPTER / SCENE SYSTEM
   ------------------------------------------------------------------------- */
#stage{ position:relative; width:100%; height:100vh; height:100dvh; overflow:hidden; }
.chapter{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; filter:blur(18px);
  transform:scale(1.05);
  transition:opacity 1.1s var(--ease-dream), filter 1.1s var(--ease-dream), transform 1.3s var(--ease-dream);
  overflow:hidden;
}
.chapter.active{ opacity:1; visibility:visible; filter:blur(0); transform:scale(1); z-index:2; }
.chapter.leaving{ opacity:0; filter:blur(18px); transform:scale(0.96); z-index:1; }

.scene{ position:absolute; inset:0; z-index:0; }
.chapter-content{
  position:relative; z-index:2; text-align:center; padding:2rem;
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
  max-width:640px; width:100%;
  max-height:100%; overflow-y:auto;
}
.chapter-content.narrow{ max-width:520px; }
.chapter-content.wide{ max-width:1000px; width:100%; }

.chapter-title{ font-size:3rem; color:var(--ink); margin:0; }
.chapter-title.light{ color:var(--ivory); }
.hint-text{ font-size:.95rem; color:var(--ink-soft); letter-spacing:.5px; opacity:.8; animation:hint-fade 2.4s ease-in-out infinite; }
.hint-text.light{ color:rgba(255,255,255,0.75); }
@keyframes hint-fade{ 0%,100%{opacity:.4;} 50%{opacity:.9;} }

.serif{ font-family:var(--font-serif); font-size:1.25rem; line-height:1.7; color:var(--ink); }
.script{ font-family:var(--font-script); }
.script.big{ font-size:2.4rem; color:var(--rose); }

/* Interactive object base — everything that advances the story */
.interactive-object{
  color:var(--rose);
  transition:transform .35s var(--ease-dream), filter .35s ease;
  filter:drop-shadow(0 6px 18px rgba(200,140,150,0.35));
}
.interactive-object:hover{ transform:scale(1.12) translateY(-4px); filter:drop-shadow(0 10px 24px rgba(200,140,150,0.5)); }
.interactive-object:active{ transform:scale(0.95); }
.interactive-object.hidden{ display:none; }

.next-arrow{
  font-family:var(--font-sans); font-weight:600; color:var(--plum);
  padding:.8rem 1.6rem; border-radius:40px; background:rgba(255,255,255,0.5);
  backdrop-filter:blur(8px); box-shadow:0 6px 20px rgba(140,120,160,0.25);
  transition:transform .3s var(--ease-dream);
}
.next-arrow:hover{ transform:translateX(6px) scale(1.04); }

/* Typewriter text */
.typewriter-line{
  font-family:var(--font-serif); font-size:2.2rem; color:var(--ivory);
  border-right:2px solid rgba(255,255,255,0.6); white-space:nowrap; overflow:hidden;
  width:0; animation:none;
}
.typewriter-line.script{ font-family:var(--font-script); font-size:2.4rem; color:var(--gold); }
.typewriter-line.typed{ border-right:none; }

/* =========================================================================
   BACKGROUND SCENES
   ========================================================================= */
.scene-night{ background:linear-gradient(180deg,#171633 0%, #262454 55%, #3b3567 100%); }
.scene-dawn{ background:linear-gradient(180deg,var(--peach-cream), var(--blush-pink)); }
.scene-soft-pink{ background:linear-gradient(160deg,var(--blush-pink), var(--blush-white)); }
.scene-garden{ background:linear-gradient(160deg,var(--mint), var(--ivory)); }
.scene-cream{ background:linear-gradient(160deg,var(--ivory), var(--peach-cream)); }
.scene-wood{ background:linear-gradient(180deg,#5c4530,#3e2f20); }
.scene-map{ background:linear-gradient(160deg,var(--peach-cream), var(--sky)); }
.scene-galaxy{ background:radial-gradient(ellipse at 50% 30%, #362a5c, #17132c 70%); }
.scene-cinema{ background:#0e0c14; }

/* Stars */
.stars-layer{ position:absolute; inset:0; }
.stars-layer::before, .stars-layer::after{
  content:''; position:absolute; inset:0; background-repeat:repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 120px 80px, #fff, transparent),
    radial-gradient(1px 1px at 200px 150px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 300px 40px, #fff, transparent),
    radial-gradient(1px 1px at 90px 200px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 250px 220px, #fff, transparent),
    radial-gradient(1px 1px at 350px 260px, #fff, transparent);
  background-size:400px 300px;
  animation:stars-twinkle 4s ease-in-out infinite alternate;
}
.stars-layer::after{ animation-delay:2s; opacity:.6; background-size:500px 400px; }
.stars-layer.sparse::before, .stars-layer.sparse::after{ opacity:.4; }
@keyframes stars-twinkle{ 0%{opacity:.5;} 100%{opacity:1;} }

.shooting-stars-layer{ position:absolute; inset:0; overflow:hidden; }
.shooting-stars-layer::before, .shooting-stars-layer::after{
  content:''; position:absolute; width:2px; height:2px; background:#fff; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.1);
  top:10%; left:-10%;
  animation:shoot 6s linear infinite;
}
.shooting-stars-layer::after{ top:35%; animation-delay:3s; animation-duration:8s; }
@keyframes shoot{
  0%{ transform:translate(0,0) scaleX(1); opacity:0; }
  2%{ opacity:1; }
  15%{ transform:translate(60vw,40vh) scaleX(12); opacity:0; }
  100%{ opacity:0; }
}

/* Clouds */
.clouds-layer{ position:absolute; inset:0; overflow:hidden; }
.clouds-layer::before, .clouds-layer::after{
  content:''; position:absolute; width:180px; height:60px; border-radius:60px;
  filter:blur(2px); top:15%; left:-220px;
  animation:cloud-drift 40s linear infinite;
}
.clouds-layer::after{ top:45%; width:120px; height:40px; animation-duration:55s; animation-delay:8s; }
.clouds-night::before, .clouds-night::after{ background:rgba(255,255,255,0.08); }
@keyframes cloud-drift{ 0%{ transform:translateX(0);} 100%{ transform:translateX(160vw);} }

/* Moon (chapter 1) */
.moon{
  position:absolute; top:12%; right:16%; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fffdf5, #f3e8c9 55%, #e2d19c);
  box-shadow:0 0 60px 16px rgba(255,246,220,0.25);
  cursor:pointer;
  animation:moon-float 6s ease-in-out infinite;
}
@keyframes moon-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

/* Floating hearts */
.floating-hearts-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.floating-hearts-layer .fh{
  position:absolute; bottom:-10%; font-size:1.4rem; color:var(--rose); opacity:.7;
  animation:heart-rise linear infinite;
}
@keyframes heart-rise{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.8; }
  100%{ transform:translateY(-115vh) translateX(20px) rotate(20deg); opacity:0; }
}


/* Sparkles */
.sparkle-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.sparkle-layer .spk{
  position:absolute; width:6px; height:6px; background:var(--gold); border-radius:50%;
  opacity:0; animation:sparkle-pop 2.2s ease-in-out infinite;
}
@keyframes sparkle-pop{ 0%,100%{opacity:0; transform:scale(0);} 50%{opacity:1; transform:scale(1);} }

/* Fairy lights for polaroid wall */
.fairy-lights-layer{ position:absolute; top:0; left:0; right:0; height:40px; display:flex; justify-content:space-around; align-items:flex-start; padding-top:6px; }
.fairy-lights-layer::before{ content:''; }

/* =========================================================================
   CHAPTER 2 — ENVELOPE
   ========================================================================= */
.envelope{ position:relative; width:440px; height:340px; cursor:pointer; perspective:1200px; }
.envelope-back{
  position:absolute; inset:0; background:var(--ivory);
  border-radius:6px; box-shadow:0 20px 40px rgba(50,100,90,0.25);
}
.envelope-front{
  position:absolute; inset:0; background:linear-gradient(160deg,#f6d9c9,#f0c3ae);
  clip-path:polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%);
  border-radius:6px; z-index:3; transition:opacity .6s ease;
}
.envelope-flap{
  position:absolute; top:0; left:0; right:0; height:222px;
  background:linear-gradient(160deg,#f0c3ae,#e7ac93);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top; z-index:4; backface-visibility:hidden;
  transition:transform .9s var(--ease-dream), opacity .5s ease .3s;
  border-radius:6px 6px 0 0;
}
.envelope.open .envelope-flap{ transform:rotateX(180deg); opacity:0; z-index:1; }
.envelope.open .envelope-front{ opacity:0; z-index:1; }
.letter-inside{
  position:absolute; left:5%; right:5%; bottom:6%; top:14%;
  background:var(--blush-white); border-radius:8px; padding:1.4rem 1.6rem;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  z-index:2;
  transition:all .9s var(--ease-dream) .3s;
}
.envelope.open .letter-inside{
  position:fixed; left:50%; right:auto; top:50%; bottom:auto;
  width:min(90vw, 460px); max-height:80vh; overflow-y:auto;
  transform:translate(-50%,-50%);
  padding:2.2rem 2rem;
  box-shadow:0 30px 70px rgba(0,0,0,0.22);
  z-index:50;
}
.letter-inside .paper-airplane{ display:none; }
.envelope.open .letter-inside .paper-airplane{ display:block; margin-top:.4rem; }

/* =========================================================================
   CHAPTER 3/4 — FLOWERS
   ========================================================================= */
.bloom-flower svg .petal-group{ transform-origin:50% 50%; animation:sway 4s ease-in-out infinite; }
@keyframes sway{ 0%,100%{ transform:rotate(-4deg);} 50%{ transform:rotate(4deg);} }

.flower-field{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 100px)); justify-content:center;
  gap:1rem; width:100%; max-height:52vh; overflow-y:auto; padding:.5rem;
}
.flower-item{
  position:relative; width:90px; height:120px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
.flower-item .stem{ position:absolute; bottom:0; width:3px; height:34px; background:#8FBF9F; left:50%; transform:translateX(-50%); z-index:0; }
.flower-item .mini-flower{ position:relative; z-index:1; margin-bottom:-4px; overflow:visible; }
.flower-item .mini-flower .petals{
  transform-origin:50px 50px; transform:scale(0.18); opacity:.9;
  transition:transform .7s var(--ease-dream);
}
.flower-item .mini-flower .flower-center{
  transform-origin:50px 50px; transform:scale(0.35);
  transition:transform .6s var(--ease-dream) .1s;
}
.flower-item:hover .mini-flower .petals{ transform:scale(0.24); }
.flower-item.bloomed .mini-flower .petals{
  transform:scale(1);
  animation:sway 4.5s ease-in-out .7s infinite;
}
/*.flower-item.bloomed .mini-flower .flower-center{ transform:scale(1);
.flower-item .reason-tooltip{
  position:absolute; bottom:115%; left:50%; transform:translateX(-50%) translateY(6px);
  width:180px; background:#fff; border-radius:12px; padding:.6rem .8rem; font-size:.85rem;
  font-family:var(--font-serif); color:var(--ink); box-shadow:0 10px 24px rgba(0,0,0,0.15);
  opacity:0; pointer-events:none; transition:all .3s var(--ease-dream); z-index:5;
} }*/
.flower-item .reason-tooltip{
  position:absolute; top:100%; margin-top:10px; left:50%; transform:translateX(-50%) translateY(-6px);
  width:180px; background:#fff; border-radius:12px; padding:.6rem .8rem; font-size:.85rem;
  font-family:var(--font-serif); color:var(--ink); box-shadow:0 10px 24px rgba(0,0,0,0.15);
  opacity:0; pointer-events:none; transition:all .3s var(--ease-dream); z-index:5;
}
.flower-item.bloomed .reason-tooltip{ opacity:1; transform:translateX(-50%) translateY(0); }

.butterfly-object{ margin-top:1rem; }
.butterfly-object svg path{ animation:wing-flap 0.5s ease-in-out infinite alternate; transform-origin:50px 35px; }
@keyframes wing-flap{ 0%{ transform:scaleX(1);} 100%{ transform:scaleX(0.85);} }

/* =========================================================================
   CHAPTER 7 — LOVE LETTER
   ========================================================================= */
.unfold-letter{
  background:var(--ivory); border-radius:10px; padding:2.4rem 2rem; width:100%;
  box-shadow:0 20px 50px rgba(150,120,100,0.2);
  transform-origin:top center; animation:unfold 1.4s var(--ease-dream) both;
}
@keyframes unfold{ 0%{ transform:scaleY(0.05); opacity:0;} 60%{ opacity:1;} 100%{ transform:scaleY(1); opacity:1;} }
.love-letter-text{ text-align:left; white-space:pre-wrap; }
.wax-seal{ margin-top:.5rem; }
.wax-seal:hover svg circle:first-child{ filter:brightness(1.1); }

/* =========================================================================
   CHAPTER 8 — POLAROID WALL
   ========================================================================= */
.polaroid-wall{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem 1.6rem;
  max-height:58vh; overflow-y:auto; padding:1.4rem;
  background:rgba(255,255,255,0.03);
}
.polaroid{
  width:130px; background:#fdfdfa; padding:10px 10px 26px; border-radius:3px;
  box-shadow:0 12px 20px rgba(0,0,0,0.35);
  cursor:pointer; transform:rotate(var(--rot,0deg));
  transition:transform .35s var(--ease-dream);
  animation:polaroid-swing 6s ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
.polaroid:hover{ transform:rotate(0deg) scale(1.08) translateY(-6px); z-index:5; }
.polaroid img{ width:100%; height:120px; object-fit:cover; background:linear-gradient(135deg,var(--lavender),var(--blush-pink)); border-radius:1px; }
.polaroid-placeholder{
  width:100%; height:120px; border-radius:1px; align-items:center; justify-content:center;
  font-size:1.8rem;
}
.polaroid .polaroid-cap{ font-family:var(--font-script); font-size:1rem; text-align:center; color:#555; margin-top:6px; }
@keyframes polaroid-swing{ 0%,100%{ transform:rotate(var(--rot,0deg));} 50%{ transform:rotate(calc(var(--rot,0deg) * -1));} }

.polaroid-lightbox{
  position:fixed; inset:0; background:rgba(20,15,10,0.9); z-index:2000;
  display:none; align-items:center; justify-content:center;
  opacity:0; transition:opacity .4s ease;
}
.polaroid-lightbox.open{ display:flex; opacity:1; }
.lightbox-photo-wrap{ background:#fdfdfa; padding:16px 16px 30px; border-radius:4px; max-width:min(80vw,420px); box-shadow:0 30px 80px rgba(0,0,0,0.5); }
.lightbox-photo-wrap img{ width:100%; max-height:50vh; object-fit:cover; background:linear-gradient(135deg,var(--lavender),var(--blush-pink)); }
.lightbox-placeholder{
  width:100%; height:50vh; max-height:340px; border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-script); font-size:2.4rem; color:rgba(0,0,0,0.35);
}
.lightbox-caption{ text-align:center; padding-top:.8rem; }
.lightbox-meta{ font-size:.8rem; color:#888; letter-spacing:.5px; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; color:#fff; font-size:2rem; background:rgba(255,255,255,0.1);
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background .3s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(255,255,255,0.25); }
.lightbox-close{ top:24px; right:24px; }
.lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }

/* =========================================================================
   CHAPTER 9 — POSTCARDS
   ========================================================================= */
.postcard-field{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem; max-height:55vh; overflow-y:auto; padding:1rem; }
.postcard{
  width:190px; background:#fff; border-radius:8px; padding:10px; cursor:pointer;
  box-shadow:0 10px 24px rgba(160,120,90,0.2);
  transition:transform .35s var(--ease-dream);
  border:1px solid #eee;
}
.postcard:hover{ transform:translateY(-6px) rotate(-1deg); }
.postcard .pc-img{ height:100px; border-radius:4px; background:linear-gradient(135deg,var(--sky),var(--peach-cream)); margin-bottom:.5rem; overflow:hidden; }
.postcard .pc-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.postcard .pc-place{ font-family:var(--font-script); font-size:1.3rem; color:var(--plum); }
.postcard .pc-note{ font-family:var(--font-serif); font-size:.85rem; max-height:0; overflow:hidden; transition:max-height .4s ease; }
.postcard.flipped .pc-note{ max-height:120px; margin-top:.3rem; }

/* =========================================================================
   CHAPTER 11 — CONSTELLATION
   ========================================================================= */
#constellation-canvas{ width:min(90vw,600px); height:min(60vh,420px); }
.shooting-star-btn.hidden{ display:none; }

/* =========================================================================
   CHAPTER 12 — GIFT
   ========================================================================= */
.gift-box-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.gift-note{ font-size:1.6rem; color:var(--plum); }
.gift-box{ position:relative; width:180px; height:150px; }
.gift-lid{
  position:absolute; top:0; left:-10px; right:-10px; height:38px; border-radius:8px;
  background:linear-gradient(160deg,#E3D4F5,#C9AEEA);
  transform-origin:left center; transition:transform 1s var(--ease-dream);
  z-index:3;
}
.gift-base{
  position:absolute; bottom:0; left:0; right:0; height:120px; border-radius:8px;
  background:linear-gradient(160deg,#F3D9E4,#E8B9CB);
  box-shadow:0 20px 40px rgba(180,140,160,0.3);
}
.gift-ribbon{
  position:absolute; top:0; bottom:0; left:50%; width:26px; transform:translateX(-50%);
  background:linear-gradient(180deg,#E8C77E,#D4A857); z-index:4;
  transition:opacity .5s ease, transform .6s var(--ease-dream);
  cursor:pointer;
}
.gift-ribbon::before{
  content:''; position:absolute; top:-16px; left:-14px; width:54px; height:32px;
  background:linear-gradient(160deg,#E8C77E,#D4A857); border-radius:50% 50% 20% 20%;
  clip-path:polygon(0 0,100% 0,80% 100%,50% 60%,20% 100%);
}
.gift-box.opened .gift-lid{ transform:translateY(-70px) rotate(-35deg); }
.gift-box.opened .gift-ribbon{ opacity:0; transform:translateX(-50%) scaleY(0.2); }
.gift-box.opened .gift-base{ box-shadow:0 0 80px 30px rgba(255,230,150,0.6), 0 20px 40px rgba(180,140,160,0.3); }
.gift-card{ background:var(--ivory); padding:1.6rem 2rem; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,0.12); display:flex; flex-direction:column; align-items:center; gap:1rem; animation:card-rise .8s var(--ease-dream) both; }
@keyframes card-rise{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }
.gift-card.hidden{ display:none; }

.glow-button{
  padding:.9rem 2rem; border-radius:40px; font-family:var(--font-sans); font-weight:600;
  background:linear-gradient(135deg,var(--gold),#f5dca0); color:#5a3d1a;
  box-shadow:0 0 24px 6px rgba(232,199,126,0.5);
  animation:glow-pulse 2.4s ease-in-out infinite;
  transition:transform .3s var(--ease-dream);
}
.glow-button:hover{ transform:scale(1.06); }
@keyframes glow-pulse{ 0%,100%{ box-shadow:0 0 18px 4px rgba(232,199,126,0.4);} 50%{ box-shadow:0 0 30px 10px rgba(232,199,126,0.7);} }

/* Projector fade-to-black transition element */
.projector-fade{
  position:fixed; inset:0; background:#000; z-index:5000; opacity:0; pointer-events:none;
  transition:opacity 1.2s ease;
}
.projector-fade.show{ opacity:1; pointer-events:all; }

/* =========================================================================
   CHAPTER 13 — VIDEO
   ========================================================================= */
.curtain{ position:absolute; top:0; bottom:0; width:52%; background:linear-gradient(90deg,#5c1f2e,#8c2f42 60%,#5c1f2e); z-index:5; box-shadow:inset -20px 0 40px rgba(0,0,0,0.4); transition:transform 1.6s var(--ease-dream); }
.curtain-left{ left:0; transform-origin:left; }
.curtain-right{ right:0; transform-origin:right; }
.curtains-open .curtain-left{ transform:translateX(-100%); }
.curtains-open .curtain-right{ transform:translateX(100%); }
.vintage-frame{
  position:relative; width:min(90vw,720px); border:14px solid #2b2118; border-radius:8px;
  box-shadow:0 0 0 4px #d8b06a, 0 30px 80px rgba(0,0,0,0.6);
  background:#000;
}
.vintage-frame video{ width:100%; display:block; border-radius:2px; background:#000; }
.video-controls{ display:flex; align-items:center; gap:.8rem; padding:.6rem 1rem; background:#1a1410; }
.video-controls button{ color:#f5dca0; font-size:1.1rem; }
#video-seek{ flex:1; accent-color:var(--gold); }
.glowing-heart svg path{ animation:heart-beat 1.2s ease-in-out infinite; }
@keyframes heart-beat{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.12);} }

/* =========================================================================
   CHAPTER 14 — FINALE
   ========================================================================= */
.celebration-scene{ overflow:hidden; }
#fireworks-canvas{ position:absolute; inset:0; }
.balloon-layer, .confetti-layer, .hearts-fill-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.balloon{ position:absolute; bottom:-15%; width:44px; height:56px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; animation:balloon-rise linear forwards; }
.balloon::after{ content:''; position:absolute; left:50%; top:100%; width:1px; height:60px; background:rgba(0,0,0,0.2); }
@keyframes balloon-rise{ to{ transform:translateY(-130vh) translateX(30px) rotate(8deg); } }
.confetti-piece{ position:absolute; top:-5%; width:8px; height:14px; animation:confetti-fall linear forwards; }
@keyframes confetti-fall{ to{ transform:translateY(110vh) rotate(540deg); opacity:.9; } }
.fill-heart{ position:absolute; bottom:-5%; color:var(--rose); animation:heart-rise linear forwards; }

.final-title{ font-size:4rem; color:var(--gold); text-shadow:0 0 30px rgba(232,199,126,0.6); }
.final-sub{ font-size:1.3rem; color:var(--ivory); }
.replay-btn{ margin-top:1.5rem; color:rgba(255,255,255,0.65); font-size:.9rem; letter-spacing:.5px; transition:color .3s ease; }
.replay-btn:hover{ color:#fff; }

/* -------------------------------------------------------------------------
   SECRET MESSAGE (easter egg)
   ------------------------------------------------------------------------- */
.secret-message{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.8);
  background:var(--ivory); padding:2rem 2.4rem; border-radius:16px; max-width:400px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,0.3); z-index:6000; opacity:0; pointer-events:none;
  transition:all .5s var(--ease-dream); font-family:var(--font-script); font-size:1.4rem; color:var(--rose);
}
.secret-message.show{ opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:all; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:768px){
  .chapter-title{ font-size:2.2rem; }
  .typewriter-line{ font-size:1.5rem; }
  .final-title{ font-size:2.6rem; }
  .envelope{ width:90vw; max-width:320px; }
  .music-controller{ bottom:14px; right:14px; }
  .vintage-frame{ width:94vw; }
  .polaroid{ width:110px; }
  #cursor-glow{ display:none; }
}
@media (max-width:480px){
  .chapter-content{ padding:1.2rem; }
  .flower-field, .postcard-field{ gap:.7rem; }
}