/*---*\ Site Animation Companion styles for assets/js/animation.js (GSAP) KEY FEATURES: - Mobile-first: content stays visible without JS - Desktop hidden states only at 1200px+ when body.site-animation--desktop - Reduced-motion / below-desktop reset keeps nodes readable IMPLEMENTATION NOTES: - Animate transform + opacity only (CLS-safe) - Pair new data-anim-init keys with rules under the desktop media query - Masthead pending state clears via .is-anim-done after the intro \*---*/ /* ----------------------------------------------------------------- Header page-load (data-anim-init="header") ----------------------------------------------------------------- */ @media (min-width: 1200px) { body.site-animation--desktop [data-anim-init='header'] .page-header__bar { opacity: 0; /* Match INIT_Y (-28) in animation.js to avoid a set/tween jump */ transform: translate3d(0, -28px, 0); } /* Homepage header logo letter-spacing spread / snap-back */ body.home.site-animation--desktop [data-anim-init='header'] .page-header__logo { position: relative; overflow: visible; } body.home.site-animation--desktop [data-anim-init='header'] .page-header__logo.is-logo-spacing .page-header__logo-img { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; } body.home.site-animation--desktop [data-anim-init='header'] .page-header__logo-svg { display: block; width: 100%; height: auto; max-width: none; overflow: visible; pointer-events: none; } /* * Hide only while pending. Prefer .slick-current after Slick inits so * clones of .is-anim-slide are not left stuck at opacity 0. */ body.site-animation--desktop [data-anim-init='masthead-slider']:not(.is-anim-done) .slick-current .masthead-homepage__content > *, body.site-animation--desktop [data-anim-init='masthead-slider']:not(.is-anim-done) .is-anim-slide .masthead-homepage__content > * { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='inner-masthead']:not(.is-anim-done) .masthead__nav, body.site-animation--desktop [data-anim-init='inner-masthead']:not(.is-anim-done) .masthead__title, body.site-animation--desktop [data-anim-init='inner-masthead']:not(.is-anim-done) .masthead__intro { opacity: 0; transform: translate3d(0, 40px, 0); } /* * Do NOT pre-hide .image-buttons__inner in CSS. Slick must measure first; * GSAP applies the pending state only after init (see ImageButtonsBlock). */ body.site-animation--desktop [data-anim-init='icon-buttons']:not(.is-anim-done) .iconbtns__header > *, body.site-animation--desktop [data-anim-init='icon-buttons']:not(.is-anim-done) .iconbtns__list > .iconbtns__item, body.site-animation--desktop [data-anim-init='icon-buttons']:not(.is-anim-done) .slick-slide:not(.slick-cloned) .iconbtns__item, body.site-animation--desktop [data-anim-init='icon-buttons']:not(.is-anim-done) .iconbtns__footer { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='accordion']:not(.is-anim-done) .accordion__header > *, body.site-animation--desktop [data-anim-init='accordion']:not(.is-anim-done) .accordion__panel { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='half-image-gallery']:not(.is-anim-done) .half-image-gallery__media, body.site-animation--desktop [data-anim-init='half-image-gallery']:not(.is-anim-done) .half-image-gallery__stat, body.site-animation--desktop [data-anim-init='half-image-gallery']:not(.is-anim-done) .half-image-gallery__content .wysiwyg__content > * { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='half-image-single']:not(.is-anim-done) .half-image-single__offset, body.site-animation--desktop [data-anim-init='half-image-single']:not(.is-anim-done) .half-image-single__content .wysiwyg__content > * { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='half-image-single']:not(.is-anim-done) .half-image-single__badge { opacity: 0; } /* Logo starts bottom-right, slides toward top-left into place */ body.site-animation--desktop [data-anim-init='half-image-single']:not(.is-anim-done) .half-image-single__logo { opacity: 0; transform: translate3d(48px, 48px, 0); } body.site-animation--desktop [data-anim-init='full-width-image-background']:not(.is-anim-done) .full-width-image-background__media, body.site-animation--desktop [data-anim-init='full-width-image-background']:not(.is-anim-done) .full-width-image-background__logo, body.site-animation--desktop [data-anim-init='full-width-image-background']:not(.is-anim-done) .full-width-image-background__content .wysiwyg__content > * { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='icon-tab-section']:not(.is-anim-done) .icon-tab-section__header > *, body.site-animation--desktop [data-anim-init='icon-tab-section']:not(.is-anim-done) .icon-tab-section__tabs-wrap, body.site-animation--desktop [data-anim-init='icon-tab-section']:not(.is-anim-done) .icon-tab-section__panels { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='reviews-carousel']:not(.is-anim-done) .reviews-carousel__header > * { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='contact-form']:not(.is-anim-done) .contact-form__media, body.site-animation--desktop [data-anim-init='contact-form']:not(.is-anim-done) .contact-form__intro .wysiwyg__content > *, body.site-animation--desktop [data-anim-init='contact-form']:not(.is-anim-done) .contact-form__form { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='full-width-cta']:not(.is-anim-done) .cta-bar__media, body.site-animation--desktop [data-anim-init='full-width-cta']:not(.is-anim-done) .cta-bar__mark, body.site-animation--desktop [data-anim-init='full-width-cta']:not(.is-anim-done) .cta-bar__content .wysiwyg__content > *, body.site-animation--desktop [data-anim-init='full-width-cta']:not(.is-anim-done) .cta-bar__logo { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='wysiwyg']:not(.is-anim-done) .wysiwyg__content > * { opacity: 0; transform: translate3d(0, 40px, 0); } /* * Listing CSS keyframes use row-based animation-delay (LTR cascade) and * override GSAP transforms. Disable them so scroll reveal owns motion. */ body.site-animation--desktop [data-anim-init='products-listing'] .products-listing__card, body.site-animation--desktop [data-anim-init='accessories-listing'] .accessories-listing__card, body.site-animation--desktop [data-anim-init='resources-listing'] .resources-listing__card { animation: none; animation-delay: 0s; } body.site-animation--desktop [data-anim-init='products-listing']:not(.is-anim-done) .products-listing__filters, body.site-animation--desktop [data-anim-init='products-listing']:not(.is-anim-done) .products-listing__card, body.site-animation--desktop [data-anim-init='products-listing']:not(.is-anim-done) .products-listing__pagination, body.site-animation--desktop [data-anim-init='accessories-listing']:not(.is-anim-done) .accessories-listing__filters, body.site-animation--desktop [data-anim-init='accessories-listing']:not(.is-anim-done) .accessories-listing__card, body.site-animation--desktop [data-anim-init='accessories-listing']:not(.is-anim-done) .accessories-listing__pagination, body.site-animation--desktop [data-anim-init='resources-listing']:not(.is-anim-done) .resources-listing__filters, body.site-animation--desktop [data-anim-init='resources-listing']:not(.is-anim-done) .resources-listing__card, body.site-animation--desktop [data-anim-init='resources-listing']:not(.is-anim-done) .resources-listing__pagination, body.site-animation--desktop [data-anim-init='blog-listing']:not(.is-anim-done) .search_bar, body.site-animation--desktop [data-anim-init='blog-listing']:not(.is-anim-done) .blog-post__item, body.site-animation--desktop [data-anim-init='blog-listing']:not(.is-anim-done) .blog-listing__controls { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='product-details']:not(.is-anim-done) .product-details__image, body.site-animation--desktop [data-anim-init='product-details']:not(.is-anim-done) .product-details__badge, body.site-animation--desktop [data-anim-init='product-details']:not(.is-anim-done) .product-details__title, body.site-animation--desktop [data-anim-init='product-details']:not(.is-anim-done) .product-details__types-label, body.site-animation--desktop [data-anim-init='product-details']:not(.is-anim-done) .product-details__types, body.site-animation--desktop [data-anim-init='product-details']:not(.is-anim-done) .product-details__description .wysiwyg__content > *, body.site-animation--desktop [data-anim-init='product-details']:not(.is-anim-done) .product-details__download { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='product-resources']:not(.is-anim-done) .product-resources__header > *, body.site-animation--desktop [data-anim-init='product-resources']:not(.is-anim-done) .product-resources__card:not([hidden]) { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-anim-init='product-related']:not(.is-anim-done) .product-related__header, body.site-animation--desktop [data-anim-init='product-related']:not(.is-anim-done) .product-related__track, body.site-animation--desktop [data-anim-init='product-related']:not(.is-anim-done) .product-related__actions { opacity: 0; transform: translate3d(0, 40px, 0); } body.site-animation--desktop [data-scroll-reveal]:not([data-scroll-animated]), body.site-animation--desktop [data-scroll-stagger]:not([data-scroll-animated]) > * { opacity: 0; transform: translate3d(0, 24px, 0); } } body:not(.site-animation--desktop) .page-header__logo-svg, body:not(.home) .page-header__logo-svg { display: none !important; } @media (max-width: 1199px), (prefers-reduced-motion: reduce) { [data-anim-init='header'] .page-header__bar, [data-anim-init='header'] .page-header__logo-img, [data-scroll-reveal], [data-scroll-stagger] > *, [data-anim-init='masthead-slider'] .masthead-homepage__content > *, [data-anim-init='inner-masthead'] .masthead__nav, [data-anim-init='inner-masthead'] .masthead__title, [data-anim-init='inner-masthead'] .masthead__intro, [data-anim-init='image-buttons'] .image-buttons__inner, [data-anim-init='icon-buttons'] .iconbtns__header > *, [data-anim-init='icon-buttons'] .iconbtns__item, [data-anim-init='icon-buttons'] .iconbtns__footer, [data-anim-init='accordion'] .accordion__header > *, [data-anim-init='accordion'] .accordion__panel, [data-anim-init='half-image-gallery'] .half-image-gallery__media, [data-anim-init='half-image-gallery'] .half-image-gallery__stat, [data-anim-init='half-image-gallery'] .half-image-gallery__content .wysiwyg__content > *, [data-anim-init='half-image-single'] .half-image-single__offset, [data-anim-init='half-image-single'] .half-image-single__badge, [data-anim-init='half-image-single'] .half-image-single__logo, [data-anim-init='half-image-single'] .half-image-single__content .wysiwyg__content > *, [data-anim-init='full-width-image-background'] .full-width-image-background__media, [data-anim-init='full-width-image-background'] .full-width-image-background__logo, [data-anim-init='full-width-image-background'] .full-width-image-background__content .wysiwyg__content > *, [data-anim-init='icon-tab-section'] .icon-tab-section__header > *, [data-anim-init='icon-tab-section'] .icon-tab-section__tabs-wrap, [data-anim-init='icon-tab-section'] .icon-tab-section__panels, [data-anim-init='reviews-carousel'] .reviews-carousel__header > *, [data-anim-init='contact-form'] .contact-form__media, [data-anim-init='contact-form'] .contact-form__intro .wysiwyg__content > *, [data-anim-init='contact-form'] .contact-form__form, [data-anim-init='full-width-cta'] .cta-bar__media, [data-anim-init='full-width-cta'] .cta-bar__mark, [data-anim-init='full-width-cta'] .cta-bar__content .wysiwyg__content > *, [data-anim-init='full-width-cta'] .cta-bar__logo, [data-anim-init='wysiwyg'] .wysiwyg__content > *, [data-anim-init='products-listing'] .products-listing__filters, [data-anim-init='products-listing'] .products-listing__card, [data-anim-init='products-listing'] .products-listing__pagination, [data-anim-init='accessories-listing'] .accessories-listing__filters, [data-anim-init='accessories-listing'] .accessories-listing__card, [data-anim-init='accessories-listing'] .accessories-listing__pagination, [data-anim-init='resources-listing'] .resources-listing__filters, [data-anim-init='resources-listing'] .resources-listing__card, [data-anim-init='resources-listing'] .resources-listing__pagination, [data-anim-init='blog-listing'] .search_bar, [data-anim-init='blog-listing'] .blog-post__item, [data-anim-init='blog-listing'] .blog-listing__controls, [data-anim-init='product-details'] .product-details__image, [data-anim-init='product-details'] .product-details__badge, [data-anim-init='product-details'] .product-details__title, [data-anim-init='product-details'] .product-details__types-label, [data-anim-init='product-details'] .product-details__types, [data-anim-init='product-details'] .product-details__description .wysiwyg__content > *, [data-anim-init='product-details'] .product-details__download, [data-anim-init='product-resources'] .product-resources__header > *, [data-anim-init='product-resources'] .product-resources__card, [data-anim-init='product-related'] .product-related__header, [data-anim-init='product-related'] .product-related__track, [data-anim-init='product-related'] .product-related__actions { opacity: 1 !important; visibility: visible !important; transform: none !important; will-change: auto; } }