/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[3]!./app/components/CarouselCards.module.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
/* Carousel — Cross-browser compatible (Chrome scroll-driven + JS fallback for FF/Safari) */
/* Card aspect ratio: 63mm × 88mm (standard TCG) */

.CarouselCards_app__l9oww {
    display: grid;
    place-items: center;
    width: 100vw;
    max-width: 100%;
    height: 600px;
    overflow: visible;
    position: relative;
}

/* Edge vignette — wide, soft, blurred fade on both sides */
.CarouselCards_app__l9oww::before,
.CarouselCards_app__l9oww::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15%;
    z-index: 20;
    pointer-events: none;
}

.CarouselCards_app__l9oww::before {
    left: 0;
    background: linear-gradient(to right,
            #000000 0%,
            rgba(0, 0, 0, 0.85) 20%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.15) 80%,
            transparent 100%);
}

.CarouselCards_app__l9oww::after {
    right: 0;
    background: linear-gradient(to left,
            #000000 0%,
            rgba(0, 0, 0, 0.85) 20%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.15) 80%,
            transparent 100%);
}

.CarouselCards_cards__lNvBI {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1400px;

    list-style: none;
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
    width: 95vw;
    max-width: 1600px;
    place-items: center;

    scroll-snap-type: x mandatory;

    /* Hide scrollbars */
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* Desktop drag cursor */
    cursor: grab;
}

.CarouselCards_cards__lNvBI:active {
    cursor: grabbing;
}

.CarouselCards_cards__lNvBI::-webkit-scrollbar {
    display: none;
}

.CarouselCards_card__gQmG8 {
    flex: 1 0 23cqw;
    min-width: 350px;
    margin: 0 -3.5cqw;
}

/* Compensate for the min-width of 350px on very small screens */
@media (max-width: 1024px) {
    .CarouselCards_card__gQmG8 {
        margin: 0 -45px;
    }
}

.CarouselCards_card__gQmG8:not([aria-hidden="true"]) {
    scroll-snap-align: center;
}

/* innerCard: only structural wrapper for hover overlay */
.CarouselCards_innerCard__mjUtK {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 13px;
    container-type: inline-size;
    container-name: card;
    overflow: hidden;

    /* Reflection gradient correctly fades out going downwards */
    -webkit-box-reflect: below 1vmin linear-gradient(transparent 0 60%, hsl(0 0% 100% / 0.15) 100%);

    transition: none;
    /* JS handles updates directly */
}

/* Image */
.CarouselCards_image__b38ff {
    border-radius: 13px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: hsl(10 80% 80%);
}

/* imageWrapper: shrink animation */
.CarouselCards_imageWrapper___Y2Qi {
    height: 100%;
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
    perspective: 100vmin;

    transition: none;
}

/* Hover overlay — slides up from bottom, half-height */
.CarouselCards_hoverOverlay__aM2Jq {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.3) 85%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 1.25rem 1rem 1.5rem;
    border-radius: 0 0 13px 13px;
    z-index: 10;
    pointer-events: auto;

    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.CarouselCards_innerCard__mjUtK:hover .CarouselCards_hoverOverlay__aM2Jq {
    transform: translateY(0);
    opacity: 1;
}


/* ============================================================
   Chromium-only: CSS Scroll-Driven Animation enhancement
   These are ignored by Firefox/Safari, where JS handles it
   ============================================================ */

@supports (animation-timeline: scroll()) {
    .CarouselCards_app__l9oww {
        timeline-scope: --myScroller;
        view-timeline-axis: inline;
    }

    .CarouselCards_cards__lNvBI {
        scroll-timeline-name: --myScroller;
        scroll-timeline-axis: x;
    }

    .CarouselCards_card__gQmG8 {
        view-timeline: --cover;
        view-timeline-axis: inline;

        animation: CarouselCards_z__Uxuf_ both linear;
        animation-timeline: --cover;
        animation-range: cover;
    }

    .CarouselCards_innerCard__mjUtK {
        animation: CarouselCards_cover-flow__2GFVS both linear;
        animation-timeline: --cover;
        animation-range: cover;
    }

    .CarouselCards_imageWrapper___Y2Qi {
        animation: CarouselCards_shrink__o5BRK both linear;
        animation-timeline: --cover;
        animation-range: cover;
    }

    @keyframes CarouselCards_z__Uxuf_ {
        0% {
            z-index: 0;
        }

        50% {
            z-index: 4;
        }
    }

    @keyframes CarouselCards_shrink__o5BRK {
        0% {
            scale: 0.55;
            opacity: 0;
            transform-origin: -150% 50%;
            filter: blur(4px) brightness(0.35);
        }

        5% {
            opacity: 1;
        }

        10% {
            opacity: 1;
            scale: 1;
            transform-origin: 50% 50%;
            filter: blur(2px) brightness(0.6);
        }

        35% {
            scale: 1;
            opacity: 1;
            transform: translate3d(0, 0, 0vmin);
            filter: blur(1px) brightness(0.75);
        }

        50% {
            opacity: 1;
            transform: translate3d(0, 0, 15vmin);
            filter: blur(0px) brightness(1);
        }

        65% {
            scale: 1;
            opacity: 1;
            transform: translate3d(0, 0, 0vmin);
            filter: blur(1px) brightness(0.75);
        }

        90% {
            opacity: 1;
            transform-origin: 50% 50%;
            scale: 1;
            filter: blur(2px) brightness(0.6);
        }

        95% {
            opacity: 1;
        }

        100% {
            scale: 0.55;
            opacity: 0;
            transform-origin: 250% 50%;
            filter: blur(4px) brightness(0.35);
        }
    }

    @keyframes CarouselCards_cover-flow__2GFVS {
        0% {
            transform: translate(-50%, 0) rotateY(-33deg) scale(0.66);
        }

        20% {
            transform: translate(0%, 0) rotateY(-33deg) scale(0.66);
        }

        40% {
            transform: translate(15%, 0) rotateY(-20deg) scale(0.85);
        }

        50% {
            transform: translate(0, 0) rotateY(0deg) scale(1);
        }

        60% {
            transform: translate(-15%, 0) rotateY(20deg) scale(0.85);
        }

        80% {
            transform: translate(0%, 0) rotateY(33deg) scale(0.66);
        }

        100% {
            transform: translate(50%, 0) rotateY(33deg) scale(0.66);
        }
    }
}