:root:not(#hx_) {
--hx-ease: cubic-bezier( .22, .61, .36, 1 );
--hx-soft: cubic-bezier( .16, 1, .3, 1 );
} @view-transition { navigation: auto; }
::view-transition-old( root ) { animation: hx-vt-out .28s ease both; }
::view-transition-new( root ) { animation: hx-vt-in .2s ease both; }
@keyframes hx-vt-out { to { opacity: 0; } }
@keyframes hx-vt-in { from { opacity: 0; } } @keyframes hx-rise {
from { opacity: 0; transform: translate3d( 0, var( --hx-rise, 26px ), 0 ); filter: blur( 5px ); }
}
@keyframes hx-drop {
from { opacity: 0; transform: translate3d( 0, -28px, 0 ); }
}
@keyframes hx-slide-l {
from { opacity: 0; transform: translate3d( -48px, 0, 0 ); filter: blur( 4px ); }
}
@keyframes hx-settle {
from { opacity: 0; transform: scale( .965 ); filter: blur( 6px ); }
}
@keyframes hx-fade { from { opacity: 0; } }
@keyframes hx-failsafe { to { opacity: 1; } } html.hx-motion:not( .hx-ready ):not(#hx_) body > :not( script ):not( style ):not( link ) { opacity: 0; } html.hx-motion:not( .hx-motion-js ):not( .hx-ready ):not(#hx_) body > :not( script ):not( style ):not( link ) { animation: hx-failsafe .01s 2.5s forwards; } html.hx-ready:not(#hx_) body > :not( script ):not( style ):not( link ) { animation: hx-fade .5s ease backwards; } html.hx-ready:not(#hx_) .hx-hd { animation: hx-drop .9s var( --hx-soft ) .05s backwards; } html.hx-ready:not(#hx_) .hx-cat__hero { animation: hx-rise 1.1s var( --hx-soft ) .3s backwards; } html.hx-ready:not(#hx_) :is( .hx-cat__bar, .hx-cat__tools ) { animation: hx-fade .9s ease .75s backwards; }
@media ( min-width: 1025px ) {
html.hx-ready:not(#hx_) .hx-cat__side { animation: hx-slide-l 1.1s var( --hx-soft ) .6s backwards; }
} html.hx-ready:not(#hx_) .hx-ah-banner__text > * { animation: hx-rise 1.1s var( --hx-soft ) backwards; }
html.hx-ready:not(#hx_) .hx-ah-banner__text > :nth-child( 1 ) { animation-delay: .3s; }
html.hx-ready:not(#hx_) .hx-ah-banner__text > :nth-child( 2 ) { animation-delay: .42s; }
html.hx-ready:not(#hx_) .hx-ah-banner__text > :nth-child( 3 ) { animation-delay: .54s; }
html.hx-ready:not(#hx_) .hx-ah-banner__text > :nth-child( 4 ) { animation-delay: .66s; }
html.hx-ready:not(#hx_) .hx-ah-banner__text > :nth-child( n+5 ) { animation-delay: .78s; }
html.hx-ready:not(#hx_) .hx-ah-stage { animation: hx-settle 1.4s var( --hx-soft ) .5s backwards; } @keyframes hx-out-l { to { opacity: 0; transform: translate3d( -48px, 0, 0 ); } }
@keyframes hx-in-l { from { opacity: 0; transform: translate3d( -48px, 0, 0 ); } } @media ( min-width: 1025px ) { html.hx-motion.hx-vswap-out:not(#hx_) .hx-cat__side > :not( .hx-cat__side-sp ) { animation: hx-out-l .3s cubic-bezier( .5, 0, .75, 0 ) forwards; pointer-events: none; } html.hx-motion.hx-vswap-hold:not(#hx_) .hx-cat__side > :not( .hx-cat__side-sp ) { opacity: 0; transform: translate3d( -48px, 0, 0 ); animation: none; pointer-events: none; } html.hx-motion.hx-vswap-in:not(#hx_) .hx-cat__side > :not( .hx-cat__side-sp ) { animation: hx-in-l .95s var( --hx-soft ) .22s backwards; }
} html.hx-motion:not(#hx_) .hx-cat__hero-text { transition: opacity .28s ease, transform .28s ease, filter .28s ease; }
html.hx-motion:is( .hx-vswap-out, .hx-vswap-hold ):not(#hx_) .hx-cat__hero-text { opacity: 0; transform: translate3d( 0, -10px, 0 ); filter: blur( 3px ); }
html.hx-motion.hx-vswap:not(#hx_) .hx-cat__hero-text { transition: none; }
html.hx-motion.hx-vswap:not(#hx_) .hx-cat__hero-text [data-hd-view] > * {
--hx-rise: 22px;
animation: hx-rise 1s var( --hx-soft ) .02s backwards;
}
html.hx-motion.hx-vswap:not(#hx_) .hx-cat__hero-text [data-hd-view] > :nth-child( 2 ) { animation-delay: .14s; } @keyframes hx-sink { to { opacity: 0; transform: translate3d( 0, 16px, 0 ); filter: blur( 3px ); } }
html.hx-motion.hx-vswap-out:not(#hx_) :is( .hx-pc, .hx-ctab ).is-in { animation: hx-sink .28s cubic-bezier( .5, 0, .75, 0 ) forwards; pointer-events: none; }
html.hx-motion.hx-vswap-hold:not(#hx_) :is( .hx-pc, .hx-ctab ) { opacity: 0; animation: none; } html.hx-motion:not(#hx_) :is( .hx-ah-head, .hx-ah-why__media, .hx-ah-why__body, .hx-ah-samples__body, .hx-ah-samples__fan, .hx-ah-faq, .hx-ah-contact, .hx-ah-stat, .hx-ah-usp, .hx-ah-steps > *, .hx-ah-marquee, .hx-pc, .hx-ctab, .hx-kt-hero, .hx-kt-q, .hx-kt-form, .hx-kt-card, .hx-kt-samples, .hx-kt-facts, .hx-kt-faq, .hx-tt-hero, .hx-tt__nav, .hx-tt-card, .hx-tt-block, .hx-tt-step, .hx-tt-faq, .hx-tt-contact, .hx-insp-hero, .hx-insp-head, .hx-insp-card, .hx-insp-guide, .hx-insp-cta, .hx-lm-shots, .hx-lm-info > *, .hx-lm-sec, .hx-lm-mas__item, .hx-wi-gal, .hx-wi-info > *, .hx-wi-sec, .hx-cl__head, .hx-cl-item, .hx-cl__area, .hx-cl__samples, .hx-cl-sum, .hx-ft-cta__in, .hx-ft-main > * ):not( .is-in ) { opacity: 0; animation: none; }
html.hx-motion:not( .hx-motion-js ):not(#hx_) :is( .hx-ah-head, .hx-ah-why__media, .hx-ah-why__body, .hx-ah-samples__body, .hx-ah-samples__fan, .hx-ah-faq, .hx-ah-contact, .hx-ah-stat, .hx-ah-usp, .hx-ah-steps > *, .hx-ah-marquee, .hx-pc, .hx-ctab, .hx-kt-hero, .hx-kt-q, .hx-kt-form, .hx-kt-card, .hx-kt-samples, .hx-kt-facts, .hx-kt-faq, .hx-tt-hero, .hx-tt__nav, .hx-tt-card, .hx-tt-block, .hx-tt-step, .hx-tt-faq, .hx-tt-contact, .hx-insp-hero, .hx-insp-head, .hx-insp-card, .hx-insp-guide, .hx-insp-cta, .hx-lm-shots, .hx-lm-info > *, .hx-lm-sec, .hx-lm-mas__item, .hx-wi-gal, .hx-wi-info > *, .hx-wi-sec, .hx-cl__head, .hx-cl-item, .hx-cl__area, .hx-cl__samples, .hx-cl-sum, .hx-ft-cta__in, .hx-ft-main > * ):not( .is-in ) { animation: hx-failsafe .01s 3s forwards; } html.hx-motion:not(#hx_) .hx-noanim.is-in { animation: none !important; }
html.hx-motion:not(#hx_) :is( .hx-ah-head, .hx-ah-why__body, .hx-ah-samples__body, .hx-ah-faq, .hx-ah-stat, .hx-ah-usp, .hx-ah-steps > *,
.hx-kt-q, .hx-kt-form, .hx-kt-card, .hx-kt-facts, .hx-kt-faq,
.hx-tt__nav, .hx-tt-card, .hx-tt-block, .hx-tt-step, .hx-tt-faq, .hx-tt-contact,
.hx-insp-head, .hx-insp-guide, .hx-insp-cta,
.hx-lm-info > *, .hx-lm-sec, .hx-wi-info > *, .hx-wi-sec,
.hx-cl__head, .hx-cl-item, .hx-cl__area, .hx-cl__samples, .hx-cl-sum,
.hx-ft-cta__in, .hx-ft-main > * ).is-in {
animation: hx-rise 1.1s var( --hx-soft ) var( --hx-d, 0ms ) backwards;
}
html.hx-motion:not(#hx_) :is( .hx-ah-why__media, .hx-ah-samples__fan, .hx-ah-contact, .hx-ah-marquee,
.hx-kt-hero, .hx-kt-samples, .hx-tt-hero, .hx-insp-hero, .hx-lm-shots, .hx-wi-gal ).is-in {
animation: hx-settle 1.3s var( --hx-soft ) var( --hx-d, 0ms ) backwards;
} html.hx-motion:not(#hx_) .hx-ctab.is-in {
--hx-rise: 22px;
animation: hx-rise 1s var( --hx-soft ) var( --hx-d, 0ms ) backwards;
} html.hx-motion:not(#hx_) :is( .hx-insp-card, .hx-lm-mas__item ).is-in {
--hx-rise: 34px;
animation: hx-rise 1.1s var( --hx-soft ) var( --hx-d, 0ms ) backwards;
} html.hx-motion:not(#hx_) .hx-pc.is-in {
--hx-rise: 40px;
animation: hx-rise 1.15s var( --hx-soft ) var( --hx-d, 0ms ) backwards;
} @media ( prefers-reduced-motion: reduce ) {
::view-transition-group( * ),
::view-transition-old( * ),
::view-transition-new( * ) { animation: none !important; }
} html.hx-motion:not(#hx_) .is-in.is-done { animation: none; }
html.hx-motion.hx-vswap-out:not(#hx_) :is( .hx-pc, .hx-ctab ).is-in.is-done { animation: hx-sink .28s cubic-bezier( .5, 0, .75, 0 ) forwards; }
@keyframes hx-rise-m {
from { opacity: 0; transform: translate3d( 0, 16px, 0 ); }
}
@media ( max-width: 767px ) {
html.hx-motion:not(#hx_) :is( .hx-pc, .hx-ctab, .hx-insp-card, .hx-lm-mas__item ).is-in:not( .is-done ) {
animation-name: hx-rise-m;
animation-duration: .55s;
animation-timing-function: cubic-bezier( .2, .7, .2, 1 );
}
} @media ( max-width: 767px ) {
html.hx-motion:not( .hx-vswap-hold ):not(#hx_) :is( .hx-pc, .hx-ctab ):not( .is-in ) { opacity: 1; animation: none; }
html.hx-motion:not(#hx_) :is( .hx-pc, .hx-ctab ).is-in,
html.hx-motion:not(#hx_) :is( .hx-pc, .hx-ctab ).is-in:not( .is-done ) { animation: none; }
}