/* =====================================================
   SKIMAX – SCROLL EFFECTS

   1) BLUR + OPACITY
      .scroll-effect-blur

   2) SCALE
      .scroll-effect-scale

   3) SLIDE LEFT / RIGHT
      .scroll-effect-slide-left
      .scroll-effect-slide-right

   4) KOMBINACE EFEKTŮ

   5) LOGO SCROLL EFFECT
      .scroll-effect-logo

   6) LOGO MOBILE

   7) REDUCED MOTION
===================================================== */



/* =====================================================
   1) SCROLL EFFECT – BLUR + OPACITY

   0–25 %
   opacity 0 → 1
   blur 5px → 0

   25–75 %
   plně viditelné
   blur 0

   75–100 %
   opacity 1 → 0
   blur 0 → 5px
===================================================== */


/* =========================
   1.1 ANIMACE
========================= */

@keyframes scroll-effect-blur-animation {

    0% {
        opacity: 0;
        filter: blur(5px);
    }

    25% {
        opacity: 1;
        filter: blur(0);
    }

    75% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 0;
        filter: blur(5px);
    }
}


/* =========================
   1.2 TŘÍDA
========================= */

.scroll-effect-blur {

    animation-name:
        scroll-effect-blur-animation;

    animation-timing-function:
        ease-in-out;

    animation-fill-mode:
        both;

    animation-timeline:
        view();

    animation-range:
        entry 0% exit 100%;

    will-change:
        opacity,
        filter;
}



/* =====================================================
   2) SCROLL EFFECT – SCALE

   0 %
   0.97

   50 %
   1

   100 %
   0.97
===================================================== */


/* =========================
   2.1 ANIMACE
========================= */

@keyframes scroll-effect-scale-animation {

    0% {
        transform: scale(0.97);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.97);
    }
}


/* =========================
   2.2 TŘÍDA
========================= */

.scroll-effect-scale {

    animation-name:
        scroll-effect-scale-animation;

    animation-timing-function:
        ease-in-out;

    animation-fill-mode:
        both;

    animation-timeline:
        view();

    animation-range:
        entry 0% exit 100%;

    transform-origin:
        center center;

    will-change:
        transform;
}



/* =====================================================
   3) SCROLL EFFECT – SLIDE

   SLIDE LEFT:
   -2rem → 0 → -2rem

   SLIDE RIGHT:
   +2rem → 0 → +2rem

   Stejný easing a timeline
   jako ostatní efekty.
===================================================== */


/* =========================
   3.1 SLIDE LEFT
========================= */

@keyframes scroll-effect-slide-left-animation {

    0% {
        transform: translateX(-2rem);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-2rem);
    }
}


.scroll-effect-slide-left {

    animation-name:
        scroll-effect-slide-left-animation;

    animation-timing-function:
        ease-in-out;

    animation-fill-mode:
        both;

    animation-timeline:
        view();

    animation-range:
        entry 0% exit 100%;

    will-change:
        transform;
}



/* =========================
   3.2 SLIDE RIGHT
========================= */

@keyframes scroll-effect-slide-right-animation {

    0% {
        transform: translateX(2rem);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(2rem);
    }
}


.scroll-effect-slide-right {

    animation-name:
        scroll-effect-slide-right-animation;

    animation-timing-function:
        ease-in-out;

    animation-fill-mode:
        both;

    animation-timeline:
        view();

    animation-range:
        entry 0% exit 100%;

    will-change:
        transform;
}



/* =====================================================
   4) KOMBINACE EFEKTŮ

   Důležité:
   více tříd nastavuje animation-name,
   proto jejich kombinace definujeme zvlášť.
===================================================== */


/* =====================================================
   4.1 BLUR + SCALE
===================================================== */

.scroll-effect-blur.scroll-effect-scale {

    animation-name:
        scroll-effect-blur-animation,
        scroll-effect-scale-animation;

    animation-timing-function:
        ease-in-out,
        ease-in-out;

    animation-fill-mode:
        both,
        both;

    animation-timeline:
        view(),
        view();

    animation-range:
        entry 0% exit 100%,
        entry 0% exit 100%;

    transform-origin:
        center center;

    will-change:
        opacity,
        filter,
        transform;
}



/* =====================================================
   4.2 BLUR + SLIDE LEFT
===================================================== */

