/*
 * Full-site motion layer.
 * Animations are progressively enhanced: without JavaScript, all content remains visible.
 */

.hzm-scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2200;
    display: block;
    width: 100%;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, #22c4df, #0876c9 58%, #e3b340);
    box-shadow: 0 1px 8px rgba(34, 196, 223, .38);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* Staggered page entrance for the persistent navigation. */
/*
 * Mega-menu items must never become transformed/animated containing blocks:
 * their fixed panels are positioned against the viewport.
 */
.site-navigation .menu > .menu-item--mega {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
.hzm-motion-enabled:not(.hzm-page-ready) .site-logo,
.hzm-motion-enabled:not(.hzm-page-ready) .site-navigation > .menu > .menu-item > a,
.hzm-motion-enabled:not(.hzm-page-ready) .header-quote,
.hzm-motion-enabled:not(.hzm-page-ready) .menu-toggle,
.hzm-motion-enabled:not(.hzm-page-ready) .home-hero__controls {
    opacity: 0;
}

.hzm-motion-enabled:not(.hzm-page-ready) .site-logo,
.hzm-motion-enabled:not(.hzm-page-ready) .site-navigation > .menu > .menu-item > a,
.hzm-motion-enabled:not(.hzm-page-ready) .header-quote,
.hzm-motion-enabled:not(.hzm-page-ready) .menu-toggle {
    transform: translate3d(0, -18px, 0);
}

.hzm-motion-enabled.hzm-page-ready .site-logo,
.hzm-motion-enabled.hzm-page-ready .menu-toggle,
.hzm-motion-enabled.hzm-page-ready .header-quote,
.hzm-motion-enabled.hzm-page-ready .site-navigation > .menu > .menu-item > a {
    animation: hzm-navigation-enter .62s cubic-bezier(.2, .75, .25, 1) both;
}

.hzm-motion-enabled.hzm-page-ready .site-logo { animation-delay: .04s; }
.hzm-motion-enabled.hzm-page-ready .menu-toggle { animation-delay: .1s; }
.hzm-motion-enabled.hzm-page-ready .site-navigation > .menu > .menu-item:nth-child(1) > a { animation-delay: .08s; }
.hzm-motion-enabled.hzm-page-ready .site-navigation > .menu > .menu-item:nth-child(2) > a { animation-delay: .13s; }
.hzm-motion-enabled.hzm-page-ready .site-navigation > .menu > .menu-item:nth-child(3) > a { animation-delay: .18s; }
.hzm-motion-enabled.hzm-page-ready .site-navigation > .menu > .menu-item:nth-child(4) > a { animation-delay: .23s; }
.hzm-motion-enabled.hzm-page-ready .site-navigation > .menu > .menu-item:nth-child(5) > a { animation-delay: .28s; }
.hzm-motion-enabled.hzm-page-ready .site-navigation > .menu > .menu-item:nth-child(6) > a { animation-delay: .33s; }
.hzm-motion-enabled.hzm-page-ready .site-navigation > .menu > .menu-item:nth-child(7) > a { animation-delay: .38s; }
.hzm-motion-enabled.hzm-page-ready .site-navigation > .menu > .menu-item:nth-child(8) > a { animation-delay: .43s; }
.hzm-motion-enabled.hzm-page-ready .header-quote { animation-delay: .48s; }

.hzm-motion-enabled.hzm-page-ready .home-hero__controls {
    animation: hzm-controls-enter .72s .62s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes hzm-navigation-enter {
    from { opacity: 0; transform: translate3d(0, -18px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes hzm-controls-enter {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to { opacity: 1; transform: none; }
}

/* Reliable scroll reveals with visible direction and stagger. */
.hzm-motion-enabled .hzm-motion-item {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 38px, 0);
    transition:
        opacity .78s ease var(--hzm-motion-delay, 0ms),
        filter .78s ease var(--hzm-motion-delay, 0ms),
        transform .82s cubic-bezier(.16, .78, .24, 1) var(--hzm-motion-delay, 0ms);
    will-change: opacity, filter, transform;
}

.hzm-motion-enabled .hzm-motion-item.hzm-motion-from-left {
    transform: translate3d(-58px, 0, 0);
}

.hzm-motion-enabled .hzm-motion-item.hzm-motion-from-right {
    transform: translate3d(58px, 0, 0);
}

.hzm-motion-enabled .hzm-motion-item.hzm-motion-zoom {
    transform: translate3d(0, 26px, 0) scale(.94);
}

.hzm-motion-enabled .hzm-motion-item.hzm-in-view {
    opacity: 1;
    filter: blur(0);
    transform: none;
    will-change: auto;
}

/* Hero motion remains obvious after the first frame and while scrolling. */
.home-hero.is-motion-ready .hero-slide.is-active .hero-slide__shade {
    animation: hzm-hero-shade 6.5s ease-in-out both;
}

.home-hero.is-motion-ready .hero-slide.is-active .hero-slide__title {
    text-shadow: 0 14px 40px rgba(0, 20, 42, .2);
}

.hzm-parallax-media {
    --hzm-hero-shift: 0px;
    transform: translate3d(0, var(--hzm-hero-shift), 0) scale(1.08) !important;
    transform-origin: center center;
    transition: transform .14s linear;
    will-change: transform;
}

@keyframes hzm-hero-shade {
    0% { opacity: .76; }
    45% { opacity: 1; }
    100% { opacity: .86; }
}

/* Buttons react to hover and click instead of feeling static. */
.button,
.header-quote,
.services-card__link,
.services-nav button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hzm-button-ripple {
    position: absolute;
    z-index: -1;
    display: block;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, .42);
    opacity: 0;
    transform: scale(0);
    animation: hzm-button-ripple .7s ease-out;
}

@keyframes hzm-button-ripple {
    0% { opacity: .62; transform: scale(0); }
    70% { opacity: .2; }
    100% { opacity: 0; transform: scale(1); }
}

/* Consistent, polished interaction motion across cards and imagery. */
@media (hover: hover) and (pointer: fine) {
    .category-tile,
    .solution-card,
    .content-card,
    .technical-support-card,
    .customer-logo-card,
    .advantage-card,
    .certificate-card,
    .factory-gallery__item,
    .solution-archive-card,
    .hzm-related-product,
    .services-download-card {
        transform-origin: center bottom;
        transition:
            transform .42s cubic-bezier(.16, .78, .24, 1),
            box-shadow .42s ease,
            border-color .3s ease;
    }

    .category-tile:hover,
    .solution-card:hover,
    .content-card:hover,
    .technical-support-card:hover,
    .customer-logo-card:hover,
    .advantage-card:hover,
    .certificate-card:hover,
    .factory-gallery__item:hover,
    .solution-archive-card:hover,
    .hzm-related-product:hover,
    .services-download-card:hover {
        z-index: 2;
        transform: translate3d(0, -9px, 0);
        box-shadow: 0 22px 54px rgba(5, 38, 70, .16);
    }

    .category-tile img,
    .solution-card img,
    .content-card__image img,
    .technical-support-card > img,
    .advantage-card > img,
    .factory-gallery__item img,
    .solution-archive-card__media img,
    .hzm-related-product__media img {
        transition: transform .78s cubic-bezier(.16, .78, .24, 1), filter .5s ease;
    }

    .category-tile:hover img,
    .solution-card:hover img,
    .content-card:hover .content-card__image img,
    .technical-support-card:hover > img,
    .advantage-card:hover > img,
    .factory-gallery__item:hover img,
    .solution-archive-card:hover .solution-archive-card__media img,
    .hzm-related-product:hover .hzm-related-product__media img {
        filter: saturate(1.06) contrast(1.02);
        transform: scale(1.07);
    }

    .customer-logo-card:hover img,
    .about-client-logo:hover img {
        animation: hzm-logo-bob .72s cubic-bezier(.16, .78, .24, 1);
        filter: grayscale(0);
        opacity: 1;
    }

    .text-link span,
    .services-card__link span,
    .solution-card small span {
        display: inline-block;
        transition: transform .28s ease;
    }

    .text-link:hover span,
    .services-card__link:hover span,
    .solution-card:hover small span {
        transform: translate3d(6px, 0, 0);
    }
}

@keyframes hzm-logo-bob {
    0%, 100% { transform: translate3d(0, 0, 0); }
    48% { transform: translate3d(0, -7px, 0); }
}

/* Small screens use vertical reveals to avoid horizontal overflow. */
@media (max-width: 767px) {
    .hzm-motion-enabled .hzm-motion-item,
    .hzm-motion-enabled .hzm-motion-item.hzm-motion-from-left,
    .hzm-motion-enabled .hzm-motion-item.hzm-motion-from-right,
    .hzm-motion-enabled .hzm-motion-item.hzm-motion-zoom {
        filter: blur(2px);
        transform: translate3d(0, 28px, 0);
    }

    .hzm-motion-enabled .hzm-motion-item.hzm-in-view {
        filter: blur(0);
        transform: none;
    }

    .hzm-scroll-progress { height: 2px; }
}

/*
 * CSS-only homepage baseline: the first screen still moves if JavaScript fails.
 * JavaScript only adds carousel switching and scroll-aware enhancements.
 */
body.home .hero-slide.is-active .hero-slide__media {
    animation: hzm-hero-zoom 7s ease-out both;
}

body.home .hero-slide--alternate.is-active .hero-slide__media {
    animation-name: hzm-hero-zoom-alternate;
}

body.home .hero-slide.is-active .hero-slide__content > * {
    animation: hzm-hero-copy-enter .76s cubic-bezier(.16, .78, .24, 1) both;
}

body.home .hero-slide.is-active .hero-slide__content > :nth-child(1) { animation-delay: .1s; }
body.home .hero-slide.is-active .hero-slide__content > :nth-child(2) { animation-delay: .24s; }
body.home .hero-slide.is-active .hero-slide__content > :nth-child(3) { animation-delay: .38s; }
body.home .hero-slide.is-active .hero-slide__content > :nth-child(4) { animation-delay: .52s; }

body.home .home-hero__dot.is-active::after {
    animation: hzm-hero-progress 6.5s linear both;
}

body.home .site-logo,
body.home .site-navigation > .menu > .menu-item > a,
body.home .header-quote {
    animation: hzm-navigation-enter .62s cubic-bezier(.2, .75, .25, 1) both;
}

body.home .site-navigation > .menu > .menu-item:nth-child(2) > a { animation-delay: .06s; }
body.home .site-navigation > .menu > .menu-item:nth-child(3) > a { animation-delay: .12s; }
body.home .site-navigation > .menu > .menu-item:nth-child(4) > a { animation-delay: .18s; }
body.home .site-navigation > .menu > .menu-item:nth-child(5) > a { animation-delay: .24s; }
body.home .site-navigation > .menu > .menu-item:nth-child(6) > a { animation-delay: .3s; }
body.home .site-navigation > .menu > .menu-item:nth-child(7) > a { animation-delay: .36s; }
body.home .header-quote { animation-delay: .42s; }

@keyframes hzm-hero-copy-enter {
    from { opacity: 0; transform: translate3d(0, 38px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes hzm-hero-progress {
    from { width: 0; }
    to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
    .hzm-scroll-progress { display: none; }

    .hzm-motion-item,
    .hzm-motion-from-left,
    .hzm-motion-from-right,
    .hzm-motion-zoom,
    .hzm-parallax-media,
    .home-hero.is-motion-ready .hero-slide.is-active .hero-slide__shade {
        animation: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Product Features is intentionally visible immediately, without scroll reveal. */
.product-detail-section--static,
.hzm-motion-enabled .product-detail-section--static,
.has-entry-motion .product-detail-section--static {
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}