/* ================================================================
   DESIGN TOKENS
   Palette: cream base, blush pink, soft lavender, rose gold, peach,
   a single saturated "heart red" reserved for accents only.
   Type: Cormorant Garamond (display serif, romantic) + Quicksand
   (soft rounded body) + Dancing Script (handwritten signature accent)
   ================================================================ */
:root{
  --cream:        #FBF3EA;
  --white:        #FFFDFB;
  --blush:        #f9a5c4;
  --blush-deep:   #f586b1;
  --lavender:     #ccaef6;
  --lavender-deep:#D2BEEF;
  --purple:       #B79CE0;
  --rosegold:     #E9BBA9;
  --peach:        #FBD9B4;
  --heart-red:    #e51e49;
  --ink:          #301138;
  --ink-soft:     #7A6482;
  --glass-bg:     rgba(255,253,251,0.45);
  --glass-border: rgba(244, 155, 155, 0.6);
  --glass-blur:   18px;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Quicksand', sans-serif;
  --font-script:  'Dancing Script', cursive;

  --shadow-soft:  0 20px 60px rgba(154, 68, 117, 0.25);
  --shadow-glow:  0 0 40px rgba(226, 140, 106, 0.5);
}

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

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  
  background: linear-gradient(160deg, var(--cream) 0%, var(--blush) 45%, var(--lavender) 100%);
  overflow-x: hidden;
  cursor: none;
  min-height: 100vh;
  color:black 
}

@media (hover:none), (pointer:coarse){
  body{ cursor: auto; }
}

img{ max-width:100%; display:block; }
button{ font-family: inherit; border:none; background:none; cursor:pointer; }
input{ font-family: inherit; }
::selection{ background: var(--blush-deep); color: var(--ink); }

.hidden{ display:none !important; }

/* ================================================================
   GLASSMORPHISM UTILITY
   ================================================================ */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}

/* ================================================================
   CURSOR EFFECTS
   ================================================================ */
.cursor-glow{
  position: fixed; top:0; left:0; width: 260px; height:260px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(249,216,228,0.55) 0%, rgba(230,219,245,0) 70%);
  pointer-events:none; z-index:9998; transform: translate(-50%,-50%);
  transition: opacity .3s ease;
  will-change: transform;
}
.cursor-dot{
  position: fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background: var(--heart-red); pointer-events:none; z-index:9999;
  transform: translate(-50%,-50%); box-shadow: 0 0 12px rgba(229,72,107,0.7);
  will-change: transform;
}
@media (hover:none), (pointer:coarse){
  .cursor-glow, .cursor-dot{ display:none; }
}

/* ================================================================
   AMBIENT BACKGROUND CANVAS
   ================================================================ */
#bgCanvas{
  position: fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

/* ================================================================
   SCREENS — full-viewport sections, only one active at a time
   ================================================================ */
.screen{
  position: relative;
  width: 100vw; min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 6vh 5vw;
  z-index:1;
  opacity:0; visibility:hidden;
  pointer-events:none;
}
.screen.active{
  opacity:1; visibility:visible; pointer-events:auto;
  position: relative;
}
.screen:not(.active){ position:absolute; inset:0; }

.eyebrow{
  font-size: 0.85rem; letter-spacing: 0.35em; text-transform:uppercase;
  color: var(--ink-soft); margin-bottom: 0.5rem; font-weight:500;
}

.heart-accent{ color: var(--heart-red); }
.script-accent{ font-family: var(--font-script); color: var(--heart-red); font-size:1.15em; }

/* ================================================================
   MUSIC PLAYER
   ================================================================ */
.music-player{
  position: fixed; top: 24px; right: 24px; z-index: 500;
}
.music-toggle{
  width:54px; height:54px; border-radius:50%;
  background: var(--glass-bg); backdrop-filter: blur(12px);
  border:1px solid var(--glass-border); box-shadow: var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s ease;
}
.music-toggle:hover{ transform: scale(1.1); }
.music-icon{ display:flex; gap:3px; align-items:flex-end; height:18px; }
.music-icon .bar{
  width:3px; background: var(--heart-red); border-radius:2px;
  height: 6px; animation: none;
}
.music-toggle.playing .bar{ animation: barBounce 0.9s ease-in-out infinite; }
.music-toggle.playing .bar:nth-child(2){ animation-delay:0.15s; }
.music-toggle.playing .bar:nth-child(3){ animation-delay:0.3s; }
@keyframes barBounce{
  0%,100%{ height:6px; } 50%{ height:18px; }
}

