/* Games block — card scroller with scroll reveal + hover tilt */
.games-scroller {
    --games-count: 5;
    --games-scroll-vh: 6;
    position: relative;
    height: calc(var(--games-scroll-vh) * 100vh);
    min-height: calc(var(--games-scroll-vh) * 600px);
    background: #050505;
    z-index: 2;
    isolation: isolate;
}

.games-scroller__viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: #050505;
}

.games-scroller__cards {
    position: absolute;
    top: 0;
    right: clamp(24px, 4vw, 56px);
    bottom: 0;
    width: min(52vw, 560px);
    perspective: 1400px;
    perspective-origin: 75% 50%;
    transform: translateY(-8px);
}

.games-scroller__card {
    position: absolute;
    width: clamp(220px, 30vw, 400px);
    height: min(clamp(220px, 30vw, 400px), var(--games-card-max-vh, 38vh));
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    z-index: var(--card-z, 1);
    top: var(--card-top, 3vh);
    right: var(--card-right, 8%);
    left: auto;
    margin: 0;
    opacity: 0;
    transform: rotate(var(--card-rotate, 0deg)) translateY(110vh) scale(0.92);
    transform-origin: 72% 88%;
    transform-style: preserve-3d;
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.games-scroller__card.is-visible {
    opacity: 1;
    transform: rotate(var(--card-rotate, 0deg)) translateY(0) scale(1);
}

.games-scroller__card.is-visible.is-tilting {
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.12s ease-out;
}

.games-scroller__card-link {
    display: block;
    width: 100%;
    height: 100%;
}

.games-scroller__card-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

@media (max-width: 900px) {
    .games-scroller__cards {
        right: 20px;
        width: min(72vw, 400px);
    }

    .games-scroller__card {
        width: clamp(180px, 62vw, 320px);
        height: min(clamp(180px, 62vw, 320px), var(--games-card-max-vh, 38vh));
    }
}

@media (max-width: 479px) {
    .games-scroller__cards {
        right: 16px;
        left: 16px;
        width: auto;
    }

    .games-scroller__card {
        width: min(72vw, 300px);
        height: min(72vw, 300px, var(--games-card-max-vh, 36vh));
        right: 0 !important;
    }
}