/* VARIABLES */

:root{
    --watcher-width: 600px;
    --slidercard-width: 15%;
    --card-rotation: 30deg;
    --card-y-offset: 64px;
    --rise: -40px;
    --card-border-width: 12px;
    --watcher-borad: 16px;
    --eyeball-size: 19%;
}

/* WATCHER */

.watcher{
    position: relative;
    width: var(--watcher-width);
    aspect-ratio: 1.25;
}

.watcher-img{
    width: 100%;
}

/* CARDS */

.watcher-slider{
    width: var(--slidercard-width);
    position: absolute;
    bottom: var(--card-y-offset);
    left: calc(50% - var(--slidercard-width)/2 - var(--card-border-width));
    transform-origin: bottom;
}

.watcher-slider:nth-of-type(1){
    transform: rotateZ(calc(var(--card-rotation) * -2));
}

.watcher-slider:nth-of-type(2){
    transform: rotateZ(calc(var(--card-rotation) * -1));
}

.watcher-slider:nth-of-type(4){
    transform: rotateZ(calc(var(--card-rotation) * 1));
}

.watcher-slider:nth-of-type(5){
    transform: rotateZ(calc(var(--card-rotation) * 2));
}

.watcher-card{
    background: var(--purple);
    border-radius: var(--watcher-borad);
    border: var(--card-border-width) solid var(--pink);
    width: 100%;
    aspect-ratio: 63/88;
    transition: 0.5s;
}

.risen{
    transform: translateY(var(--rise));
}

/* EYES */

.glasses{
    position: absolute;
    width: 100%;
    top: 35%;
}

.eyeballs{
    display: flex;
    justify-content: space-between;
    margin: 0 35%;
}

.eyeball{
    position: relative;
    width: var(--eyeball-size);
    background: var(--purple);
    aspect-ratio: 1;
    border-radius: 100%;
    transform-origin: center;
    transition: 1.0s;
}

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

@keyframes spiral2 {
    from{
        rotate: -180deg;
    }
    to{
        rotate: 180deg;
    }
}

.eyeball-spiral{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 50%;
    transform-origin: center;
    scale: 1.5;
    transition: 0.3s;
}

.eyeball:first-of-type .eyeball-spiral{
    animation: spiral 1s infinite linear;
}

.eyeball:last-of-type .eyeball-spiral{
    animation: spiral2 1s infinite linear;
}

/* RESPONSIVE */

@media (max-width: 1234px) {
    :root{
        --card-y-offset: 24px;
        --rise: -20px;
    }

    .watcher{
        width: 80vw;
        max-width: 500px;
    }
}