/* ==========================================================
   Happy Birthday Winda — style.css
   Cute + Romantic + Elegant Birthday Celebration
   Mobile-first, responsive, flower garden experience.
   ========================================================== */

:root {
  --pink: #FF69B4;
  --soft-pink: #FFD1E3;
  --hot-pink: #FF2E9E;
  --yellow: #FFD93D;
  --soft-yellow: #FFF3B0;
  --white: #FFFFFF;
  --gold: #F4C542;
  --peach: #FFC2A1;
  --deep-pink: #d63384;
  --success: #2ecc71;
  --text: #7a3b5c;
  --text-light: #b06a8f;
  --safe-top: max(20px, env(safe-area-inset-top));
  --safe-right: max(20px, env(safe-area-inset-right));
  --safe-bottom: max(20px, env(safe-area-inset-bottom));
  --safe-left: max(20px, env(safe-area-inset-left));
}

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

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Quicksand', system-ui, sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, #FFE4F0, #FFF6DE);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(255, 105, 180, .3); }

button { font-family: inherit; cursor: pointer; }
button:focus-visible,
input:focus-visible,
.drag-arrow:focus-visible {
  outline: 3px solid rgba(255, 105, 180, .55);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

/* ---------- Screens (smooth cross-fade transitions) ---------- */
.screen {
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.screen:not(.hidden) {
  transition: opacity .9s ease, visibility 0s linear 0s;
}
.screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fixed-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow: hidden;
}

/* ---------- Glassmorphism card ---------- */
.glass {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 255, 255, .75);
  box-shadow: 0 24px 60px rgba(255, 105, 180, .22);
  border-radius: 26px;
}

/* ==========================================================
   OPENING — DRAG ARROW TO LOVE
   ========================================================== */
#opening-screen {
  z-index: 90;
  background: linear-gradient(150deg, #FFB6D9 0%, #FFD9EC 35%, #FFF0F7 60%, #FFF6DE 82%, #FFE9C4 100%);
  background-size: 220% 220%;
  animation: bgShift 10s ease-in-out infinite;
  user-select: none;
}

.opening-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 18% 12%, rgba(255, 105, 180, .25), transparent 65%),
    radial-gradient(44vw 44vw at 85% 18%, rgba(255, 217, 61, .3), transparent 65%),
    radial-gradient(46vw 46vw at 78% 86%, rgba(255, 194, 161, .32), transparent 65%),
    radial-gradient(36vw 36vw at 10% 88%, rgba(255, 105, 180, .2), transparent 65%);
  transition: opacity 1.2s ease;
}

#opening-screen.love-done .opening-bg,
.opening-bg.bright {
  background:
    radial-gradient(46vw 46vw at 18% 12%, rgba(255, 105, 180, .5), transparent 65%),
    radial-gradient(50vw 50vw at 85% 18%, rgba(255, 217, 61, .55), transparent 65%),
    radial-gradient(52vw 52vw at 78% 86%, rgba(255, 194, 161, .5), transparent 65%),
    radial-gradient(42vw 42vw at 10% 88%, rgba(255, 105, 180, .42), transparent 65%);
}

.opening-inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 4vw, 30px);
  text-align: center;
}

.opening-hint {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.3rem);
  color: var(--deep-pink);
  letter-spacing: .02em;
}
.arrow-hint {
  display: inline-block;
  font-size: 1.1em;
  color: var(--hot-pink);
  animation: arrowNudge 1.6s ease-in-out infinite;
}

.love-track {
  position: relative;
  width: min(92vw, 520px);
  height: 92px;
  border-radius: 60px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 18px 44px rgba(255, 105, 180, .25);
  transition: border-color .3s, box-shadow .3s;
}
#opening-screen.dragging .love-track {
  border-color: rgba(255, 46, 158, .6);
  box-shadow: 0 0 34px rgba(255, 46, 158, .35), 0 18px 44px rgba(255, 105, 180, .3);
}

.drag-arrow {
  position: absolute;
  left: 8px;
  top: 50%;
  margin-top: -31px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  background: linear-gradient(135deg, var(--hot-pink), var(--pink));
  box-shadow: 0 10px 22px rgba(255, 46, 158, .5), 0 0 0 6px rgba(255, 255, 255, .4);
  z-index: 2;
  will-change: transform;
}
.drag-arrow:active { cursor: grabbing; }

.arrow-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 158, .5), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
#opening-screen.dragging .arrow-glow,
#opening-screen.love-done .arrow-glow { opacity: 1; }

.arrow-icon {
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  animation: floatY 2.4s ease-in-out infinite;
  transition: transform .25s;
}
#opening-screen.dragging .arrow-icon { transform: scale(1.15); }

.love-target {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  z-index: 1;
}
.love-emoji {
  font-size: clamp(30px, 9vw, 42px);
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(255, 46, 158, .5));
  animation: heartPulse var(--beat, 1.3s) ease-in-out infinite;
  transition: transform .3s;
}
#opening-screen.love-done .love-emoji {
  animation: heartPop .9s cubic-bezier(.3, 1.4, .5, 1) both;
  transform: scale(1.2);
}
.love-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: .32em;
  font-size: .7rem;
  color: var(--deep-pink);
}

.opening-sub {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(.9rem, 3.6vw, 1.1rem);
  color: var(--text-light);
}

/* ==========================================================
   PASSWORD SCREEN
   ========================================================== */
.password-card {
  width: 100%;
  max-width: 440px;
  padding: 38px clamp(20px, 6vw, 30px) 34px;
  text-align: center;
  animation: scaleIn .9s cubic-bezier(.34, 1.3, .64, 1) both;
  transition: box-shadow .6s ease;
}
.password-card.glow {
  box-shadow: 0 24px 60px rgba(255, 105, 180, .4), 0 0 70px rgba(255, 217, 61, .45);
}

.password-emoji {
  font-size: 46px;
  margin-bottom: 10px;
  animation: floatY 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(255, 105, 180, .4));
}

.password-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 5vw, 1.55rem);
  line-height: 1.35;
  color: var(--deep-pink);
  margin-bottom: 12px;
}
.password-title .emoji {
  flex: 0 0 auto;
  font-size: .55em;
  line-height: 1;
}
.password-title-text { flex: 0 1 auto; text-wrap: balance; }

.password-subtitle {
  font-size: clamp(.9rem, 3.5vw, .98rem);
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 22px;
}

.pwd-input-wrap { position: relative; }

#password-input {
  width: 100%;
  padding: 15px 18px;
  border-radius: 16px;
  border: 2px solid rgba(255, 105, 180, .35);
  background: rgba(255, 255, 255, .85);
  font-family: inherit;
  font-size: 1.1rem;
  letter-spacing: .35em;
  text-align: center;
  color: var(--deep-pink);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
#password-input::placeholder { letter-spacing: .08em; color: rgba(122, 59, 92, .35); }
#password-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 105, 180, .18);
}
#password-input.shake { animation: shake .5s ease; }
#password-input.error {
  border-color: #e0396b;
  box-shadow: 0 0 0 4px rgba(224, 57, 107, .16);
}
#password-input.success {
  border-color: var(--success);
  background: rgba(240, 255, 244, .9);
  box-shadow: 0 0 0 4px rgba(46, 204, 113, .18);
}

