/* movimento · quadros-chave e o padrão de revelação.
   Três regras: nada entra sem deslocamento mais opacidade; nada passa de
   --t-scene; tudo para quando o sistema pede menos movimento. */

@keyframes spin{ to{transform:rotate(1turn)} }
@keyframes ping{
  0%{transform:scale(.7); opacity:.6}
  70%,100%{transform:scale(1.9); opacity:0}
}
@keyframes pulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.4; transform:scale(.8)}
}
@keyframes rise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
@keyframes shimmer{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* --- revelação no scroll ---
   O JS marca <html class="js">. Sem JS o conteúdo já nasce visível. */
.js .rv{opacity:0; transform:translateY(18px);
  transition:opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease)}
.js .rv.on{opacity:1; transform:none}
.js .rv-1{transition-delay:60ms}
.js .rv-2{transition-delay:120ms}
.js .rv-3{transition-delay:180ms}

/* --- linha que se desenha --- */
.js .rv-line{height:1px; background:var(--grad-cool); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-scene) var(--ease)}
.js .rv-line.on{transform:scaleX(1)}

/* --- ponto de estado vivo --- */
.live{width:6px; height:6px; border-radius:50%; background:var(--ok); display:inline-block;
  animation:pulse 2.4s var(--ease-io) infinite}

/* --- gradiente que corre · só em palavra única --- */
.t-grad--live{background-size:220% 220%; animation:shimmer 9s ease infinite}

/* ===================================================================
   SISTEMA DE ENTRADA · a escada
   Um bloco não entra inteiro. Ele entra em degraus, de cima para baixo,
   na ordem em que a pessoa vai ler. O atraso entre degraus é curto o
   bastante para não virar espera: 140ms, que é a metade de --t-base.

   Toda entrada usa a mesma curva. Curva diferente no mesmo bloco faz
   duas peças que saem juntas parecerem de sistemas diferentes.
   =================================================================== */

@keyframes desceEntra{ from{opacity:0; transform:translateY(-16px)} to{opacity:1; transform:none} }
@keyframes sobeEntra{ from{opacity:0; transform:translateY(12px)}  to{opacity:1; transform:none} }
@keyframes linhaEntra{
  from{opacity:0; transform:translateY(24px); filter:blur(8px)}
  to{opacity:1; transform:none; filter:blur(0)} }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes flutua{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* o degrau · [data-entra] com o número do passo */
[data-entra]{animation:sobeEntra 820ms var(--ease) both}
[data-entra="topo"]{animation-name:desceEntra; animation-delay:0ms}
[data-entra="1"]{animation-delay:140ms}
[data-entra="2"]{animation-delay:280ms}
[data-entra="3"]{animation-delay:420ms}
[data-entra="4"]{animation-delay:560ms}
[data-entra="5"]{animation-delay:700ms}
[data-entra="6"]{animation-delay:840ms}
/* a linha de título entra com desfoque: é o único lugar onde ele cabe,
   porque uma linha longa precisa de mais peso de entrada que um rótulo */
[data-entra-linha]{animation:linhaEntra 900ms var(--ease) both}
[data-entra-linha="1"]{animation-delay:180ms}
[data-entra-linha="2"]{animation-delay:320ms}
[data-entra-linha="3"]{animation-delay:460ms}

/* ---- faixa que corre · logotipo de cliente, tecnologia, número ----
   O conteúdo é duplicado no HTML e a faixa anda metade da largura: é o
   que faz o laço fechar sem salto. Para no hover para dar tempo de ler. */
.marquee{overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-fita{display:flex; width:max-content; gap:var(--s-7);
  animation:marquee 26s linear infinite}
.marquee:hover .marquee-fita{animation-play-state:paused}
.marquee--lenta .marquee-fita{animation-duration:46s}

/* ---- peça que respira · só em elemento decorativo, nunca em texto ---- */
.flutua{animation:flutua 7s var(--ease-io) infinite}
.flutua--atraso{animation-delay:1.8s}

/* ===================================================================
   TEXTO QUE ACENDE PALAVRA POR PALAVRA
   A versão de leitura está em effects.css ([data-reveal]), ligada ao
   scroll. Esta é a versão de destaque: a palavra em foco recebe cor de
   marca e halo, a já lida fica branca, a que vem fica apagada.
   Usar em UMA frase por página. Duas viram karaokê.
   =================================================================== */
.lyric .w{display:inline-block; opacity:.18; color:var(--text-weak);
  transform:translateY(14px); filter:blur(2px);
  transition:opacity 520ms var(--ease), color 520ms var(--ease),
             transform 520ms var(--ease), filter 520ms var(--ease),
             text-shadow 520ms var(--ease)}
.lyric .w.on{opacity:1; color:var(--accent); transform:none; filter:blur(0);
  text-shadow:0 0 18px rgba(21,171,216,.62), 0 0 44px rgba(21,171,216,.26)}
.lyric .w.lida{opacity:1; color:var(--text); transform:none; filter:blur(0);
  text-shadow:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js .rv{opacity:1; transform:none}
  .js .rv-line{transform:none}
  [data-entra],[data-entra-linha]{opacity:1; transform:none; filter:none}
  .marquee-fita{animation:none; flex-wrap:wrap}
  .lyric .w,.lyric .w.on,.lyric .w.lida{opacity:1; color:var(--text);
    transform:none; filter:none; text-shadow:none}
}