/* Site vivo — estilos do pacote de efeitos (/site-vivo).
   Ajuste as variáveis --sv-* pra cor da marca do cliente. */
:root {
  --sv-cor: 255, 194, 14;            /* amarelo da Aquino Print (o das etiquetas) */
  --sv-apagado: .14;                /* opacidade das palavras antes de acender */
}

/* Lenis (rolagem suave) */
html.lenis, html.lenis body { height: auto; }
/* com Lenis ativo, a rolagem suave do CSS tem que sair: ela distorce as medidas do ScrollTrigger */
html.lenis, html.lenis body { scroll-behavior: auto !important; }

/* [data-revela]: filhos surgem em cascata ao rolar */
.sv-anim [data-revela] > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--sv-atraso, 0s);
}
.sv-anim [data-revela] > .sv-visto { opacity: 1; transform: none; }

/* [data-acende]: palavras acendem com a rolagem */
[data-acende] .sv-palavra { display: inline-block; will-change: opacity; }
[data-acende] em .sv-palavra.sv-acesa { text-shadow: 0 0 24px rgba(var(--sv-cor), .35); }

/* [data-holofote]: luz que segue o mouse por dentro e pela borda */
[data-holofote] { position: relative; isolation: isolate; }
[data-holofote] > .sv-luz, [data-holofote] > .sv-brilho { position: absolute; pointer-events: none; opacity: 0; transition: opacity .35s; border-radius: inherit; }
[data-holofote] > .sv-luz {
  inset: 0; z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--sv-cor), .12), transparent 65%);
}
[data-holofote] > .sv-brilho {
  inset: -1px; z-index: 1; padding: 1px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--sv-cor), .9), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-holofote]:hover > .sv-luz, [data-holofote]:hover > .sv-brilho { opacity: 1; }

/* [data-progresso]: barra que acompanha uma seção presa à rolagem */
[data-progresso] { position: relative; }
[data-progresso]::after {
  content: ""; position: absolute; left: 0; bottom: -14px; height: 2px; border-radius: 999px;
  width: calc(var(--sv-prog, 0) * 100%);
  background: rgb(var(--sv-cor)); box-shadow: 0 0 12px rgba(var(--sv-cor), .35);
}