.scroll-effect-blur.scroll-effect-slide-left {

    animation-name:
        scroll-effect-blur-animation,
        scroll-effect-slide-left-animation;

    animation-timing-function:
        ease-in-out,
        ease-in-out;

    animation-fill-mode:
        both,
        both;

    animation-timeline:
        view(),
        view();

    animation-range:
        entry 0% exit 100%,
        entry 0% exit 100%;

    will-change:
        opacity,
        filter,
        transform;
}



/* =====================================================
   4.3 BLUR + SLIDE RIGHT
===================================================== */

.scroll-effect-blur.scroll-effect-slide-right {

    animation-name:
        scroll-effect-blur-animation,
        scroll-effect-slide-right-animation;

    animation-timing-function:
        ease-in-out,
        ease-in-out;

    animation-fill-mode:
        both,
        both;

    animation-timeline:
        view(),
        view();

    animation-range:
        entry 0% exit 100%,
        entry 0% exit 100%;

    will-change:
        opacity,
        filter,
        transform;
}



/* =====================================================
   4.4 SCALE + SLIDE

   SCALE i SLIDE používají transform,
   takže musí být v jedné společné animaci.
===================================================== */


/* =========================
   SCALE + LEFT
========================= */

@keyframes scroll-effect-scale-slide-left-animation {

    0% {
        transform:
            translateX(-2rem)
            scale(0.97);
    }

    50% {
        transform:
            translateX(0)
            scale(1);
    }

    100% {
        transform:
            translateX(-2rem)
            scale(0.97);
    }
}


.scroll-effect-scale.scroll-effect-slide-left {

    animation-name:
        scroll-effect-scale-slide-left-animation;

    animation-timing-function:
        ease-in-out;

    animation-fill-mode:
        both;

    animation-timeline:
        view();

    animation-range:
        entry 0% exit 100%;

    transform-origin:
        center center;

    will-change:
        transform;
}



/* =========================
   SCALE + RIGHT
========================= */

@keyframes scroll-effect-scale-slide-right-animation {

    0% {
        transform:
            translateX(2rem)
            scale(0.97);
    }

    50% {
        transform:
            translateX(0)
            scale(1);
    }

    100% {
        transform:
            translateX(2rem)
            scale(0.97);
    }
}


.scroll-effect-scale.scroll-effect-slide-right {

    animation-name:
        scroll-effect-scale-slide-right-animation;

    animation-timing-function:
        ease-in-out;

    animation-fill-mode:
        both;

    animation-timeline:
        view();

    animation-range:
        entry 0% exit 100%;

    transform-origin:
        center center;

    will-change:
        transform;
}



/* =====================================================
   4.5 BLUR + SCALE + SLIDE LEFT
===================================================== */

.scroll-effect-blur.scroll-effect-scale.scroll-effect-slide-left {

    animation-name:
        scroll-effect-blur-animation,
        scroll-effect-scale-slide-left-animation;

    animation-timing-function:
        ease-in-out,
        ease-in-out;

    animation-fill-mode:
        both,
        both;

    animation-timeline:
        view(),
        view();

    animation-range:
        entry 0% exit 100%,
        entry 0% exit 100%;

    transform-origin:
        center center;

    will-change:
        opacity,
        filter,
        transform;
}



/* =====================================================
   4.6 BLUR + SCALE + SLIDE RIGHT
===================================================== */

.scroll-effect-blur.scroll-effect-scale.scroll-effect-slide-right {

    animation-name:
        scroll-effect-blur-animation,
        scroll-effect-scale-slide-right-animation;

    animation-timing-function:
        ease-in-out,
        ease-in-out;

    animation-fill-mode:
        both,
        both;

    animation-timeline:
        view(),
        view();

    animation-range:
        entry 0% exit 100%,
        entry 0% exit 100%;

    transform-origin:
        center center;

    will-change:
        opacity,
        filter,
        transform;
}



/* =====================================================
   5) LOGA ZNAČEK – DESKTOP

   AKTIVUJE POUZE:
   .scroll-effect-logo

   SCROLL DOWN → DOLEVA
   SCROLL UP   → DOPRAVA

   LOGA U KRAJŮ:
   FADE + BLUR

   STŘED:
   PLNĚ OSTRÝ
===================================================== */


/* =========================
   5.1 UVOLNĚNÍ RODIČŮ
========================= */

.pageArticleDetail,
.pageArticleDetail .scroll-effect-logo,
.content-inner,
.content.wide,
.content-wrapper-in {

    overflow: visible !important;
}



/* =========================
   5.2 FULL-WIDTH WRAPPER
========================= */