/* ================================================================
   PAGE 1 — LOCK SCREEN
   ================================================================ */
.lock-screen{ text-align:center; }
.lock-inner{ position:relative; z-index:2; max-width: 560px; }

.pookie-title{
  font-family: var(--font-display);
  font-weight:600; font-style:italic;
  font-size: clamp(2.6rem, 8vw, 4.2rem);
  color: var(--ink); margin-bottom: 3rem;
}

.date-wrap{ display:flex; align-items:center; justify-content:center; gap: 1.2rem; margin-bottom: 1.4rem; }
.date-dot{ font-size:1.8rem; color: var(--heart-red); }

.date-circle{
  position: relative;
  width: clamp(96px, 22vw, 140px); height: clamp(96px, 22vw, 140px);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: transform .4s cubic-bezier(.2,.9,.3,1.3), box-shadow .4s ease;
}
.date-circle:hover{ transform: scale(1.06) translateY(-4px); box-shadow: var(--shadow-glow); }
.date-number{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(2rem, 6vw, 3rem); color: var(--ink);
  transition: opacity .3s ease, transform .3s ease;
}
.date-hearts{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size: 1.8rem; opacity:0; pointer-events:none;
}
.date-circle.burst .date-number{ opacity:0; transform: scale(0.4); }
.date-circle.burst .date-hearts{ opacity:1; animation: heartPop .6s ease; }
@keyframes heartPop{ 0%{ transform:scale(0); } 60%{ transform:scale(1.3); } 100%{ transform:scale(1); } }

.tap-hint{
  font-size:0.95rem; color: var(--ink-soft); margin-bottom:2.2rem;
  animation: pulseHint 2.2s ease-in-out infinite;
}
@keyframes pulseHint{ 0%,100%{ opacity:0.6; } 50%{ opacity:1; } }

