:root {
    --ml-hue: 223;
    --ml-primary100: hsl(var(--ml-hue) 90% 95%);
    --ml-primary300: hsl(var(--ml-hue) 90% 75%);
    --ml-primary500: hsl(var(--ml-hue) 90% 55%);
    --ml-primary900: hsl(var(--ml-hue) 90% 15%);
    --ml-trans-dur: 0.3s;
    
    --ml-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
    --ml-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ml-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

.poc-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 27, 42, 0.6); 
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.ml-stack {
    --ml-stack-dur: 2s;
    --ml-stack-delay: 0.05;
    --ml-stack-spacing: 15%;

    position: relative;
    width: 14em;
    height: 14em;
}

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


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

/*card second*/
.ml-stack__card:nth-child(2) {
    top: 0;
}
.ml-stack__card:nth-child(2)::before {
    animation-delay: calc(var(--ml-stack-dur) * (-1 + var(--ml-stack-delay)));
    background-color: var(--ml-primary300);
}

/*card third*/
.ml-stack__card:nth-child(3) {
    top: calc(var(--ml-stack-spacing) * -1);
}
    .ml-stack__card:nth-child(3)::before {
        animation-delay: calc(var(--ml-stack-dur) * (-1 + var(--ml-stack-delay) * 2));
        background-color: var(--ml-primary100);
        background-image: url('../../assets/icon/logo-payment-hub-192.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 80%;
    }

/*Animation*/
@keyframes ml-card {
    0%,
    100% {
        animation-timing-function: var(--ml-ease-in-out);
        transform: translateZ(0);
    }
    11% {
        animation-timing-function: var(--ml-ease-in);
        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: var(--ml-ease-out);
        opacity: 1;
        transform: translateZ(0);
    }
    61% {
        animation-timing-function: var(--ml-ease-in-out);
        transform: translateZ(-1.8em);
    }
    74% {
        animation-timing-function: var(--ml-ease-in-out);
        transform: translateZ((1.8em / 3));
    }
    87% {
        animation-timing-function: var(--ml-ease-in-out);
        transform: translateZ((-1.8em / 9));
    }
}