/* Animações. Os efeitos dependem de JS, então ficam atrás da classe .js que js/main.js coloca no — sem script, a página aparece inteira e parada. */ @keyframes px-cue { 0%, 100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(8px); opacity: 0.4; } } /* ── Entrada ao rolar ── O elemento começa apagado e deslocado; o IntersectionObserver adiciona .is-visible quando ele entra na viewport. */ :root.js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); } :root.js [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms), transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms); } [data-delay='1'] { --reveal-delay: 90ms; } [data-delay='2'] { --reveal-delay: 180ms; } [data-delay='3'] { --reveal-delay: 270ms; } /* ── Parallax ── O transform e o opacity são calculados no scroll (js/main.js); aqui ficam só as propriedades estáveis. */ :root.js [data-depth] { transform-origin: 50% 100%; will-change: transform, opacity; } @media (prefers-reduced-motion: reduce) { :root.js [data-reveal] { opacity: 1; transform: none; transition: none; } :root.js [data-depth] { transform: none !important; opacity: 1 !important; will-change: auto; } .scroll-cue { animation: none; } }