/* ---------------------------------------------------------------- Subtle link: used for nav, footer links, partner marks. CSS hover instead of inline JS handlers so we don't burn re-renders on every pointer move. ---------------------------------------------------------------- */ .subtle-link { color: var(--text-secondary); transition: color 0.2s ease; cursor: pointer; } .subtle-link:hover { color: var(--text); } .partner-mark { opacity: 0.7; transition: opacity 0.2s ease; } .partner-mark:hover { opacity: 1; } /* Frosted-glass pad: used to keep text legible over busy backgrounds (e.g. AI Voice shader) */ .glass-pad { background: rgba(8, 7, 13, 0.45); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.05); } /* ---------------------------------------------------------------- Focus styles: accessible keyboard navigation. Visible only on keyboard focus (:focus-visible), never on mouse click: so the purple ring doesn't fight the hover treatments on buttons. ---------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 6px; transition: outline-color 0.15s ease; } .btn:focus-visible, button:focus-visible { outline-offset: 4px; } a:focus-visible { outline-offset: 2px; } /* ---------------------------------------------------------------- App shell: opacity handshake. Starts hidden, transitions to visible only after the heavy first-paint work (globe init, ScrollTrigger setup) has completed. The wrapper fade and the child stagger animations run in parallel so the page blends in rather than snapping. ---------------------------------------------------------------- */ .app-shell { opacity: 0; transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity; } .app-shell[data-ready="true"] { opacity: 1; } @media (prefers-reduced-motion: reduce) { .app-shell { transition: none; opacity: 1; } } /* ---------------------------------------------------------------- FOUC prevention: pre-hide animation targets in CSS so the first paint is already in the "ready to animate in" state. The .js-ready class is added by an inline