.scroll-effect-logo .logo-scroll-wrapper {

    position: relative !important;

    display: flex !important;

    justify-content: center !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left:
        calc(50% - 50vw) !important;

    margin-right:
        calc(50% - 50vw) !important;

    overflow: hidden !important;

    view-timeline-name:
        --logo-scroll-timeline;

    view-timeline-axis:
        block;
}



/* =========================
   5.3 HORIZONTÁLNÍ POHYB
========================= */

@keyframes logo-scroll-horizontal {

    from {
        transform:
            translateX(6vw);
    }

    to {
        transform:
            translateX(-6vw);
    }
}



/* =========================
   5.4 PÁS S LOGY
========================= */

.scroll-effect-logo .logo-scroll {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    gap: 4rem !important;

    width: max-content !important;
    max-width: none !important;

    flex: 0 0 auto !important;

    will-change:
        transform;

    animation-name:
        logo-scroll-horizontal;

    animation-timing-function:
        linear;

    animation-fill-mode:
        both;

    animation-timeline:
        --logo-scroll-timeline;

    animation-range:
        entry 0%
        exit 100%;
}



/* =====================================================
   5.5 FADE + BLUR NA KRAJÍCH
===================================================== */

@media (min-width: 768px) {


    /* =========================
       FADE CELÉHO PÁSU
    ========================= */

    .scroll-effect-logo
    .logo-scroll-wrapper {

        -webkit-mask-image:
            linear-gradient(
                to right,

                transparent 0%,
                rgba(0, 0, 0, 0.25) 2%,
                rgba(0, 0, 0, 0.6) 4%,
                rgba(0, 0, 0, 0.9) 7%,
                #000 10%,

                #000 90%,
                rgba(0, 0, 0, 0.9) 93%,
                rgba(0, 0, 0, 0.6) 96%,
                rgba(0, 0, 0, 0.25) 98%,
                transparent 100%
            );


        mask-image:
            linear-gradient(
                to right,

                transparent 0%,
                rgba(0, 0, 0, 0.25) 2%,
                rgba(0, 0, 0, 0.6) 4%,
                rgba(0, 0, 0, 0.9) 7%,
                #000 10%,

                #000 90%,
                rgba(0, 0, 0, 0.9) 93%,
                rgba(0, 0, 0, 0.6) 96%,
                rgba(0, 0, 0, 0.25) 98%,
                transparent 100%
            );
    }



    /* =========================
       BLUR ZÓNY
    ========================= */

    .scroll-effect-logo
    .logo-scroll-wrapper::before,

    .scroll-effect-logo
    .logo-scroll-wrapper::after {

        content: "";

        position: absolute;

        top: 0;
        bottom: 0;

        width: 10vw;

        z-index: 10;

        pointer-events: none;

        backdrop-filter:
            blur(3px);

        -webkit-backdrop-filter:
            blur(3px);
    }



    /* =========================
       LEVÝ OKRAJ
    ========================= */

    .scroll-effect-logo
    .logo-scroll-wrapper::before {

        left: 0;


        -webkit-mask-image:
            linear-gradient(
                to right,

                #000 0%,
                rgba(0, 0, 0, 0.8) 25%,
                rgba(0, 0, 0, 0.4) 55%,
                transparent 100%
            );


        mask-image:
            linear-gradient(
                to right,

                #000 0%,
                rgba(0, 0, 0, 0.8) 25%,
                rgba(0, 0, 0, 0.4) 55%,
                transparent 100%
            );
    }



    /* =========================
       PRAVÝ OKRAJ
    ========================= */

    .scroll-effect-logo
    .logo-scroll-wrapper::after {

        right: 0;


        -webkit-mask-image:
            linear-gradient(
                to left,

                #000 0%,
                rgba(0, 0, 0, 0.8) 25%,
                rgba(0, 0, 0, 0.4) 55%,
                transparent 100%
            );


        mask-image:
            linear-gradient(
                to left,

                #000 0%,
                rgba(0, 0, 0, 0.8) 25%,
                rgba(0, 0, 0, 0.4) 55%,
                transparent 100%
            );
    }

}



/* =====================================================
   5.6 SPOLEČNÉ NASTAVENÍ LOG
===================================================== */

.scroll-effect-logo
.logo-scroll img {

    display: block !important;

    width: auto !important;

    max-width: none !important;
    max-height: none !important;

    flex: 0 0 auto !important;

    object-fit: contain;

    /* bílé SVG → černé */

    filter: invert(1);
}