.password-form{
  display:none; flex-direction:column; align-items:center; gap:1rem;
  padding: 2.4rem 2rem; border-radius: 28px; max-width: 380px; margin: 0 auto;
}
.password-form.visible{ display:flex; }
.password-icon{ font-size:2.2rem; margin-bottom:0.2rem; }
.password-label{ font-size:0.95rem; color: var(--ink-soft); }
.password-input-wrap{ position:relative; width:100%; }
.password-input{
  width:100%; padding: 0.9rem 1.2rem; border-radius:18px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.55);
  font-size:1.1rem; text-align:center; letter-spacing:0.3em; color: var(--ink);
  outline:none; transition: box-shadow .3s ease, border-color .3s ease;
}
.password-input:focus{ border-color: var(--heart-red); box-shadow: 0 0 0 4px rgba(229,72,107,0.15); }
.password-input.shake{ animation: shake .45s ease; }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-10px); } 40%{ transform: translateX(10px); }
  60%{ transform: translateX(-6px); } 80%{ transform: translateX(6px); }
}
.unlock-btn{
  margin-top:0.4rem; padding: 0.9rem 2.2rem; border-radius: 40px;
  background: linear-gradient(120deg, var(--heart-red), var(--rosegold));
  color:#fff; font-weight:600; letter-spacing:0.03em; font-size:1rem;
  box-shadow: 0 12px 30px rgba(229,72,107,0.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.unlock-btn:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 36px rgba(229,72,107,0.45); }
.password-error{
  color: var(--heart-red); font-size:0.85rem; opacity:0; height:0; overflow:hidden; transition: opacity .3s ease;
}
.password-error.visible{ opacity:1; height:auto; }

.lock-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* Screen transition: unlock burst */
.screen-unlocking{ animation: unlockZoom .9s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes unlockZoom{
  0%{ opacity:1; filter: blur(0); transform: scale(1); }
  100%{ opacity:0; filter: blur(20px); transform: scale(1.5); }
}
.screen-entering{ animation: enterFade 1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes enterFade{
  0%{ opacity:0; transform: scale(0.94); filter: blur(10px); }
  100%{ opacity:1; transform: scale(1); filter: blur(0); }
}

/* ================================================================
   PAGE 2 — CELEBRATION
   ================================================================ */
.celebration-screen{ text-align:center; overflow:hidden; }
#confettiCanvas, #fireworksCanvas{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3;
}
.rising-hearts{ position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.rising-hearts .rh{
  position:absolute; bottom:-40px; font-size: 1.4rem; color: var(--heart-red);
  animation: riseUp linear forwards; opacity:0.85;
}
@keyframes riseUp{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:0.9; }
  100%{ transform: translateY(-110vh) translateX(var(--drift,20px)) rotate(360deg); opacity:0; }
}

.celebration-inner{ position:relative; z-index:4; max-width: 640px; width:100%; }

/* --- Cake --- */
.cake-stage{ position:relative; height: clamp(260px, 40vh, 380px); display:flex; align-items:flex-end; justify-content:center; margin-bottom:1rem; }
.cake-glow{
  position:absolute; bottom:10%; width: 60%; height:60%; border-radius:50%;
  background: radial-gradient(circle, rgba(251,217,180,0.6), transparent 70%);
  filter: blur(10px); z-index:0;
}
.cake{ position:relative; z-index:1; width: clamp(180px,32vw,260px); transition: transform 1s ease; }
.cake-plate{
  width: 115%; height:14px; margin-left:-7.5%;
  background: linear-gradient(180deg, #fff, var(--lavender));
  border-radius:50%; box-shadow: 0 10px 25px rgba(75, 1, 43, 0.3);
}
.cake-layer{ position:relative; border-radius: 14px 14px 6px 6px; margin: 0 auto; box-shadow: inset 0 -8px 14px rgba(183,130,160,0.15), 0 8px 18px rgba(183,130,160,0.2); }
.cake-base-layer{ width:100%; height: 26%; background: linear-gradient(180deg, var(--blush-deep), var(--blush)); }
.cake-mid-layer{ width:82%; height:24%; background: linear-gradient(180deg, var(--lavender-deep), var(--lavender)); margin-top:-4px; }
.cake-top-layer{ width:60%; height:22%; background: linear-gradient(180deg, var(--peach), var(--rosegold)); margin-top:-4px; }
.icing-drip{
  position:absolute; top:-6px; left:0; width:100%; height:16px;
  background: repeating-radial-gradient(circle at 10px 0, #fff 0 6px, transparent 7px 20px);
  opacity:0.9;
}
.sprinkle{ position:absolute; width:6px; height:12px; border-radius:3px; background: var(--heart-red); }
.sprinkle:nth-child(3){ top:20%; left:20%; background: var(--purple); transform: rotate(20deg); }
.sprinkle:nth-child(4){ top:40%; left:60%; transform: rotate(-30deg); }
.sprinkle:nth-child(5){ top:60%; left:35%; background: var(--rosegold); transform: rotate(50deg); }
.sprinkle:nth-child(6){ top:30%; left:80%; transform: rotate(10deg); }
.sprinkle:nth-child(7){ top:70%; left:10%; background: var(--purple); transform: rotate(-15deg); }
.sprinkle:nth-child(8){ top:15%; left:50%; transform: rotate(40deg); }
.cherry{ position:absolute; width:16px; height:16px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #ff9db3, var(--heart-red)); top:-10px; box-shadow:0 4px 6px rgba(0,0,0,0.15); }
.cherry:nth-child(3){ left:15%; } .cherry:nth-child(4){ left:70%; }

.candles{ position:absolute; top:-46px; left:50%; transform:translateX(-50%); display:flex; gap: 22px; z-index:3; }
.candle{ width:6px; height:38px; background: linear-gradient(180deg, var(--white), var(--lavender)); border-radius:3px; position:relative; }
.flame{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  width:10px; height:16px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #f5e38b, #f49919 60%, #ff5613);
  box-shadow: 0 0 12px rgba(246, 150, 25, 0.8);
  animation: flicker 0.2s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
@keyframes flicker{
  0%{ transform: translateX(-50%) scale(1) rotate(-2deg); }
  100%{ transform: translateX(-50%) scale(1.12) rotate(3deg); }
}
.candle.blown .flame{ opacity:0; animation:none; }
.candle.blown::after{
  content:''; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:14px; height:10px; background: radial-gradient(circle, rgba(180,180,180,0.6), transparent 70%);
}

.smoke-wrap{ position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:80px; height:100px; pointer-events:none; }
.smoke{
  position:absolute; bottom:0; left:50%; width:10px; height:10px; border-radius:50%;
  background: rgba(200,200,210,0.5); filter: blur(4px);
  animation: smokeRise 2.2s ease-out forwards;
}
@keyframes smokeRise{
  0%{ transform: translate(-50%,0) scale(0.6); opacity:0.2; }
  100%{ transform: translate(calc(-50% + var(--sx,10px)), -90px) scale(2.2); opacity:0; }
}

.cut-slice{
  position:absolute; bottom:14px; left:50%; width:0; height:0; overflow:hidden;
  transform: translateX(-50%); pointer-events:none;
}

.cake-hint{ font-size:0.95rem; color: var(--ink-soft); margin-bottom:1.6rem; }

.birthday-headline{
  font-family: var(--font-display); font-style:italic; font-weight:600;
  font-size: clamp(1.8rem, 5.6vw, 3.2rem); color: var(--ink); min-height:1.4em;
  margin-bottom:1.6rem;
}
.type-cursor{ display:inline-block; margin-left:2px; color: var(--heart-red); animation: blink 0.9s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.message-box{
  min-height: 140px; border-radius:24px; padding:1.6rem; margin: 0 auto 2rem; max-width:520px;
}
.message-placeholder{
  outline:none; font-size:1.05rem; line-height:1.7; color: var(--ink-soft); text-align:left;
  min-height:100px;
}
.message-placeholder:empty::before{ content: attr(data-placeholder); color: var(--ink-soft); opacity:0.55; font-style:italic; }

.cta-btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding: 1rem 2.4rem; border-radius:44px; font-size:1rem; font-weight:600;
  color:#fff; background: linear-gradient(120deg, var(--purple), var(--heart-red));
  box-shadow: 0 14px 30px rgba(183,130,160,0.4);
  transition: transform .35s cubic-bezier(.3,1.4,.4,1), box-shadow .35s ease;
  position: relative; overflow:hidden;
}
.cta-btn:hover{ transform: translateY(-4px) scale(1.04); box-shadow: 0 20px 40px rgba(183,130,160,0.5); }
.cta-btn:active{ transform: translateY(-1px) scale(0.98); }
.cta-heart{ animation: heartbeat 1.4s ease-in-out infinite; }
@keyframes heartbeat{ 0%,100%{ transform:scale(1); } 25%{ transform:scale(1.25); } 40%{ transform:scale(1); } }

/* ripple */
.ripple{
  position:absolute; border-radius:50%; background: rgba(255,255,255,0.55);
  transform: scale(0); animation: rippleAnim 0.7s ease-out forwards; pointer-events:none;
}
@keyframes rippleAnim{ to{ transform: scale(3); opacity:0; } }

/* ================================================================
   PAGE 3 — ENVELOPE
   ================================================================ */
.envelope-screen{ text-align:center; }
.envelope-inner{ display:flex; flex-direction:column; align-items:center; gap:2.2rem; max-width:640px; width:100%; }

.envelope-stage{ perspective: 1600px; }
.envelope{
  position:relative; width: clamp(220px, 50vw, 340px); height: clamp(150px, 34vw, 220px);
  transition: transform 1.2s cubic-bezier(.4,.6,.2,1);
}
.envelope.shaking{ animation: envShake 0.5s ease; }
@keyframes envShake{
  0%,100%{ transform: rotate(0); } 20%{ transform: rotate(-2deg); }
  40%{ transform: rotate(2deg); } 60%{ transform: rotate(-1.5deg); } 80%{ transform: rotate(1.5deg); }
}
.envelope-back{
  position:absolute; inset:0; border-radius:10px;
  background: linear-gradient(160deg, var(--blush), var(--lavender));
  box-shadow: var(--shadow-soft);
}
.envelope-front{
  position:absolute; left:0; right:0; bottom:0; height:82%;
  background: linear-gradient(160deg, var(--white), var(--blush));
  border-radius: 0 0 10px 10px; z-index:3;
  box-shadow: 0 10px 26px rgba(15, 7, 11, 0.25);
}
.envelope-flap{
  position:absolute; top:0; left:0; width:100%; height:80%;
  background: linear-gradient(160deg, var(--blush-deep), var(--rosegold));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center; transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.5,0,.2,1);
  z-index:4;
}
.envelope.open .envelope-flap{ transform: rotateX(180deg); }
.wax-seal{
  position:absolute; top:44%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; z-index:5;
  background: radial-gradient(circle at 35% 30%, #f1456a, var(--heart-red));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  box-shadow: 0 6px 14px rgba(56, 1, 13, 0.4);
  transition: opacity .4s ease, transform .4s ease;
}
.envelope.open .wax-seal{ opacity:0; transform: translate(-50%,-50%) scale(0); }

.letter{
  position:absolute; left:10%; right:10%; top:60%; height:180%; z-index:8;
  transform: translateY(0) scale(0.9); opacity:0;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1), opacity 1s ease;
}
.envelope.open .letter{ transform: translateY(-70%) scale(1); opacity:1; z-index:6; }
.letter-paper{
  width:150%; height:100%; background: var(--white); border-radius:8px;
  box-shadow: 0 20px 40px rgba(111, 1, 63, 0.3);
  padding: 1.2rem; overflow:auto;
  background-image: repeating-linear-gradient(var(--white) 0 26px, rgba(96, 5, 56, 0.08) 27px);
}
.letter-placeholder{
  outline:none; font-family: var(--font-display); font-size:1.15rem; line-height:1.7;
  color: var(--ink); text-align:left; min-height: 100%;
}
.letter-placeholder:empty::before{ content: attr(data-placeholder); color: var(--ink-soft); opacity:0.55; font-style:italic; }

.reveal-btn{ margin-top:0.4rem; }

/* ================================================================
   PAGE 4 — GALLERY
   ================================================================ */
.gallery-screen{ padding:0; overflow:hidden; justify-content:flex-start; }
.gallery-screen::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(ellipse at 50% 50%, rgba(74,52,80,0) 0%, rgba(74,52,80,0.12) 72%, rgba(74,52,80,0.34) 100%);
}
.gallery-reel{
  position:absolute; inset:0; display:flex; flex-direction:column; gap: 6px;
  z-index:1; justify-content: flex-start;
}
.gallery-row{ display:flex; gap:6px; width:max-content; will-change: transform; }

/* -------- dense photo-wall tile -------- */
.gallery-photo{
  position:relative; width: 168px; height:168px; border-radius:10px; overflow:hidden;
  flex-shrink:0; cursor: pointer; border: none; padding:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, z-index 0s;
}
.gallery-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.05);
}
.gallery-photo .photo-shine{
  position:absolute; inset:0; pointer-events:none; border-radius:10px;
  background: linear-gradient(155deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 40%);
  opacity: 1; transition: opacity .35s ease;
}
.gallery-photo:hover{
  transform: scale(1.14);
  z-index:5; box-shadow: 0 20px 44px rgba(30,15,35,0.4), inset 0 0 0 2px rgba(255,255,255,0.7);
}
.gallery-photo:hover .photo-shine{ opacity: 0.3; }

/* -------- empty state (no photos added yet) -------- */
.gallery-empty{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1rem; text-align:center; padding: 0 8%;
}
.gallery-empty-icon{ font-size:2.6rem; }
.gallery-empty p{ font-family: var(--font-body); color: var(--ink-soft); font-size:1rem; line-height:1.7; }
.gallery-empty code{ font-family: var(--font-body); font-weight:600; color: var(--ink); background: rgba(183,130,160,0.12); padding: 0.1em 0.4em; border-radius:6px; }

.gallery-center-card{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  z-index:10; border-radius:26px; padding: 2rem 2.4rem; max-width:520px; width:86%;
  text-align:center;
}
.gallery-typed{
  display:inline; font-family: var(--font-display); font-style:italic; font-size:1.3rem;
  color: var(--ink); line-height:1.6;
}

.gallery-cta{ position:absolute; bottom: 6vh; left:50%; transform: translateX(-50%); z-index:10; }

/* ================================================================
   LIGHTBOX — full-screen photo viewer
   ================================================================ */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity .35s ease;
}
.lightbox.active{ opacity:1; pointer-events:auto; }
.lightbox-backdrop{
  position:absolute; inset:0;
  background: rgba(74,52,80,0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lightbox-hearts{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.lb-heart{
  position:absolute; bottom:-10%; color: rgba(249,216,228,0.85); text-shadow: 0 0 12px rgba(229,72,107,0.5);
  animation: lbHeartRise 3.6s ease-in forwards;
}
@keyframes lbHeartRise{
  0%{ transform: translateY(0) scale(0.6) rotate(-8deg); opacity:0; }
  12%{ opacity:1; }
  100%{ transform: translateY(-70vh) scale(1.1) rotate(10deg); opacity:0; }
}

.lightbox-frame{
  position:relative; z-index:2; max-width: 86vw; max-height: 82vh;
  background: var(--white); padding: 14px 14px 14px; border-radius:10px;
  box-shadow: 0 30px 90px rgba(30,15,35,0.45);
}
.lightbox-img{
  display:block; max-width: 80vw; max-height: 74vh; width:auto; height:auto;
  border-radius:4px; object-fit:contain;
}

.lightbox-close{
  position:absolute; top: 22px; right: 26px; z-index:5; width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,0.9); color: var(--ink); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-soft);
  transition: transform .25s ease, background .25s ease;
}
.lightbox-close:hover{ transform: scale(1.08) rotate(90deg); background: var(--white); }

.lightbox-arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:5; width:52px; height:52px; border-radius:50%;
  background: rgba(255,255,255,0.85); color: var(--ink); font-size:1.8rem; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-soft);
  transition: transform .25s ease, background .25s ease;
}
.lightbox-arrow:hover{ background: var(--white); transform: translateY(-50%) scale(1.12); }
.lightbox-prev{ left: 26px; }
.lightbox-next{ right: 26px; }

