/*
 * Movimento ligado ao scroll — estilos do módulo (acompanha /assets/js/movimento.js).
 * Cores ajustáveis no :root da página:
 *   --mov-cor       cor de destaque (barra de progresso)       padrão #0D97F0
 *   --mov-apagado   cor das palavras antes de acender          padrão #3A4552
 *   --mov-fundo     fundo da sequência de quadros              padrão #0A0C0F
 */

/* Base de celular (skills/emil-kowalski/mobile-native): sem flash cinza no toque,
   sem atraso no toque e sem selecionar o texto do botão ao segurar. */
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"] { touch-action: manipulation; }
button, [role="button"], .botao { -webkit-user-select: none; user-select: none; }

/* Lenis (rolagem suave no desktop) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Barra de progresso: <div class="mov-progresso"><span></span></div> dentro do topo fixo */
.mov-progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.mov-progresso span {
  display: block;
  height: 100%;
  background: var(--mov-cor, #0D97F0);
  box-shadow: 0 0 12px var(--mov-cor, #0D97F0);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: reduce) { .mov-progresso { display: none; } }

/* Palavras que acendem */
.mov-palavra { color: var(--mov-apagado, #3A4552); }

/* Faixa contínua */
.mov-faixa {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.mov-faixa .mov-faixa__trilho { display: flex; flex-wrap: nowrap; width: max-content; }
.mov-faixa .mov-faixa__trilho > * { flex: none; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Sequência de quadros                                                */
/*                                                                     */
/* <section class="mov-seq" data-pasta="/assets/sequencia/"            */
/*          data-quadros="150" data-limites="0,.26,.55,.76">           */
/*   <div class="mov-seq__fixo">                                       */
/*     <div class="mov-seq__topo"> título + <ol class="mov-seq__passos"> */
/*     <div class="mov-seq__tela">                                     */
/*       <picture class="mov-seq__estatica"> (último quadro)           */
/*       <canvas class="mov-seq__canvas" aria-hidden="true">           */
/*                                                                     */
/* Sem JavaScript ou com "reduzir movimento": mostra o último quadro   */
/* e as etapas em lista.                                               */
/* ------------------------------------------------------------------ */
.mov-seq__passos { margin: 0; padding: 0; list-style: none; }
.mov-seq__tela { position: relative; }
.mov-seq__estatica img { width: 100%; height: auto; }
.mov-seq__canvas { display: none; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .mov-seq:not(.mov-seq--estatica) { height: calc(var(--mov-seq-altura, 420) * 1vh); height: calc(var(--mov-seq-altura, 420) * 1svh); }
  .mov-seq:not(.mov-seq--estatica) .mov-seq__fixo {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }
  .mov-seq:not(.mov-seq--estatica) .mov-seq__passos { position: relative; min-height: 5.6em; }
  .mov-seq:not(.mov-seq--estatica) .mov-seq__passos > li { position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; }
  .mov-seq:not(.mov-seq--estatica) .mov-seq__passos > li:first-child { opacity: 1; visibility: visible; }
  .mov-seq:not(.mov-seq--estatica) .mov-seq__tela { min-height: 0; }
  .mov-seq:not(.mov-seq--estatica) .mov-seq__estatica { display: none; }
  .mov-seq:not(.mov-seq--estatica) .mov-seq__canvas {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
    mask-composite: intersect;
  }
}