/* ===================================================================== Keystone Reg Advisory — motion.css Everything here is gated behind html.motion, which the script sets only when the visitor has not asked for reduced motion. If GSAP never initialises, that script removes the class after a short timeout, so no content can stay hidden. ===================================================================== */ /* ---------- Page transitions (cross-document View Transitions) ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: ks-vt-out 0.35s var(--ease-in-out) both; } ::view-transition-new(root) { animation: ks-vt-in 0.75s var(--ease-out) both; } @keyframes ks-vt-out { to { opacity: 0; } } @keyframes ks-vt-in { from { opacity: 0; transform: translateY(14px); } } /* ---------- Initial states for scroll-driven reveals ---------- */ html.motion [data-reveal="up"] { opacity: 0; transform: translateY(28px); } html.motion [data-reveal="rule"] { transform: scaleX(0); transform-origin: left; } html.motion [data-reveal="words"] { opacity: 0; } html.motion .principle__fill { clip-path: inset(0 100% 0 0); } html.motion .nav-index__fill { transform: scaleY(0); } /* Split-word masks (created by motion.js) */ /* text-indent is inherited, and inline-blocks apply it to their own first line — reset it so hanging punctuation on a parent can't shift the masks. */ .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.08em 0.14em 0; margin: 0 -0.08em -0.14em 0; text-indent: 0; } .w__i { display: inline-block; text-indent: 0; will-change: transform; } /* ---------- Home hero: the lock ---------- */ @keyframes ks-rise { from { transform: translateY(112%); } to { transform: none; } } @keyframes ks-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes ks-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes ks-lock-a { from { opacity: 0; transform: translate(-8%, -8%); } to { opacity: 1; transform: none; } } @keyframes ks-lock-b { from { opacity: 0; transform: translate(8%, 8%); } to { opacity: 1; transform: none; } } @keyframes ks-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } } @keyframes ks-key-in { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: none; } } html.motion .hero__title .line > span, html.motion .page-hero__title .line > span { animation: ks-rise 1.25s var(--ease-out) both; animation-delay: calc(0.18s + var(--i, 0) * 0.1s); } html.motion .hero__label, html.motion .page-hero__label { animation: ks-fade-up 1s var(--ease-out) 0.1s both; } html.motion .hero__base, html.motion .page-hero__lede, html.motion .page-hero__aside { animation: ks-fade-up 1.1s var(--ease-out) 0.75s both; } html.motion .hero__device .ks-device__a { animation: ks-lock-a 1.7s var(--ease-out) 0.3s both; } html.motion .hero__device .ks-device__b { animation: ks-lock-b 1.7s var(--ease-out) 0.3s both; } html.motion .hero__device .ks-line { animation: ks-draw 2s var(--ease-out) 0.3s both; } html.motion .hero__device .ks-block { animation: ks-pop 0.9s var(--ease-out) 1.2s both; } html.motion .hero__device .ks-node { animation: ks-pop 0.8s var(--ease-out) 1.45s both; } html.motion .hero__device .ks-key { animation: ks-key-in 1.2s var(--ease-out) 1.35s both; } html.motion .hero__cue i::after { animation: ks-cue 2.6s var(--ease-in-out) 2s infinite; } @keyframes ks-cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } } /* ---------- Footer: the brackets lock again ---------- */ html.motion .footer__device .ks-line { stroke-dashoffset: 1; } html.motion .footer__device .ks-device__a { opacity: 0; transform: translate(-10%, -10%); } html.motion .footer__device .ks-device__b { opacity: 0; transform: translate(10%, 10%); } html.motion .footer__device .ks-block, html.motion .footer__device .ks-node, html.motion .footer__device .ks-key { opacity: 0; } html.motion .footer__device.is-inview .ks-line { animation: ks-draw 2.2s var(--ease-out) 0.1s both; } html.motion .footer__device.is-inview .ks-device__a { animation: ks-lock-a 2s var(--ease-out) both; } html.motion .footer__device.is-inview .ks-device__b { animation: ks-lock-b 2s var(--ease-out) both; } html.motion .footer__device.is-inview .ks-block { animation: ks-pop 0.9s var(--ease-out) 1.1s both; } html.motion .footer__device.is-inview .ks-node { animation: ks-pop 0.8s var(--ease-out) 1.35s both; } html.motion .footer__device.is-inview .ks-key { animation: ks-key-in 1.2s var(--ease-out) 1.25s both; } /* ---------- Portrait brackets lock onto the image ---------- */ html.motion [data-lock]:not(.is-locked) .corner--tl { opacity: 0; transform: translate(-16px, -16px); } html.motion [data-lock]:not(.is-locked) .corner--br { opacity: 0; transform: translate(16px, 16px); } /* ---------- Reduced motion: a clean, static site ---------- */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .rotator { display: none; } .kinetic-static { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; } }