/* ══════════════════════════════════════════════
   ANIMATIONS.CSS — Compra Turbo
   Scroll reveals, parallax, micro-interactions
   Dependencias: tokens.css
   Nota: prefers-reduced-motion tratado em reset.css
   ══════════════════════════════════════════════ */

/* ── REVEAL ON SCROLL ──────────────────────── */
/* Estado inicial: oculto. JS adiciona .revealed */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}

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

/* Reveal da esquerda */
.reveal--left {
  transform: translateX(-30px);
}

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

/* Reveal da direita */
.reveal--right {
  transform: translateX(30px);
}

.reveal--right.reveal--visible {
  transform: translateX(0);
}

/* Reveal com scale */
.reveal--scale {
  transform: scale(0.95);
}

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

/* ── STAGGER DELAYS ────────────────────────── */
/* UPGRADE VISUAL v2: 70ms → 200ms para sequencia visual clara */
.stagger-1 { transition-delay: 0.2s; }
.stagger-2 { transition-delay: 0.4s; }
.stagger-3 { transition-delay: 0.6s; }
.stagger-4 { transition-delay: 0.8s; }
.stagger-5 { transition-delay: 1.0s; }
.stagger-6 { transition-delay: 1.2s; }

/* ── DRAW LINE ─────────────────────────────── */
/* Linha que se desenha no scroll */
.draw-line {
  display: block;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-20));
  transition: width 0.8s var(--ease-out);
}

.draw-line--visible {
  width: 80px;
}

/* ── HERO ANIMATIONS ───────────────────────── */

/* Entrada do titulo no hero */
@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__title {
  opacity: 0;
  animation: heroTitleIn 0.9s var(--ease-out) 0.1s forwards;
}

.hero__subtitle {
  opacity: 0;
  /* Entrada + breath subtil em loop. O forwards no 1o
     keeps o estado final antes do breath comecar (1.3s) */
  animation:
    heroTitleIn 0.9s var(--ease-out) 0.25s forwards,
    heroSubtitleBreath 4.2s var(--ease-in-out) 1.3s infinite;
}

/* Respiracao suave — 4% de oscilacao em opacity, ~1px em Y.
   Mantem subtitle "vivo" sem distrair do CTA */
@keyframes heroSubtitleBreath {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.92;
    transform: translateY(1px);
  }
}

.hero__cta-group {
  opacity: 0;
  animation: heroTitleIn 0.9s var(--ease-out) 0.4s forwards;
}

/* ── GLOW QUE SEGUE O MOUSE ───────────────── */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-glow__circle {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: var(--gradient-glow);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  transition: left 0.6s var(--ease-out),
              top 0.6s var(--ease-out);
  will-change: left, top;
}

/* ── CURSOR CUSTOMIZADO ────────────────────── */
/* Desktop only — escondido por padrao, JS mostra via display:block */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: var(--z-cursor);
  will-change: transform;
  display: none;
}

.cursor__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 12px var(--brand-orange-40);
  transition: transform 0.2s var(--ease-out),
              opacity 0.2s ease;
}

/* Cursor cresce ao passar sobre interativos */
.cursor--hover .cursor__dot {
  transform: scale(2.2);
  opacity: 0.5;
  background: var(--text-white);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
}

/* ── COUNTER ANIMADO ───────────────────────── */
/* JS incrementa de 0 ate o valor final */
.counter {
  font-variant-numeric: tabular-nums;
}

/* ── GLOW PULSE (decorativo) ───────────────── */
@keyframes glowPulse {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.09; }
}

.glow-pulse {
  animation: glowPulse 4s ease-in-out infinite;
}

/* ── BUTTON HOVER — TEXT REVEAL ────────────── */
/* Texto sobe e revela segundo texto por baixo */
.btn--reveal {
  overflow: hidden;
  position: relative;
}

.btn--reveal__front,
.btn--reveal__back {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.35s var(--ease-out),
              opacity 0.35s ease;
}

.btn--reveal__back {
  position: absolute;
  inset: 0;
  justify-content: center;
  transform: translateY(110%);
  opacity: 0;
}

.btn--reveal:hover .btn--reveal__front {
  transform: translateY(-110%);
  opacity: 0;
}

.btn--reveal:hover .btn--reveal__back {
  transform: translateY(0);
  opacity: 1;
}

/* ── PARALLAX ──────────────────────────────── */
/* JS controla via transform: translateY */
.parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── SECTION TRANSITION (dark ↔ light) ────── */
/* Clip-path que revela a secao ao scrollar */
.section-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-out);
}

