/* =========================================================
   CENTRO DE ANIMAÇÕES GLOBAIS (PADRÃO OURO)
========================================================= */

/* 1. VARIÁVEIS DE CONFIGURAÇÃO (O Cérebro) */
:root {
  --mq-anim-duration: 1s; /* Duração padrão */
  --mq-anim-easing: cubic-bezier(0.19, 1, 0.22, 1); /* Curva premium super suave */
  --mq-anim-distance: 50px; /* Distância padrão dos movimentos */
}

/* 2. O MOTOR (Aplica a transição a qualquer classe anim-) */
[class*="anim-"] {
  transition: opacity var(--mq-anim-duration) var(--mq-anim-easing),
              transform var(--mq-anim-duration) var(--mq-anim-easing),
              filter var(--mq-anim-duration) var(--mq-anim-easing),
              clip-path var(--mq-anim-duration) var(--mq-anim-easing);
  will-change: opacity, transform, filter; /* Otimização de hardware (GPU) */
}

/* =========================================
   3. BIBLIOTECA DE EFEITOS (ESTADO INICIAL)
========================================== */

/* FADES & DESLIZAMENTOS (Os Clássicos) */
.anim-fade       { opacity: 0; }
.anim-fade-up    { opacity: 0; transform: translateY(var(--mq-anim-distance)); }
.anim-fade-down  { opacity: 0; transform: translateY(calc(var(--mq-anim-distance) * -1)); }
.anim-fade-left  { opacity: 0; transform: translateX(var(--mq-anim-distance)); }
.anim-fade-right { opacity: 0; transform: translateX(calc(var(--mq-anim-distance) * -1)); }

/* ZOOMS (Para imagens e cartões) */
.anim-zoom-in  { opacity: 0; transform: scale(0.92); }
.anim-zoom-out { opacity: 0; transform: scale(1.08); }
.anim-zoom-up  { opacity: 0; transform: scale(0.95) translateY(30px); }

/* BLURS (Padrão Apple - Desfoque que fica nítido) */
.anim-blur-in { opacity: 0; filter: blur(12px); }
.anim-blur-up { opacity: 0; filter: blur(12px); transform: translateY(30px); }
.anim-blur-down { opacity: 0; filter: blur(12px); transform: translateY(-30px); }
.anim-blur-left { opacity: 0; filter: blur(12px); transform: translateX(30px); }
.anim-blur-right { opacity: 0; filter: blur(12px); transform: translateX(-30px); }

/* BLURS COM ESCALA (Padrão Apple Hero Reveal) */
.anim-blur-scale { opacity: 0; filter: blur(20px); transform: scale(1.05); }
.anim-blur-scale-up { opacity: 0; filter: blur(20px); transform: scale(1.05) translateY(40px); }
.anim-blur-scale-down { opacity: 0; filter: blur(20px); transform: scale(1.05) translateY(-40px); }

/* 3D FLIPS (Para destacar selos, números ou ícones) */
.anim-flip-up   { opacity: 0; transform: perspective(1000px) rotateX(-20deg) translateY(20px); transform-origin: bottom; }
.anim-flip-down { opacity: 0; transform: perspective(1000px) rotateX(20deg) translateY(-20px); transform-origin: top; }

/* REVEALS EDITORIAIS (Efeito de máscara chique para imagens grandes) */
.anim-reveal-up { 
  opacity: 0; 
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); 
  transform: translateY(20px); 
}
.anim-reveal-down { 
  opacity: 0; 
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); 
  transform: translateY(-20px); 
}
.anim-reveal-left { 
  opacity: 0; 
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); 
  transform: translateX(20px); 
}
.anim-reveal-right { 
  opacity: 0; 
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); 
  transform: translateX(-20px); 
}

/* REVEALS EDITORIAIS (Padrão Cortina Inset) */
.anim-reveal-center { opacity: 0; clip-path: inset(50% 50% 50% 50%); transform: scale(1.05); }
.anim-reveal-horizontal { opacity: 0; clip-path: inset(0 50% 0 50%); }
.anim-reveal-vertical { opacity: 0; clip-path: inset(50% 0 50% 0); }

