/*
==========================================================
FantasyFanzone Loading System
Version: 4.0
==========================================================
*/

/*======================================================
GLOBAL LOADING
======================================================*/

.ffz-loading{
    position:relative;

    pointer-events:none;

    user-select:none;
    -webkit-user-select:none;
}

.ffz-loading::after{
    content:"";

    position:absolute;

    inset:0;

    background:rgba(11,16,32,.45);

    border-radius:inherit;

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);

    z-index:2;
}

/*======================================================
SPINNER
======================================================*/

.ffz-spinner{
    width:42px;
    height:42px;

    border:4px solid rgba(255,255,255,.12);
    border-top-color:var(--ffz-primary);

    border-radius:50%;

    animation:
        ffzSpin .9s linear infinite;
}

@keyframes ffzSpin{

    to{
        transform:rotate(360deg);
    }

}

/*======================================================
CENTER LOADER
======================================================*/

.ffz-loader{
    display:flex;

    align-items:center;
    justify-content:center;

    min-height:140px;

    padding:60px 20px;
}

.ffz-loader--fullscreen{
    position:fixed;

    inset:0;

    min-height:100dvh;

    background:rgba(11,16,32,.9);

    z-index:var(--ffz-z-modal);
}

/*======================================================
SKELETON
======================================================*/

.ffz-skeleton{
    position:relative;

    overflow:hidden;

    background:rgba(255,255,255,.05);

    border-radius:12px;
}

.ffz-skeleton::before{
    content:"";

    position:absolute;

    inset:0;

    width:150%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transform:translateX(-100%);

    animation:
        ffzSkeleton 1.5s ease-in-out infinite;
}

@keyframes ffzSkeleton{

    100%{
        transform:translateX(100%);
    }

}

/*======================================================
COMMON SKELETONS
======================================================*/

.ffz-skeleton-title{
    width:60%;
    height:26px;

    margin-bottom:16px;
}

.ffz-skeleton-text{
    width:100%;
    height:14px;

    margin-bottom:10px;
}

.ffz-skeleton-text:last-child{
    width:70%;
}

.ffz-skeleton-image{
    width:100%;

    aspect-ratio:16/9;

    border-radius:18px;
}

.ffz-skeleton-avatar{
    width:56px;
    height:56px;

    border-radius:50%;
}

/*======================================================
CARD LOADING
======================================================*/

.ffz-card--loading{
    position:relative;

    overflow:hidden;

    pointer-events:none;
}

.ffz-card--loading > *{
    visibility:hidden;
}

.ffz-card--loading::after{
    content:"";

    position:absolute;

    inset:0;

    width:150%;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.08),
        rgba(255,255,255,0)
    );

    transform:translateX(-100%);

    animation:
        ffzLoadingCard 1.4s ease-in-out infinite;
}

@keyframes ffzLoadingCard{

    100%{
        transform:translateX(100%);
    }

}

/*======================================================
DOTS
======================================================*/

.ffz-loading-dots{
    display:inline-flex;

    align-items:center;

    gap:6px;
}

.ffz-loading-dots span{
    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--ffz-primary);

    animation:
        ffzDots 1s ease-in-out infinite;
}

.ffz-loading-dots span:nth-child(2){
    animation-delay:.15s;
}

.ffz-loading-dots span:nth-child(3){
    animation-delay:.3s;
}

@keyframes ffzDots{

    0%,
    80%,
    100%{
        transform:scale(.6);

        opacity:.4;
    }

    40%{
        transform:scale(1);

        opacity:1;
    }

}

/*======================================================
ACCESSIBILITY
======================================================*/

.ffz-loading[aria-busy="true"]{
    cursor:progress;
}

/*======================================================
REDUCED MOTION
======================================================*/

@media(prefers-reduced-motion:reduce){

    .ffz-spinner,
    .ffz-skeleton::before,
    .ffz-card--loading::after,
    .ffz-loading-dots span{
        animation:none;
    }

    .ffz-spinner{
        border-color:rgba(255,255,255,.12);
        border-top-color:var(--ffz-primary);
    }

    .ffz-skeleton::before,
    .ffz-card--loading::after{
        display:none;
    }

    .ffz-loading-dots span{
        transform:none;

        opacity:1;
    }

}