/* ============================================
   ANIMATIONS.CSS — Sakura Dreams
   All @keyframes and animation utility classes
   ============================================ */

/* --- Core Entry Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

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

/* --- Float (for emoji and decorative elements) --- */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(-4deg); }
  66%       { transform: translateY(-10px) rotate(3deg); }
}

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

/* --- Pulse Glow (buttons, highlights) --- */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(244, 167, 185, 0.3),
      0 0 40px rgba(244, 167, 185, 0.1);
  }
  50% {
    box-shadow:
      0 0 35px rgba(244, 167, 185, 0.6),
      0 0 70px rgba(244, 167, 185, 0.3),
      0 0 100px rgba(244, 167, 185, 0.15);
  }
}

@keyframes pulse-glow-lavender {
  0%, 100% { box-shadow: 0 0 20px rgba(201, 184, 232, 0.3); }
  50%       { box-shadow: 0 0 40px rgba(201, 184, 232, 0.7), 0 0 80px rgba(201, 184, 232, 0.3); }
}

/* --- Hero Name Letter Animation --- */
@keyframes letter-appear {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* --- Shimmer (stat cards, buttons hover) --- */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* --- Spin Slow (decorative elements) --- */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

/* --- Heartbeat --- */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.15); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.1); }
  70%       { transform: scale(1); }
}

/* --- Typing Indicator Dots --- */
@keyframes typing-dot {
  0%, 60%, 100% {
    opacity: 0.2;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* --- Confetti Burst (flip cards) --- */
@keyframes confetti-fly-1 {
  from { opacity: 1; transform: scale(0) translate(0, 0) rotate(0deg); }
  to   { opacity: 0; transform: scale(1.5) translate(-60px, -60px) rotate(360deg); }
}
@keyframes confetti-fly-2 {
  from { opacity: 1; transform: scale(0) translate(0, 0) rotate(0deg); }
  to   { opacity: 0; transform: scale(1.5) translate(60px, -60px) rotate(-360deg); }
}
@keyframes confetti-fly-3 {
  from { opacity: 1; transform: scale(0) translate(0, 0) rotate(0deg); }
  to   { opacity: 0; transform: scale(1.5) translate(-70px, 40px) rotate(270deg); }
}
@keyframes confetti-fly-4 {
  from { opacity: 1; transform: scale(0) translate(0, 0) rotate(0deg); }
  to   { opacity: 0; transform: scale(1.5) translate(70px, 40px) rotate(-270deg); }
}
@keyframes confetti-fly-5 {
  from { opacity: 1; transform: scale(0) translate(0, 0) rotate(0deg); }
  to   { opacity: 0; transform: scale(1.5) translate(0, -80px) rotate(180deg); }
}

/* --- Waveform Bars (music player) --- */
@keyframes waveform {
  0%, 100% { transform: scaleY(0.25); }
  50%       { transform: scaleY(1); }
}

/* --- Envelope Open (love letter) --- */
@keyframes envelope-open {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-180deg); }
}

/* --- Letter Slide Up (Legacy fallback) --- */
@keyframes letter-slide-up {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Cinematic Letter Unboxing & Rising --- */
@keyframes letterUnfoldRise {
  0% {
    opacity: 0;
    transform: perspective(1200px) translateY(55px) scale(0.9) rotateX(7deg);
    filter: blur(2px);
  }
  50% {
    opacity: 0.9;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) translateY(0) scale(1) rotateX(0deg);
    filter: blur(0);
  }
}

@keyframes letterFoldDown {
  0% {
    opacity: 1;
    transform: perspective(1200px) translateY(0) scale(1) rotateX(0deg);
  }
  100% {
    opacity: 0;
    transform: perspective(1200px) translateY(40px) scale(0.92) rotateX(6deg);
  }
}

/* --- Staggered Handwritten Line Reveal --- */
@keyframes letterLineReveal {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Soft Bloom Glow on Unboxing --- */
@keyframes unboxingBloom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  40% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

/* --- Unboxing Particle Burst --- */
@keyframes particleFloatOut {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.4) rotate(0deg);
  }
  60% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 0px), var(--ty, -60px)) scale(var(--sc, 1)) rotate(var(--rot, 25deg));
  }
}

/* --- Modal Unboxing Line Reveal --- */
@keyframes modalElementReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Wax Seal Pop --- */
@keyframes seal-pop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* --- Floating Hearts (hero) --- */
@keyframes float-up {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-160px) scale(0.6);
    opacity: 0;
  }
}

/* --- Chat Auto Scroll --- */
@keyframes scroll-chat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* --- Progress bar shimmer --- */
@keyframes progress-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* --- Petal Bloom (game) --- */
@keyframes petal-bloom {
  0%   { transform: scale(1) rotate(0deg); filter: brightness(1); }
  50%  { transform: scale(1.4) rotate(15deg); filter: brightness(1.5); }
  100% { transform: scale(1.2) rotate(10deg); filter: brightness(1.2); }
}

/* --- Modal Appear --- */
@keyframes modal-appear {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Splash text letter stagger --- */
@keyframes splash-letter {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* --- Glow text --- */
@keyframes text-glow {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(247, 231, 166, 0.5),
      0 0 20px rgba(247, 231, 166, 0.3);
  }
  50% {
    text-shadow:
      0 0 20px rgba(247, 231, 166, 0.8),
      0 0 40px rgba(247, 231, 166, 0.5),
      0 0 60px rgba(247, 231, 166, 0.3);
  }
}

/* --- Star twinkle --- */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.2); }
}

/* --- Bounce --- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* --- Slide In from left / right --- */
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Timeline line draw --- */
@keyframes line-draw {
  from { transform: scaleY(0); transform-origin: top center; }
  to   { transform: scaleY(1); transform-origin: top center; }
}

/* --- Rotate in --- */
@keyframes rotate-in {
  from {
    opacity: 0;
    transform: rotate(-15deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

/* ============================================
   ANIMATION UTILITY CLASSES
   ============================================ */

/* Reveal class — added by IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
.reveal-stagger > *:nth-child(1)  { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(2)  { transition-delay: 0.2s; }
.reveal-stagger > *:nth-child(3)  { transition-delay: 0.3s; }
.reveal-stagger > *:nth-child(4)  { transition-delay: 0.4s; }
.reveal-stagger > *:nth-child(5)  { transition-delay: 0.5s; }
.reveal-stagger > *:nth-child(6)  { transition-delay: 0.6s; }

/* Hero name letters */
.hero-name .letter {
  display: inline-block;
  opacity: 0;
  animation: letter-appear 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.12s);
}

/* Floating hearts */
.floating-hearts .heart {
  display: inline-block;
  animation: float-up 4s ease-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Waveform bars */
.music-player .bar {
  transform-origin: bottom center;
  animation: waveform var(--bar-dur, 0.8s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  animation-play-state: paused;
}
.music-player.playing:not(.offscreen) .bar {
  animation-play-state: running;
}
.music-player.offscreen .album-art,
.music-player.offscreen .bar {
  animation-play-state: paused !important;
}

/* Wax seal */
.wax-seal {
  animation: seal-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Glow text utility */
.glow-text {
  animation: text-glow 2.5s ease-in-out infinite;
}

/* Heartbeat emoji */
.heartbeat {
  display: inline-block;
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* Spin decorative */
.spin-slow  { animation: spin-slow    8s linear infinite; }
.spin-rev   { animation: spin-reverse 12s linear infinite; }

/* Bounce */
.bounce { animation: bounce 2s ease-in-out infinite; }