.animated-text-by-word .word,
.animated-text-by-line .line {
    display: inline-block;
    will-change: transform, opacity;
}

.animate-component-item.animated-text-by-word:not(.is-visible),
.animate-component-item.animated-text-by-line:not(.is-visible) {
    opacity: 0;
}

.animate-component-item.animated-text-by-word.is-ready,
.animate-component-item.animated-text-by-line.is-ready {
    opacity: 1;
}

.container-flex-fix .dy-container-component {
    display: flex;
    gap: 10px;
}

/* Base */
.animate-component-item.animate-image-zoom-up,
.animate-component-item.animate-block-zoom-in-from-top,
.animate-component-item.animate-block-zoom-in-from-top-desktop {
    position: relative;
    z-index: 10;
}

.animate-component-item.animation-text-container {
    z-index: -1;
}

.animate-component-item .dy-pd-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================
    CAROUSEL FADE IN
============================== */

.animate-component-item.animate-carousel-fade-in {
    opacity: 0;
}

.animate-component-item.animate-carousel-fade-in.is-visible {
    animation: fadeInComponent 1s ease 200ms both;
    will-change: opacity;
}

@keyframes fadeInComponent {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================
    VIDEO FADE IN
============================== */

.dy-video-container.animate-component-item.animate-video-fade-in::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;

    z-index: 10;
    background-color: #fff;
    opacity: .9;
    transition: opacity 500ms ease-in-out;
    will-change: opacity;
    pointer-events: none;
}

.dy-video-container.animate-component-item.animate-video-fade-in.is-visible::before {
    opacity: 0;

}

/* ============================
    IMAGE SLIDE UP
============================== */

.animate-component-item.animate-block-slide-up .dy-hh-inner {
    transform: translateY(25%);
    opacity: 0;
    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--animation-delay, 0ms),
        opacity 0.9s ease var(--animation-delay, 0ms);
    will-change: transform, opacity;
}

.animate-component-item.animate-block-slide-up.is-visible .dy-hh-inner {
    transform: translateY(0);
    opacity: 1;
}

/* ============================
    IMAGE ZOOM UP
============================== */

.animate-component-item.animate-image-zoom-up .dy-pd-image {
    transform: translateY(-25%) scale(1.12);
    opacity: 0;
    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--animation-delay, 0ms),
        opacity 0.9s ease var(--animation-delay, 0ms);
    will-change: transform, opacity;
    z-index: 1000;
}

.animate-component-item.animate-image-zoom-up.is-visible .dy-pd-image {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ============================
    ZOOM IN FROM TOP
    Default non-carousel behavior
============================== */

.animate-component-item.animate-block-zoom-in-from-top .dy-pd-image__image {
    transform: translateY(-80px) scale(1.25);
    transform-origin: center top;
    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--animation-delay, 0ms);
    will-change: transform;
}

.animate-component-item.animate-block-zoom-in-from-top.is-visible .dy-pd-image__image {
    transform: translateY(0) scale(1);
}

/* ============================
    ZOOM IN FROM TOP
    Desktop only variant
============================== */

@media screen and (min-width: 1025px) {
    .animate-component-item.animate-block-zoom-in-from-top-desktop .dy-pd-image__image {
        transform: translateY(-80px) scale(1.25);
        transform-origin: center top;
        transition:
            transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--animation-delay, 0ms);
        will-change: transform;
    }

    .animate-component-item.animate-block-zoom-in-from-top-desktop.is-visible .dy-pd-image__image {
        transform: translateY(0) scale(1);
    }
}

/* ============================
    SLICK CAROUSEL ZOOM IN FROM TOP
    Parent owns scroll trigger
    Slick owns active slide state
============================== */

/*
    Default carousel slide state.
*/

.animation-carousel.slick-initialized .animate-component-item.animate-block-zoom-in-from-top .dy-pd-image__image,
.animation-carousel .slick-initialized .animate-component-item.animate-block-zoom-in-from-top .dy-pd-image__image {
    transform: translateY(-80px) scale(1.25);
    transform-origin: center top;
    transition: none;
    will-change: transform;
}