.pwd-check {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--success);
  pointer-events: none;
  transition: transform .4s cubic-bezier(.34, 1.4, .64, 1);
}
.pwd-check.show { transform: translateY(-50%) scale(1); }

.unlock-btn {
  width: 100%;
  margin-top: 16px;
  padding: 15px 20px;
  border: none;
  border-radius: 16px;
  font-weight: 700;
  font-size: clamp(1rem, 4vw, 1.05rem);
  color: #fff;
  background: linear-gradient(120deg, var(--hot-pink), var(--pink) 45%, var(--gold));
  background-size: 180% 180%;
  box-shadow: 0 12px 26px rgba(255, 105, 180, .4);
  transition: transform .25s, box-shadow .25s, background-position .45s;
}
.unlock-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(255, 105, 180, .5);
  background-position: 100% 0;
}
.unlock-btn:active {
  transform: translateY(0) scale(.97);
}

.error-msg {
  display: none;
  margin-top: 14px;
  font-weight: 600;
  font-size: .92rem;
  color: #e0396b;
}
.error-msg.show {
  display: block;
  animation: fadeUp .4s ease both;
}

/* ==========================================================
   GIFT OPENING SCREEN
   ========================================================== */
#gift-screen {
  background: linear-gradient(135deg, #FFD9EC 0%, #FFF0F7 45%, #FFF7D6 100%);
  background-size: 200% 200%;
  animation: bgShift 8s ease-in-out infinite;
}

.gift-wrap { text-align: center; }

.gift {
  position: relative;
  width: 200px;
  height: 210px;
  margin: 0 auto 30px;
  animation: popIn 1s cubic-bezier(.5, 1.5, .5, 1) both;
}

.gift-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 217, 61, .55) 0%, rgba(255, 105, 180, .3) 45%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1s ease;
  animation: glowPulse 2.2s ease-in-out infinite;
}

.gift-box {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 164px;
  height: 136px;
  border-radius: 16px 16px 18px 18px;
  background: linear-gradient(160deg, #FF9ECF 0%, var(--pink) 60%, #F24E96 100%);
  box-shadow: 0 22px 40px rgba(255, 105, 180, .4), inset 0 -14px 26px rgba(214, 51, 132, .35);
}

.ribbon-v {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 100%;
  background: linear-gradient(90deg, #FFE17D, var(--yellow) 55%, var(--gold));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35);
}

.gift-lid {
  position: absolute;
  bottom: 136px;
  left: 50%;
  transform: translateX(-50%);
  width: 188px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(160deg, #FFB0DA, var(--pink));
  box-shadow: 0 10px 22px rgba(255, 105, 180, .35);
  z-index: 2;
  transition: transform 1s cubic-bezier(.5, 0, .3, 1.15), opacity .8s ease;
}

.ribbon-h {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 28px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #FFE17D, var(--yellow) 55%, var(--gold));
}

.gift-bow {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 40px;
}
.gift-bow::before,
.gift-bow::after {
  content: '';
  position: absolute;
  top: 0;
  width: 36px;
  height: 32px;
  border-radius: 60% 60% 60% 60% / 50% 70% 30% 50%;
  background: linear-gradient(135deg, #FFE17D, var(--yellow));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.gift-bow::before { left: 0; transform: rotate(-18deg); }
.gift-bow::after { right: 0; transform: rotate(18deg); }
.bow-knot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 24px;
  background: var(--gold);
  border-radius: 9px;
  z-index: 2;
}

.gift.opened .gift-lid {
  transform: translate(-50%, -100px) rotate(-7deg);
  opacity: 0;
}
.gift.opened .gift-glow { opacity: 1; }
.gift.opened .gift-box { animation: boxShine 1.4s ease; }

.gift-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 4.6vw, 1.5rem);
  color: var(--deep-pink);
  opacity: 0;
}
.gift-text.show { animation: fadeUp .9s ease .3s both; }

/* ==========================================================
   MAIN BIRTHDAY SCREEN — background & layers
   ========================================================== */
#birthday-screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 1;
}

.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #FFD9EC 0%, #FFF0F7 28%, #FFF8DE 62%, #FFE9C4 100%);
  background-size: 300% 300%;
  animation: bgShift 18s ease-in-out infinite;
  filter: brightness(.72) saturate(.9);
  transition: filter 3s ease;
}
#birthday-screen.bright .bg-gradient {
  filter: brightness(1) saturate(1);
}
.bg-gradient::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(42vw 42vw at 12% 8%, rgba(255, 105, 180, .22), transparent 65%),
    radial-gradient(48vw 48vw at 88% 12%, rgba(255, 217, 61, .28), transparent 65%),
    radial-gradient(50vw 50vw at 80% 88%, rgba(255, 194, 161, .3), transparent 65%),
    radial-gradient(38vw 38vw at 8% 90%, rgba(255, 105, 180, .16), transparent 65%);
  transition: opacity 1.2s ease;
}

body.glow-boost .bg-gradient::after {
  background:
    radial-gradient(46vw 46vw at 12% 8%, rgba(255, 105, 180, .42), transparent 65%),
    radial-gradient(52vw 52vw at 88% 12%, rgba(255, 217, 61, .5), transparent 65%),
    radial-gradient(54vw 54vw at 80% 88%, rgba(255, 194, 161, .45), transparent 65%),
    radial-gradient(42vw 42vw at 8% 90%, rgba(255, 105, 180, .34), transparent 65%);
}

.fx-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Ambient particles stay viewport-fixed, always BELOW main content (z: 5).
   Decorative flowers live in document space so they frame the real layout
   and can never cover text/photos/buttons. */
#stars-layer { z-index: 0; }
#petals-layer { z-index: 2; }
#hearts-layer { z-index: 3; }
#sparkles-layer { z-index: 4; }
#fireflies-layer { z-index: 4; }

#bg-flowers-layer,
#flowers-layer,
#fg-flowers-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#bg-flowers-layer { z-index: 0; }
#flowers-layer { z-index: 1; }
#fg-flowers-layer { z-index: 4; }

/* ---------- Foreground flowers (framing depth above content) ---------- */
.fg-flower { opacity: .96; }
.fg-flower .flower-inner { animation: fgSway var(--sway-dur, 7s) ease-in-out infinite; }
.fg-flower .bloom {
  filter: drop-shadow(0 0 16px rgba(255, 105, 180, .45));
}
@keyframes fgSway {
  0%, 100% { transform: translateX(0) translateY(0) rotate(-1.5deg); }
  25% { transform: translateX(var(--sw-x1, 5px)) translateY(var(--sw-y1, -8px)) rotate(2deg); }
  50% { transform: translateX(var(--sw-x2, -6px)) translateY(var(--sw-y2, 2px)) rotate(-2.5deg); }
  75% { transform: translateX(var(--sw-x3, 4px)) translateY(var(--sw-y3, 9px)) rotate(1.5deg); }
}

#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 150;
  pointer-events: none;
}

/* ---------- Stars ---------- */
.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8);
  animation: twinkle var(--tw, 3s) ease-in-out var(--td, 0s) infinite;
}

