/* Pináculo Sites, motion.css
 * As entradas, o stagger, os elementos vivos, e reduced motion honrado
 * completo. Depende de tokens.css. Par de reveal.js.
 *
 * Vocabulário de entradas: varie entre seções vizinhas. Fade-up em tudo é
 * a assinatura mais óbvia de site gerado.
 */

/* ============================================= entradas de seção */
/* Os estados são prefixados com a classe do container para ganharem a
 * cascata. Uma regra posterior pode cancelar a animação silenciosamente. */

[data-entrada]{--atraso:0ms}

/* subir e assentar: o default quieto */
[data-entrada="subir"] > *{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--d-lento) var(--ease-saida) var(--atraso),
             transform var(--d-lento) var(--ease-saida) var(--atraso);
}
[data-entrada="subir"].in > *{opacity:1;transform:none}

/* revelar por máscara: para headline e citação */
[data-entrada="mascara"] .mascara{
  display:block;overflow:hidden;
  /* espaço para os rabos: g, y, p e q seriam cortados */
  padding-block:.14em;margin-block:-.14em;
}
[data-entrada="mascara"] .mascara > *{
  display:block;transform:translateY(110%);
  transition:transform var(--d-cena) var(--ease-saida) var(--atraso);
}
[data-entrada="mascara"].in .mascara > *{transform:none}

/* escala de dentro: para imagem e card de prova */
[data-entrada="escala"] > *{
  opacity:0;transform:scale(.94);
  transition:opacity var(--d-lento) var(--ease-saida) var(--atraso),
             transform var(--d-cena) var(--ease-saida) var(--atraso);
}
[data-entrada="escala"].in > *{opacity:1;transform:none}

/* cortina lateral: para seção dividida 50/50 */
[data-entrada="cortina"] > *:nth-child(odd){
  opacity:0;transform:translateX(-32px);
  transition:opacity var(--d-lento) var(--ease-saida) var(--atraso),
             transform var(--d-lento) var(--ease-saida) var(--atraso);
}
[data-entrada="cortina"] > *:nth-child(even){
  opacity:0;transform:translateX(32px);
  transition:opacity var(--d-lento) var(--ease-saida) var(--atraso),
             transform var(--d-lento) var(--ease-saida) var(--atraso);
}
[data-entrada="cortina"].in > *{opacity:1;transform:none}

/* clip progressivo: para imagem sangrada e antes/depois */
[data-entrada="clip"] > *{
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--d-cena) var(--ease-saida) var(--atraso);
}
[data-entrada="clip"].in > *{clip-path:inset(0 0 0 0)}

/* linha que desenha: para divisor, motivo e gráfico SVG */
.linha-desenha path,.linha-desenha line,.linha-desenha polyline{
  stroke-dasharray:var(--len,1000);
  stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 1400ms var(--ease-estado) var(--atraso);
}
.in .linha-desenha path,.in .linha-desenha line,.in .linha-desenha polyline,
.linha-desenha.in path{stroke-dashoffset:0}

/* ============================================= stagger */
/* 60 a 150ms em ordem de leitura. Nada de delay igual nem aleatório. */

[data-stagger] > *:nth-child(1){--atraso:0ms}
[data-stagger] > *:nth-child(2){--atraso:calc(var(--stagger) * 1)}
[data-stagger] > *:nth-child(3){--atraso:calc(var(--stagger) * 2)}
[data-stagger] > *:nth-child(4){--atraso:calc(var(--stagger) * 3)}
[data-stagger] > *:nth-child(5){--atraso:calc(var(--stagger) * 4)}
[data-stagger] > *:nth-child(6){--atraso:calc(var(--stagger) * 5)}
[data-stagger] > *:nth-child(n+7){--atraso:calc(var(--stagger) * 6)}

/* APOSENTE os delays depois da entrada, senão o hover do terceiro card fica
 * atrasado para sempre. A especificidade tem que empatar ou ganhar as
 * regras de :nth-child acima (:nth-child conta como classe), por isso os
 * dois seletores de classe. */
[data-stagger].in.pronto > *:nth-child(n){--atraso:0ms;transition-delay:0ms}

/* ============================================= elementos vivos */
/* Um por seção, nível de sussurro, ciclo de 4s ou mais, delay negativo
 * para já estar no meio do ciclo no primeiro paint. */