/* =========================================
   ANIMAÇÕES DE TEXTO (LETRA A LETRA)
========================================== */
[class*="anim-text-"] {
  --mq-stagger: 0.03s;
}

[class*="anim-text-"] .mq-char {
  opacity: 0;
  will-change: opacity, transform, filter, clip-path;
  /*
   * --mq-char-duration e --mq-stagger: calculados pelo JS dinamicamente.
   * --mq-base-delay: herdado do pai via CSS cascade (setado por anim-delay-N).
   * O delay total de cada letra = base_delay + (char_idx * stagger)
   */
  transition: opacity var(--mq-char-duration, var(--mq-anim-duration)) calc(var(--mq-base-delay, 0s) + var(--char-idx) * var(--mq-stagger)) var(--mq-anim-easing),
              transform var(--mq-char-duration, var(--mq-anim-duration)) calc(var(--mq-base-delay, 0s) + var(--char-idx) * var(--mq-stagger)) var(--mq-anim-easing),
              filter var(--mq-char-duration, var(--mq-anim-duration)) calc(var(--mq-base-delay, 0s) + var(--char-idx) * var(--mq-stagger)) var(--mq-anim-easing),
              clip-path var(--mq-char-duration, var(--mq-anim-duration)) calc(var(--mq-base-delay, 0s) + var(--char-idx) * var(--mq-stagger)) var(--mq-anim-easing);
}

/* Estados Iniciais (Letras) */
.anim-text-fade .mq-char { opacity: 0; }
.anim-text-blur .mq-char { opacity: 0; filter: blur(12px); }
.anim-text-up .mq-char { opacity: 0; transform: translateY(20px); }
.anim-text-down .mq-char { opacity: 0; transform: translateY(-20px); }
.anim-text-clip-up .mq-char { opacity: 0; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateY(100%); }
.anim-text-flip-up .mq-char { opacity: 0; transform: perspective(1000px) rotateX(-90deg); transform-origin: bottom; }
.anim-text-flip-down .mq-char { opacity: 0; transform: perspective(1000px) rotateX(90deg); transform-origin: top; }
.anim-text-tracking .mq-char { opacity: 0; filter: blur(10px); transform: translateX(30px); }

/* =========================================
   4. ESTADO FINAL (QUANDO O JS ATIVA)
========================================== */
.anim-fade.is-visible,
.anim-fade-up.is-visible,
.anim-fade-down.is-visible,
.anim-fade-left.is-visible,
.anim-fade-right.is-visible,
.anim-zoom-in.is-visible,
.anim-zoom-out.is-visible,
.anim-zoom-up.is-visible,
.anim-flip-up.is-visible,
.anim-flip-down.is-visible {
  opacity: 1;
  transform: translate(0) scale(1) rotateX(0);
}

.anim-blur-in.is-visible,
.anim-blur-up.is-visible,
.anim-blur-down.is-visible,
.anim-blur-left.is-visible,
.anim-blur-right.is-visible,
.anim-blur-scale.is-visible,
.anim-blur-scale-up.is-visible,
.anim-blur-scale-down.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
  filter: blur(0);
}

.anim-reveal-up.is-visible,
.anim-reveal-down.is-visible,
.anim-reveal-left.is-visible,
.anim-reveal-right.is-visible {
  opacity: 1;
  transform: translate(0);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.anim-reveal-center.is-visible,
.anim-reveal-horizontal.is-visible,
.anim-reveal-vertical.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
  clip-path: inset(0 0 0 0);
}