/* ---------- Sparkles ---------- */
.sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ffffff, #FFE9A8 55%, transparent 75%);
  transform: rotate(45deg);
  border-radius: 2px;
  animation: sparkle 2.6s ease-in-out var(--sd, 0s) infinite;
}
.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, .9);
  border-radius: 2px;
}
.sparkle::before {
  left: 50%;
  top: -7px;
  bottom: -7px;
  width: 2px;
  transform: translateX(-50%);
}
.sparkle::after {
  top: 50%;
  left: -7px;
  right: -7px;
  height: 2px;
  transform: translateY(-50%);
}

/* ---------- Fireflies ---------- */
.firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFE9A8;
  box-shadow: 0 0 10px 3px rgba(255, 217, 61, .6);
  opacity: 0;
  animation: fireflyFloat var(--ff-dur, 10s) ease-in-out var(--ff-delay, 0s) infinite;
}

/* ---------- Flowers ---------- */
.flower {
  position: absolute;
  transform-origin: 50% 100%;
  animation: flowerGrow 1.7s cubic-bezier(.34, 1.4, .64, 1) both;
  will-change: transform;
}
.flower-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 100%;
  animation: sway var(--sway-dur, 5.5s) ease-in-out var(--sway-delay, 0s) infinite;
}
.bloom { position: relative; animation: bloomSway 7s ease-in-out infinite; }
.bloom-glow {
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(255, 217, 61, .4), rgba(255, 105, 180, .18) 45%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 2.8s ease-in-out infinite;
}
.petal {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: var(--petal-shape, 50% 50% 50% 50% / 60% 60% 40% 40%);
  background: radial-gradient(circle at 50% 32%, var(--petal-light), var(--petal-dark));
  box-shadow: inset 0 -3px 6px rgba(214, 51, 132, .18), 0 2px 6px rgba(0, 0, 0, .06);
  animation: petalOpen 1.5s cubic-bezier(.3, .7, .4, 1) both;
}
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 217, 61, .85), inset 0 -4px 8px rgba(0, 0, 0, .14);
  animation: glowPulse 2.6s ease-in-out infinite;
  z-index: 2;
}
.stem {
  position: relative;
  width: 7px;
  margin-top: 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, #8fd98f, #4fae62);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .16);
}
.stem::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 26%;
  width: 22px;
  height: 12px;
  background: linear-gradient(90deg, #7ccf86, #a9e6ad);
  border-radius: 50% 0 50% 0;
  transform: translateX(-50%) rotate(26deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

/* Background blurred flowers */
.flower.bg-flower {
  filter: blur(3px);
  opacity: .35;
}
.flower.bg-flower .bloom { animation: bloomSway 12s ease-in-out infinite; }

/* ---------- Falling petals ---------- */
.petal-fx {
  position: absolute;
  top: -32px;
  border-radius: 60% 40% 60% 40%;
  opacity: 0;
  animation: petalFall linear forwards;
  will-change: transform, opacity;
}

/* ---------- Floating hearts (kept very subtle) ---------- */
.heart-fx {
  position: absolute;
  bottom: -50px;
  opacity: .55;
  animation: heartFloat linear forwards;
  will-change: transform, opacity;
}

/* ---------- Easter egg burst hearts ---------- */
.heart-burst {
  position: fixed;
  z-index: 160;
  pointer-events: none;
  font-size: 26px;
  animation: heartBurst 1.3s ease-out forwards;
}

/* ==========================================================
   MAIN CONTENT
   ========================================================== */
.content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding:
    calc(var(--safe-top) + 74px)
    max(16px, var(--safe-right))
    calc(var(--safe-bottom) + 84px)
    max(16px, var(--safe-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vw, 34px);
  text-align: center;
}

/* ---------- Countdown ---------- */
.countdown-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vh, 40px);
  animation: fadeUp .9s ease calc(var(--bloom-base, 3s) + .05s) both;
}
.countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(7px, 2.4vw, 12px);
}
.cd-box {
  min-width: clamp(52px, 16vw, 64px);
  padding: 10px 8px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, .8);
  box-shadow: 0 10px 24px rgba(255, 105, 180, .18);
}
.cd-num {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 5.6vw, 2.1rem);
  color: var(--hot-pink);
  line-height: 1.1;
}
.cd-unit {
  display: block;
  margin-top: 4px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: .04em;
}

/* ---------- Calendar — tear until August 18 is revealed ---------- */
.cal-stage {
  position: relative;
  width: min(560px, 94vw);
  max-width: 100%;
  margin: 0 auto;
  perspective: 900px;
  overflow: hidden;
  filter: drop-shadow(0 18px 40px rgba(214, 51, 132, .26));
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .7s ease, transform .8s cubic-bezier(.3, 1.15, .4, 1);
}
.cal-stage.play {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* August is the final reveal: gentle zoom-in + soft golden glow */
.cal-stage.august {
  animation: calAugust 1s cubic-bezier(.3, 1.2, .4, 1) .05s both;
}
@keyframes calAugust {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 18px 40px rgba(214, 51, 132, .26));
  }
  100% {
    transform: translateY(0) scale(1.03);
    filter: drop-shadow(0 24px 64px rgba(244, 197, 66, .4));
  }
}

.cal-revealed,
.cal-front {
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 255, 255, .92), transparent 42%),
    linear-gradient(180deg, #FFF9FB, #FFF0F5 70%, #FFE8F0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -10px 22px rgba(255, 105, 180, .08),
    0 22px 48px rgba(214, 51, 132, .22);
  padding: 14px 16px 16px;
}
.cal-revealed {
  position: relative;
}
.cal-front {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 255, 255, .85), transparent 42%),
    linear-gradient(180deg, #FFFDF7, #FFF4E8 60%, #FFEFE0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 18px 42px rgba(214, 51, 132, .28);
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: clip-path .36s ease, opacity .45s ease;
  will-change: clip-path, transform, opacity;
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    97% 100%, 93% 100%, 89% 100%, 85% 100%, 81% 100%, 77% 100%, 73% 100%, 69% 100%,
    65% 100%, 61% 100%, 57% 100%, 53% 100%, 49% 100%, 45% 100%, 41% 100%, 37% 100%,
    33% 100%, 29% 100%, 25% 100%, 21% 100%, 17% 100%, 13% 100%, 9% 100%, 5% 100%, 1% 100%,
    0 100%
  );
}
.cal-front.pull { animation: calPull .14s ease forwards; }
.cal-front.tear {
  clip-path: polygon(
    0 0, 100% 0, 100% 57%,
    97% 58.5%, 93% 56.5%, 89% 60%, 85% 57.5%, 81% 59.5%, 77% 56.5%, 73% 60%, 69% 57%,
    65% 59%, 61% 56.5%, 57% 60%, 53% 57.5%, 49% 59.5%, 45% 56.5%, 41% 60%, 37% 57%,
    33% 59.5%, 29% 56.5%, 25% 60%, 21% 57.5%, 17% 59%, 13% 56.5%, 9% 60%, 5% 57.5%, 1% 59%,
    0 58%
  );
  animation: calShakeMini .36s ease;
}
.cal-front.fly { animation: calFly .4s cubic-bezier(.45, .05, .55, .95) forwards; }
.cal-front.flip-in { animation: calFlipIn .22s cubic-bezier(.2, .9, .3, 1) forwards; }

