/* ==========================================================================
   PROTOCOLO TIKTOK MILIONÁRIO — Camada de movimento
   Depende de tokens/tokens.css e components/components.css.

   Regras herdadas do sistema de movimento da skill site-de-10k:
   · nada estala — duas curvas de easing como token, usadas em tudo
   · entradas são coreografia — IntersectionObserver adiciona .in, filhos
     escalonam de 60 a 150ms
   · anima só transform e opacity
   · um elemento vivo por seção, em nível de sussurro, ciclo ≥ 4s
   · movimento reduzido é honrado por completo e AO VIVO, nas duas direções

   Vidro adaptado do digitaldofuturo: lá a sombra é fria (azul); aqui ela é
   quente, porque a base da marca é off-white e não gelo.
   ========================================================================== */

:root{
  --ptm-ease:     cubic-bezier(.16,1,.3,1);   /* expo-out: entradas */
  --ptm-ease-io:  cubic-bezier(.45,.05,.2,1); /* in-out: hover e estado */
  --ptm-dur:      .7s;
  --ptm-dur-curta:.28s;
}

/* Uma âncora de scroll suave e a trava de overflow lateral.
   `hidden` antes de `clip` como recuo: hidden sozinho ainda deixa
   um link de âncora deslocar a página inteira. */
html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip }
body{ overflow-x:hidden; overflow-x:clip }

/* ---------- CARTÃO DE VIDRO ---------------------------------------------- */
.ptm-vidro{
  background: rgba(255,255,255,.58);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: var(--ptm-raio-cartao);
  box-shadow:
    0 30px 60px -22px rgba(92,62,26,.16),
    0 6px 16px -8px rgba(92,62,26,.10);
}
/* Sobre areia o vidro precisa de um pouco mais de corpo para não sumir. */
.lp--areia .ptm-vidro{ background: rgba(255,255,255,.70) }

/* ---------- AMBIENTE ------------------------------------------------------ */
/* Camada fixa atrás de tudo, deriva lenta de 80s: rolar vira atravessar um
   lugar em vez de passar por seções empilhadas. Fica atrás de todo conteúdo. */
.ptm-ambiente{
  position:fixed; inset:-20vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%, rgba(250,188,62,.13), transparent 62%),
    radial-gradient(34vmax 34vmax at 82% 72%, rgba(219,104,56,.10), transparent 64%);
  animation: ptm-deriva 80s var(--ptm-ease-io) -24s infinite alternate;
  will-change: transform;
}
@keyframes ptm-deriva{
  from{ transform: translate3d(-2%,-1%,0) scale(1) }
  to  { transform: translate3d( 2%, 2%,0) scale(1.06) }
}

/* ---------- ENTRADA COREOGRAFADA ----------------------------------------- */
/* Estado inicial e final precisam do prefixo da classe do contêiner
   (.ptm-rev .ptm-p / .ptm-rev.in .ptm-p) para vencerem a cascata. */
.ptm-rev .ptm-p{
  opacity:0;
  transform: translate3d(0,18px,0);
  transition: opacity var(--ptm-dur) var(--ptm-ease),
              transform var(--ptm-dur) var(--ptm-ease);
  will-change: transform, opacity;
}
.ptm-rev.in .ptm-p{ opacity:1; transform:none }

/* Escalonamento de 60 a 150ms. */
.ptm-rev.in .ptm-p:nth-child(1){ transition-delay:0ms }
.ptm-rev.in .ptm-p:nth-child(2){ transition-delay:70ms }
.ptm-rev.in .ptm-p:nth-child(3){ transition-delay:140ms }
.ptm-rev.in .ptm-p:nth-child(4){ transition-delay:210ms }
.ptm-rev.in .ptm-p:nth-child(5){ transition-delay:280ms }
.ptm-rev.in .ptm-p:nth-child(6){ transition-delay:350ms }
.ptm-rev.in .ptm-p:nth-child(7){ transition-delay:420ms }

/* APOSENTA o escalonamento quando a entrada termina, senão todo hover nos
   irmãos posteriores atrasa pelo stagger para sempre. A regra precisa
   igualar ou vencer a especificidade das regras nth-child acima
   (:nth-child conta como classe) — daí o .ptm-rev.in.pronto. */
.ptm-rev.in.pronto .ptm-p:nth-child(n){ transition-delay:0ms }

/* Variantes de entrada — o "princípio do eco": a entrada conversa com o que
   a seção diz. Todas só transform e opacity. */
.ptm-rev .ptm-p--esq{ transform: translate3d(-22px,0,0) }
.ptm-rev .ptm-p--dir{ transform: translate3d( 22px,0,0) }
.ptm-rev .ptm-p--sobe{ transform: translate3d(0,34px,0) }
.ptm-rev .ptm-p--escala{ transform: scale(.965) }
.ptm-rev.in .ptm-p--esq,
.ptm-rev.in .ptm-p--dir,
.ptm-rev.in .ptm-p--sobe,
.ptm-rev.in .ptm-p--escala{ transform:none }

