/* ═══════════════════════════════════════════════════════
   ANIMATIONS — Agerpix v2 Design System
   Transitions, transforms, and full-screen loader
   ═══════════════════════════════════════════════════════ */

.scaled {
    transform: scale(0.8);
}

.has_animation {
    transition: right 0.4s cubic-bezier(0.32,0.72,0,1);
}

.has_top_animation {
    transition: top 0.4s cubic-bezier(0.32,0.72,0,1);
}

/* ── Full-screen overlay loader ── */
.full-loader-bg {
    background-color: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1500000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-loader-wp {
    text-align: center;
}

.lds-wp {
    width: 100%;
    text-align: center;
}

.lds-roller {
    display: inline-block;
    position: relative;
    width: 56px;
    height: 56px;
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 28px 28px;
}

.lds-roller div:after {
    content: "";
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-text-muted, #9ca3af);
    opacity: 0.6;
    margin: -2.5px 0 0 -2.5px;
}

.full-loader-bg .lds-roller div:after {
    background: #fff;
    opacity: 0.85;
}

.lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.lds-roller div:nth-child(1):after { top: 44px; left: 44px; }
.lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.lds-roller div:nth-child(2):after { top: 48px; left: 40px; }
.lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.lds-roller div:nth-child(3):after { top: 50px; left: 34px; }
.lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.lds-roller div:nth-child(4):after { top: 51px; left: 28px; }
.lds-roller div:nth-child(5) { animation-delay: -0.18s; }
.lds-roller div:nth-child(5):after { top: 50px; left: 22px; }
.lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.lds-roller div:nth-child(6):after { top: 48px; left: 17px; }
.lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.lds-roller div:nth-child(7):after { top: 44px; left: 12px; }
.lds-roller div:nth-child(8) { animation-delay: -0.288s; }
.lds-roller div:nth-child(8):after { top: 40px; left: 9px; }

@keyframes lds-roller {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}