.cal-month {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(1.05rem, 4.6vw, 1.5rem);
  letter-spacing: .32em;
  text-indent: .32em;
  line-height: 1;
  color: transparent;
  background: linear-gradient(118deg, #F4C542 10%, #FFD93D 36%, #FF69B4 70%, #E55381 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 10px rgba(255, 105, 180, .28));
}
.cal-year {
  font-size: .52em;
  letter-spacing: .18em;
  color: #E8B93A;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  filter: none;
}
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 10px 0 6px;
}
.cal-week span {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(.6rem, 2.6vw, .72rem);
  color: #E55381;
  opacity: .8;
  text-align: center;
}
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px 5px;
}
.cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: clamp(.68rem, 3vw, .88rem);
  color: #B2698A;
  padding: 4px 0 5px;
  border-radius: 9px;
  line-height: 1;
}
.cal-front .cal-day {
  color: rgba(178, 105, 138, .55);
}
.cal-front .cal-day.empty,
.cal-revealed .cal-day.empty {
  color: rgba(178, 105, 138, .22);
}

.cal-day.day18 {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
}
.day18 .day-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.7em, 7vw, 2em);
  height: clamp(1.7em, 7vw, 2em);
  border-radius: 50%;
  font-weight: 700;
  color: #fff;
  background: radial-gradient(circle at 34% 28%, #FF9ECF, #FF69B4 58%, #E55381);
  box-shadow:
    0 0 0 2px rgba(244, 197, 66, .6),
    0 4px 16px rgba(255, 105, 180, .55),
    inset 0 2px 4px rgba(255, 255, 255, .4);
  font-size: clamp(.68rem, 3vw, .88rem);
  line-height: 1;
}
.day18 .day-badge {
  font-size: .5em;
  line-height: 1;
  opacity: 0;
}
.cal-revealed.shine .day18 .day-num {
  animation:
    day18Pop .75s cubic-bezier(.34, 1.45, .64, 1) .25s forwards,
    day18Glow 2.6s ease-in-out 1.1s infinite;
  opacity: 0;
  transform: scale(.4);
}
.cal-revealed.shine .day18 .day-badge {
  animation: badgeIn .5s ease 1s forwards;
}

/* Torn paper remnant + fibers at the tear line */
.cal-tear-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 5px, transparent 5px 9px),
    rgba(255, 244, 232, .9);
  clip-path: polygon(
    0 100%, 5% 38%, 11% 62%, 17% 30%, 23% 66%, 29% 36%, 35% 58%, 41% 24%, 47% 64%,
    53% 34%, 59% 60%, 65% 30%, 71% 66%, 77% 36%, 83% 58%, 89% 28%, 95% 64%, 100% 40%, 100% 100%
  );
  pointer-events: none;
  opacity: 0;
}
.cal-stage.tearing .cal-tear-strip {
  animation: stripDrop .95s ease .08s forwards;
}

/* Soft white → pink flash right when August is revealed */
.cal-stage.flash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .95), rgba(255, 209, 227, .85) 60%, rgba(255, 105, 180, .5));
  pointer-events: none;
  opacity: 0;
  animation: calFlash .5s ease forwards;
}
@keyframes calFlash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes calPull {
  0%   { transform: translateY(0) rotate(0); }
  100% { transform: translateY(-6px) rotate(-.5deg); }
}
@keyframes calShakeMini {
  0%, 100% { transform: translateY(-6px) rotate(-.5deg) translateX(0); }
  30% { transform: translateY(-7px) rotate(-.8deg) translateX(-2px); }
  60% { transform: translateY(-5px) rotate(-.2deg) translateX(2px); }
}
@keyframes calFly {
  0%   { transform: translateY(-6px) rotate(-.5deg) rotateX(0); opacity: 1; }
  22%  { transform: translateY(-52px) rotate(-2.4deg) rotateX(10deg); opacity: 1; }
  100% { transform: translateY(-170%) rotate(9deg) rotateX(42deg); opacity: 0; }
}
@keyframes calFlipIn {
  0%   { transform: translateY(14px) rotateX(12deg) scale(.985); opacity: 0; }
  65%  { opacity: 1; }
  100% { transform: translateY(0) rotateX(0) scale(1); opacity: 1; }
}
@keyframes day18Pop {
  0% { opacity: 0; transform: scale(.4) translateY(4px); }
  70% { opacity: 1; transform: scale(1.16) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes day18Glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(244, 197, 66, .6), 0 4px 16px rgba(255, 105, 180, .55), inset 0 2px 4px rgba(255, 255, 255, .4); }
  50% { box-shadow: 0 0 0 3px rgba(244, 197, 66, .85), 0 4px 26px rgba(255, 105, 180, .85), 0 0 44px rgba(255, 217, 61, .5), inset 0 2px 4px rgba(255, 255, 255, .4); }
}
@keyframes badgeIn {
  to { opacity: .95; transform: translateY(0); }
}
@keyframes stripDrop {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  18% { opacity: .85; transform: translateY(2px) rotate(-1deg); }
  55% { opacity: .7; transform: translateY(8px) rotate(1.5deg); }
  100% { opacity: 0; transform: translateY(16px) rotate(2.5deg); }
}
@keyframes calSparkle {
  0% { opacity: 0; transform: scale(.2) rotate(45deg); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1) rotate(45deg); }
}
.cal-sparkle {
  position: absolute;
  width: var(--sp-size, 7px);
  height: var(--sp-size, 7px);
  background: radial-gradient(circle, #fff, var(--sp-gold, rgba(255, 217, 61, .95)) 55%, transparent 75%);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  animation: calSparkle .85s ease var(--sp-delay, 0s) forwards;
}
@keyframes calPetalFall {
  0% { transform: translate3d(0, -8px, 0) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate3d(18px, 46px, 0) rotate(120deg); opacity: 0; }
}
.cal-petal {
  position: absolute;
  width: 10px;
  height: 13px;
  border-radius: 70% 30% 70% 30%;
  pointer-events: none;
  opacity: 0;
  animation: calPetalFall 2.6s ease var(--pt-delay, 0s) forwards;
}

/* ---------- Hero & typography ---------- */
.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.5vw, 12px);
}

.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(.95rem, 3.6vw, 1.4rem);
  color: var(--deep-pink);
  opacity: .9;
  margin-top: 6px;
  animation: fadeUp 1s ease calc(var(--bloom-base, 3s) + 1.5s) both;
}
.tagline .tagline-text { text-wrap: balance; }
.tagline .emoji { font-size: .8em; line-height: 1; }

/* ---------- Music visualizer ---------- */
.music-viz {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 14px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity .8s ease;
}
.music-viz.playing { opacity: .85; }
.music-viz span {
  width: 3px;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, #FF69B4, #F4C542);
  transform: scaleY(.25);
  transform-origin: bottom;
}
.music-viz.playing span { animation: vizBar 1.1s ease-in-out infinite; }
.music-viz span:nth-child(1) { animation-delay: .0s; }
.music-viz span:nth-child(2) { animation-delay: .18s; }
.music-viz span:nth-child(3) { animation-delay: .35s; }
.music-viz span:nth-child(4) { animation-delay: .12s; }
.music-viz span:nth-child(5) { animation-delay: .28s; }