/* ================================================================
   PAGE 5 — LOVE NOTES
   ================================================================ */
.notes-screen{ text-align:center; overflow:hidden; }
.stickers-layer{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.sticker{
  position:absolute; font-size: 2.4rem; user-select:none;
  filter: drop-shadow(0 6px 10px rgba(183,130,160,0.25));
  animation: stickerFloat 6s ease-in-out infinite;
}
@keyframes stickerFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-18px) rotate(6deg); }
}

.notes-inner{ position:relative; z-index:3; max-width:600px; width:100%; }
.notes-headline{
  font-family: var(--font-display); font-weight:600; font-size: clamp(1.7rem, 5vw, 2.6rem);
  margin-bottom:1.8rem; color: var(--ink);
}
.notes-box{ border-radius:26px; padding:2rem; min-height:220px; margin-bottom:1.6rem; }
.notes-placeholder{
  outline:none; font-size:1.05rem; line-height:1.8; color: var(--ink-soft); text-align:left; min-height:180px;
}
.notes-placeholder:empty::before{ content: attr(data-placeholder); color: var(--ink-soft); opacity:0.55; font-style:italic; }
.notes-footer{ font-family: var(--font-script); font-size:1.4rem; color: var(--ink-soft); }

/* ================================================================
   FLOATING PARTICLE HEARTS/PETALS (generic, spawned via JS)
   ================================================================ */
.floaty{ position:fixed; pointer-events:none; z-index:2; }