/* ============================================================
   TOMOTOMO FRIENDS — ANIMATIONS
   Semua @keyframes & utility class animasi.
   ============================================================ */

/* ── KEYFRAMES ── */

@keyframes cloudDrift {
  0%   { transform: translateX(110vw); opacity: 0;                  }
  5%   { opacity: var(--cloud-o, 1);                                }
  92%  { opacity: var(--cloud-o, 1);                                }
  100% { transform: translateX(-600px); opacity: 0;                 }
}

@keyframes heroEnter {
  0%   { opacity: 0; transform: translateY(40px) scale(.95); filter: blur(8px); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.01); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

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

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

@keyframes popIn {
  0%   { transform: scale(.45) rotate(-4deg); opacity: 0; }
  70%  { transform: scale(1.06) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.1); opacity: 1; }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes sparkle {
  0%, 100% { opacity: .5; transform: scale(1) rotate(0deg); }
  50%       { opacity: 1;  transform: scale(1.4) rotate(20deg); }
}

@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.06); }
}

@keyframes logoSpin {
  to { transform: rotate(360deg); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1);    }
  15%       { transform: scale(1.35); }
  30%       { transform: scale(1);    }
  45%       { transform: scale(1.2);  }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

@keyframes progressPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .7; transform: scale(.85); }
}

/* Character signature motions */
@keyframes naraLift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-1.2deg); }
}

@keyframes yominKokoSwing {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(1.6deg); }
  75% { transform: translateY(-7px) rotate(-1.6deg); }
}

@keyframes rereFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.03); }
}

@keyframes sisiCalm {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(.9deg); }
}

@keyframes boboBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-11px) scale(1.03); }
  60% { transform: translateY(-5px) scale(1.01); }
}

@keyframes kikiWiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-9px) rotate(1.4deg); }
  60% { transform: translateY(-6px) rotate(-1.4deg); }
}

/* ── UTILITY ANIMATION CLASSES ── */

.anim-float {
  animation: floatY 3.2s var(--ease-smooth) infinite;
}
.anim-float-slow {
  animation: floatYSlow 5s var(--ease-smooth) infinite;
}
.anim-sparkle {
  animation: sparkle 3.5s ease-in-out infinite;
}
.anim-bounce {
  animation: bounceIn var(--dur-slow) var(--ease-spring) both;
}
.anim-pulse {
  animation: pulse 2s ease-in-out infinite;
}
.anim-pop {
  animation: popIn var(--dur-slow) var(--ease-bounce) both;
}

/* ── SCROLL REVEAL ── */

.reveal {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(8px);
  transition:
    opacity  var(--dur-crawl) var(--ease-bounce),
    transform var(--dur-crawl) var(--ease-bounce),
    filter   var(--dur-crawl) ease;
}
.reveal.on {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: all var(--dur-crawl) var(--ease-bounce);
}
.reveal-left.on {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(80px);
  transition: all var(--dur-crawl) var(--ease-bounce);
}
.reveal-right.on {
  opacity: 1;
  transform: translateX(0);
}

.reveal-zoom {
  opacity: 0;
  transform: scale(.85);
  filter: blur(6px);
  transition: all var(--dur-crawl) var(--ease-bounce);
}
.reveal-zoom.on {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Stagger delay helpers */
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.delay-3 { transition-delay: .36s; }
.delay-4 { transition-delay: .48s; }
.delay-5 { transition-delay: .60s; }

@media (max-width: 680px) {
  .reveal {
    transform: translateY(32px);
    filter: blur(4px);
    transition-duration: 820ms;
  }

  .reveal-left {
    transform: translateX(-36px);
    transition-duration: 820ms;
  }

  .reveal-right {
    transform: translateX(36px);
    transition-duration: 820ms;
  }

  .reveal-zoom {
    transform: scale(.93);
    filter: blur(3px);
    transition-duration: 820ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-svg,
  .cta-adventure .cta-icon,
  .ft-heart,
  .ft-logo-glow,
  .ft-brand-name,
  .anim-float,
  .anim-float-slow,
  .anim-sparkle,
  .anim-bounce,
  .anim-pulse,
  .anim-pop {
    animation: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-zoom {
    transition-duration: 0ms !important;
    transform: none !important;
    filter: none !important;
  }
}