/* VARIABLES */

:root{
    --drop-size: 150px;
    --flospeed: 9s; /* Rotation of card around camera axis */
    --fallspeed1: 12s; /* Duration it takes for entire card to fall */
    --fallspeed2: 13s;
    --fallspeed3: 14s;
    --flipspeed: 9s; /* Rotation of card around own axis */
}

/* CONTAINER */

.rain-container{
    min-height: 65vh /* ITD BE GREAT IF U COULD CENTER THE THINGBOB BRO!! */;
    position: relative;
    perspective: 800px;
    perspective-origin: bottom;
    overflow: hidden;
    width: 100%;
}

/* CARDS */

.rain-cart{
    position: absolute;
    top: 0;
}

.rain-card{
    aspect-ratio: 63/88;
    width: var(--drop-size);
    position: relative;
    transform-style: preserve-3d;
}

.rain-card img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    transform-style: preserve-3d;
}

.rain-back{
    rotate: y 180deg;
}

.rain-front{
    backface-visibility: hidden;
}

/* FALLING */

@keyframes fall{
    0%{
        top: -300px;
        opacity: 0;
    }
    10%{
        opacity: 1;
    }
    95%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        top: 80%;
    }
}

.faller1{
    animation: fall var(--fallspeed1) linear forwards;
}

.faller2{
    animation: fall var(--fallspeed2) linear forwards;
}

.faller3{
    animation: fall var(--fallspeed3) linear forwards;
}

/* SPINNING */

@keyframes rain-spin{
    from{
        transform: rotateY(0);
    }
    to{
        transform: rotateY(360deg);
    }
}

.spinleft .rain-back, .spinleft .rain-front{
    animation: rain-spin var(--flipspeed) infinite linear;
}

.spinright .rain-back, .spinright .rain-front{
    animation: rain-spin var(--flipspeed) infinite linear reverse;
}

@keyframes flotate{
    from{
        rotate: 0;
    }
    to{
        rotate: 360deg;
    }
}

.flotating-left .rain-card{
    animation: flotate var(--flospeed) infinite linear reverse;
}

.flotating-right .rain-card{
    animation: flotate var(--flospeed) infinite linear;
}

/* RESPONSIVE */

@media (max-width: 1234px) {
    :root{
        --drop-size: 100px;
    }

    .rain-container{
        min-height: 100vh;
    }
}