/* ============================================
   yaricata.com - Animation Definitions
   ============================================ */

/* --- Scroll Animation Base States --- */
[data-animate] {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-down"] {
  transform: translateY(-40px);
}

[data-animate="fade-left"] {
  transform: translateX(40px);
}

[data-animate="fade-right"] {
  transform: translateX(-40px);
}

[data-animate="scale-in"] {
  transform: scale(0.9);
}

[data-animate="fade-in"] {
  transform: none;
}

/* --- Active (Visible) States --- */
[data-animate].is-active {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* --- Stagger Delays --- */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }

/* --- Mascot Floating --- */
@keyframes floating-y {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* --- Panda Bounce (idle) --- */
@keyframes panda-bounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  15% {
    transform: translateY(-18px) rotate(-2deg);
  }
  30% {
    transform: translateY(-4px) rotate(0deg);
  }
  45% {
    transform: translateY(-12px) rotate(2deg);
  }
  60% {
    transform: translateY(0) rotate(0deg);
  }
}

/* --- Panda Excited (hover) --- */
@keyframes panda-excited {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-20px) rotate(-8deg) scale(1.08);
  }
  50% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  75% {
    transform: translateY(-20px) rotate(8deg) scale(1.08);
  }
}

/* --- Panda Spin (click) --- */
@keyframes panda-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  30% {
    transform: rotate(-15deg) scale(1.15);
  }
  60% {
    transform: rotate(360deg) scale(0.9);
  }
  80% {
    transform: rotate(350deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* --- Hero Text Reveal --- */
.hero__catch-text {
  animation: reveal-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__catch-line:nth-child(2) .hero__catch-text {
  animation-delay: 0.15s;
}

.hero__catch-line:nth-child(3) .hero__catch-text {
  animation-delay: 0.3s;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Hero Sub / Actions Fade In --- */
.hero__sub {
  animation: fade-in-up 0.8s ease 0.5s both;
}

.hero__actions {
  animation: fade-in-up 0.8s ease 0.65s both;
}

.hero__visual {
  animation: fade-in-up 0.8s ease 0.4s both;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Hero Box Pop-in --- */
.hero__box {
  animation: box-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  --box-rotate: 1.5deg;
}

.hero__catch-line:nth-child(1) .hero__box { --box-rotate: 1.5deg; animation-delay: 0.05s; }
.hero__catch-line:nth-child(2) .hero__box { --box-rotate: -1.5deg; animation-delay: 0.2s; }
.hero__catch-line:nth-child(3) .hero__box { --box-rotate: 2deg; animation-delay: 0.4s; }

@keyframes box-pop {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.05) rotate(var(--box-rotate, 0deg));
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(var(--box-rotate, 0deg));
  }
}


/* --- Progress Bar Fill --- */
.progress-bar__fill.is-active {
  width: var(--progress, 0%);
}

/* --- Counter Number Animation (handled by JS) --- */
.counter__value {
  transition: opacity 0.3s ease;
}

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

  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__mascot {
    animation: none;
  }

  .scroll-indicator {
    animation: none;
  }
}