/* TRL AI — shared motion + polish layer Applies to pages that are not driven by GSAP/ScrollTrigger. Safety model: nothing is hidden unless JS has confirmed support by adding `.trl-motion-on` to . If the script fails, everything renders normally. */ /* ---------- scroll reveal ---------- */ .trl-motion-on [data-trl-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); will-change: opacity, transform; transition: opacity 620ms cubic-bezier(.22, .61, .36, 1), transform 620ms cubic-bezier(.22, .61, .36, 1); } .trl-motion-on [data-trl-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; } /* stagger children of a revealed group */ .trl-motion-on [data-trl-reveal][data-trl-delay="1"] { transition-delay: 70ms; } .trl-motion-on [data-trl-reveal][data-trl-delay="2"] { transition-delay: 140ms; } .trl-motion-on [data-trl-reveal][data-trl-delay="3"] { transition-delay: 210ms; } .trl-motion-on [data-trl-reveal][data-trl-delay="4"] { transition-delay: 280ms; } .trl-motion-on [data-trl-reveal][data-trl-delay="5"] { transition-delay: 350ms; } /* ---------- page entry ---------- */ .trl-motion-on body { animation: trl-page-in 520ms cubic-bezier(.22, .61, .36, 1) both; } @keyframes trl-page-in { from { opacity: 0; } to { opacity: 1; } } /* ---------- micro-interactions ---------- */ .trl-motion-on :where(.legal-policy-card, .policy-card, .career-card, .role-card, .contact-card) { transition: transform 320ms cubic-bezier(.22, .61, .36, 1), border-color 320ms ease, box-shadow 320ms ease; } .trl-motion-on :where(.legal-policy-card, .policy-card, .career-card, .role-card, .contact-card):hover { transform: translate3d(0, -3px, 0); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .75); } .trl-motion-on :where(a.legal-primary, .legal-contact a, button[type="submit"], .btn-primary) { transition: transform 200ms cubic-bezier(.22, .61, .36, 1), filter 200ms ease, box-shadow 200ms ease; } .trl-motion-on :where(a.legal-primary, .legal-contact a, button[type="submit"], .btn-primary):hover { transform: translate3d(0, -1px, 0); filter: brightness(1.07); } .trl-motion-on :where(a.legal-primary, .legal-contact a, button[type="submit"], .btn-primary):active { transform: translate3d(0, 0, 0) scale(.985); filter: brightness(.97); } /* underline sweep on inline prose + footer links */ .trl-motion-on :where(.legal-content a:not([class]), .legal-footer nav a, .trl-footer-links a) { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size 280ms cubic-bezier(.22, .61, .36, 1), color 220ms ease; } .trl-motion-on :where(.legal-content a:not([class]), .legal-footer nav a, .trl-footer-links a):hover { background-size: 100% 1px; } /* table-of-contents active state gets a soft slide */ .trl-motion-on .legal-toc a { transition: color 220ms ease, transform 220ms cubic-bezier(.22, .61, .36, 1); } .trl-motion-on .legal-toc a.is-active { transform: translate3d(3px, 0, 0); } /* ---------- smooth in-page anchors ---------- */ .trl-motion-on { scroll-behavior: smooth; } /* ---------- accessibility: motion off ---------- */ @media (prefers-reduced-motion: reduce) { .trl-motion-on [data-trl-reveal], .trl-motion-on [data-trl-reveal].is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; } .trl-motion-on body { animation: none !important; } .trl-motion-on { scroll-behavior: auto !important; } .trl-motion-on :where(.legal-policy-card, .policy-card, .career-card, .role-card, .contact-card):hover, .trl-motion-on :where(a.legal-primary, .legal-contact a, button[type="submit"], .btn-primary):hover { transform: none !important; } } /* Coarse pointers get no hover lift — it only ever fires as a sticky state. */ @media (hover: none) { .trl-motion-on :where(.legal-policy-card, .policy-card, .career-card, .role-card, .contact-card):hover { transform: none; box-shadow: none; } }