/* Estilos para centralizar o loader dentro do preloader-area */
.preloader-area .stack {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.stack {
    --stack-dur: 2s;
    --stack-delay: 0.05;
    --stack-spacing: 10%;
    overflow: hidden;
    position: relative;
    width: 14em;
    height: 32em;
}

.stack__card {
    aspect-ratio: 1;
    position: absolute;
    inset: 0;
    top: var(--stack-spacing);
    margin: auto;
    width: 70%;
    transform: rotateX(45deg) rotateZ(-45deg);
    transform-style: preserve-3d;
}

.stack__card::before {
    animation: card var(--stack-dur) infinite;
    background-color: #000;
    border-radius: 7.5%;
    box-shadow: -0.5em 0.5em 1.5em hsl(var(--hue), 90%, 15%, 0.1);
    content: "";
    display: block;
    position: absolute;
    inset: 0;
}

.stack__text {
    position: absolute;
    bottom: 2%;
    left: 28%;
    font-size: 1em;
    color: #000000;
    pointer-events: none;
    font-weight: 700;
}

.stack__card:nth-child(2) {
    top: 0;
}

.stack__card:nth-child(2)::before {
    animation-delay: calc(var(--stack-dur) * (-1 + var(--stack-delay)));
    background-color: #5b5b5b;
}

.stack__card:nth-child(3) {
    top: calc(var(--stack-spacing) * -1);
}

.stack__card:nth-child(3)::before {
    animation-delay: calc(var(--stack-dur) * (-1 + var(--stack-delay) * 2));
    background-color: #FFCD35;
    background-image: url("/assets/images/standout-logo-ico-dark.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Animations */
@keyframes card {

    0%,
    100% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translateZ(0);
    }

    11% {
        animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
        opacity: 1;
        transform: translateZ(0.125em);
    }

    34% {
        animation-timing-function: steps(1);
        opacity: 0;
        transform: translateZ(-12em);
    }

    48% {
        animation-timing-function: linear;
        opacity: 0;
        transform: translateZ(12em);
    }

    57% {
        animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
        opacity: 1;
        transform: translateZ(0);
    }

    61% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translateZ(-1.8em);
    }

    74% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translateZ(0.6em);
    }

    87% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translateZ(-0.2em);
    }
}