/* ===================================================================
   Keyframes & scroll-reveal transitions
   =================================================================== */

/* ---------- Generic scroll reveal (used with IntersectionObserver) ---------- */
.reveal-up {
  transform: translateY(46px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

.reveal-line {
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-line.is-visible { opacity: 1; transform: translateY(0); }

/* stagger helper: JS sets --d as transition-delay multiplier */
.reveal-up, .reveal-line { transition-delay: calc(var(--d, 0) * 70ms); }

/* ---------- Heartbeat ---------- */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.12); }
  30% { transform: scale(0.98); }
  45% { transform: scale(1.08); }
  60% { transform: scale(1); }
}

/* ---------- Blinking dots ---------- */
@keyframes blinkDot {
  0%, 20% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Preloader / typed cursor already share blinkDot ---------- */

/* ---------- Aurora drifting blobs ---------- */
@keyframes driftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(6%, 8%) scale(1.08); }
  66% { transform: translate(-4%, 4%) scale(0.95); }
}
@keyframes driftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-8%, -5%) scale(1.1); }
  66% { transform: translate(4%, -8%) scale(0.92); }
}
@keyframes driftC {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, -6%) scale(1.15); }
}

/* ---------- Hero sparkles ---------- */
@keyframes sparkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(25deg); }
}

/* ---------- Photo glow breathing ---------- */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.08); }
}

/* ---------- Scroll hint dot ---------- */
@keyframes scrollDot {
  0% { opacity: 1; top: 6px; }
  80% { opacity: 0; top: 20px; }
  100% { opacity: 0; top: 6px; }
}

/* ---------- Vinyl spin ---------- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Jar lid wiggle ---------- */
@keyframes jarWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

/* ---------- Gentle float ---------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---------- Floating hearts inside "sad" mood section ---------- */
.mood-float-heart {
  position: absolute;
  bottom: -10%;
  font-size: 1.4rem;
  color: var(--rose);
  opacity: 0.6;
  animation: floatUpFade linear infinite;
}
@keyframes floatUpFade {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-620px) translateX(var(--drift, 30px)) rotate(360deg); opacity: 0; }
}

/* ---------- Jar note float-out ---------- */
.jar-flying-note {
  position: absolute;
  left: 50%;
  top: 40%;
  font-size: 1.3rem;
  transform: translate(-50%, 0) scale(0.4);
  opacity: 0;
  animation: jarNoteOut 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}
@keyframes jarNoteOut {
  0% { transform: translate(-50%, 0) scale(0.3) rotate(0deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -160px) scale(1.1) rotate(-14deg); opacity: 0; }
}

/* ---------- Wheel spin glow pulse while spinning ---------- */
.wheel-disc.spinning { box-shadow: var(--shadow-lg), var(--glow-gold); }

/* ---------- Confetti-esque heart burst for easter eggs ---------- */
.burst-heart {
  position: fixed;
  font-size: 1.4rem;
  pointer-events: none;
  z-index: 9995;
  animation: burstUp 1.6s ease-out forwards;
}
@keyframes burstUp {
  0% { transform: translate(0, 0) scale(0.6) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--bx, 0px), var(--by, -220px)) scale(1.2) rotate(var(--br, 90deg)); opacity: 0; }
}

/* ---------- Letter paper reveal ---------- */
@keyframes letterPaperIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}