.vivo-pulso{position:relative}
.vivo-pulso::after{
  content:"";position:absolute;inset:-20%;pointer-events:none;
  border-radius:inherit;
  box-shadow:0 0 60px 10px var(--acento-sussurro);
  opacity:0;
}
/* a sombra fica em força total no pseudo-elemento e só a OPACIDADE anima */
.na-tela .vivo-pulso::after{animation:pulso 6s var(--ease-estado) infinite;animation-delay:-2.1s}
@keyframes pulso{0%,100%{opacity:.25}50%{opacity:.7}}

.vivo-deriva{animation:none}
.na-tela .vivo-deriva{animation:deriva 9s var(--ease-estado) infinite alternate;animation-delay:-3.4s}
@keyframes deriva{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-8px,0)}}

.vivo-hachura{
  background-image:repeating-linear-gradient(135deg,
    var(--linha) 0 1px, transparent 1px 9px);
  background-size:200% 100%;
}
.na-tela .vivo-hachura{animation:hachura 14s linear infinite;animation-delay:-5s}
@keyframes hachura{from{background-position:0 0}to{background-position:120px 0}}

/* ============================================= pausa global */
/* animation-play-state NÃO é herdada: pôr num container silenciosamente
 * nunca chega nos filhos nem nos pseudo-elementos. Este é o padrão que
 * não falha, alternado no visibilitychange. */
body.pausado *,
body.pausado *::before,
body.pausado *::after{animation-play-state:paused !important}

/* ============================================= o momento interativo */

.hold{position:relative;--hold:0}
.hold__barra{
  height:3px;background:var(--linha);overflow:hidden;border-radius:2px;
}
.hold__barra::after{
  content:"";display:block;height:100%;width:100%;
  background:var(--acento);
  transform:scaleX(var(--hold));transform-origin:left;
  transition:transform 120ms linear;
}
/* soltar antes volta suave, nunca zera de estalo */
.hold.soltando .hold__barra::after{transition:transform 700ms var(--ease-saida)}
.hold__revelado > *{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--d-medio) var(--ease-saida) var(--atraso),
             transform var(--d-medio) var(--ease-saida) var(--atraso);
}
.hold.completo .hold__revelado > *{opacity:1;transform:none}

/* ============================================= reduced motion */
/* Honrado COMPLETO: elementos e pseudo-elementos, todo delay zerado, todo
 * elemento coreografado no estado final terminado. */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:1ms !important;
    transition-delay:0ms !important;
  }
  [data-entrada] > *,
  [data-entrada] .mascara > *{opacity:1 !important;transform:none !important}
  [data-entrada="clip"] > *{clip-path:none !important}
  .linha-desenha path,.linha-desenha line,.linha-desenha polyline{stroke-dashoffset:0 !important}
  .hold .hold__revelado > *{opacity:1 !important;transform:none !important}
  .vivo-pulso::after{opacity:.4 !important}
}

/* O mesmo estado, aplicado por classe quando a preferência vira AO VIVO
 * com a página aberta. Sem isto, virar reduced motion no meio da sessão
 * deixa metade da página congelada no estado inicial. */
body.sem-movimento [data-entrada] > *,
body.sem-movimento [data-entrada] .mascara > *{opacity:1 !important;transform:none !important}
body.sem-movimento [data-entrada="clip"] > *{clip-path:none !important}
body.sem-movimento .linha-desenha path,
body.sem-movimento .linha-desenha line,
body.sem-movimento .linha-desenha polyline{stroke-dashoffset:0 !important}
body.sem-movimento .hold .hold__revelado > *{opacity:1 !important;transform:none !important}
body.sem-movimento *{transition-delay:0ms !important}

/* ============================================= scroll suave (Lenis) */
/* Requisitos da biblioteca. Par de kit/suave.js. */
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}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ============================================= cursor em canvas */
/* Par de kit/cursor.js. O canvas nunca intercepta clique. */
.cursor-canvas{
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;
}
/* o cursor nativo some só onde ele não faz falta: em campo de texto ele
 * continua, porque esconder o I-beam atrapalha de verdade */
html.tem-cursor,
html.tem-cursor a,
html.tem-cursor button,
html.tem-cursor [data-cursor]{cursor:none}
html.tem-cursor input,
html.tem-cursor textarea,
html.tem-cursor select{cursor:auto}

@media (pointer:coarse){ .cursor-canvas{display:none} }
@media (prefers-reduced-motion:reduce){ .cursor-canvas{display:none} }