/* =============================================================
   EFEITOS — scroll reveal, profundidade 3D e brilho
   Base: skill landing-premium · adaptado à paleta Arcamáquinas
   Arquivo separado de propósito: para desligar tudo, basta
   remover a linha do efeitos.css no index.html.
   ============================================================= */

/* -------------------------------------------------------------
   1. REVELAÇÃO AO ROLAR
   A direção segue o sentido do scroll: rolando para baixo os
   elementos sobem; rolando para cima, descem.
   ------------------------------------------------------------- */
[data-rv]{
  opacity:0;
  transform:translate3d(0, var(--rv-y, 38px), 0) scale(var(--rv-s, .985));
  transition:
    opacity   .75s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--rv-atraso, 0ms);
  will-change:opacity, transform;
}
[data-rv].rv-on{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
/* Rolando para cima, o elemento entra pelo lado oposto */
body.rv-subindo [data-rv]:not(.rv-on){ --rv-y:-38px; }

/* Variantes por tipo de elemento */
[data-rv="titulo"]{ --rv-y:28px; --rv-s:1; }
[data-rv="cartao"]{ --rv-y:46px; --rv-s:.96; }
[data-rv="lado"]{
  transform:translate3d(-42px,0,0);
}
body.rv-subindo [data-rv="lado"]:not(.rv-on){ transform:translate3d(42px,0,0); }
[data-rv="lado"].rv-on{ transform:translate3d(0,0,0); }

/* Assim que revelado, um brilho atravessa o elemento */
[data-rv].rv-on.rv-brilho{ position:relative; }
[data-rv].rv-on.rv-brilho::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:2;
  background:linear-gradient(105deg,
    transparent 35%,
    rgba(255,255,255,.34) 48%,
    rgba(255,255,255,.12) 55%,
    transparent 68%);
  background-size:280% 100%;
  animation:varrer 1.05s cubic-bezier(.4,0,.2,1) .12s 1 both;
}
@keyframes varrer{
  from{ background-position:180% 0; opacity:1; }
  to  { background-position:-80% 0; opacity:0; }
}

/* -------------------------------------------------------------
   2. PROFUNDIDADE 3D
   perspective já aplicada em .svc-grid, .reviews, .stats-grid
   (styles.css). Sem overflow:hidden nos .tilt — overflow != visible
   anula o preserve-3d e mataria o translateZ das camadas internas.
   ------------------------------------------------------------- */
.tilt{
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.tilt.is-tocando{
  transition:transform .09s linear;
}

/* Camadas que "flutuam" acima do card */
.tilt .no,
.tilt h3,
.tilt .stars,
.tilt .who{
  transform:translateZ(28px);
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}

/* Brilho que segue o cursor */
.tilt{ position:relative; }
.tilt::before{
  content:''; position:absolute; inset:0; z-index:1;
  border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
  background:radial-gradient(
    360px circle at var(--mx,50%) var(--my,50%),
    rgba(232,218,26,.13), transparent 42%);
}
.tilt.is-tocando::before{ opacity:1; }

/* Nos cards claros (reviews), o brilho precisa ser da cor da marca */
.rev.tilt::before{
  background:radial-gradient(
    420px circle at var(--mx,50%) var(--my,50%),
    rgba(0,28,84,.09), transparent 45%);
}
.rev.tilt.is-tocando{
  box-shadow:0 24px 60px rgba(2,20,60,.18), 0 6px 18px rgba(2,20,60,.08);
}
.svc-card.tilt.is-tocando{
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}

/* -------------------------------------------------------------
   3. PARALLAX DO HERO
   ------------------------------------------------------------- */
.hero-bgword{
  transform:translate3d(0, var(--px-ano, 0), 0);
  will-change:transform;
}
.hero-grade{
  transform:translate3d(0, var(--px-grade, 0), 0);
  will-change:transform;
}
.hero-conteudo{
  transform:translate3d(0, var(--px-txt, 0), 0);
}
.hero-arte{
  transform:translate3d(0, calc(var(--px-txt, 0px) * -1.4), 0);
}

/* Luz do hero acompanhando o mouse */
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(
    640px circle at var(--hx,70%) var(--hy,22%),
    rgba(232,218,26,.10), transparent 58%);
  transition:opacity .5s ease;
}

/* -------------------------------------------------------------
   4. BOTÕES COM BRILHO
   ------------------------------------------------------------- */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:''; position:absolute; top:0; left:-120%;
  width:60%; height:100%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg,
    transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
}
.btn:hover::after{ animation:brilhoBotao .75s ease; }
@keyframes brilhoBotao{ to{ left:150%; } }

/* Pulso permanente no CTA principal do hero */
.hero-acoes .btn-lg{
  animation:pulsoCTA 3.4s ease-in-out 1.5s infinite;
}
@keyframes pulsoCTA{
  0%,100%{ box-shadow:4px 4px 0 rgba(0,0,0,.35); }
  50%    { box-shadow:4px 4px 0 rgba(0,0,0,.35), 0 0 0 7px rgba(232,218,26,.14), 0 8px 34px rgba(232,218,26,.35); }
}
.hero-acoes .btn-lg:hover{ animation-play-state:paused; }

/* -------------------------------------------------------------
   5. BARRA DE PROGRESSO DE LEITURA
   ------------------------------------------------------------- */
.progresso{
  position:fixed; z-index:260;
  top:0; left:0;
  height:3px; width:100%;
  background:transparent; pointer-events:none;
}
.progresso span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--yellow-warm), var(--yellow));
  box-shadow:0 0 12px rgba(232,218,26,.6);
  transition:width .1s linear;
}

/* -------------------------------------------------------------
   6. NÚMEROS QUE CONTAM (stats)
   .stat já tem preserve-3d e o b já tem translateZ no styles.css
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   7. FAQ — abertura suave
   ------------------------------------------------------------- */
.faq-item[open] .a{ animation:abreFaq .35s cubic-bezier(.16,1,.3,1); }
@keyframes abreFaq{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}

/* -------------------------------------------------------------
   8. SPECS DO HERO — hover sutil
   ------------------------------------------------------------- */
.hero-specs li{
  transition:background .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
.hero-specs li:hover{
  background:rgba(232,218,26,.06);
}

/* -------------------------------------------------------------
   9. RESPEITO A QUEM PREFERE MENOS MOVIMENTO
   ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  [data-rv]{ opacity:1 !important; transform:none !important; transition:none !important; }
  [data-rv].rv-on.rv-brilho::after{ display:none; }
  .tilt{ transform:none !important; }
  .tilt::before{ display:none; }
  .hero-bgword, .hero-grade, .hero-conteudo, .hero-arte{ transform:none !important; }
  .hero::after{ display:none; }
  .btn::after{ display:none; }
  .hero-acoes .btn-lg{ animation:none; }
  .progresso{ display:none; }
  .faq-item[open] .a{ animation:none; }
}

/* Em telas pequenas o tilt atrapalha o toque — só reveal e brilho */
@media (max-width:900px){
  .tilt{ transform:none !important; }
  .tilt::before{ display:none; }
  .tilt .no, .tilt h3, .tilt .stars, .tilt .who{ transform:none; }
}