.section-clip--visible {
  clip-path: inset(0 0 0 0);
}

/* ── DECORATIVOS ───────────────────────────── */

/* Corner dots (4 cantos) */
.corner-dots::before,
.corner-dots::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--brand-orange);
  border-radius: 50%;
  opacity: 0.3;
  pointer-events: none;
}

.corner-dots::before {
  top: 78px;
  left: 78px;
}

.corner-dots::after {
  top: 78px;
  right: 78px;
}

/* Edge lines (laterais verticais) */
.edge-lines::before,
.edge-lines::after {
  content: '';
  position: absolute;
  width: 1px;
  top: 80px;
  bottom: 80px;
  background: var(--gradient-edge-line);
  pointer-events: none;
}

.edge-lines::before {
  left: 80px;
}

.edge-lines::after {
  right: 80px;
}

/* Watermark de fundo */
.watermark {
  position: absolute;
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: clamp(200px, 28vw, 420px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.018);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

/* Variante hero: watermark em laranja translucido,
   deslocada para baixo-direita e ligeiramente mais
   visivel que o padrao branco. Cria "ancora" visual
   de marca sem competir com o titulo */
.watermark--hero {
  top: 58%;
  left: 58%;
  transform: translate(-50%, -50%);
  color: rgba(212, 80, 10, 0.045);
}

/* ── MAP PULSE ─────────────────────────────── */
/* Pulso animado saindo do CD no mapa */
@keyframes mapPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

.map-pulse {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-orange);
  opacity: 0;
  animation: mapPulse 2s ease-out infinite;
}

.map-pulse:nth-child(2) {
  animation-delay: 0.7s;
}

.map-pulse:nth-child(3) {
  animation-delay: 1.4s;
}

/* ── FORM SHAKE ────────────────────────────── */
/* Disparado por js/form.js quando validacao falha.
   Translada lateral em pequena amplitude por ~450ms. */
@keyframes formShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(3px); }
}

.shake {
  animation: formShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ── FORM SUCCESS ENTRANCE ─────────────────── */
/* Mensagem de sucesso entra com fade + slide suave.
   Aplicada por JS quando form é enviado com sucesso. */
@keyframes formSuccessIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.form-success {
  animation: formSuccessIn 0.5s var(--ease-out) both;
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
}

/* ── PAGE LOAD ─────────────────────────────── */
/* Fade in geral apos loading screen */
@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-content {
  opacity: 0;
  animation: pageIn 0.5s ease 0.1s forwards;
}

/* Desativar animacao de entrada se loading screen esta ativa */
.has-loading .page-content {
  animation: none;
  opacity: 1;
}

/* ══════════════════════════════════════════════
   METRIC STAGE — Keyframes (assimetria hierarquica)
   ══════════════════════════════════════════════ */

/* Halo conic laranja girando lentamente atras do numero heroi */
@keyframes haloSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .metric-stage__halo {
    animation: none;
  }
  .metric-stage__value {
    transition: opacity 0.3s ease;
    transform: none;
    filter: none;
  }
}

/* ══════════════════════════════════════════════
   REDUCED MOTION — GLOBAL
   Respeita usuarios com sensibilidade a movimento.
   Mantem o SITE funcional e legivel, apenas remove
   animacoes que envolvem translate/scale/rotate.
   Opacidade continua permitida (nao induz vertigem).
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Reveals: sem translate/scale, so opacity */
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale {
    transform: none;
    transition: opacity 0.4s ease;
  }
  .reveal--visible {
    transform: none;
  }

  /* Stagger zerado — todos aparecem ao mesmo tempo */
  .stagger-1,
  .stagger-2,
  .stagger-3,
  .stagger-4,
  .stagger-5,
  .stagger-6 {
    transition-delay: 0s;
  }

  /* Parallax desativado */
  .parallax {
    transform: none !important;
  }

  /* Hero animations */
  .hero__title,
  .hero__subtitle,
  .hero__cta-group,
  .hero-bg,
  .hero-bg__img {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Hero glow que segue mouse */
  .hero-glow__circle {
    transition: none;
  }

  /* Decorativos pulsantes */
  .glow-pulse,
  .map-pulse,
  .channels__line,
  .channel-hub__ring {
    animation: none;
  }

  /* Text reveal via clip-path */
  .text-reveal {
    clip-path: none;
    opacity: 1;
  }

  /* Ticker infinito */
  .ticker {
    animation: none;
  }

  /* Cursor customizado desativado (pode incomodar) */
  .cursor {
    display: none !important;
  }
  body {
    cursor: auto;
  }
}