/**
 * assets/css/animations.css — V2.3
 * Sistema único de animações do Aventura do Saber.
 *
 * Princípios:
 *   - Apenas movimentos naturais: respirar, flutuar, pulsar suave
 *   - Sem tremor, vibração ou rotação brusca
 *   - prefers-reduced-motion sempre respeitado
 *   - Nomes prefixados com `ads-` para evitar conflitos
 *
 * Uso:
 *   <link rel="stylesheet" href="<?= asset('css/animations.css') ?>">
 *   Adicionar classe à animação desejada. Ex: class="ads-float"
 */

/* ── Tokens de duração ───────────────────────────────────────────── */
:root {
  --ads-dur-fast:   0.25s;
  --ads-dur-base:   0.45s;
  --ads-dur-slow:   0.8s;
  --ads-dur-breath: 4.0s;
  --ads-dur-float:  5.0s;
  --ads-dur-pulse:  3.0s;
  --ads-dur-bar:    2.5s;
  --ads-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ads-ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ads-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════════════
   KEYFRAMES — apenas movimentos naturais
   ═══════════════════════════════════════════════════════════════════ */

/* Entrada suave de baixo para cima */
@keyframes ads-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrada com escala suave */
@keyframes ads-pop-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* Entrada com mola natural */
@keyframes ads-spring-in {
  from { opacity: 0; transform: scale(0.82) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Saída suave */
@keyframes ads-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Flutuação suave — Theo e mascotes */
@keyframes ads-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Respiração suave — leve escala */
@keyframes ads-breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%       { transform: scale(1.06); opacity: 1; }
}

/* Pulso de brilho — sem vibração, apenas opacidade */
@keyframes ads-glow {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* Balanço suave — plantas, árvore */
@keyframes ads-sway {
  0%, 100% { transform: rotate(-0.6deg); }
  50%       { transform: rotate(0.6deg); }
}

/* Barra de progresso — movimento contínuo e suave */
@keyframes ads-bar-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Partícula subindo */
@keyframes ads-particle-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  8%   { opacity: 0.9; }
  85%  { opacity: 0.1; }
  100% { opacity: 0; transform: translateY(-88vh) scale(0.2); }
}

/* Folha caindo — rotação suave */
@keyframes ads-leaf-fall {
  0%   { opacity: 0; transform: translateY(-10px) rotate(0deg); }
  8%   { opacity: 0.85; }
  90%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(100vh) rotate(480deg); }
}

/* Confete caindo */
@keyframes ads-confetti-fall {
  0%   { opacity: 0; transform: translateY(-10px) rotate(0deg); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translateY(106vh) rotate(540deg); }
}

/* Shimmer suave — barra XP e loading */
@keyframes ads-shimmer {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(210%); }
}

/* Slide-in de baixo (toasts, alerts) */
@keyframes ads-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide-out para baixo */
@keyframes ads-slide-down {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}

/* Celebração suave — sem bounce brusco */
@keyframes ads-celebrate {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* Piscar suave — Theo pensando */
@keyframes ads-blink {
  0%, 90%, 100% { opacity: 1; }
  95%            { opacity: 0.4; }
}

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

.ads-fade-in-up {
  animation: ads-fade-in-up var(--ads-dur-base) var(--ads-ease-out) both;
}

.ads-pop-in {
  animation: ads-pop-in var(--ads-dur-base) var(--ads-ease-spring) both;
}

.ads-spring-in {
  animation: ads-spring-in var(--ads-dur-slow) var(--ads-ease-spring) both;
}

.ads-float {
  animation: ads-float var(--ads-dur-float) ease-in-out infinite;
  will-change: transform;
}

.ads-breathe {
  animation: ads-breathe var(--ads-dur-breath) ease-in-out infinite;
  will-change: transform, opacity;
}

.ads-glow {
  animation: ads-glow var(--ads-dur-pulse) ease-in-out infinite;
  will-change: opacity;
}

.ads-sway {
  animation: ads-sway 4s ease-in-out infinite;
  will-change: transform;
}

.ads-celebrate {
  animation: ads-celebrate 0.6s var(--ads-ease) both;
}

.ads-blink {
  animation: ads-blink 3.5s ease-in-out infinite;
}

/* Barra de progresso com fluxo contínuo */
.ads-bar {
  background: linear-gradient(90deg, #4ade80, #a78bfa, #fbbf24, #4ade80);
  background-size: 200% 100%;
  animation: ads-bar-flow var(--ads-dur-bar) linear infinite;
  transition: width 0.8s var(--ads-ease);
}

/* Delay helpers */
.ads-delay-1 { animation-delay: 0.1s; }
.ads-delay-2 { animation-delay: 0.2s; }
.ads-delay-3 { animation-delay: 0.3s; }
.ads-delay-4 { animation-delay: 0.4s; }
.ads-delay-5 { animation-delay: 0.5s; }

/* ═══════════════════════════════════════════════════════════════════
   CORREÇÕES — animações problemáticas substituídas
   ═══════════════════════════════════════════════════════════════════

   fireWiggle (tremor do ícone de sequência) → ads-sway suave
   theoBounce (bounce brusco do Theo) → ads-float suave
   magicBar (translateX brusco) → ads-shimmer suave
   celebrationPulse → ads-celebrate suave
   magicFloat (rotate 360) → ads-breathe + glow
   ═══════════════════════════════════════════════════════════════════ */

/* Override fireWiggle — remove tremor, substitui por balanço suave */
@keyframes fireWiggle {
  0%, 100% { transform: rotate(-2deg); }
  50%       { transform: rotate(2deg); }
}

/* Override theoBounce — sem rotação, apenas flutuação */
@keyframes theoBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* Override magicBar — suave, sem translateX brusco */
@keyframes magicBar {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Override celebrationPulse — escala mínima */
@keyframes celebrationPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Override magicFloat — sem rotação */
@keyframes magicFloat {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION — acessibilidade
   ═══════════════════════════════════════════════════════════════════ */
@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;
  }

  .ads-float,
  .ads-breathe,
  .ads-glow,
  .ads-sway,
  .ads-blink {
    animation: none !important;
  }
}