*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{
    height:100vh;
    overflow:hidden;
    background:transparent;
    font-family:Inter,Arial,sans-serif;
}


/* ============ 3D STAGE ============ */

.stage{

    height:100%;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    padding-right:30px;

    perspective:1800px;

}


.preview{

    height:100%;

    display:flex;
    gap:18px;

    transform-style:preserve-3d;

    /* resting pose: turned to the right */
    transform:rotateX(6deg) rotateY(-24deg);

    filter:
    drop-shadow(-22px 26px 40px rgba(0,0,0,.45));

}



.column{

    width:230px;

    overflow:hidden;

    transform-style:preserve-3d;

    mask-image:
    linear-gradient(
        to bottom,
        transparent,
        black 14%,
        black 86%,
        transparent
    );

}


/* the left column sits slightly forward, the right slightly back,
   so the rotation actually reads as depth rather than a flat skew */

.column.up{
    transform:translateZ(18px);
}

.column.down{
    transform:translateZ(-8px);
}



.track{

    display:flex;
    flex-direction:column;
    gap:18px;

    transform-style:preserve-3d;

}



.up .track{

    animation:up 30s linear infinite;

}


.down .track{

    animation:down 34s linear infinite;

}



.column:hover .track{

    animation-play-state:paused;

}

/* GAME CARD */

.game{

    height:150px;

    border-radius:20px;

    background:
    linear-gradient(
        145deg,
        #161616,
        #0d0d0d
    );


    border:1px solid rgba(255,255,255,.08);

    display:flex;
    align-items:flex-end;
    justify-content:center;

    position:relative;

    overflow:hidden;

    transform-style:preserve-3d;

    transition:
    transform .16s cubic-bezier(.22,1,.36,1),
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;

}



/* IMAGE — now fills the whole card */

.game img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    filter:none;
    opacity:1;

    transition:transform .18s ease, filter .18s ease;

}



.game:hover img{

    transform:scale(1.06);

}



/* scrim so the title stays readable over any image */

.game::after{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.85) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,0) 75%
    );

    pointer-events:none;

}



/* subtle glow on hover — sits above the image, below the text */

.game::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        140px circle at 50% 0%,
        rgba(255,255,255,.10),
        transparent 70%
    );

    opacity:0;

    transition:.2s ease;

    z-index:1;

}



.game:hover{

    border-color:
    rgba(255,255,255,.18);

    box-shadow:
    0 20px 34px rgba(0,0,0,.5);

}


.game:hover::before{

    opacity:1;

}



/* TITLE */

.game span{

    position:relative;
    z-index:2;

    padding:12px 10px;

    font-size:13.5px;

    color:#fff;

    font-weight:600;

    letter-spacing:-.01em;

    text-shadow:0 1px 3px rgba(0,0,0,.6);

}



@keyframes up{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-50%);
    }

}



@keyframes down{

    from{
        transform:translateY(-50%);
    }

    to{
        transform:translateY(0);
    }

}