/* ==========================================================================
   animations.css — Keyframes, transições e classes IntersectionObserver
   CASB Segurança Patrimonial
   Propósito: Centraliza todas as animações CSS — keyframes globais,
   classes de estado para IntersectionObserver e micro-animações.
   ========================================================================== */

/* =====================================================================
   KEYFRAMES GLOBAIS
   ===================================================================== */

/* Grid em movimento (hero background) */
@keyframes gridMove {
  0%   { background-position: 0 0; }
  100% { background-position: 64px 64px; }
}

/* Pulso do badge hero */
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.35); }
  50%       { box-shadow: 0 0 0 10px rgba(245, 166, 35, 0); }
}

/* Pulso do botão WhatsApp */
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
  50%       { box-shadow: 0 4px 48px rgba(37, 211, 102, 0.75); }
}

/* Rotação das espirais da concertina */
@keyframes spiralRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Aparecer com scale (sucesso de formulário) */
@keyframes fadeScaleIn {
  0%   { opacity: 0; transform: scale(0.88); }
  100% { opacity: 1; transform: scale(1); }
}

/* Fade simples */
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Slide para cima */
@keyframes slideUp {
  0%   { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Slide para baixo */
@keyframes slideDown {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Slide da esquerda */
@keyframes slideInLeft {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Slide da direita */
@keyframes slideInRight {
  0%   { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Scale com bounce */
@keyframes scaleIn {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* Float suave (elementos decorativos) */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Shimmer loading */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Giro contínuo (ícone de loading) */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Linha de progresso */
@keyframes lineGrow {
  0%   { width: 0; }
  100% { width: 100%; }
}

/* =====================================================================
   CLASSES PARA INTERSECTION OBSERVER
   Estado inicial: elementos invisíveis aguardando viewport trigger
   ===================================================================== */

/* Fade + slide para cima (padrão) */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
  will-change: opacity, transform;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade simples */
.anim-fade {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.anim-fade.visible {
  opacity: 1;
}

/* Slide da esquerda */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.anim-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide da direita */
.anim-slide-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.anim-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in */
.anim-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Delays escalonados para grids */
.anim-delay-1 { transition-delay: 0.05s !important; }
.anim-delay-2 { transition-delay: 0.10s !important; }
.anim-delay-3 { transition-delay: 0.15s !important; }
.anim-delay-4 { transition-delay: 0.20s !important; }
.anim-delay-5 { transition-delay: 0.25s !important; }
.anim-delay-6 { transition-delay: 0.30s !important; }
.anim-delay-7 { transition-delay: 0.35s !important; }
.anim-delay-8 { transition-delay: 0.40s !important; }

/* =====================================================================
   MICRO-ANIMAÇÕES DE INTERFACE
   ===================================================================== */

/* Botão com loading */
.btn.loading {
  pointer-events: none;
  position: relative;
  color: transparent;
}

.btn.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--color-bg);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Hover glow em elementos de destaque */
.hover-glow {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-accent-strong);
  transform: translateY(-3px);
}

/* Float animation para elementos decorativos */
.float-anim {
  animation: floatY 4s ease-in-out infinite;
}

/* Blink suave para indicadores de urgência */
.blink-soft {
  animation: urgencyPulse 2s ease-in-out infinite;
}

/* Shimmer placeholder */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-surface2) 50%,
    var(--color-surface) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.8s linear infinite;
}

/* =====================================================================
   ANIMAÇÕES DO HEADER
   ===================================================================== */
.header {
  animation: slideDown 0.5s ease forwards;
}

/* =====================================================================
   COUNTER — número animado
   ===================================================================== */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   REVEAL LINHA DECORATIVA
   ===================================================================== */
.line-reveal {
  position: relative;
  overflow: hidden;
}

.line-reveal::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width 1s ease;
}

.line-reveal.visible::after {
  width: 100%;
}

/* =====================================================================
   REDUÇÃO DE MOVIMENTO (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;
  }

  .animate-on-scroll,
  .anim-fade,
  .anim-slide-left,
  .anim-slide-right,
  .anim-scale {
    opacity: 1;
    transform: none;
  }
}