/* =========================================================================
   ANIMAÇÕES — Keyframes + utilitários + scroll reveal.
   Todas respeitam prefers-reduced-motion (definido em design-system.css).
   ========================================================================= */

/* ---------- Keyframes ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(79,195,247,0.30); }
  50%      { box-shadow: 0 0 28px rgba(79,195,247,0.60), 0 0 8px rgba(79,195,247,0.40); }
}

@keyframes rotateGlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

@keyframes countUp {
  from { opacity: 0.5; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* ---------- Classes utilitárias ---------- */
.animate-fade-in       { animation: fadeIn      var(--duration-slow) var(--ease-out) both; }
.animate-fade-in-up    { animation: fadeInUp    var(--duration-slow) var(--ease-out) both; }
.animate-fade-in-down  { animation: fadeInDown  var(--duration-slow) var(--ease-out) both; }
.animate-fade-in-left  { animation: fadeInLeft  var(--duration-slow) var(--ease-out) both; }
.animate-fade-in-right { animation: fadeInRight var(--duration-slow) var(--ease-out) both; }
.animate-scale-in      { animation: scaleIn     var(--duration-slow) var(--ease-out) both; }
.animate-float         { animation: float       6s ease-in-out infinite; }
.animate-glow          { animation: pulseGlow   3s ease-in-out infinite; }
.animate-blink         { animation: blink       1.5s ease-in-out infinite; }

/* Delays para stagger */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* ---------- Scroll reveal (acionado por IntersectionObserver em JS) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.from-left  { transform: translateX(-28px); }
.reveal.from-right { transform: translateX(28px); }
.reveal.from-left.is-visible,
.reveal.from-right.is-visible { transform: translateX(0); }

/* Stagger automático dentro de .reveal-stagger */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }
.reveal-stagger.is-visible > *:nth-child(n+9) { transition-delay: 640ms; }

/* ---------- Skeleton loader ---------- */
.skeleton {
  background: linear-gradient(90deg,
              rgba(255,255,255,0.04) 0%,
              rgba(255,255,255,0.10) 50%,
              rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }
.skeleton-card { height: 200px; border-radius: var(--radius-lg); }

/* ---------- Hover utilities ---------- */
.hover-lift  { transition: transform var(--duration-base) var(--ease-out); }
.hover-lift:hover { transform: translateY(-4px); }

.hover-scale { transition: transform var(--duration-base) var(--ease-out); }
.hover-scale:hover { transform: scale(1.04); }

.hover-glow { transition: box-shadow var(--duration-base) var(--ease-out); }
.hover-glow:hover { box-shadow: var(--shadow-glow); }

/* ---------- Page load fade-in global ---------- */
.page-enter {
  animation: fadeIn 500ms var(--ease-out) both;
}