@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

:root{
    --ground-light-level: #2b2b2b;
    --light-level: #151515;
    --reflection-distance: 105%;
    --reflection-length: 15%;
    --reflection-opacity: 0.2;
}

body {
    font-family: "Staatliches", sans-serif;
    color: white;
    background-color: #040404;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}

a{
    text-decoration: none;
}

h1{
    font-size: 150%;
    font-weight: bolder;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #000000;
    margin: 0;
    padding: 1% 2%;
}

#stand{
    position: absolute;
    top: 0;
    bottom: 30%;
    background-color: var(--light-level);
    min-width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;

}

#stand::before{
    content: "";
    position: absolute;
    display: block;
    inset: 100% 0 -60% 0;
    background: linear-gradient(0deg, rgba(0,0,0,1) 66%, var(--ground-light-level) 100%);
    border-top: #000000 2px solid;
}

#stand .poster {
    width: 15%;
    min-width: 200px;
    aspect-ratio: 355/715;
    background-size: cover;
    background-position: center;
    position: relative;
    transform: translateY(20%);
    margin: 0 30px;
    perspective: 187px;
    perspective-origin: 50% -86%;
    transition: transform .5s;
}


#stand .poster:hover{
    transform: translateY(10%);
    --reflection-distance: 120%;
    --reflection-length: 20%;
    --reflection-opacity: 0.4;
}

#stand .poster img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    aspect-ratio: 355/715;
    object-fit: fill;
    transition: transform .5s ease-in-out;
}

#stand .poster .reflection{
    height: 100%;
    width: 100%;
    position: absolute;
    inset: var(--reflection-distance) 0;
    transform: scaleY(-1);
    perspective: 300px;
    perspective-origin: 50% -86%;
    transition: top 0.5s;
    mask: linear-gradient(0deg, rgba(0,0,0,var(--reflection-opacity)) 0%, rgba(0,0,0,0) var(--reflection-length));
}

#stand .poster::before{
    content: "";
    position: absolute;
    display: block;
    inset: -100vh -40px -100vh -40px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(186 184 139 / 30%) 50%, rgba(0, 0, 0, 0) 100%);
    mix-blend-mode: color-burn;
    opacity: 0;
    transform: rotateX(75deg) scaleX(1.6);
    transition: opacity 0.5s;
    z-index: 100;
}

#stand .poster:hover::before{
    opacity: 1;
}