/* ============================================================
   FORME · site-anim.css · v1 (2026-05-25)
   Camada de polimento — 10 animações aprovadas.
   Regra de ouro: NENHUMA muda layout. Só transform/opacity/filter/box-shadow.
   ============================================================ */

/* ============================================================
   1 · BORDAS MAGENTA NEON HOVER NOS CARDS DE PACOTE
   (prioridade máxima — pedido específico do Chefe)
   ============================================================ */
.pacote,
.pacote--gtm-standalone {
  transition:
    transform 200ms var(--ease-out, ease-out),
    border-color 200ms var(--ease-out, ease-out),
    box-shadow 200ms var(--ease-out, ease-out);
  cursor: pointer;
  will-change: transform;
}
.pacote:hover,
.pacote--gtm-standalone:hover {
  border-color: #FF1493 !important;
  border-width: 1.5px;
  /* Mantém translateY(-2px) original + scale 1.02 sutil */
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 24px rgba(255, 20, 147, 0.25),
              inset 0 0 0 0.5px rgba(255, 20, 147, 0.4);
  z-index: 2;
}

/* ============================================================
   3 · HOVER GLOW EM CTAs PRINCIPAIS
   nav__cta + btn-on-mag (CTA Final)
   ============================================================ */
.nav__cta,
.btn-on-mag {
  transition:
    background var(--dur-fast, 200ms) var(--ease-out, ease-out),
    border-color var(--dur-fast, 200ms) var(--ease-out, ease-out),
    box-shadow 300ms var(--ease-out, ease-out),
    transform 200ms var(--ease-out, ease-out);
  will-change: transform, box-shadow;
}
.nav__cta:hover {
  box-shadow: 0 0 16px rgba(255, 20, 147, 0.55),
              0 0 32px rgba(255, 20, 147, 0.25);
}
.btn-on-mag:hover {
  box-shadow: 0 0 24px rgba(247, 243, 237, 0.5),
              0 0 48px rgba(247, 243, 237, 0.25);
}

/* ============================================================
   2 · MAGNETIC BUTTONS — JS aplica transform, CSS prepara
   ============================================================ */
.nav__cta,
.hero__early-bar,
.pacote__cta,
.btn-on-mag {
  /* transform-origin pro magnetic ficar centrado */
  transform-origin: center center;
}

/* ============================================================
   4 · REVEAL POR PALAVRA (manifesto + CTA Final)
   JS divide em spans .word, CSS controla animação
   ============================================================ */