@keyframes vizBar {
  0%, 100% { transform: scaleY(.25); }
  50% { transform: scaleY(1); }
}

/* ---------- Photo ---------- */
.photo-wrap {
  margin-top: 10px;
  animation: fadeUp 1s ease calc(var(--bloom-base, 3s) + 1.8s) both;
}
.photo {
  width: clamp(140px, 34vw, 210px);
  height: clamp(140px, 34vw, 210px);
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow:
    0 0 0 4px rgba(255, 105, 180, .18),
    0 14px 34px rgba(255, 105, 180, .35);
  animation: floatY 4.5s ease-in-out infinite;
}

/* ---------- Photo collage (artistic memory gallery, all 4:5) ---------- */
.collage-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: fadeUp 1s ease calc(var(--bloom-base, 3s) + 2.2s) both;
}
.collage-title {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  color: var(--hot-pink);
  text-shadow: 0 3px 16px rgba(255, 46, 158, .3);
  text-align: center;
}

.collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 3.6vw, 28px);
  width: 100%;
  max-width: 800px;
  align-items: start;
}
.collage-item {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  transform: rotate(var(--rot, 0deg)) translateY(var(--oy, 0px));
  transition: transform .45s ease, filter .45s ease, z-index 0s;
  will-change: transform;
}
.collage-item:hover {
  transform: rotate(var(--rot, 0deg)) translateY(var(--oy, 0px)) scale(1.035);
  filter: brightness(1.04);
  z-index: 6;
}

/* Hero (foto 1) lebih besar & di tengah atas; sisanya supporting mengapit */
.ci-1 { --rot: -1.6deg; --oy: 0px;  grid-column: 4 / span 6; grid-row: 1; z-index: 4; }
.ci-2 { --rot:  1.3deg; --oy: 8px;  grid-column: 1 / span 5; grid-row: 2; z-index: 2; }
.ci-3 { --rot: -1.2deg; --oy: 20px; grid-column: 8 / span 5; grid-row: 2; z-index: 2; }
.ci-4 { --rot:  1.5deg; --oy: 12px; grid-column: 4 / span 6; grid-row: 3; z-index: 3; }
.ci-5 { --rot: -1.4deg; --oy: 6px;  grid-column: 1 / span 5; grid-row: 4; z-index: 2; }
.ci-6 { --rot:  1.1deg; --oy: 18px; grid-column: 8 / span 5; grid-row: 4; z-index: 2; }

/* Hero frame — kesan lebih menonjol */
.ci-1 .collage-frame {
  box-shadow:
    0 22px 44px rgba(255, 105, 180, .38),
    0 6px 16px rgba(214, 51, 132, .2),
    0 0 0 3px rgba(255, 255, 255, .9),
    0 0 0 7px rgba(255, 105, 180, .14);
}

.ci-1 { --dx: 0px;   --dy: 24px; --sc: .78; --rin: 3deg;  transition-delay: .05s; }
.ci-2 { --dx: 32px;  --dy: 0px;  --sc: .92; --rin: -4deg; transition-delay: .18s; }
.ci-3 { --dx: -30px; --dy: 16px; --sc: .9;  --rin: 3deg;  transition-delay: .3s;  }
.ci-4 { --dx: 0px;   --dy: 26px; --sc: .82; --rin: -3deg; transition-delay: .42s; }
.ci-5 { --dx: -28px; --dy: 10px; --sc: .94; --rin: 3deg;  transition-delay: .54s; }
.ci-6 { --dx: 30px;  --dy: 18px; --sc: .9;  --rin: -4deg; transition-delay: .66s; }

.collage-frame {
  display: block;
  width: 100%;
  height: 100%;
  padding: clamp(6px, 1.6vw, 10px);
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 16px 34px rgba(255, 105, 180, .3),
    0 4px 12px rgba(214, 51, 132, .16);
  overflow: hidden;
}
.collage-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* ---------- Mobile tap / press feedback ---------- */
.collage-item:active .collage-frame { transform: scale(.98); }

.reveal .collage-frame {
  opacity: 0;
  transform: translate(var(--dx, 0px), var(--dy, 28px)) rotate(var(--rin, 0deg)) scale(var(--sc, .92));
  transition: opacity .9s cubic-bezier(.3, .8, .4, 1), transform .9s cubic-bezier(.3, 1.05, .4, 1);
}
.collage-item.in-view .collage-frame {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1);
}

/* ---------- Floating love notes ---------- */
.love-notes {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 3vw, 20px);
  animation: fadeUp 1s ease calc(var(--bloom-base, 3s) + 2.4s) both;
}
.note-card-mini {
  margin: 0;
  max-width: 250px;
  padding: clamp(10px, 3vw, 14px) clamp(14px, 4vw, 20px);
  border-radius: 18px;
  background: linear-gradient(160deg, #FFF9F2, #FFE4EC);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 24px rgba(255, 105, 180, .18);
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  font-size: clamp(.78rem, 3.2vw, .9rem);
  line-height: 1.55;
  color: #A3406E;
  transform: rotate(var(--n-rot, 0deg));
  animation: noteFloat 6s ease-in-out infinite;
}
.note-card-mini.nc-1 { --n-rot: -2.5deg; animation-delay: 0s; }
.note-card-mini.nc-2 { --n-rot: 1.8deg;  animation-delay: .8s; }
.note-card-mini.nc-3 { --n-rot: -1.2deg; animation-delay: 1.6s; }

@keyframes noteFloat {
  0%, 100% { transform: translateY(0) rotate(var(--n-rot, 0deg)); }
  50% { transform: translateY(-7px) rotate(var(--n-rot, 0deg)); }
}

/* ---------- Typing follow-up (typing lead removed) ---------- */
.typing-section {
  min-height: 60px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: fadeUp .9s ease calc(var(--bloom-base, 3s) + 2s) both;
}
.typing-follow p {
  font-size: clamp(.92rem, 3.6vw, 1.1rem);
  line-height: 1.8;
  color: var(--text);
  opacity: 0;
}
.typing-follow p.show { animation: fadeUp .8s ease both; }
.typing-follow p.strong {
  font-weight: 700;
  color: var(--deep-pink);
}

/* ---------- Message ---------- */
.message-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: fadeUp 1s ease calc(var(--bloom-base, 3s) + 2.4s) both;
}
.greeting {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  color: var(--hot-pink);
  text-shadow: 0 3px 16px rgba(255, 46, 158, .3);
  text-wrap: balance;
}
.message-card {
  width: 100%;
  max-width: 620px;
  padding: clamp(22px, 5vw, 32px) clamp(18px, 4.5vw, 28px);
  text-align: left;
}
.message-text {
  font-size: clamp(.92rem, 3.6vw, 1.05rem);
  line-height: 1.85;
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: break-word;
}

