/**
 * Animations & Micro-interactions — v3.2
 *
 * Mudanças v2.x → v3.2:
 *   - --focofy-primary (legado) → var(--focus-ring-color) no focus-visible
 *   - Expandido: fade, slide, scale, stagger, scroll-reveal, reduced-motion
 *
 * @package FocofyFactory
 * @version 3.3
 * v3.2 → v3.3: px em @keyframes → var(--space-*)
 */

/* ══════════════════════════════════════════════════════════════════════════
   SMOOTH SCROLL
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FOCUS GLOBAL
   v3.2: --focofy-primary → var(--focus-ring-color)
   ══════════════════════════════════════════════════════════════════════════ */

*:focus-visible {
  outline:        var(--focus-ring-size) solid var(--focus-ring-color);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(var(--space-4)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(var(--space-6)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(calc(var(--space-4) * -1)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(calc(var(--space-6) * -1)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(var(--space-6)); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(0.85); }
  70%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

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

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

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

/* ══════════════════════════════════════════════════════════════════════════
   CLASSES UTILITÁRIAS
   ══════════════════════════════════════════════════════════════════════════ */

.animate-fade-in       { animation: fadeIn          var(--transition-slow) ease-out both; }
.animate-fade-in-up    { animation: fadeInUp        var(--transition-slow) ease-out both; }
.animate-fade-in-down  { animation: fadeInDown      var(--transition-slow) ease-out both; }
.animate-fade-in-left  { animation: fadeInLeft      var(--transition-slow) ease-out both; }
.animate-fade-in-right { animation: fadeInRight     var(--transition-slow) ease-out both; }
.animate-scale-in      { animation: scaleIn         var(--transition-slow) ease-out both; }
.animate-scale-bounce  { animation: scaleInBounce   var(--transition-slow) ease-out both; }
.animate-spin          { animation: spin            1s linear infinite; }
.animate-pulse         { animation: pulse           2s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════════════════
   DELAYS DE STAGGER — para listas e grids animados
   Uso: <div class="animate-fade-in delay-1"> ... </div>
   ══════════════════════════════════════════════════════════════════════════ */

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL — ativado via JS (IntersectionObserver)
   Estado inicial: invisível. JS adiciona .is-visible quando entra na tela.
   ══════════════════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(var(--space-5));
  transition:
    opacity   var(--transition-slow) ease,
    transform var(--transition-slow) ease;
}

.reveal.is-visible {
  opacity:   1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(calc(var(--space-5) * -1));
  transition:
    opacity   var(--transition-slow) ease,
    transform var(--transition-slow) ease;
}

.reveal-left.is-visible {
  opacity:   1;
  transform: translateX(0);
}

.reveal-scale {
  opacity:   0;
  transform: scale(0.95);
  transition:
    opacity   var(--transition-slow) ease,
    transform var(--transition-slow) ease;
}

.reveal-scale.is-visible {
  opacity:   1;
  transform: scale(1);
}

/* ══════════════════════════════════════════════════════════════════════════
   SKELETON LOADING — placeholder animado
   ══════════════════════════════════════════════════════════════════════════ */

.skeleton {
  background:
    linear-gradient(
      90deg,
      var(--color-surface-2)    25%,
      var(--color-surface-3)    50%,
      var(--color-surface-2)    75%
    );
  background-size: 200% 100%;
  animation:       shimmer 1.5s infinite;
  border-radius:   var(--radius-sm);
  color:           transparent;
  pointer-events:  none;
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — respeita preferência do usuário (A11y)
   ══════════════════════════════════════════════════════════════════════════ */

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

  .reveal,
  .reveal-left,
  .reveal-scale {
    opacity:   1;
    transform: none;
    transition: none;
  }
}