/* =====================================================
   REFACTORED VERSION (Starter)
   This file is prepared as the base for the final refactor.
   Changes in this version:
   - Keeps current working behavior.
   - Ready for separation of layout / animation.
   ===================================================== */

/*
 * Main visual slider animations
 * GPU accelerated: transform and opacity only
 */

:root {
    --slider-autoplay-duration: 5500ms;
    --slider-crossfade-duration: 1600ms;
    --slider-image-opacity-inactive: 0.5;
    --slider-image-opacity-active: 1;
    --slider-zoom-scale-start: 1.02;
    --slider-zoom-scale-end: 1;
    --slider-text-duration: 700ms;
    --slider-text-delay-step: 100ms;
    --slider-text-offset-y: 20px;
    --slider-content-fade-duration: 700ms;
    --slider-indicator-duration: 400ms;
    --z-index-slider-default: 0;
    --z-index-slider-previous: 1;
    --z-index-slider-active: 2;
    --z-index-slider-overlay: 3;
    --z-index-slider-controls: 4;
}

@keyframes main-visual-image-zoom {
        from{

        transform:scale(1.06);

}

    40%{

        transform:scale(1.03);

}

    to{

        transform:scale(1);

    }
}



.main-visual__slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 1.4s cubic-bezier(.22,.61,.36,1);

}

.main-visual__slide.is-active{

    opacity:1;

    z-index:2;

}

.main-visual__slide{

    opacity:0;

}

.main-visual__slide.is-show{

    opacity:1;

}

.main-visual__slide.is-hide{

    opacity:0;

}

.main-visual__slide.is-leaving{

    opacity:0;

    z-index:3;

}




.main-visual__slide .main-visual__image{

    opacity: var(--slider-image-opacity-inactive);

    transform: scale(var(--slider-zoom-scale-start));

    filter: brightness(.82);

    transition:
        opacity 1600ms cubic-bezier(.22,.61,.36,1),
        filter 1600ms cubic-bezier(.22,.61,.36,1);

}

.main-visual__slide.is-active .main-visual__image{

    opacity:1;

    filter:brightness(1);

    animation:main-visual-image-zoom 3200ms ease-out forwards;

    will-change:transform,opacity,filter;

}

.main-visual__slide.is-leaving .main-visual__image {
    opacity: var(--slider-image-opacity-inactive);
    animation: none;
    will-change: opacity;
}

.main-visual__title-line {
    opacity: 0;
    transform: translate3d(0, var(--slider-text-offset-y), 0);
    transition:
        opacity var(--slider-text-duration) var(--animation-easing-base),
        transform var(--slider-text-duration) var(--animation-easing-base);
    transition-delay: 0ms;
}

.main-visual__title.is-visible .main-visual__title-line {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: var(--slider-text-delay-step);
}

.main-visual__project {
    opacity: 0;
    transition: opacity var(--slider-content-fade-duration) var(--animation-easing-base);
}

.main-visual__project.is-visible {
    opacity: 1;
}

.main-visual__indicator {
    transition:
        opacity var(--slider-indicator-duration) var(--animation-easing-in-out),
        transform var(--slider-indicator-duration) var(--animation-easing-in-out);
}

.main-visual__indicator.is-active {
    transform: scale(1.2);
}


.main-visual__slide{

    transition:

        opacity 1600ms cubic-bezier(.22,.61,.36,1);

}