/*
    Current slide animates only when carousel has entered viewport.
*/

.animation-carousel.is-visible.slick-initialized .slick-current:not(.slick-cloned) .animate-component-item.animate-block-zoom-in-from-top .dy-pd-image__image,
.animation-carousel.is-visible .slick-initialized .slick-current:not(.slick-cloned) .animate-component-item.animate-block-zoom-in-from-top .dy-pd-image__image {
    transform: translateY(0) scale(1);
    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--animation-delay, 0ms);
}

/*
    Viewed slides stay in final state permanently.
    This prevents reset when the slide loses .slick-current.
*/

.animation-carousel.slick-initialized .animate-component-item.animate-block-zoom-in-from-top.is-viewed .dy-pd-image__image,
.animation-carousel .slick-initialized .animate-component-item.animate-block-zoom-in-from-top.is-viewed .dy-pd-image__image {
    transform: translateY(0) scale(1);
    transition: none;
}

.slick-slide .animate-block-zoom-in-from-top.animate-component-item .dy-pd-image__picture-wrapper {
    overflow: hidden
}

/* ============================
    SLIDE FROM LEFT
============================== */

.animate-component-item.animate-block-slide-left .dy-pd-image {
    transform: translateX(-50%);
    opacity: 0;
    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--animation-delay, 0ms),
        opacity 0.9s ease var(--animation-delay, 0ms);
    will-change: transform, opacity;
}

.animate-component-item.animate-block-slide-left.is-visible .dy-pd-image {
    transform: translateX(0);
    opacity: 1;
}

/* ============================
    IMAGE REVEAL
============================== */

.animate-component-item.image-reveal {
    overflow: hidden;
}

.animate-component-item.image-reveal img {
    display: block;
    width: 100%;
    height: auto;
    clip-path: inset(50% 50% 50% 50%);
    transition:
        clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--animation-delay, 0ms);
    will-change: clip-path;
}

.animate-component-item.image-reveal.is-visible img {
    clip-path: inset(0% 0% 0% 0%);
}

/* ============================
    IMAGE ZOOM IN
============================== */

.animate-component-item.image-zoom-in {
    overflow: hidden;
}

.animate-component-item.image-zoom-in img {
    transform: scale(1.2);
    transition: transform 500ms;
}

.animate-component-item.image-zoom-in.is-visible img {
    transform: scale(1);
}

/* ============================
    HOVER ZOOM
============================== */

.animate-component-item.hover-zoom {
    overflow: hidden;
}

.animate-component-item.hover-zoom img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
    transform-origin: center;
    transition: transform 400ms ease-in-out 50ms;
}

.animate-component-item.hover-zoom:hover img {
    transform: scale(1.1);
}

/* ============================
    IMAGE FADE IN
============================== */

.animate-component-item.fade-in-image {
    opacity: 0;
    transition: opacity 500ms;
}

.animate-component-item.fade-in-image.is-visible {
    opacity: 1;
}

/* ============================
    HERO TEXT FADE IN
============================== */

.animate-component-item.fade-in-hero-text {
    opacity: 0;
}

.animate-component-item.fade-in-hero-text.is-visible,
.content-swap.is-visible .animate-component-item.fade-in-hero-text {
    animation: fadeInHeroText 1s ease forwards;
    animation-delay: 600ms;
}

