/* ============================================================
   AAROGYOM — Page Loader
   dist/assets/vendor/css/loader.css

   Include order: load this BEFORE db-shared.css so the
   loader is visible from the very first paint.
   ============================================================ */

/* ── Overlay ──────────────────────────────────────────────── */
#aaLoader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #0a2351;          /* AAROGYOM dark-blue */
    overflow: hidden;

    /* Exit transition */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

#aaLoader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Ambient background glow ──────────────────────────────── */
#aaLoader::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(230, 93, 10, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    animation: aaGlowDrift 4s ease-in-out infinite alternate;
    pointer-events: none;
}

#aaLoader::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(13, 58, 138, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: aaGlowDrift 5s ease-in-out infinite alternate-reverse;
    pointer-events: none;
}

@keyframes aaGlowDrift {
    from { transform: translate(0, 0) scale(1);   }
    to   { transform: translate(30px, 20px) scale(1.12); }
}

/* ── Spinner stage ────────────────────────────────────────── */
.aa-spinner-stage {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

/* Outer ring — slow, clockwise */
.aa-ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: #e65d0a;
    border-right-color: rgba(230, 93, 10, 0.25);
    animation: aaSpinCW 1.6s linear infinite;
}

/* Middle ring — medium, counter-clockwise */
.aa-ring-mid {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(255, 133, 52, 0.7);
    border-left-color: rgba(255, 133, 52, 0.2);
    animation: aaSpinCCW 2.2s linear infinite;
}

/* Inner ring — fast orbit dot */
.aa-ring-inner {
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.18);
    animation: aaSpinCW 0.9s linear infinite;
}

@keyframes aaSpinCW  { to { transform: rotate(360deg);  } }
@keyframes aaSpinCCW { to { transform: rotate(-360deg); } }

/* ── Logo inside the rings ────────────────────────────────── */
.aa-logo-wrap {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backdrop-filter: blur(6px);
    animation: aaLogoPulse 2.4s ease-in-out infinite;
}

.aa-logo-wrap img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: brightness(1.4);
}

/* Fallback initials when logo image is missing */
.aa-logo-fallback {
    font-size: 1.4rem;
    font-weight: 800;
    color: #e65d0a;
    letter-spacing: -1px;
    font-family: 'Poppins', sans-serif;
    display: none;
}

.aa-logo-wrap img[style*="display:none"] + .aa-logo-fallback,
.aa-logo-wrap img.broken + .aa-logo-fallback {
    display: block;
}

@keyframes aaLogoPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 93, 10, 0.0);  transform: scale(1);    }
    50%       { box-shadow: 0 0 0 8px rgba(230, 93, 10, 0.12); transform: scale(1.04); }
}

/* ── Brand name ───────────────────────────────────────────── */
.aa-brand-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 5px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    animation: aaFadeUp 0.6s ease both;
    animation-delay: 0.1s;
}

/* Shimmer sweep */
.aa-brand-name::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 70%
    );
    animation: aaShimmer 2.4s ease-in-out infinite;
    animation-delay: 0.6s;
}

@keyframes aaShimmer {
    0%   { left: -100%; }
    60%  { left: 160%;  }
    100% { left: 160%;  }
}

/* ── Tagline ──────────────────────────────────────────────── */
.aa-tagline {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 5px;
    animation: aaFadeUp 0.6s ease both;
    animation-delay: 0.22s;
}

/* ── Loading dots ─────────────────────────────────────────── */
.aa-dots {
    display: flex;
    gap: 7px;
    margin-top: 36px;
    animation: aaFadeUp 0.6s ease both;
    animation-delay: 0.35s;
}

.aa-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(230, 93, 10, 0.7);
    animation: aaDotBounce 1.2s ease-in-out infinite;
}

.aa-dot:nth-child(1) { animation-delay: 0s;    }
.aa-dot:nth-child(2) { animation-delay: 0.18s; }
.aa-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes aaDotBounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.45; }
    40%           { transform: scale(1.2); opacity: 1;    }
}

/* ── Progress bar at bottom ───────────────────────────────── */
.aa-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.aa-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #e65d0a, #ff8534, #e65d0a);
    background-size: 200% 100%;
    animation: aaProgressRun 2s ease-in-out forwards,
               aaProgressShine 1s linear infinite;
}

@keyframes aaProgressRun {
    0%   { width: 0%;   }
    60%  { width: 85%;  }
    100% { width: 100%; }
}

@keyframes aaProgressShine {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ── Shared fade-up entry ─────────────────────────────────── */
@keyframes aaFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Accessibility: respect reduced motion ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .aa-ring-outer,
    .aa-ring-mid,
    .aa-ring-inner    { animation: none; }
    .aa-brand-name::after { animation: none; }
    .aa-dot           { animation: none; opacity: 0.7; }
    .aa-progress-fill { animation: aaProgressRun 1.5s ease forwards; }
}