/* _polish.css — camada de reveal-ao-rolar (premium scroll, leve). Só age quando o JS marca . Sem JS ou com prefers-reduced-motion, tudo fica visível e estático (progressive). */ .js-anim [data-rv] { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--rd, 0s); will-change: opacity, transform; } .js-anim [data-rv].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-anim [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ===== Entrada do hero (no load) — headline palavra por palavra ===== */ /* esconde o grupo do hero já no 1º paint (js-anim entra no ) */ .js-anim .herotext__h1 { opacity: 0; } .js-anim .herotext__sub, .js-anim .herotext__proofs, .js-anim .herotext__ctas { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .hero-in .herotext__h1 { opacity: 1; } .hero-in .herotext__sub { transition-delay: .38s; } .hero-in .herotext__proofs { transition-delay: .52s; } .hero-in .herotext__ctas { transition-delay: .64s; } .hero-in .herotext__sub, .hero-in .herotext__proofs, .hero-in .herotext__ctas { opacity: 1; transform: none; } /* máscara por palavra (o padding/margin compensa descendentes tipo g, p, í) */ .rv-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } .rv-word__i { display: inline-block; transform: translateY(115%); transition: transform .8s cubic-bezier(.22,1,.36,1); transition-delay: var(--wd, 0s); } .hero-in .rv-word__i { transform: none; } @media (prefers-reduced-motion: reduce) { .js-anim .herotext__h1, .js-anim .herotext__sub, .js-anim .herotext__proofs, .js-anim .herotext__ctas { opacity: 1 !important; transform: none !important; } .rv-word__i { transform: none !important; } } /* ===== Barra de progresso de scroll ===== */ #rv-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: #2FC097; z-index: 9999; transition: transform .08s linear; will-change: transform; } @media (prefers-reduced-motion: reduce) { #rv-progress { display: none; } }