/* Estado Final - Letra a Letra */
[class*="anim-text-"].is-visible .mq-char {
  opacity: 1;
  transform: translate(0);
  filter: blur(0);
}
.anim-text-clip-up.is-visible .mq-char { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.anim-text-flip-up.is-visible .mq-char,
.anim-text-flip-down.is-visible .mq-char { transform: perspective(1000px) rotateX(0); }

/* =========================================
   5. MODIFICADORES (Controle de Tempo)
========================================== */
/* Velocidades — setam transition-duration E --mq-anim-duration (para propagar aos .mq-char filhos) */
.anim-fast { transition-duration: 0.6s !important; --mq-anim-duration: 0.6s; }
.anim-epic { transition-duration: 2.2s !important; --mq-anim-duration: 2.2s; }

.anim-slow-10 { transition-duration: 1.0s !important; --mq-anim-duration: 1.0s; }
.anim-slow-15 { transition-duration: 1.5s !important; --mq-anim-duration: 1.5s; }
.anim-slow-20 { transition-duration: 2.0s !important; --mq-anim-duration: 2.0s; }
.anim-slow-25 { transition-duration: 2.5s !important; --mq-anim-duration: 2.5s; }
.anim-slow-30 { transition-duration: 3.0s !important; --mq-anim-duration: 3.0s; }
.anim-slow-35 { transition-duration: 3.5s !important; --mq-anim-duration: 3.5s; }
.anim-slow-40 { transition-duration: 4.0s !important; --mq-anim-duration: 4.0s; }
.anim-slow-45 { transition-duration: 4.5s !important; --mq-anim-duration: 4.5s; }
.anim-slow-50 { transition-duration: 5.0s !important; --mq-anim-duration: 5.0s; }

/* Stagger de texto: calculado dinamicamente pelo JS para que a animação caiba exatamente
   na duração total. Estes valores são apenas fallback caso o JS não rode. */
.anim-fast[class*="anim-text-"] { --mq-stagger: 0.02s; }
.anim-epic[class*="anim-text-"] { --mq-stagger: 0.05s; }
.anim-slow-10[class*="anim-text-"] { --mq-stagger: 0.02s; }
.anim-slow-15[class*="anim-text-"] { --mq-stagger: 0.03s; }
.anim-slow-20[class*="anim-text-"] { --mq-stagger: 0.04s; }
.anim-slow-25[class*="anim-text-"] { --mq-stagger: 0.05s; }
.anim-slow-30[class*="anim-text-"] { --mq-stagger: 0.06s; }
.anim-slow-35[class*="anim-text-"] { --mq-stagger: 0.07s; }
.anim-slow-40[class*="anim-text-"] { --mq-stagger: 0.08s; }
.anim-slow-45[class*="anim-text-"] { --mq-stagger: 0.09s; }
.anim-slow-50[class*="anim-text-"] { --mq-stagger: 0.10s; }

/* Atrasos (Para o efeito cascata e delay de texto)
 * transition-delay: afeta animações normais (fade, blur, etc.)
 * --mq-base-delay: cascateia para .mq-char filhos, somando ao stagger deles
 */
.anim-delay-1  { transition-delay: 0.1s !important;  --mq-base-delay: 0.1s;  }
.anim-delay-2  { transition-delay: 0.2s !important;  --mq-base-delay: 0.2s;  }
.anim-delay-3  { transition-delay: 0.3s !important;  --mq-base-delay: 0.3s;  }
.anim-delay-4  { transition-delay: 0.4s !important;  --mq-base-delay: 0.4s;  }
.anim-delay-5  { transition-delay: 0.5s !important;  --mq-base-delay: 0.5s;  }
.anim-delay-6  { transition-delay: 0.6s !important;  --mq-base-delay: 0.6s;  }
.anim-delay-7  { transition-delay: 0.7s !important;  --mq-base-delay: 0.7s;  }
.anim-delay-8  { transition-delay: 0.8s !important;  --mq-base-delay: 0.8s;  }
.anim-delay-9  { transition-delay: 0.9s !important;  --mq-base-delay: 0.9s;  }
.anim-delay-10 { transition-delay: 1.0s !important;  --mq-base-delay: 1.0s;  }
.anim-delay-11 { transition-delay: 1.1s !important;  --mq-base-delay: 1.1s;  }
.anim-delay-12 { transition-delay: 1.2s !important;  --mq-base-delay: 1.2s;  }
.anim-delay-13 { transition-delay: 1.3s !important;  --mq-base-delay: 1.3s;  }
.anim-delay-14 { transition-delay: 1.4s !important;  --mq-base-delay: 1.4s;  }
.anim-delay-15 { transition-delay: 1.5s !important;  --mq-base-delay: 1.5s;  }
.anim-delay-16 { transition-delay: 1.6s !important;  --mq-base-delay: 1.6s;  }
.anim-delay-17 { transition-delay: 1.7s !important;  --mq-base-delay: 1.7s;  }
.anim-delay-18 { transition-delay: 1.8s !important;  --mq-base-delay: 1.8s;  }
.anim-delay-19 { transition-delay: 1.9s !important;  --mq-base-delay: 1.9s;  }
.anim-delay-20 { transition-delay: 2.0s !important;  --mq-base-delay: 2.0s;  }
.anim-delay-21 { transition-delay: 2.1s !important;  --mq-base-delay: 2.1s;  }
.anim-delay-22 { transition-delay: 2.2s !important;  --mq-base-delay: 2.2s;  }
.anim-delay-23 { transition-delay: 2.3s !important;  --mq-base-delay: 2.3s;  }
.anim-delay-24 { transition-delay: 2.4s !important;  --mq-base-delay: 2.4s;  }
.anim-delay-25 { transition-delay: 2.5s !important;  --mq-base-delay: 2.5s;  }
.anim-delay-26 { transition-delay: 2.6s !important;  --mq-base-delay: 2.6s;  }
.anim-delay-27 { transition-delay: 2.7s !important;  --mq-base-delay: 2.7s;  }
.anim-delay-28 { transition-delay: 2.8s !important;  --mq-base-delay: 2.8s;  }
.anim-delay-29 { transition-delay: 2.9s !important;  --mq-base-delay: 2.9s;  }
.anim-delay-30 { transition-delay: 3.0s !important;  --mq-base-delay: 3.0s;  }
.anim-delay-31 { transition-delay: 3.1s !important;  --mq-base-delay: 3.1s;  }
.anim-delay-32 { transition-delay: 3.2s !important;  --mq-base-delay: 3.2s;  }
.anim-delay-33 { transition-delay: 3.3s !important;  --mq-base-delay: 3.3s;  }
.anim-delay-34 { transition-delay: 3.4s !important;  --mq-base-delay: 3.4s;  }
.anim-delay-35 { transition-delay: 3.5s !important;  --mq-base-delay: 3.5s;  }
.anim-delay-36 { transition-delay: 3.6s !important;  --mq-base-delay: 3.6s;  }
.anim-delay-37 { transition-delay: 3.7s !important;  --mq-base-delay: 3.7s;  }
.anim-delay-38 { transition-delay: 3.8s !important;  --mq-base-delay: 3.8s;  }
.anim-delay-39 { transition-delay: 3.9s !important;  --mq-base-delay: 3.9s;  }
.anim-delay-40 { transition-delay: 4.0s !important;  --mq-base-delay: 4.0s;  }
.anim-delay-41 { transition-delay: 4.1s !important;  --mq-base-delay: 4.1s;  }
.anim-delay-42 { transition-delay: 4.2s !important;  --mq-base-delay: 4.2s;  }
.anim-delay-43 { transition-delay: 4.3s !important;  --mq-base-delay: 4.3s;  }
.anim-delay-44 { transition-delay: 4.4s !important;  --mq-base-delay: 4.4s;  }
.anim-delay-45 { transition-delay: 4.5s !important;  --mq-base-delay: 4.5s;  }
.anim-delay-46 { transition-delay: 4.6s !important;  --mq-base-delay: 4.6s;  }
.anim-delay-47 { transition-delay: 4.7s !important;  --mq-base-delay: 4.7s;  }
.anim-delay-48 { transition-delay: 4.8s !important;  --mq-base-delay: 4.8s;  }
.anim-delay-49 { transition-delay: 4.9s !important;  --mq-base-delay: 4.9s;  }
.anim-delay-50 { transition-delay: 5.0s !important;  --mq-base-delay: 5.0s;  }