/* ==========================================================================
   scroll.css — apoio da coreografia de rolagem (scroll.js)
   Só vale quando <html> tem a classe .scrolly (GSAP carregado e sem
   «reduzir movimento»). Sem ela, a página usa motion.css como está.
   ========================================================================== */

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Com o Lenis no comando, a rolagem suave do CSS sai: com ela o ScrollTrigger mede as seções no lugar errado
   sempre que recalcula com a página já rolada (ele precisa ir ao topo num pulo só para medir). */
html.lenis { scroll-behavior: auto; }

/* ---------- Preloader ---------- */
.loader { position: fixed; inset: 0; z-index: 999; display: none; place-items: center; background: #0b1220; color: #fff; }
.has-loader .loader { display: grid; animation: loader-failsafe .01s linear 6s forwards; }
.loader__in { display: grid; justify-items: center; gap: 22px; }
.loader__mark { width: 34px; height: 64px; color: #7c9bff; }
.loader__n { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: clamp(3.4rem, 9vw, 6rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.loader__n small { font-size: .34em; letter-spacing: 0; opacity: .55; margin-left: .12em; }
.loader__bar { width: min(260px, 60vw); height: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; border-radius: 2px; }
.loader__bar span { display: block; height: 100%; background: #7c9bff; transform-origin: 0 50%; transform: scaleX(0); }
@keyframes loader-failsafe { to { visibility: hidden; opacity: 0; } } /* se o JS falhar, a página não fica presa */

/* ---------- Âncoras: o foco vai junto com a rolagem, sem contorno na seção inteira ---------- */
.scrolly [tabindex="-1"]:focus { outline: none; }

/* ---------- Navegação some ao descer ---------- */
.scrolly .header { transition: transform .5s cubic-bezier(.22, .8, .26, 1), border-color .3s, box-shadow .3s; }
.scrolly .header.is-hidden { transform: translateY(-101%); }

/* ---------- Títulos: máscara por palavra ---------- */
.scrolly .section-title .w { display: inline-block; overflow: hidden; vertical-align: top; opacity: 1 !important; padding: .1em .02em .16em; margin: -.1em -.02em -.16em; transition: none; }
.scrolly .section-title .wi { display: inline-block; will-change: transform; }

/* ---------- Deslocamento por variável (não briga com hover/transform) ---------- */
.scrolly .metrics-track .metric,
.scrolly .grid--security > .scard { translate: 0 var(--py, 0px); }
.scrolly .metrics-track .metric { transition: opacity .6s ease; }
.scrolly .metrics-marquee { overflow: visible; }

@media (min-width: 1025px) and (min-height: 620px) {
  /* herói em palco fixado: quem move a moldura e os cartões é o GSAP */
  .scrolly .shotframe { transform: none; will-change: transform; }
  .scrolly .hero__mockup { animation: none; will-change: transform; }
  .scrolly .hero-float--a { animation: bob 6s ease-in-out infinite alternate; }
  .scrolly .hero-float--b { animation: bob 7s ease-in-out infinite alternate-reverse; }
  .scrolly .hero__inner { position: relative; z-index: 2; }
  /* o palco tem exatamente a altura da tela: quando solta, a próxima seção já vem colada,
     sem a sobra vazia que ficava embaixo da moldura (ela sobe durante a animação) */
  .scrolly .hero { height: 100vh; height: 100svh; padding-bottom: 0; }

  /* como funciona: o celular fica reto, a rolagem inclina */
  .scrolly .phone { rotate: 0deg; }
  .scrolly .assistant__rings { animation: none; }
  .scrolly .hsteps.is-live .hstep { opacity: .6; }
  .scrolly .hsteps.is-live .hstep.is-done { opacity: 1; }

  /* entradas agora são conduzidas pela rolagem: saem as de CSS */
  .scrolly .features__grid.reveal > .feat,
  .scrolly .grid--addons.reveal > .acard,
  .scrolly .grid--security.reveal > .scard { opacity: 1; animation: none; }
  .scrolly .feat { transition: background .3s; }
  .scrolly .feat:hover { transform: none; }
  .scrolly .cta .multistep { transition: box-shadow .4s; }
  .scrolly .footer { overflow: hidden; }
}