/* ==========================================================================
   Shires Tools — Animations
   All GPU-friendly (transform/opacity), 60fps target
   ========================================================================== */

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

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ripple-effect {
  to { transform: scale(3); opacity: 0; }
}

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

@keyframes blink-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(var(--color-primary-rgb), 0); }
}

@keyframes bounce-in {
  0% { opacity: 0; transform: scale(0.7); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes progress-fill {
  from { transform: scaleX(0); }
}

@keyframes count-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

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

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes star-pop {
  0% { opacity: 0; transform: scale(0) rotate(-20deg); }
  60% { opacity: 1; transform: scale(1.2) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes medal-drop {
  0% { opacity: 0; transform: translateY(-30px) rotate(-8deg); }
  70% { opacity: 1; transform: translateY(4px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* ==========================================================================
   Utility classes
   ========================================================================== */

.animate-fade-up { animation: fade-up var(--transition-slow) both; }
.animate-fade-in { animation: fade-in var(--transition-slow) both; }
.animate-scale-in { animation: scale-in var(--transition-base) both; }

/* Scroll reveal — toggled via IntersectionObserver in app.js */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-group] > * { transition-delay: calc(var(--reveal-index, 0) * 70ms); }

.caret-blink { animation: blink-caret 1s step-end infinite; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .caret-blink { animation: none; }
}