.word-reveal {
  display: inline-block;
  overflow: hidden;
  /* preserva espaço entre palavras */
}
.word-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  /* will-change só durante animação (gerenciado por JS via classe) */
}
.word-reveal.is-revealed .word {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   5 · TARJA MAGENTA · timing refinado
   Override do default (720ms cubic-bezier(0.16, 1, 0.3, 1) 480ms)
   Novo: 1.2s cubic-bezier(0.65, 0, 0.35, 1), dispara via .is-drawn (JS)
   ============================================================ */
.tarja[data-anim="draw"]::before {
  /* Override pra começar fechada e esperar JS trigger */
  animation: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1200ms cubic-bezier(0.65, 0, 0.35, 1);
}
.tarja[data-anim="draw"].is-drawn::before {
  transform: scaleX(1);
}
/* Fallback: se JS falhar, anima depois de 500ms via animation */
.no-js .tarja[data-anim="draw"]::before {
  animation: tarja-draw-v2 1200ms cubic-bezier(0.65, 0, 0.35, 1) 500ms both;
}
@keyframes tarja-draw-v2 {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   6 · MARQUEE STACK · upgrade pra translate3d (GPU)
   Já tinha pause hover + mask, só força aceleração
   ============================================================ */
.stack__track {
  animation: stack-scroll-3d 36s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
@keyframes stack-scroll-3d {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   7 · GRID SUTIL NO BG DO HERO
   SVG inline em background-image, anima background-position
   Posicionado ABAIXO do vídeo (z-index 0, mas hero__video é z-index 0 tb…)
   Solução: criar pseudo-elemento ::before no .hero, antes do vídeo no stacking
   Como .hero é flex column, ::before fica posicionado absoluto
   ============================================================ */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 20, 147, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 20, 147, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  animation: hero-grid-drift 60s linear infinite;
  will-change: background-position;
}
@keyframes hero-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}
/* Garante que vídeo fica acima do grid (já era z-index 0, agora 1) */
.hero__video { z-index: 1 !important; }
.hero__warm  { z-index: 2 !important; }
.hero__scrim { z-index: 3 !important; }
.hero__inner { z-index: 4 !important; }

/* ============================================================
   8 · PARTÍCULAS NO HERO · canvas posicionamento
   ============================================================ */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 3; /* acima de scrim, abaixo de inner */
  pointer-events: none;
  opacity: 0.85;
}

/* ============================================================
   9 + 10 · CURSOR CUSTOM MAGENTA + INÉRCIA
   Dot pequeno (8px) + ring (32px) que cresce em links/CTAs
   ============================================================ */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
.cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF1493;
  box-shadow: 0 0 8px rgba(255, 20, 147, 0.6);
  transition: width 200ms var(--ease-out, ease-out),
              height 200ms var(--ease-out, ease-out),
              background 200ms var(--ease-out, ease-out);
}
.cursor-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 20, 147, 0.5);
  transition: width 250ms var(--ease-out, ease-out),
              height 250ms var(--ease-out, ease-out),
              border-color 250ms var(--ease-out, ease-out),
              opacity 250ms var(--ease-out, ease-out),
              box-shadow 250ms var(--ease-out, ease-out);
  opacity: 0;
}
body.cursor-custom-ready .cursor-ring { opacity: 1; }

/* Estado hover (em links, buttons, .pacote) */
body.cursor-on-link .cursor-dot {
  width: 4px;
  height: 4px;
  background: rgba(255, 20, 147, 0.9);
}
body.cursor-on-link .cursor-ring {
  width: 48px;
  height: 48px;
  border-color: rgba(255, 20, 147, 0.9);
  box-shadow: 0 0 20px rgba(255, 20, 147, 0.4);
}

/* Cursor sobre fundo magenta (section --comecar) — troca pra papel */
body.cursor-on-magenta .cursor-dot {
  background: #F0EBE6;
  box-shadow: 0 0 10px rgba(240, 235, 230, 0.7);
}
body.cursor-on-magenta .cursor-ring {
  border-color: rgba(240, 235, 230, 0.8);
}
body.cursor-on-magenta.cursor-on-link .cursor-dot {
  background: #F0EBE6;
}
body.cursor-on-magenta.cursor-on-link .cursor-ring {
  border-color: rgba(240, 235, 230, 1);
  box-shadow: 0 0 20px rgba(240, 235, 230, 0.5);
}

/* Ativa cursor custom só em desktop ≥1024px (touch é detectado em JS tb) */
@media (min-width: 1024px) {
  body.cursor-custom-active,
  body.cursor-custom-active * {
    cursor: none !important;
  }
  /* iframes (eventual Google Translate, embeds) mantêm cursor nativo */
  body.cursor-custom-active iframe,
  body.cursor-custom-active iframe * {
    cursor: auto !important;
  }
}

/* ============================================================
   MOBILE / TOUCH · desabilita features pesadas
   ============================================================ */
@media (max-width: 767px) {
  .cursor-dot,
  .cursor-ring,
  .hero__particles {
    display: none !important;
  }
  /* Mantém hovers + reveals + marquee */
}

/* ============================================================
   PREFERS-REDUCED-MOTION · desativa TUDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pacote,
  .pacote--gtm-standalone,
  .nav__cta,
  .btn-on-mag,
  .hero__early-bar,
  .pacote__cta {
    transition: none !important;
  }
  .pacote:hover,
  .pacote--gtm-standalone:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .word-reveal .word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .stack__track,
  .hero::before {
    animation: none !important;
  }
  .tarja[data-anim="draw"]::before {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .hero__particles,
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}