@keyframes fadeInHeroText {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================
    HERO TEXT FADE IN AND SLIDE UP
============================== */

.animate-component-item.fade-in-slide-up-hero-text,
.animate-component-item.fade-in-slide-up-hero-text__cat-page {
    opacity: 0;
    transform: translateY(30%);
}

.content-swap.is-visible .animate-component-item.fade-in-slide-up-hero-text,
.animate-component-item.fade-in-slide-up-hero-text__cat-page.is-visible,
.hh-animation-hero-container.is-visible .animate-component-item.fade-in-slide-up-hero-text__cat-page {
    animation: fadeInSlideUpHeroText 600ms ease-in-out forwards;
    animation-delay: 600ms;
}

.content-swap.is-visible .animate-component-item.fade-in-slide-up-hero-text.animation-delay-600,
.animate-component-item.fade-in-slide-up-hero-text__cat-page.is-visible.animation-delay-600,
.hh-animation-hero-container.is-visible .animate-component-item.fade-in-slide-up-hero-text__cat-page.animation-delay-600 {
    animation-delay: 600ms;
}

.content-swap.is-visible .animate-component-item.fade-in-slide-up-hero-text.animation-delay-900,
.animate-component-item.fade-in-slide-up-hero-text__cat-page.is-visible.animation-delay-900,
.hh-animation-hero-container.is-visible .animate-component-item.fade-in-slide-up-hero-text__cat-page.animation-delay-900 {
    animation-delay: 900ms;
}

@keyframes fadeInSlideUpHeroText {
    from {
        opacity: 0;
        transform: translateY(30%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================
    THREE-UP ANIMATION
============================== */

.three-up-animation {
    overflow: hidden;
}

.three-up-animation .dy-three-up-inner {
    display: grid !important;
    grid-template-columns: 0fr 1fr 0fr;
    gap: 0;
    width: 100%;
    transition:
        grid-template-columns 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        gap 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.three-up-animation.is-visible .dy-three-up-inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.three-up-animation .column {
    min-width: 0;
    overflow: hidden;
}

.three-up-animation .column-one,
.three-up-animation .column-three {
    opacity: 0;
    transform: translateY(80px);
    transition:
        opacity 0.8s ease 1.4s,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1) 1.4s;
}

.three-up-animation.is-visible .column-one,
.three-up-animation.is-visible .column-three {
    opacity: 1;
    transform: translateY(0);
}

.three-up-animation .dy-hh-inner,
.three-up-animation .dy-hh-media-wrap,
.three-up-animation .dy-hh-component-class,
.three-up-animation .dy-pd-image,
.three-up-animation .dy-pd-image__inner,
.three-up-animation .dy-pd-image__picture-wrapper,
.three-up-animation picture,
.three-up-animation a {
    height: 100%;
}

.three-up-animation img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.three-up-animation .dy-three-up-inner {
    min-height: 600px;
}

@media screen and (max-width: 1023px) {

    .three-up-animation .dy-three-up-inner,
    .three-up-animation.is-visible .dy-three-up-inner {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        min-height: auto;
    }

    .three-up-animation .column-one,
    .three-up-animation .column-three {
        opacity: 1;
        transform: none;
    }
}

/* ============================
    ACCESSIBILITY
============================== */

@media (prefers-reduced-motion: reduce) {

    .animate-component-item.animate-image-zoom-up .dy-pd-image,
    .animate-component-item.animate-block-slide-up .dy-hh-inner,
    .animate-component-item.animate-block-zoom-in-from-top .dy-pd-image__image,
    .animate-component-item.animate-block-zoom-in-from-top-desktop .dy-pd-image__image,
    .animate-component-item.animate-block-slide-left .dy-pd-image,
    .animate-component-item.image-reveal img,
    .animate-component-item.image-zoom-in img,
    .three-up-animation .dy-three-up-inner,
    .three-up-animation .column-one,
    .three-up-animation .column-three {
        transform: none;
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
        transition: none;
        animation: none;
    }
}

/*
    Reduced motion for Slick carousel parent-triggered animation.
*/

@media (prefers-reduced-motion: reduce) {

    .animation-carousel.slick-initialized .animate-component-item.animate-block-zoom-in-from-top .dy-pd-image__image,
    .animation-carousel .slick-initialized .animate-component-item.animate-block-zoom-in-from-top .dy-pd-image__image {
        transform: none;
        transition: none;
    }
}

/* Debug */
.debug .animate-component-item {
    border: 1px solid red;
}

.debug .animate-component-item .dy-pd-image {
    border: 1px solid purple;
}