/* Revelação de linha mascarada. O respiro em em evita que g, y e p
   tenham os rabos cortados pelo overflow. */
.ptm-mask{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em }
.ptm-mask > span{
  display:block; transform: translate3d(0,105%,0);
  transition: transform .9s var(--ptm-ease);
}
.ptm-rev.in .ptm-mask > span{ transform:none }

/* ---------- ELEMENTO VIVO (nível de sussurro) ----------------------------- */
/* Só roda enquanto a seção está na tela: a classe .viva é alternada por
   IntersectionObserver. Atraso negativo para começar no meio do ciclo. */
.ptm-pulso{ position:relative }
.ptm-pulso::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  pointer-events:none; opacity:0;
  box-shadow: 0 0 0 1px rgba(250,188,62,.55), 0 0 26px rgba(250,188,62,.30);
}
/* Anima a opacidade do pseudo-elemento, nunca a box-shadow. */
.viva .ptm-pulso::after{ animation: ptm-brilho 5.5s var(--ptm-ease-io) -1.8s infinite }
@keyframes ptm-brilho{ 0%,100%{opacity:0} 50%{opacity:.85} }

.ptm-faisca--viva{ display:inline-block }
.viva .ptm-faisca--viva{ animation: ptm-cintila 6s var(--ptm-ease-io) -2.4s infinite }
@keyframes ptm-cintila{
  0%,100%{ transform: scale(1) rotate(0); opacity:.85 }
  50%    { transform: scale(1.14) rotate(8deg); opacity:1 }
}

/* ---------- BRILHO VARRENDO O CTA ---------------------------------------- */
/* O efeito do digitaldofuturo, no ouro da marca. Pseudo-elemento, só transform. */
.ptm-btn--primario{ position:relative; overflow:hidden; isolation:isolate }
.ptm-btn--primario::after{
  content:""; position:absolute; top:0; bottom:0; width:42%; z-index:-1;
  left:-60%; pointer-events:none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.62), transparent);
  transform: translate3d(0,0,0);
}
.viva .ptm-btn--primario::after{ animation: ptm-varre 4.6s var(--ptm-ease-io) -1.2s infinite }
@keyframes ptm-varre{
  0%       { transform: translate3d(0,0,0) }
  45%,100% { transform: translate3d(420%,0,0) }
}

/* ---------- HOVER --------------------------------------------------------- */
.ptm-cartao, .ptm-vidro, .item{
  transition: transform var(--ptm-dur-curta) var(--ptm-ease-io),
              box-shadow var(--ptm-dur-curta) var(--ptm-ease-io);
}
.ptm-cartao:hover, .ptm-vidro:hover{ transform: translate3d(0,-3px,0) }

/* ---------- BARRA DE PROGRESSO E CONTADORES ------------------------------ */
.progresso__barra{
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.5s var(--ptm-ease) .25s;
}
.ptm-rev.in .progresso__barra{ transform: scaleX(1) }

/* ---------- PAUSA GLOBAL EM ABA ESCONDIDA --------------------------------- */
/* animation-play-state não é herdada: precisa alcançar pseudo-elementos. */
body.ptm-pausado *,
body.ptm-pausado *::before,
body.ptm-pausado *::after{ animation-play-state: paused !important }

/* ---------- MOVIMENTO REDUZIDO -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
  .ptm-rev .ptm-p,
  .ptm-rev .ptm-p--esq,
  .ptm-rev .ptm-p--dir,
  .ptm-rev .ptm-p--sobe,
  .ptm-rev .ptm-p--escala{ opacity:1; transform:none }
  .ptm-mask > span{ transform:none }
  .progresso__barra{ transform: scaleX(1) }
  .ptm-ambiente{ display:none }
}
/* O mesmo estado, aplicado por JS quando a preferência vira AO VIVO. */
body.ptm-sem-movimento *,
body.ptm-sem-movimento *::before,
body.ptm-sem-movimento *::after{
  animation: none !important; transition: none !important; transition-delay: 0ms !important;
}
body.ptm-sem-movimento .ptm-rev .ptm-p,
body.ptm-sem-movimento .ptm-rev .ptm-p--esq,
body.ptm-sem-movimento .ptm-rev .ptm-p--dir,
body.ptm-sem-movimento .ptm-rev .ptm-p--sobe,
body.ptm-sem-movimento .ptm-rev .ptm-p--escala{ opacity:1; transform:none }
body.ptm-sem-movimento .ptm-mask > span{ transform:none }
body.ptm-sem-movimento .progresso__barra{ transform: scaleX(1) }
body.ptm-sem-movimento .ptm-ambiente{ display:none }