/* Start custom CSS */@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .sx-hero { view-timeline: --sx-hero block; } .sx-ess { view-timeline: --sx-ess block; } .sx-tri { view-timeline: --sx-tri block; } .sx-hero-top, .sx-hero-bottom, .sx-hero-cta, .sx-hero-b1, .sx-hero-b2, .sx-hero-b3, .sx-hero-video, .sx-hero-vcopy { animation-timing-function: linear; animation-fill-mode: both; animation-duration: 1ms; animation-timeline: --sx-hero; animation-range: cover 25% cover 75%; } .sx-hero-top { animation-name: sx-k-top; } .sx-hero-bottom { animation-name: sx-k-bottom; } .sx-hero-cta { animation-name: sx-k-cta; } .sx-hero-b1 { animation-name: sx-k-b1; } .sx-hero-b2 { animation-name: sx-k-b2; } .sx-hero-b3 { animation-name: sx-k-b3; } .sx-hero-video { animation-name: sx-k-video; } .sx-hero-vcopy { animation-name: sx-k-vcopy; } @keyframes sx-k-top { 0% { opacity: 1; transform: none; } 44%, 100% { opacity: 0; transform: translateY(-16vh); } } @keyframes sx-k-bottom { 0% { opacity: 1; transform: none; } 44%, 100% { opacity: 0; transform: translateY(14vh); } } @keyframes sx-k-cta { 0% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(6vh); pointer-events: none; } } @keyframes sx-k-b2 { 0% { opacity: 1; transform: translateY(62vh) rotate(-3deg) scale(.92); } 34% { opacity: 1; transform: translateY(-2vh) rotate(2deg) scale(1.06); } 56%, 100% { opacity: 0; transform: translateY(-10vh) rotate(4deg) scale(1.14); } } @keyframes sx-k-b1 { 0% { opacity: 1; transform: translateY(70vh) rotate(-8deg); } 34% { opacity: 1; transform: translateY(4vh) rotate(-3deg); } 54%, 100% { opacity: 0; transform: translateY(-8vh) rotate(3deg); } } @keyframes sx-k-b3 { 0% { opacity: 1; transform: translateY(66vh) rotate(8deg); } 34% { opacity: 1; transform: translateY(2vh) rotate(3deg); } 54%, 100% { opacity: 0; transform: translateY(-10vh) rotate(-3deg); } } @keyframes sx-k-video { 0%, 38% { opacity: 0; transform: scale(.15); border-radius: 32px; } 52% { opacity: 1; transform: scale(.32); border-radius: 32px; } 86%, 100% { opacity: 1; transform: scale(1); border-radius: 0; } } @keyframes sx-k-vcopy { 0%, 64% { opacity: 0; transform: translateY(6vh); } 80%, 100% { opacity: 1; transform: none; } } .sx-ess-l1, .sx-ess-l2, .sx-ess-l3, .sx-ess-l4, .sx-ess-photo, .sx-ess-copy { animation-timing-function: linear; animation-fill-mode: both; animation-duration: 1ms; animation-timeline: --sx-ess; animation-range: cover 28% cover 72%; } .sx-ess-l1, .sx-ess-l3 { animation-name: sx-k-fadeout; } .sx-ess-l2 { animation-name: sx-k-ess-r; } .sx-ess-l4 { animation-name: sx-k-ess-l; } .sx-ess-photo { animation-name: sx-k-ess-photo; } .sx-ess-copy { animation-name: sx-k-ess-copy; } @keyframes sx-k-fadeout { 0% { opacity: 1; } 40%, 100% { opacity: 0; } } @keyframes sx-k-ess-r { 0% { opacity: 1; transform: none; } 60% { opacity: 1; transform: translateX(10vw); } 85%, 100% { opacity: 0; transform: translateX(16vw); } } @keyframes sx-k-ess-l { 0% { opacity: 1; transform: none; } 60% { opacity: 1; transform: translateX(-10vw); } 85%, 100% { opacity: 0; transform: translateX(-16vw); } } @keyframes sx-k-ess-photo { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: scale(.62); } 78%, 100% { opacity: 1; transform: scale(2.15); } } @keyframes sx-k-ess-copy { 0%, 62% { opacity: 0; transform: translateY(4vh); pointer-events: none; } 86%, 100% { opacity: 1; transform: none; } } .sx-tri-w1, .sx-tri-w2, .sx-tri-w3, .sx-tri-d1, .sx-tri-d2, .sx-tri-d3, .sx-tri-i1, .sx-tri-i2, .sx-tri-i3 { animation-timing-function: linear; animation-fill-mode: both; animation-duration: 1ms; animation-timeline: --sx-tri; animation-range: cover 25% cover 75%; } .sx-tri-w1 { animation-name: sx-k-w1; } .sx-tri-w2 { animation-name: sx-k-w2; } .sx-tri-w3 { animation-name: sx-k-w3; } .sx-tri-d1 { animation-name: sx-k-d1; } .sx-tri-d2 { animation-name: sx-k-d2; } .sx-tri-d3 { animation-name: sx-k-d3; } .sx-tri-i1 { animation-name: sx-k-i1; } .sx-tri-i2 { animation-name: sx-k-i2; } .sx-tri-i3 { animation-name: sx-k-i3; } @keyframes sx-k-w1 { 0%, 18% { opacity: 1; } 38%, 100% { opacity: .18; } } @keyframes sx-k-w2 { 0%, 18% { opacity: .18; } 38%, 60% { opacity: 1; } 78%, 100% { opacity: .18; } } @keyframes sx-k-w3 { 0%, 58% { opacity: .18; } 78%, 100% { opacity: 1; } } @keyframes sx-k-d1 { 0%, 22% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(2vh); } } @keyframes sx-k-d2 { 0%, 26% { opacity: 0; transform: translateY(2vh); } 38%, 54% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-2vh); } } @keyframes sx-k-d3 { 0%, 62% { opacity: 0; transform: translateY(2vh); pointer-events: none; } 76%, 100% { opacity: 1; transform: none; } } @keyframes sx-k-i1 { 0% { transform: scale(1.14); } 34%, 100% { transform: scale(1.02); } } @keyframes sx-k-i2 { 0%, 28% { clip-path: inset(100% 0 0 0); } 44%, 100% { clip-path: inset(0 0 0 0); } } @keyframes sx-k-i3 { 0%, 60% { clip-path: inset(100% 0 0 0); } 76%, 100% { clip-path: inset(0 0 0 0); } } @media (max-width: 767px) { @keyframes sx-k-ess-photo { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: scale(.62); } 78%, 100% { opacity: 1; transform: scale(1.9); } } } .sx-muse { animation: sx-muse-drift linear both; animation-timeline: scroll(root); } @keyframes sx-muse-drift { 0% { transform: translateY(0); } 100% { transform: translateY(-30vh); } } } .sx-ring { animation: sx-spin-scroll linear both; animation-timeline: scroll(root); } @keyframes sx-spin-scroll { to { transform: rotate(720deg); } }  .sx-fin { view-timeline: --sx-fin block; } .sx-marquee p { animation: sx-mq-scroll linear both; animation-timeline: --sx-fin; animation-range: cover 0% cover 100%; } @keyframes sx-mq-scroll { from { transform: translateX(0); } to { transform: translateX(-10%); } }    } @supports not (animation-timeline: view()) { .sx-hero, .sx-ess, .sx-tri { height: auto !important; } .sx-hero .sx-stage, .sx-ess .sx-stage, .sx-tri .sx-stage { position: relative; height: auto; min-height: 100svh; overflow: visible; } .sx-hero-video { display: none; } .sx-ess-lines { position: relative !important; } .sx-ess-photo { position: relative !important; left: auto !important; top: auto !important; margin: 2rem auto !important; } .sx-ess-copy { position: relative !important; inset: auto !important; margin: 2rem auto; } .sx-tri-d1, .sx-tri-d2, .sx-tri-d3 { position: relative !important; margin-bottom: 1rem; } .sx-tri-i2, .sx-tri-i3 { display: none; } } @media (prefers-reduced-motion: reduce) { .sx-hero, .sx-ess, .sx-tri { height: auto !important; } .sx-hero .sx-stage, .sx-ess .sx-stage, .sx-tri .sx-stage { position: relative; height: auto; min-height: 100svh; overflow: visible; } .sx-hero-video { display: none; } .sx-ess-lines { position: relative !important; } .sx-ess-photo { position: relative !important; left: auto !important; top: auto !important; margin: 2rem auto !important; } .sx-ess-copy { position: relative !important; inset: auto !important; margin: 2rem auto; } .sx-tri-d1, .sx-tri-d2, .sx-tri-d3 { position: relative !important; margin-bottom: 1rem; } .sx-tri-i2, .sx-tri-i3 { display: none; } } /* rev 2026-10-13 copy and CTA fixes; motion audit 2026-10-28: hero text gap shortened, ring and marquee tied to scroll, drop bob removed *//* End custom CSS */