/* =====================================================================
   ENHANCEMENT LAYER — stickers, motion, transitions, typewriter
   Purely additive. Responsive for all screens.
   ===================================================================== */

/* ---------------- keyframes ---------------- */
@keyframes bdyFloat {
  0%,
  100% {
    transform: translateY(0) rotate(var(--tilt, 0deg));
  }
  50% {
    transform: translateY(-10px) rotate(calc(var(--tilt, 0deg) * -1));
  }
}
@keyframes bdyPop {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-14deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.1) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(var(--tilt, 0deg));
  }
}
@keyframes bdyRise {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes bdySlideIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes bdyShimmer {
  0% {
    background-position: -220% 0;
  }
  100% {
    background-position: 220% 0;
  }
}
@keyframes bdyCaret {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0;
  }
}
@keyframes bdyGlowPulse {
  0%,
  100% {
    box-shadow: 0 16px 36px -16px rgba(184, 95, 104, 0.55);
  }
  50% {
    box-shadow: 0 20px 48px -12px rgba(184, 95, 104, 0.85);
  }
}
@keyframes bdyHeartUp {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-130px) scale(1.15);
  }
}
@keyframes bdyRibbon {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

/* ---------------- global motion polish ---------------- */
.page-content,
.chapter-page {
  animation: bdySlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-content > *,
.chapter-page > * {
  animation: bdyRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-content > *:nth-child(1) {
  animation-delay: 0.03s;
}
.page-content > *:nth-child(2) {
  animation-delay: 0.1s;
}
.page-content > *:nth-child(3) {
  animation-delay: 0.18s;
}
.page-content > *:nth-child(4) {
  animation-delay: 0.25s;
}
.page-content > *:nth-child(5) {
  animation-delay: 0.32s;
}

/* buttons: lift, press, sheen */
button,
.nav-button,
.unlock-button,
.music-button,
.game-proceed-btn,
.letter-action-btn {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    filter 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}
button:hover:not(:disabled) {
  transform: translateY(-2px);
}
button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.unlock-button,
.nav-button.primary,
#meter-button,
#candle-button,
.game-proceed-btn,
.letter-action-btn.primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.unlock-button::after,
.nav-button.primary::after,
#meter-button::after,
#candle-button::after,
.game-proceed-btn::after,
.letter-action-btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 248, 237, 0.45) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: bdyShimmer 3.6s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.unlock-button:hover:not(:disabled),
.nav-button.primary:hover:not(:disabled) {
  animation: bdyGlowPulse 1.6s ease-in-out infinite;
}

/* inputs + cards */
#passkey {
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
#passkey:focus {
  transform: translateY(-1px);
}
.lock-card {
  animation: bdySlideIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.game-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}
.game-card:hover {
  transform: translateY(-4px);
}
.progress-dot {
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    width 0.25s ease;
}
.progress-dot:hover {
  transform: scale(1.35);
}
.envelope {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.envelope:hover {
  transform: translateY(-4px) rotate(-0.5deg);
}
.name-ribbon {
  animation: bdyRibbon 5s ease-in-out infinite;
}

/* ---------------- cinematic depth: vignette ---------------- */
.bdy-vignette {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 42%, transparent 55%, rgba(20, 10, 12, 0.14) 100%),
    linear-gradient(
      180deg,
      rgba(20, 10, 12, 0.08),
      transparent 14%,
      transparent 86%,
      rgba(20, 10, 12, 0.12)
    );
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {
  .bdy-vignette {
    opacity: 0;
    animation: bdyWatermarkIn 1.4s ease forwards 0.2s;
  }
}

/* ---------------- foreground photo depth (ATM memory frame) ---------------- */
.memory-frame {
  box-shadow:
    0 16px 36px -16px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(47, 240, 182, 0.15);
  transform: translateZ(0);
}
.memory-frame img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.memory-frame:hover img {
  transform: scale(1.05);
}

/* ---------------- site watermark ---------------- */
.bdy-watermark {
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 30;
  pointer-events: none;
  font-family: inherit;
  font-size: clamp(8.5px, 2.2vw, 11px);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.38);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  opacity: 0;
  animation: bdyWatermarkIn 1s ease forwards 0.4s;
}
@keyframes bdyWatermarkIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---------------- Stickers ---------------- */
.bdy-sticker {
  animation: bdyPop 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: none;
  z-index: 4;
}
.bdy-sticker.bdy-floaty {
  animation:
    bdyPop 0.65s cubic-bezier(0.22, 1, 0.36, 1) both,
    bdyFloat 5.2s ease-in-out 0.7s infinite;
}
.bdy-sticker img {
  display: block;
  width: 100%;
  height: auto;
}

/* Video stickers: clean alpha transparency via real-time chroma-key (enhance.js) */
.bdy-vsticker {
  position: relative;
  margin: 10px auto;
  width: clamp(130px, 42vw, 190px);
  filter: drop-shadow(0 12px 20px rgba(37, 25, 29, 0.25));
  animation:
    bdyPop 0.65s cubic-bezier(0.22, 1, 0.36, 1) both,
    bdyFloat 5.5s ease-in-out 0.7s infinite;
  pointer-events: none;
}
.bdy-vsticker-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.bdy-vsticker-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

/* per-page placements */
.bdy-hb {
  width: min(340px, 80%);
  margin: 0 auto 6px;
  --tilt: -2deg;
  filter: drop-shadow(0 10px 18px rgba(123, 57, 68, 0.25));
}

.bdy-letter-vid {
  width: clamp(120px, 36vw, 175px);
  margin: 6px auto;
  --tilt: 1deg;
}

.bdy-scratch-vid {
  width: clamp(120px, 36vw, 175px);
  margin: 10px auto 0;
}

.bdy-meter-vid {
  width: clamp(120px, 36vw, 175px);
  margin: 10px auto 0;
}

.bdy-gift-vid {
  width: clamp(150px, 44vw, 210px);
  margin: 0 auto 12px;
}

.bdy-cake-img {
  width: clamp(160px, 42vw, 220px);
  margin: 14px auto 8px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(37, 25, 29, 0.55);
  --tilt: -1.5deg;
}
.bdy-cake-img img {
  border-radius: 20px;
}

.bdy-thanks {
  width: clamp(150px, 42vw, 200px);
  margin: 14px auto 0;
  --tilt: 2deg;
  filter: drop-shadow(0 12px 22px rgba(123, 57, 68, 0.28));
}

/* ---------------- typewriter ---------------- */
.bdy-type {
  white-space: pre-wrap;
}
.bdy-type.bdy-typing::after {
  content: "|";
  margin-left: 2px;
  color: var(--rose, #b85f68);
  animation: bdyCaret 0.8s steps(1, end) infinite;
}

/* ---------------- floating hearts burst ---------------- */
.bdy-heart-pop {
  position: fixed;
  z-index: 60;
  font-size: 22px;
  pointer-events: none;
  animation: bdyHeartUp 1.4s ease-out forwards;
}

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