/* 00 · MOVIMENTO E TEXTURA · kit compartilhado. Par de js/00-movimento.js.
   Regra: o estado final é o padrão; estados iniciais só valem sob html.mov (o JS liga). */

/* ---------- TEXTURA ---------- */
/* grão: película fixa sobre a página inteira */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
@media print{body::after{display:none}}

/* hachura de 15°: fundo de seção escura. Use .tx-hachura no <section> (fica atrás do conteúdo) */
.tx-hachura{position:relative;isolation:isolate}
.tx-hachura::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(105deg,transparent 0 46px,color-mix(in srgb,var(--texto) 5%,transparent) 46px 47px);
  -webkit-mask-image:linear-gradient(180deg,transparent,black 22%,black 70%,transparent);mask-image:linear-gradient(180deg,transparent,black 22%,black 70%,transparent)}

/* grade de pontos: fundo técnico discreto. .tx-pontos */
.tx-pontos{position:relative;isolation:isolate}
.tx-pontos::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--texto) 14%,transparent) 1px,transparent 1.2px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(120% 80% at 70% 30%,black,transparent 75%);mask-image:radial-gradient(120% 80% at 70% 30%,black,transparent 75%)}

/* luz que segue o ponteiro: [data-foco] + .tx-foco (o elemento precisa de position e overflow próprios) */
.tx-foco{position:relative;isolation:isolate}
.tx-foco::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 400ms var(--curva-entrada);
  background:radial-gradient(520px circle at var(--fx,50%) var(--fy,50%),color-mix(in srgb,var(--c-laranja) 16%,transparent),transparent 62%)}
.tx-foco.com-foco::after{opacity:1}

/* ---------- ROLAGEM ---------- */
/* barra de progresso da página: <i class="rolagem" data-rolagem> dentro do cabeçalho */
.rolagem{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--c-laranja);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
html:not(.mov) .rolagem{display:none}

/* paralaxe */
.mov [data-par]{transform:translate3d(0,var(--par,0px),0);will-change:transform}

/* título em linhas: <h2 data-linhas><span class="lin"><span>linha um</span></span>…</h2> */
[data-linhas] .lin{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
[data-linhas] .lin>span{display:block}
.mov [data-linhas] .lin>span{transform:translate3d(0,105%,0) skewX(-15deg);transform-origin:0 100%;
  transition:transform 900ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*90ms)}
.mov [data-linhas].na-vista .lin>span{transform:none}
[data-linhas] .lin:nth-child(2)>span{--i:1}[data-linhas] .lin:nth-child(3)>span{--i:2}[data-linhas] .lin:nth-child(4)>span{--i:3}

/* traço de 15° que se desenha: <i class="traco" data-vista></i> (altura definida por quem usa) */
.traco{display:block;width:2px;background:currentColor;transform:skewX(-15deg);transform-origin:50% 0}
.mov .traco[data-vista]{transform:skewX(-15deg) scaleY(0);transition:transform 800ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*120ms)}
.mov .traco[data-vista].na-vista{transform:skewX(-15deg) scaleY(1)}

/* cortina de 15°: revela uma moldura por um corte diagonal. .cortina + [data-vista] */
.mov .cortina[data-vista]{clip-path:polygon(0 0,0 0,-27% 100%,0 100%);transition:clip-path 1100ms cubic-bezier(.65,0,.35,1)}
.mov .cortina[data-vista]:not(.na-vista){opacity:0}
.mov .cortina[data-vista].na-vista{clip-path:polygon(0 0,127% 0,100% 100%,0 100%)}

/* ---------- PONTEIRO ---------- */
.mov-ponteiro [data-ima]{transform:translate3d(var(--ix,0px),var(--iy,0px),0);transition:transform 300ms cubic-bezier(.16,1,.3,1)}
.mov-ponteiro [data-inclina]{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 500ms cubic-bezier(.16,1,.3,1);transform-style:preserve-3d;position:relative}
.mov-ponteiro [data-inclina].inclinando{transition-duration:120ms}
.mov-ponteiro [data-inclina]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 300ms;
  background:radial-gradient(420px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.07),transparent 60%)}
.mov-ponteiro [data-inclina].inclinando::after{opacity:1}

/* ---------- FAIXA ROLANTE ---------- */
/* <div class="faixa"><ul class="faixa-trilho">…itens…</ul><ul class="faixa-trilho" aria-hidden="true">…cópia…</ul></div> */
.faixa{display:flex;overflow:hidden;gap:var(--faixa-vao,64px);-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.faixa-trilho{display:flex;flex:none;gap:var(--faixa-vao,64px);align-items:center;margin:0;padding:0;list-style:none;min-width:100%;justify-content:space-around}
.mov .faixa-trilho{animation:faixa var(--faixa-dur,38s) linear infinite}
.faixa.faixa-volta .faixa-trilho{animation-direction:reverse}
.faixa:hover .faixa-trilho,.faixa:focus-within .faixa-trilho{animation-play-state:paused}
@keyframes faixa{to{transform:translate3d(calc(-100% - var(--faixa-vao,64px)),0,0)}}
html:not(.mov) .faixa{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}
html:not(.mov) .faixa-trilho[aria-hidden="true"]{display:none}
html:not(.mov) .faixa-trilho{flex-wrap:wrap;justify-content:flex-start}

@media (prefers-reduced-motion:reduce){
  .faixa-trilho{animation:none!important}
}