/* ============================================================
   Alchimist Loader — "Audio Studio" preloader
   A premium audio-themed loading screen with logo + EQ bars
   animation, themed to the brand orange. Auto-fades out when
   the page finishes loading (handled by alchimist-loader.js).
   ============================================================ */

/* Hide the legacy jPreLoader UI from the Designesia template so
   only our custom loader is visible. We keep jPreLoader's library
   loaded (it still runs its internal callbacks like init_de()
   after assets finish loading) — we just hide its visual overlay. */
#jpreOverlay,
#jpreLoader,
#jpreBar,
#jprePercentage,
#jpreSlide {
    display: none !important;
}

#alchimist-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: radial-gradient(ellipse at center, #1a1a22 0%, #0a0a0e 70%);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

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

/* ----- Brand logo (image) ----- */
.alc-loader-logo {
    width: clamp(140px, 22vw, 220px);
    height: auto;
    margin-bottom: 32px;
    /* Drop-shadow glow that pulses like an audio cone */
    filter: drop-shadow(0 0 12px rgba(255, 83, 0, 0.55))
            drop-shadow(0 0 30px rgba(255, 83, 0, 0.35));
    animation: alc-pulse-glow 1.6s ease-in-out infinite;
}

@keyframes alc-pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 83, 0, 0.4))
                drop-shadow(0 0 18px rgba(255, 83, 0, 0.25));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(255, 83, 0, 0.85))
                drop-shadow(0 0 40px rgba(255, 83, 0, 0.5));
        transform: scale(1.04);
    }
}

/* ----- Equalizer bars ----- */
.alc-loader-eq {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 56px;
    margin-bottom: 30px;
}

.alc-loader-eq span {
    width: 6px;
    background: linear-gradient(180deg, #ff8c4d 0%, #ff5300 100%);
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(255, 83, 0, 0.6);
    transform-origin: bottom;
    animation: alc-eq-dance 0.95s ease-in-out infinite;
}

/* Stagger the 12 bars so it looks like a real audio spectrum */
.alc-loader-eq span:nth-child(1)  { animation-delay: 0.00s; }
.alc-loader-eq span:nth-child(2)  { animation-delay: 0.08s; }
.alc-loader-eq span:nth-child(3)  { animation-delay: 0.16s; }
.alc-loader-eq span:nth-child(4)  { animation-delay: 0.24s; }
.alc-loader-eq span:nth-child(5)  { animation-delay: 0.32s; }
.alc-loader-eq span:nth-child(6)  { animation-delay: 0.40s; }
.alc-loader-eq span:nth-child(7)  { animation-delay: 0.48s; }
.alc-loader-eq span:nth-child(8)  { animation-delay: 0.40s; }
.alc-loader-eq span:nth-child(9)  { animation-delay: 0.32s; }
.alc-loader-eq span:nth-child(10) { animation-delay: 0.24s; }
.alc-loader-eq span:nth-child(11) { animation-delay: 0.16s; }
.alc-loader-eq span:nth-child(12) { animation-delay: 0.08s; }

@keyframes alc-eq-dance {
    0%, 100% { height: 12%; opacity: 0.55; }
    50%      { height: 100%; opacity: 1; }
}

/* ----- Tagline ----- */
.alc-loader-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.alc-loader-tagline::after {
    content: '';
    display: inline-block;
    width: 18px;
    text-align: left;
    animation: alc-dots 1.4s steps(4, end) infinite;
}

@keyframes alc-dots {
    0%   { content: '';    }
    25%  { content: '.';   }
    50%  { content: '..';  }
    75%  { content: '...'; }
    100% { content: '';    }
}

/* ----- Mobile tweaks ----- */
@media (max-width: 600px) {
    .alc-loader-logo { margin-bottom: 24px; }
    .alc-loader-eq { height: 44px; gap: 4px; }
    .alc-loader-eq span { width: 5px; }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .alc-loader-logo,
    .alc-loader-eq span,
    .alc-loader-tagline::after {
        animation: none !important;
    }
}