/* ============================================================ FroX — Movimento Princípio: a animação explica a hierarquia, não decora. Tudo anima só transform e opacity (propriedades compostas na GPU). ============================================================ */ /* ---------- Reveal no scroll --------------------------------- Estado inicial aplicado só quando o JS confirma suporte a IntersectionObserver (classe .js no ). Sem JS, o conteúdo aparece normalmente — nunca fica invisível. */ .js [data-reveal], .js [data-reveal-app] { opacity: 0; transform: translateY(22px); will-change: transform, opacity; } /* Quando o GSAP assume, ele controla opacity/transform via fromTo(). O estado oculto do CSS é descartado para não competir por especificidade — quem esconde e revela passa a ser o GSAP. */ .gsap [data-reveal], .gsap [data-reveal-app] { opacity: 1; transform: none; will-change: auto; } /* Nada de esconder via CSS quando o GSAP está ativo: `clearProps` remove o estilo inline no fim da tween e a regra CSS voltaria a valer, deixando o elemento invisível de novo. O estado inicial é aplicado pelo próprio GSAP (gsap.set no início de sectionReveals). */ .js [data-reveal].is-visible, .js [data-reveal-app].is-visible { opacity: 1; transform: none; transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); } /* Escalonamento: cada item entra logo após o anterior */ [data-reveal-delay="1"] { transition-delay: 90ms; } [data-reveal-delay="2"] { transition-delay: 180ms; } [data-reveal-delay="3"] { transition-delay: 270ms; } [data-reveal-delay="4"] { transition-delay: 360ms; } /* A mock do app entra com escala e profundidade */ .js [data-reveal-app] { transform: translateY(34px) scale(0.965); } .js [data-reveal-app].is-visible { transform: none; transition: opacity var(--d-slower) var(--e-out), transform var(--d-slower) var(--e-out); } /* Depois da entrada, libera a GPU */ .is-visible { } .reveal-done { will-change: auto; } /* ---------- Tilt 3D nos cards ------------------------------- O JS alimenta --rx/--ry; o CSS faz a interpolação. */ [data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform var(--d-base) var(--e-out); } [data-tilt].is-tilting { transition: transform 90ms linear; } /* ---------- Foco visível dentro de superfícies escuras ------- */ .section--dark :focus-visible, .cta :focus-visible, .footer :focus-visible { box-shadow: 0 0 0 2px var(--dark), 0 0 0 4px var(--brand-300); } /* ---------- Estado de carregamento inicial ------------------- Evita "flash" da fonte antes do CSS assentar. */ .js body { opacity: 0; } .js body.is-ready { opacity: 1; transition: opacity 220ms ease-out; } /* ---------- Contador de KPI --------------------------------- */ .kpi__value { transition: color var(--d-base) var(--e-out); } /* ---------- Barra de rolagem --------------------------------- Detalhe pequeno que sinaliza cuidado. */ @supports selector(::-webkit-scrollbar) { ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg-subtle); } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); border: 3px solid var(--bg-subtle); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); } } html { scrollbar-color: var(--line-2) var(--bg-subtle); scrollbar-width: thin; } /* ---------- Seleção de texto na cor da marca ---------------- */ ::selection { background: oklch(var(--brand-l) var(--brand-c) var(--brand-h) / 0.22); color: var(--ink); } /* ---------- Reduced motion: desliga o que é decorativo ------- As regras globais em tokens.css já cortam durações; aqui garantimos que nada fique preso num estado invisível. */ @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-reveal-app] { opacity: 1 !important; transform: none !important; } .marquee__track { animation: none; } .float-card { animation: none; } .chart__line { stroke-dashoffset: 0; } .chart__area { opacity: 1; } .app { transform: none; } [data-tilt] { transform: none !important; } }