/* ---------- Surprise button ---------- */
.surprise-btn {
  margin-top: 4px;
  padding: 16px 30px;
  border: none;
  border-radius: 40px;
  font-weight: 700;
  font-size: clamp(.95rem, 3.8vw, 1.15rem);
  color: #fff;
  background: linear-gradient(120deg, var(--hot-pink), var(--pink) 50%, var(--gold));
  background-size: 180% 180%;
  box-shadow: 0 14px 32px rgba(255, 105, 180, .5);
  animation: buttonPulse 2.4s ease-in-out infinite;
  transition: transform .25s, box-shadow .25s, background-position .45s;
  max-width: 100%;
}
.surprise-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 20px 40px rgba(255, 105, 180, .6);
  background-position: 100% 0;
}
.surprise-btn:active { transform: translateY(0) scale(.97); }

.signature {
  font-size: clamp(.78rem, 3vw, .85rem);
  color: var(--text-light);
  opacity: .8;
}

/* ==========================================================
   MODAL
   ========================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.modal:not(.hidden) { transition: opacity .5s ease, visibility 0s linear 0s; }
.modal.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 105, 180, .25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.note-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 660px;
  min-height: min(70dvh, 560px);
  padding: var(--safe-top) 0 var(--safe-bottom);
}
/* Both envelope and paper live in the same grid cell, stacked & centered */
.note-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.note-envelope,
.note-card {
  grid-area: 1 / 1;
}

/* ---------- Envelope ---------- */
.note-envelope {
  position: relative;
  width: min(82vw, 340px);
  height: min(58vw, 236px);
  opacity: 0;
  transform: translateY(28px) scale(.72);
  transition: opacity .55s ease, transform .7s cubic-bezier(.34, 1.25, .64, 1);
  perspective: 900px;
  filter: drop-shadow(0 18px 40px rgba(214, 51, 132, .28));
}
.note-envelope.go {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.note-envelope.float { animation: envFloat 3.4s ease-in-out infinite; }
.note-envelope.lift-out {
  opacity: 0;
  transform: translateY(-34px) scale(.9) rotate(-1.5deg);
  transition: opacity .6s ease, transform .75s cubic-bezier(.4, 0, .5, 1);
  pointer-events: none;
}

.env-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
  background: linear-gradient(160deg, #FFF9F2, #FFE4EC 60%, #FFD1E3);
  box-shadow:
    inset 0 -14px 26px rgba(214, 51, 132, .16),
    inset 0 6px 12px rgba(255, 255, 255, .85),
    0 24px 60px rgba(214, 51, 132, .3);
}
.env-pocket {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
  background:
    linear-gradient(135deg, transparent 46%, #FFD1E3 47% 51%, transparent 52%) bottom left / 50% 100% no-repeat,
    linear-gradient(225deg, transparent 46%, #FFD1E3 47% 51%, transparent 52%) bottom right / 50% 100% no-repeat;
  clip-path: polygon(0 0, 100% 0, 50% 74%);
  filter: drop-shadow(0 -3px 6px rgba(214, 51, 132, .12));
}
.env-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(160deg, #FFE4EC, #FFC4D6);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 12px 12px 0 0;
  transform-origin: top center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .8s cubic-bezier(.5, .9, .55, 1);
  box-shadow: inset 0 -10px 18px rgba(214, 51, 132, .18);
  z-index: 3;
}
.note-envelope.open .env-flap { transform: rotateX(178deg); }

.env-letter {
  position: absolute;
  left: 50%;
  top: 14%;
  transform: translate(-50%, 0) rotate(0deg) scale(.92);
  width: 74%;
  height: 62%;
  background:
    linear-gradient(180deg, rgba(255, 246, 240, .55), rgba(255, 232, 236, .4)),
    repeating-linear-gradient(0deg, rgba(214, 51, 132, .035) 0 1px, transparent 1px 3px),
    #fffaf4;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 12px 28px rgba(0, 0, 0, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: bottom center;
  z-index: 2;
  transition: transform .8s cubic-bezier(.34, 1.1, .64, 1), opacity .45s ease;
}
.note-envelope.open .env-letter {
  transform: translate(-50%, -56%) scale(.6) rotate(-3deg);
  opacity: 0;
}
.env-seal {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(1.3rem, 6vw, 1.8rem);
  color: var(--hot-pink);
  opacity: .85;
  text-align: center;
  line-height: 1.4;
  padding: 8px 14px;
}
.env-glow {
  position: absolute;
  inset: -22%;
  z-index: 0;
  background: radial-gradient(circle, rgba(255, 217, 61, .42), rgba(255, 105, 180, .26) 45%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 2.2s ease-in-out infinite;
}

/* ---------- Paper lands as the letter (after envelope opens) ---------- */
.note-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 40px);
  padding: 34px clamp(20px, 5vw, 34px) 26px;
  text-align: center;
  opacity: 0;
  transform: translateY(64px) scale(.74) rotate(-2deg);
  pointer-events: none;
  transition:
    opacity .55s ease,
    transform .95s cubic-bezier(.3, 1.12, .4, 1);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .9), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(255, 227, 236, .7), transparent 46%),
    repeating-linear-gradient(0deg, rgba(214, 51, 132, .03) 0 1px, transparent 1px 3px),
    #FFF9F2;
  border: 1.5px solid rgba(255, 255, 255, .85);
  box-shadow:
    0 30px 70px rgba(214, 51, 132, .3),
    0 8px 22px rgba(214, 51, 132, .16),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
.note-card.show {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  pointer-events: auto;
}
.close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 105, 180, .14);
  color: var(--deep-pink);
  font-size: 16px;
  transition: transform .2s, background .2s;
  z-index: 3;
}
.close-btn:hover { transform: rotate(90deg) scale(1.08); background: rgba(255, 105, 180, .28); }
.note-title {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  color: var(--hot-pink);
  margin: 0 0 14px;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.note-card.show .note-title {
  opacity: 1;
  transform: translateY(0);
}
.note-scroll {
  max-height: 52dvh;
  overflow-y: auto;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.modal-text {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(.92rem, 3.5vw, 1.06rem);
  line-height: 1.85;
  color: var(--text);
  overflow-wrap: break-word;
  text-align: left;
  margin: 0;
}
.modal-text p {
  margin: 0 0 .9em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.modal-text p.show {
  opacity: 1;
  transform: translateY(0);
}
.modal-close {
  margin-top: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease .25s, transform .5s ease .25s;
}
.note-card.show .modal-close {
  opacity: 1;
  transform: translateY(0);
}
.modal-close:hover { transform: translateY(-3px); }
.modal-close:active { transform: translateY(0) scale(.97); }

@keyframes envFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(.6deg); }
}

/* ==========================================================
   SURPRISE SEQUENCE — fireworks, cake, candles, countdown
   ========================================================== */
.surprise-overlay {
  position: fixed;
  inset: 0;
  z-index: 145;
  pointer-events: none;
  overflow: hidden;
}
.surprise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60vw 60vw at 50% 45%, rgba(255, 217, 61, .3), transparent 70%);
  opacity: 0;
  transition: opacity .7s ease;
}
.surprise-overlay.celebrating::after { opacity: 1; }

#fireworks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.surprise-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) 16px var(--safe-bottom);
  pointer-events: none;
}