/* =====================================================
   5.7 INDIVIDUÁLNÍ VÝŠKY LOG
===================================================== */

.scroll-effect-logo
.logo-scroll img[alt="AK-Ski"] {
    height: 35px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="Lacroix"] {
    height: 35px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="Volant"] {
    height: 35px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="Bogner"] {
    height: 35px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="Stöckli"] {
    height: 20px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="Rossignol"] {
    height: 35px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="Head"] {
    height: 20px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="Völkl"] {
    height: 35px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="Atomic"] {
    height: 35px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="Salomon"] {
    height: 20px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="K2"] {
    height: 35px !important;
}


.scroll-effect-logo
.logo-scroll img[alt="Dynastar"] {
    height: 35px !important;
}



/* =====================================================
   6) LOGA ZNAČEK – MOBILE

   POUZE KLASICKÝ HORIZONTÁLNÍ SWIPE

   BEZ:
   - scroll-driven animace
   - opacity
   - blur
   - masky
   - edge efektu
===================================================== */

@media (max-width: 767px) {


    /* =========================
       6.1 WRAPPER
    ========================= */

    .scroll-effect-logo
    .logo-scroll-wrapper {

        position: relative !important;

        display: block !important;

        left: 50% !important;

        width: 100vw !important;
        max-width: 100vw !important;

        margin-left:
            -50vw !important;

        margin-right:
            0 !important;

        padding:
            0 !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none !important;

        box-sizing:
            border-box !important;

        -webkit-mask-image:
            none !important;

        mask-image:
            none !important;
    }



    /* =========================
       6.2 SCHOVÁNÍ SCROLLBARU
    ========================= */

    .scroll-effect-logo
    .logo-scroll-wrapper::-webkit-scrollbar {

        display:
            none !important;

        width:
            0 !important;

        height:
            0 !important;
    }



    /* =========================
       6.3 ZRUŠENÍ EDGE BLURU
    ========================= */

    .scroll-effect-logo
    .logo-scroll-wrapper::before,

    .scroll-effect-logo
    .logo-scroll-wrapper::after {

        display:
            none !important;

        content:
            none !important;
    }



    /* =========================
       6.4 PÁS S LOGY
    ========================= */

    .scroll-effect-logo
    .logo-scroll {

        position:
            static !important;

        left:
            auto !important;

        right:
            auto !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        width:
            max-content !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        gap:
            3rem !important;

        animation:
            none !important;

        animation-timeline:
            auto !important;

        transform:
            none !important;

        opacity:
            1 !important;

        box-sizing:
            border-box !important;
    }



    /* =========================
       6.5 LOGA
    ========================= */

    .scroll-effect-logo
    .logo-scroll img {

        flex:
            0 0 auto !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }

}



/* =====================================================
   7) REDUCED MOTION
===================================================== */

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


    /* =========================
       BLUR
    ========================= */

    .scroll-effect-blur {

        animation:
            none !important;

        animation-timeline:
            auto !important;

        opacity:
            1 !important;

        filter:
            none !important;
    }



    /* =========================
       SCALE
    ========================= */

    .scroll-effect-scale {

        animation:
            none !important;

        animation-timeline:
            auto !important;

        transform:
            none !important;
    }



    /* =========================
       SLIDE LEFT
       SLIDE RIGHT
    ========================= */

    .scroll-effect-slide-left,
    .scroll-effect-slide-right {

        animation:
            none !important;

        animation-timeline:
            auto !important;

        transform:
            none !important;
    }



    /* =========================
       KOMBINACE
    ========================= */

    .scroll-effect-blur.scroll-effect-scale,

    .scroll-effect-blur.scroll-effect-slide-left,
    .scroll-effect-blur.scroll-effect-slide-right,

    .scroll-effect-scale.scroll-effect-slide-left,
    .scroll-effect-scale.scroll-effect-slide-right,

    .scroll-effect-blur.scroll-effect-scale.scroll-effect-slide-left,
    .scroll-effect-blur.scroll-effect-scale.scroll-effect-slide-right {

        animation:
            none !important;

        animation-timeline:
            auto !important;

        transform:
            none !important;

        opacity:
            1 !important;

        filter:
            none !important;
    }



    /* =========================
       LOGA
    ========================= */

    .scroll-effect-logo
    .logo-scroll {

        animation:
            none !important;

        animation-timeline:
            auto !important;

        transform:
            none !important;
    }

}