@charset "utf-8";
/* CSS Document */

.premium-slider {
    width: min(90vw, 440px);
    aspect-ratio: 1 / 1;

    margin: 80px auto 50px auto;

    position: relative;
    overflow: hidden;

    background: transparent;

    /* border-radius: 12px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.05); */
}


/* BANNERS */

.premium-banner {
    position: absolute;
    inset: 0;

    opacity: 0;

    transition: opacity 1.5s ease-in-out;

    pointer-events: none;
}

.premium-banner.active {
    opacity: 1;
}


/* Image */

.premium-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* LIGHT SWEEP */

.banner-sweep {
    position: absolute;

    top: 0;
    left: -40%;

    width: 25%;
    height: 100%;

    pointer-events: none;

    opacity: 0;

    transform: skewX(-18deg);

    /* background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        ); */

    filter: blur(4px);
}


/* Sweep animation */

.banner-sweep.animate {
    animation: bannerSweep 1.6s ease-in-out;
}


@keyframes bannerSweep {

    0% {
        left: -40%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0.7;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .premium-slider {
        width: 250px;
        margin: 55px auto 30px auto;

        border-radius: 8px;
    }

}