/* Base das três landing pages da imersão: mecânica dos efeitos. Cores e letras ficam no CSS de cada versão. */
:root { --suave: cubic-bezier(.22, 1, .36, 1); interpolate-size: allow-keywords; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.caixa { width: min(1200px, 100% - 40px); margin-inline: auto; }
.estreita { width: min(860px, 100% - 40px); }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
main > section { position: relative; }
canvas[data-particulas] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* entradas ao rolar (só com JS: sem ele, tudo fica visível) */
.js [data-fx] { transition: opacity 1s var(--suave), transform 1s var(--suave), filter 1s var(--suave), clip-path 1.3s var(--suave); transition-delay: calc(var(--n, 0) * 90ms); }
.js [data-fx="up"]:not(.on) { opacity: 0; transform: translateY(40px); }
.js [data-fx="fade"]:not(.on) { opacity: 0; }
.js [data-fx="zoom"]:not(.on) { opacity: 0; transform: scale(.9); }
.js [data-fx="blur"]:not(.on) { opacity: 0; filter: blur(14px); transform: translateY(24px); }
.js [data-fx="sobe"] { display: block; }
.js [data-fx="sobe"]:not(.on) { opacity: 0; transform: translateY(70%) rotate(2deg); }
.js [data-fx="cortina"]:not(.on) { clip-path: inset(0 0 100% 0); }
.js [data-fx="cortina"] { clip-path: inset(0 0 0 0); }
.js [data-fx="cortina"] img { transition: transform 1.6s var(--suave); }
.js [data-fx="cortina"]:not(.on) img { transform: scale(1.25); }

/* palavras que sobem de trás de uma máscara */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em .04em .16em 0; margin-bottom: -.16em; }
[data-split] .w > span { display: inline-block; transition: transform 1s var(--suave); transition-delay: calc(var(--i, 0) * 55ms); }
.js [data-split]:not(.on) .w > span { transform: translateY(115%); }

/* palavras que acendem com a rolagem */
[data-ler] .l { transition: opacity .4s, color .4s; opacity: .18; }
[data-ler] .l.acesa { opacity: 1; }

/* faixa que anda de lado (presa na tela) */
.faixa.viva .faixa__fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.faixa__trilho { display: flex; gap: 28px; padding-inline: max(20px, calc((100vw - 1200px) / 2)); will-change: transform; }
.faixa:not(.viva) .faixa__trilho { overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 80px; }
.faixa:not(.viva) .painel { scroll-snap-align: center; }

/* contagem */
.contagem { display: flex; gap: 12px; }
.contagem div { display: grid; justify-items: center; min-width: 64px; }
.contagem b { font-variant-numeric: tabular-nums; }
.contagem b.vira { animation: vira .5s var(--suave); }
@keyframes vira { from { transform: translateY(-40%); opacity: 0; } }

/* data com o aviso de ilustrativa */
.data { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.data__aviso { padding: 3px 10px; border-radius: 999px; font-size: .75rem; letter-spacing: .04em; border: 1px dashed currentColor; opacity: .85; }

/* perguntas */
.pergunta summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: "+"; transition: transform .45s var(--suave); }
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta::details-content { height: 0; overflow: clip; transition: height .5s var(--suave), content-visibility .5s allow-discrete; }
.pergunta[open]::details-content { height: auto; }

/* progresso, topo e botão fixo */
.progresso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; transform-origin: left; transform: scaleX(0); }
.topo { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 24px; padding: 16px max(20px, calc((100vw - 1240px) / 2)); transition: background .4s, backdrop-filter .4s, padding .4s; }
.topo nav { display: flex; gap: 26px; margin-left: auto; }
.topo .botao--mini { margin-left: auto; }
.topo nav + .botao--mini { margin-left: 0; }
.zap-fixo { position: fixed; z-index: 45; inset: auto 14px 14px; display: none; align-items: center; justify-content: center; gap: 10px; padding: 15px 18px; border-radius: 999px; text-decoration: none; font-weight: 700; transform: translateY(160%); transition: transform .35s var(--suave); }
.zap-fixo.ver { transform: none; }
.botao { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: translate .25s, box-shadow .35s, background .35s, color .35s; }

/* cursor próprio (escondido no toque) */
.cursor, .cursor-ponto { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; border-radius: 50%; }
.cursor { width: 40px; height: 40px; margin: -20px 0 0 -20px; transition: width .3s var(--suave), height .3s var(--suave), margin .3s var(--suave), background .3s; }
.cursor.sobre { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
.cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; }

.pe { padding: 48px 20px 110px; text-align: center; font-size: .875rem; line-height: 1.7; }
.pe a { text-underline-offset: 4px; }

@media (max-width: 900px) {
	.topo nav, .topo .botao--mini { display: none; }
	.zap-fixo { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}