/* ══════════════════════════════════════════
   Elite Creed — Dashboard Background Illustrations
   Floating SVGs & Gold Dust for All Dashboard Pages
   ══════════════════════════════════════════ */

/* ── Gold Dust Layer (second layer over layout.css ::before) ── */
.dashboard::after {
    content: '';
    position: fixed;
    inset: -15%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle, rgba(255, 215, 0, 0.18) 0 0.9px, transparent 2.2px) 0 0 / 190px 190px,
        radial-gradient(circle, rgba(255, 165, 0, 0.12) 0 1.1px, transparent 2.6px) 40px 80px / 260px 260px,
        radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 0.8px, transparent 2px) 20px 50px / 220px 220px;
    opacity: 0.3;
    filter: blur(0.4px);
    animation: dash-gold-dust 30s linear infinite alternate;
}

/* ── Illustration Container ── */
.dashboard-illustrations {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* ── Base Style for Dashboard Illustrations ── */
.dash-illust {
    position: absolute;
    color: var(--color-primary);
    fill: none;
    stroke: currentColor;
    filter: blur(0.5px);
}

.dash-illust text {
    fill: currentColor;
    stroke: none;
}

/* ── Sedan (top-right) ── */
.dash-illust--sedan {
    width: 320px;
    top: 12%;
    right: -4%;
    opacity: 0.03;
    animation: dash-drift 35s ease-in-out infinite;
}

/* ── Money Stack (bottom-left) ── */
.dash-illust--money {
    width: 120px;
    bottom: 8%;
    left: 3%;
    opacity: 0.035;
    animation: dash-drift 28s ease-in-out infinite reverse;
    animation-delay: 4s;
}

/* ── Coin 1 (top-left) ── */
.dash-illust--coin-1 {
    width: 55px;
    top: 20%;
    left: 6%;
    opacity: 0.03;
    animation: dash-bob 22s ease-in-out infinite;
}

/* ── Coin 2 (bottom-right) ── */
.dash-illust--coin-2 {
    width: 42px;
    bottom: 22%;
    right: 8%;
    opacity: 0.025;
    animation: dash-bob 26s ease-in-out infinite;
    animation-delay: 6s;
}

/* ── Naira Symbol (center-left) ── */
.dash-illust--naira {
    width: 40px;
    height: 40px;
    top: 55%;
    left: 12%;
    opacity: 0.025;
    color: var(--color-primary);
    animation: dash-float 20s ease-in-out infinite;
}

.dash-illust--naira svg {
    width: 100%;
    height: 100%;
}

/* ── Shield (center-right) ── */
.dash-illust--shield {
    width: 80px;
    top: 40%;
    right: 5%;
    opacity: 0.025;
    animation: dash-drift 32s ease-in-out infinite;
    animation-delay: 8s;
}

/* ── Key (bottom-center) ── */
.dash-illust--key {
    width: 110px;
    bottom: 15%;
    left: 40%;
    opacity: 0.02;
    animation: dash-drift 38s ease-in-out infinite reverse;
    animation-delay: 12s;
}

/* ── Subtle Aura Glow ── */
.dashboard-illustrations::before {
    content: '';
    position: absolute;
    top: -5%;
    right: -8%;
    width: min(35vw, 400px);
    height: min(35vw, 400px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 40%, rgba(255, 215, 0, 0.08), transparent 50%);
    opacity: 0.6;
    filter: blur(8px);
    animation: dash-aura 22s ease-in-out infinite;
    pointer-events: none;
}

.dashboard-illustrations::after {
    content: '';
    position: absolute;
    bottom: -5%;
    left: -5%;
    width: min(28vw, 320px);
    height: min(28vw, 320px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 55% 55%, rgba(255, 215, 0, 0.06), transparent 45%);
    opacity: 0.5;
    filter: blur(10px);
    animation: dash-aura 18s ease-in-out infinite reverse;
    pointer-events: none;
}

/* ── Animations ── */
@keyframes dash-gold-dust {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(20px, -14px, 0) scale(1.03);
    }
    100% {
        transform: translate3d(-16px, 16px, 0) scale(0.98);
    }
}

@keyframes dash-drift {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(8px, -6px);
    }
    50% {
        transform: translate(-4px, -10px);
    }
    75% {
        transform: translate(6px, -4px);
    }
}

@keyframes dash-bob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

@keyframes dash-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.025;
    }
    50% {
        transform: translateY(-18px) rotate(6deg);
        opacity: 0.04;
    }
}

@keyframes dash-aura {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-18px, 14px, 0) scale(1.06);
    }
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .dash-illust--sedan {
        width: 240px;
        opacity: 0.025;
    }
    .dash-illust--money {
        width: 90px;
    }
    .dash-illust--shield,
    .dash-illust--key {
        display: none;
    }
    .dashboard-illustrations::before {
        width: min(30vw, 280px);
        height: min(30vw, 280px);
    }
    .dashboard-illustrations::after {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .dash-illust--sedan,
    .dash-illust--coin-2,
    .dash-illust--naira,
    .dash-illust--shield,
    .dash-illust--key {
        display: none;
    }
    .dash-illust--money {
        width: 70px;
        opacity: 0.025;
    }
    .dash-illust--coin-1 {
        width: 38px;
        opacity: 0.02;
    }
    .dashboard::after {
        opacity: 0.2;
    }
    .dashboard-illustrations::before,
    .dashboard-illustrations::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard::after,
    .dash-illust,
    .dash-illust--naira,
    .dashboard-illustrations::before,
    .dashboard-illustrations::after {
        animation: none !important;
    }
}