/* ---------- Cake ---------- */
.cake-wrap {
  position: relative;
  width: min(74vw, 300px);
  opacity: 0;
  transform: translateY(34px) scale(.7);
  transition: opacity .8s ease, transform .9s cubic-bezier(.34, 1.3, .64, 1), filter .6s ease;
  z-index: 2;
  pointer-events: none;
}
.cake-wrap.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cake-wrap.celebrate {
  filter: brightness(1.18) saturate(1.12) drop-shadow(0 0 42px rgba(255, 217, 61, .55));
}

.cake-glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 217, 61, .5), rgba(255, 105, 180, .28) 45%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 2.4s ease-in-out infinite;
}

.cake {
  position: relative;
  margin-top: 76px;
}

.cake-plate {
  width: 96%;
  height: 20px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #ffe3f0 55%, #f6b7d6 100%);
  border-radius: 50%;
  box-shadow: 0 12px 24px rgba(214, 51, 132, .28);
}

.cake-bottom-tier {
  position: relative;
  width: 88%;
  margin: -6px auto 0;
}
.cake-top-tier {
  position: relative;
  width: 60%;
  margin: 12px auto 0;
  z-index: 2;
}

.tier-body {
  display: block;
  border-radius: 12px 12px 10px 10px;
  box-shadow: inset 0 -12px 20px rgba(214, 51, 132, .32), 0 12px 24px rgba(255, 105, 180, .35);
}
.cake-bottom-tier .tier-body {
  height: clamp(56px, 14vw, 76px);
  background:
    radial-gradient(circle at 12% 32%, #ffe17d 0 3px, transparent 4px),
    radial-gradient(circle at 42% 72%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 68% 28%, #ff8fc6 0 3px, transparent 4px),
    radial-gradient(circle at 88% 58%, #ffe17d 0 3px, transparent 4px),
    radial-gradient(circle at 30% 55%, #ff8fc6 0 3px, transparent 4px),
    radial-gradient(circle at 58% 88%, #fff 0 3px, transparent 4px),
    linear-gradient(160deg, #ffb3da, #ff7bb8 55%, #f2589d);
}
.cake-top-tier .tier-body {
  height: clamp(44px, 11vw, 58px);
  background:
    radial-gradient(circle at 18% 38%, #ff8fc6 0 3px, transparent 4px),
    radial-gradient(circle at 50% 72%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 78% 30%, #ffe17d 0 3px, transparent 4px),
    linear-gradient(160deg, #fff2dc, #ffd98a 55%, #f4c542);
}

.tier-drip {
  position: absolute;
  top: -12px;
  left: 3%;
  right: 3%;
  height: 16px;
  background: linear-gradient(180deg, #ffffff, #fff0f6 100%);
  border-radius: 50% 50% 46% 46% / 34% 34% 66% 66%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.cake-top-tier .tier-drip {
  background: linear-gradient(180deg, #fffdf3, #fff3da 100%);
}

/* ---------- Candles & flame ---------- */
.candles {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: clamp(12px, 3vw, 18px);
  z-index: 3;
}

.candle {
  position: relative;
  width: 16px;
  height: 56px;
}
.candle-body {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 13px;
  height: 46px;
  background: repeating-linear-gradient(45deg, #ff9ecf 0 5px, #fff 5px 10px);
  border-radius: 5px 5px 3px 3px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .14);
}
.wick {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: #7a4a2b;
  border-radius: 2px;
}
.flame {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  width: 16px;
  height: 24px;
  background: radial-gradient(circle at 50% 68%, #fff 0%, #ffe27a 45%, #ffb03c 72%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform-origin: 50% 100%;
  animation: candleFlicker .5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(255, 176, 60, .8));
}
.flame::before {
  content: '';
  position: absolute;
  inset: -12px;
  background: radial-gradient(circle, rgba(255, 190, 90, .55), transparent 70%);
  border-radius: 50%;
  animation: flameGlow 1.1s ease-in-out infinite;
}
.flame::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 7px;
  height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 62%, #fff, #ffdf7e 60%, #ff9d2e);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  animation: flameCore .35s ease-in-out infinite alternate;
}
.candle.c1 .flame { animation-delay: .08s; }
.candle.c3 .flame { animation-delay: -.2s; }
.cake-wrap.celebrate .flame { animation-duration: .16s; }
.cake-wrap.celebrate .flame::before { animation-duration: .4s; }

/* ---------- Countdown 3-2-1 ---------- */
.surprise-countdown {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cd-big {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(5rem, 24vw, 10rem);
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 26px rgba(255, 105, 180, .95),
    0 0 70px rgba(255, 217, 61, .85);
  opacity: 0;
  transform: scale(.35);
}
.cd-big.pop { animation: cdPop 1s cubic-bezier(.3, 1.1, .4, 1) both; }

/* ---------- Skip ---------- */
.surprise-skip {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 6;
  padding: 8px 15px;
  border: 1.5px solid rgba(255, 255, 255, .8);
  border-radius: 40px;
  font-weight: 700;
  font-size: .85rem;
  color: var(--deep-pink);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(255, 105, 180, .3);
  pointer-events: auto;
  cursor: pointer;
}
.surprise-skip:hover { transform: translateY(-2px); }

/* Celebration background boost */
body.celebration .bg-gradient {
  filter: brightness(1.18) saturate(1.15);
}
body.celebration .bg-gradient::after {
  background:
    radial-gradient(48vw 48vw at 12% 8%, rgba(255, 105, 180, .5), transparent 65%),
    radial-gradient(54vw 54vw at 88% 12%, rgba(255, 217, 61, .6), transparent 65%),
    radial-gradient(56vw 56vw at 80% 88%, rgba(255, 194, 161, .5), transparent 65%),
    radial-gradient(44vw 44vw at 8% 90%, rgba(255, 105, 180, .42), transparent 65%);
}

/* ==========================================================
   BUTTERFLIES
   ========================================================== */
.butterfly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8;
  width: 24px;
  height: 20px;
  pointer-events: none;
  opacity: 0;
  animation: butterflyFly var(--bf-dur, 12s) linear var(--bf-delay, 0s) forwards;
  will-change: transform;
  filter: drop-shadow(0 3px 8px rgba(229, 83, 129, .28));
}
.butterfly .wing {
  position: absolute;
  top: 0;
  width: 13px;
  height: 18px;
  border-radius: 62% 38% 62% 38% / 60% 55% 45% 40%;
  background: radial-gradient(circle at 30% 30%, #FFE08A, #FF9ECF 55%, #E55381 100%);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, .7);
  animation: wingFlap var(--bf-flap, .28s) ease-in-out infinite alternate;
}
.butterfly .wing-l { left: 1px; transform-origin: 100% 50%; }
.butterfly .wing-r { right: 1px; transform-origin: 0 50%; animation-delay: .06s; }
.butterfly .b-body {
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  width: 3px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #7a4a2b, #a3406e);
  z-index: 2;
}

@keyframes wingFlap {
  to { transform: rotateY(72deg); }
}

@keyframes butterflyFly {
  0%   { transform: translate3d(var(--bf-x0, -6vw), var(--fy0, 18vh), 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  40%  { transform: translate3d(var(--bf-x1, 34vw), var(--fy1, 4vh), 0) rotate(-6deg); }
  70%  { transform: translate3d(var(--bf-x2, 72vw), var(--fy2, 30vh), 0) rotate(5deg); }
  88%  { opacity: 1; }
  100% { transform: translate3d(var(--bf-x3, 110vw), var(--fy3, 12vh), 0) rotate(0deg); opacity: 0; }
}

/* ==========================================================
   LOVE SUCCESS FLASH
   ========================================================== */
.flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .98), rgba(255, 209, 227, .85) 40%, rgba(255, 227, 236, 0) 78%);
}
.flash-overlay.go { animation: flashFade 1.15s ease-out forwards; }
@keyframes flashFade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================================
   FINALE — CINEMATIC ENDING
   ========================================================== */
.finale-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) max(18px, var(--safe-right)) var(--safe-bottom) max(18px, var(--safe-left));
  background: linear-gradient(165deg, #FFF9F2 0%, #FFE4EC 45%, #FFD1E3 78%, #FFF3B0 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
  text-align: center;
}
.finale-overlay:not(.hidden) {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.1s ease, visibility 0s linear 0s;
}
.finale-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.finale-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(44vw 44vw at 18% 22%, rgba(255, 255, 255, .65), transparent 65%),
    radial-gradient(50vw 50vw at 84% 30%, rgba(255, 217, 61, .35), transparent 65%);
  pointer-events: none;
}
.finale-text {
  position: relative;
  z-index: 2;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.5vw, 18px);
}
.finale-text .fl-line {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 5vw, 1.7rem);
  line-height: 1.5;
  color: var(--deep-pink);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s ease, transform .9s ease;
  text-wrap: balance;
}
.finale-text .fl-line.show { opacity: 1; transform: translateY(0); }
.finale-text .fl-line.fl-final {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: clamp(1.7rem, 7.5vw, 2.6rem);
  color: var(--hot-pink);
}
.finale-text .fl-line.fl-small {
  font-size: clamp(.9rem, 4vw, 1.1rem);
  font-weight: 500;
  color: #A3406E;
}

.finale-overlay .petal-fx,
.finale-overlay .butterfly { z-index: 1; }

/* ==========================================================
   TOAST
   ========================================================== */
.secret-toast {
  position: fixed;
  left: 50%;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 60px);
  transform: translateX(-50%) translateY(20px);
  z-index: 170;
  padding: 13px 22px;
  border-radius: 40px;
  font-weight: 700;
  font-size: clamp(.85rem, 3.2vw, .95rem);
  color: var(--deep-pink);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 105, 180, .4);
  box-shadow: 0 14px 34px rgba(255, 105, 180, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s, transform .45s;
  max-width: calc(100vw - 32px);
}
.secret-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================
   KEYFRAMES
   ========================================================== */
@keyframes bgShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.18); }
  55% { transform: scale(.95); }
}

@keyframes heartPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.6) rotate(-8deg); }
  60% { transform: scale(.85) rotate(5deg); }
  80% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes arrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes glowPulse {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

@keyframes twinkle {
  0%, 100% { opacity: .1; transform: scale(.6); }
  50% { opacity: .9; transform: scale(1); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: rotate(45deg) scale(.4); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.15); }
}

@keyframes fireflyFloat {
  0%, 100% { transform: translate(0, 0) scale(.5); opacity: 0; }
  20% { opacity: .8; }
  50% { transform: translate(var(--ff-x, 40px), var(--ff-y, -30px)) scale(1); opacity: .9; }
  80% { opacity: .35; }
}

@keyframes candleFlicker {
  0% { transform: translateX(-50%) scaleY(1) rotate(-2.5deg); }
  100% { transform: translateX(-50%) scaleY(1.14) rotate(2.5deg); }
}

@keyframes flameGlow {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes flameCore {
  0% { transform: translateX(-50%) scale(.88); }
  100% { transform: translateX(-50%) scale(1.22); }
}

@keyframes cdPop {
  0% { opacity: 0; transform: scale(.35); }
  22% { opacity: 1; transform: scale(1.28); }
  55% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes boxShine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@keyframes buttonPulse {
  0%, 100% { box-shadow: 0 14px 32px rgba(255, 105, 180, .45); }
  50% { box-shadow: 0 14px 44px rgba(255, 105, 180, .7); }
}

@keyframes flowerGrow {
  0% { transform: scale(0) translateY(26px); opacity: 0; }
  60% { transform: scale(1.1) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes petalOpen {
  from {
    transform: translate(-50%, -50%) rotate(var(--petal-rotate)) translateY(0) scale(.35);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) rotate(var(--petal-rotate)) translateY(calc(var(--petal-offset) * -1)) scale(1);
    opacity: 1;
  }
}

@keyframes sway {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  25% { transform: translate(var(--sw-x1, 6px), var(--sw-y1, -7px)) rotate(-5deg); }
  50% { transform: translate(var(--sw-x2, -7px), var(--sw-y2, 9px)) rotate(2.5deg); }
  75% { transform: translate(var(--sw-x3, 5px), var(--sw-y3, -10px)) rotate(-3.5deg); }
}

@keyframes bloomSway {
  0%, 100% { transform: scale(1) rotate(-1.5deg); }
  50% { transform: scale(1.03) rotate(1.5deg); }
}

@keyframes petalFall {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translateY(55vh) translateX(26px) rotate(320deg); opacity: .75; }
  100% { transform: translateY(118vh) translateX(-18px) rotate(700deg); opacity: 0; }
}

@keyframes heartFloat {
  0% { transform: translateY(0) rotate(0deg) scale(.6); opacity: 0; }
  12% { opacity: .9; }
  50% { transform: translateY(-52vh) rotate(8deg) scale(1); }
  100% { transform: translateY(-112vh) rotate(-8deg) scale(.8); opacity: 0; }
}

@keyframes heartBurst {
  0% { opacity: 1; transform: translate(0, 0) scale(.3) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1.2) rotate(var(--rot)); }
}

/* ==========================================================
   RESPONSIVE — tablet & desktop
   ========================================================== */
@media (min-width: 600px) {
  .drag-arrow { width: 68px; height: 68px; margin-top: -34px; }
  .love-track { height: 100px; }
  .love-target { width: 104px; }
  .content { gap: 38px; }
}

@media (min-width: 1024px) {
  .content { max-width: 900px; }
}

@media (min-width: 1440px) {
  .content { max-width: 960px; }
}

/* Mobile collage layout (default) */
@media (max-width: 599px) {
  .collage {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 4vw, 20px);
    max-width: 460px;
  }
  .ci-1 { grid-column: 1 / -1; grid-row: 1; width: 80%; justify-self: center; --rot: -1.6deg; --oy: 0px; }
  .ci-2 { grid-column: 1 / 2;  grid-row: 2; --rot: 1.2deg;  --oy: 0px; }
  .ci-3 { grid-column: 2 / 3;  grid-row: 2; --rot: -1.2deg; --oy: 12px; }
  .ci-4 { grid-column: 1 / -1; grid-row: 3; width: 66%; justify-self: center; --rot: 1.4deg; --oy: 6px; }
  .ci-5 { grid-column: 1 / 2;  grid-row: 4; --rot: -1.2deg; --oy: 0px; }
  .ci-6 { grid-column: 2 / 3;  grid-row: 4; --rot: 1.2deg;  --oy: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .25s !important;
  }
}