/* motion.css — base-kit BuildV · camada rica de movimento (etapa 7). Estados iniciais + FAIL-SAFE. Só transform/opacity (performático). */ /* FAIL-SAFE: sem JS (ou se o observer não disparar), o conteúdo APARECE. O html ganha .js inline no ; sem ela, tudo visível. */ html:not(.js) [data-reveal], html:not(.js) .hero-media, html:not(.js) [data-underline]{opacity:1 !important;transform:none !important} html:not(.js) [data-clip]{clip-path:none !important} /* Reveal on-scroll */ [data-reveal]{opacity:0;transform:translateY(24px); transition:opacity .7s ease, transform .7s var(--ease,cubic-bezier(.16,1,.3,1))} [data-reveal].is-in{opacity:1;transform:none} [data-delay="1"]{transition-delay:.12s}[data-delay="2"]{transition-delay:.24s}[data-delay="3"]{transition-delay:.36s} /* Hero — zoom invertido */ .hero-media{transform:scale(1.18);transition:transform 1.4s var(--ease,cubic-bezier(.16,1,.3,1))} .hero-media.is-in{transform:scale(1)} /* Título — sublinhado que desenha */ [data-underline]{background-image:linear-gradient(var(--c-accent),var(--c-accent)); background-repeat:no-repeat;background-position:0 100%;background-size:0 3px;transition:background-size .8s ease .2s} [data-underline].is-in{background-size:100% 3px} /* Timeline — linha que desenha */ [data-timeline] .line{transform:scaleY(0);transform-origin:top;transition:transform 1.2s ease} [data-timeline].is-in .line{transform:scaleY(1)} /* Parallax leve (faixas com foto real) — o JS só escreve a variável --py; quem monta o transform é o CSS. Isso deixa o hover do portfólio (.folio__item:hover img, em site.css) compor com o deslocamento em vez de ser atropelado por um transform inline do JS. .parallax-on só entra no quando o JS liga de fato (nunca em touch/RM — ver motion.js); sem ela, o elemento fica no scale/posição natural, sem folga desnecessária no mobile. */ [data-parallax]{--py:0px;will-change:transform} .parallax-on [data-parallax]{transform:translate3d(0,var(--py),0) scale(1.12)} .parallax-on .folio__item:hover img[data-parallax]{transform:translate3d(0,var(--py),0) scale(1.16)} /* Marquee */ .marquee{overflow:hidden} .marquee__track{display:inline-flex;gap:2rem;white-space:nowrap;animation:bk-mq 28s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} @keyframes bk-mq{to{transform:translateX(-50%)}} /* ⚠️ nunca animar transform em position:sticky (salta ao colar) — em pilha sticky, entrada só por opacity */ @media (prefers-reduced-motion: reduce){ [data-reveal],.hero-media,[data-underline],[data-timeline] .line{transition:none !important;transform:none !important;opacity:1 !important;background-size:100% 3px !important} .marquee__track{animation:none !important} }