/* grade de pontos: o deslocamento é feito em fundo.js a partir do tempo (pausar e buscar dão a mesma imagem) */
.pontos{position:absolute;inset:-40px;background-image:radial-gradient(#D5DBE2 1.4px,transparent 1.6px);background-size:40px 40px;opacity:.55;transform-origin:50% 50%}
.formas{position:absolute;inset:0;pointer-events:none}
.formas i{position:absolute;left:0;top:0;display:block;border:2px solid var(--cor);opacity:.13;will-change:transform,opacity}
.formas i.trac{border-style:dashed}
/* tom da cena: cor da marca bem diluída por cima do fundo claro */
.fx-tom{position:absolute;inset:0;background:var(--cor);opacity:0;pointer-events:none}
/* linhas de grade que se desenham */
.fx-linhas,.fx-lg,.fx-icos,.fx-ig{position:absolute;inset:0;pointer-events:none}
.fx-lg{opacity:0}
.fx-lg i{position:absolute;display:block;background:#CBD3DC;transform:scaleX(0)}
.fx-lg i.h{height:1px}
.fx-lg i.v{width:1px;transform:scaleY(0)}
/* ícones do tema, quase apagados */
.fx-ig{opacity:0}
.fx-ig i{position:absolute;left:0;top:0;display:block;opacity:.09;will-change:transform}
.fx-ig svg{width:100%;height:100%;display:block}
/* marca d'água */
.fx-marca{position:absolute;right:-30px;bottom:110px;opacity:0;pointer-events:none}
.fx-marca img{display:block;height:230px;max-width:900px;object-fit:contain;filter:grayscale(1)}
.fx-marca span{display:block;font:800 240px/1 Inter,sans-serif;color:var(--ink);letter-spacing:-6px}
/* vinheta: sombra interna neutra nas bordas */
.fx-vinheta{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 240px rgba(20,32,42,.075)}
/* faixa lateral: pulso na troca de cena e marcador do andamento */
.fx-faixa{position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--cor);opacity:0;transform-origin:0 50%;pointer-events:none}
.fx-faixa-marca{position:absolute;left:4px;top:0;width:6px;height:44px;border-radius:3px;background:#fff;opacity:.55;pointer-events:none}
@media (prefers-reduced-motion:reduce){.formas i,.fx-ig i{will-change:auto}}