/* ==========================================================================
   SPICY MASALA — "Flying Masala" Cinematic Preloader
   File: public/css/spicy-loader.css
   --------------------------------------------------------------------------
   Layer stack (z-order inside #spicy-loader, all position:absolute):
     L1 · ambient background + warm glow       (z 1)
     L2 · far spices — small / slow / dim      (z 2)
     L3 · powder clouds + gold dust            (z 3)
     L4 · mid-ground spices — the main storm   (z 4)
     L5 · center brand (logo + wordmark)       (z 5)
     L6 · foreground spices — close to camera  (z 6)
     L7 · progress bar + percentage            (z 7)
     L8 · exit transition overlay              (z 8)
   GPU friendly: animates transform + opacity only (no layout thrash).
   Respects prefers-reduced-motion and mobile viewports.
   ========================================================================== */

/* Lock page scroll while the loader is visible (mirrors body.prem-loading). */
body.prem-loading {
    overflow: hidden;
}

/* ---- 0 · Root container (fixed, above everything) ---------------------- */
.spicy-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    perspective: 900px;
    background:
        radial-gradient(1400px 900px at 50% 40%, #241105 0%, #170a03 45%, #0b0502 75%, #040201 100%);
}

.spicy-loader__bg,
.spicy-loader__particles,
.spicy-loader__spices,
.spicy-loader__foreground {
    position: absolute;
    inset: 0;
}

.spicy-loader__bg        { z-index: 1; }
.spicy-loader__particles { z-index: 2; }
.spicy-loader__dust      { position: absolute; inset: 0; z-index: 3; overflow: hidden; }
.spicy-loader__spices    { z-index: 4; }
.spicy-loader__content   { position: relative; z-index: 5; }
.spicy-loader__foreground{ z-index: 6; }
.spicy-loader__progress  { position: absolute; z-index: 7; }
.spicy-loader__transition{ position: absolute; inset: 0; z-index: 8; pointer-events: none; }

/* ---- L1 · Ambient background with breathing warm glow ------------------- */
.spicy-loader__bg::after {
    content: '';
    position: absolute;
    inset: -20%;
    opacity: .7;
    background:
        radial-gradient(60% 45% at 50% 46%, rgba(212, 175, 55, .10), transparent 70%),
        radial-gradient(42% 32% at 26% 62%, rgba(161, 18, 23, .16), transparent 70%),
        radial-gradient(42% 32% at 74% 62%, rgba(200, 90, 30, .12), transparent 70%);
    animation: spicyGlow 4.5s ease-in-out infinite;
}
@keyframes spicyGlow {
    0%, 100% { opacity: .45; transform: scale(1); }
    50%      { opacity: .85; transform: scale(1.05); }
}

/* ---- L2/L4/L6 · Spice elements (created by JS) -------------------------- */
.spicy-loader__el {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    backface-visibility: hidden;
}
.spicy-loader__el svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---- L3 · Powder clouds ------------------------------------------------ */
.spicy-loader__puff {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 35% 35%,
            var(--puff-c, rgba(255, 196, 110, .85)),
            rgba(180, 70, 20, .35) 45%,
            rgba(120, 40, 10, .12) 68%,
            transparent 78%);
    animation: spicyPuff var(--puff-dur, 9s) ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes spicyPuff {
    0%   { transform: translate3d(0, 0, 0) scale(.55); opacity: 0; }
    12%  { opacity: var(--puff-o, .5); }
    80%  { opacity: calc(var(--puff-o, .5) * .45); }
    100% { transform: translate3d(var(--puff-dx, 40px), var(--puff-dy, -120px), 0) scale(1.5); opacity: 0; }
}

/* ---- L3 · Gold dust ---------------------------------------------------- */
.spicy-loader__gold {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%,
            #ffe9a8 0%,
            #e8c84a 45%,
            rgba(212, 175, 55, 0) 72%);
    animation: spicyGold var(--gold-dur, 3.2s) ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes spicyGold {
    0%   { transform: translate3d(0, 0, 0) scale(.4); opacity: 0; }
    25%  { opacity: var(--gold-o, .8); }
    100% { transform: translate3d(var(--gold-dx, 30px), var(--gold-dy, -90px), 0) scale(1.1); opacity: 0; }
}

/* ---- L5 · Center brand -------------------------------------------------- */
.spicy-loader__content {
    text-align: center;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .9s cubic-bezier(.22, .9, .28, 1),
                transform .9s cubic-bezier(.22, .9, .28, 1);
}
.spicy-loader--brand .spicy-loader__content {
    opacity: 1;
    transform: translateY(0);
}

.spicy-loader__logo {
    width: 116px;
    height: 116px;
    margin: 0 auto 24px;
    position: relative;
}
.spicy-loader__logo-orbit {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px dashed rgba(212, 175, 55, .4);
    animation: spicyOrbit 14s linear infinite;
}
.spicy-loader__logo-orbit::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: #e8c84a;
    box-shadow: 0 0 10px rgba(232, 200, 74, .9);
}
@keyframes spicyOrbit {
    to { transform: rotate(360deg); }
}
.spicy-loader__logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, .45);
    animation: spicyRingPulse 2.4s ease-in-out infinite;
}
@keyframes spicyRingPulse {
    0%, 100% { box-shadow: 0 0 22px rgba(212, 175, 55, .15), inset 0 0 18px rgba(212, 175, 55, .10); }
    50%      { box-shadow: 0 0 40px rgba(212, 175, 55, .34), inset 0 0 26px rgba(212, 175, 55, .20); }
}
.spicy-loader__logo-core {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 32% 26%, #fffdf6, #f3e6d2 62%, #e3d2b8);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
.spicy-loader__logo-core img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}
.spicy-loader__logo-fallback {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #a11217;
}

.spicy-loader__brand {
    margin: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 800;
    font-size: clamp(1.75rem, 5.5vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .6), 0 0 40px rgba(212, 175, 55, .15);
}
.spicy-loader__brand .spicy-loader__gold-text {
    color: #d4af37;
}

.spicy-loader__tagline {
    margin: 12px auto 0;
    font-family: 'Poppins', sans-serif;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .44em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    text-indent: .44em;
}

.spicy-loader__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    opacity: .8;
}
.spicy-loader__divider::before,
.spicy-loader__divider::after {
    content: '';
    height: 1px;
    width: 64px;
}
.spicy-loader__divider::before { background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .65)); }
.spicy-loader__divider::after  { background: linear-gradient(90deg, rgba(212, 175, 55, .65), transparent); }
.spicy-loader__divider i { color: #d4af37; font-size: .55rem; }

/* ---- L7 · Progress ------------------------------------------------------ */
.spicy-loader__progress {
    left: 50%;
    bottom: 46px;
    transform: translateX(-50%);
    width: min(340px, 74vw);
    text-align: center;
    opacity: 0;
    animation: spicyProgressIn 1s ease .4s forwards;
}
@keyframes spicyProgressIn {
    to { opacity: 1; }
}
.spicy-loader__progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 11px;
}
.spicy-loader__progress-caption {
    font-family: 'Poppins', sans-serif;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .36em;
    text-transform: uppercase;
    color: rgba(212, 175, 55, .9);
    text-indent: .36em;
}
.spicy-loader__progress-percent {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.spicy-loader__progress-track {
    position: relative;
    height: 2px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
}
.spicy-loader__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, #a11217, #d4af37 55%, #e8c84a);
    box-shadow: 0 0 14px rgba(212, 175, 55, .75);
}
.spicy-loader__progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: translateX(-100%);
    animation: spicyShimmer 1.6s ease-in-out infinite;
}
@keyframes spicyShimmer {
    60%, 100% { transform: translateX(100%); }
}

/* ---- L8 · Exit transition overlay --------------------------------------- */
.spicy-loader__transition {
    opacity: 0;
    background: radial-gradient(circle, rgba(4, 2, 1, 0) 30%, rgba(4, 2, 1, .65) 100%);
    transition: opacity .5s ease;
}

/* ---- Exit sequence ------------------------------------------------------ */
.spicy-loader--exiting .spicy-loader__content {
    opacity: 0;
    transform: translateY(-12px) scale(1.06);
    transition: opacity .55s ease, transform .7s ease;
}
.spicy-loader--exiting .spicy-loader__progress {
    opacity: 0;
    animation: none;
    transition: opacity .4s ease;
}
.spicy-loader--exiting .spicy-loader__bg::after {
    opacity: 0;
    animation: none;
    transition: opacity .5s ease;
}
.spicy-loader--exiting .spicy-loader__transition {
    opacity: 1;
}
.spicy-loader--hidden {
    opacity: 0 !important;
    visibility: hidden;
    transition: opacity .45s ease, visibility .45s ease;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 768px) {
    .spicy-loader__logo {
        width: 88px;
        height: 88px;
        margin-bottom: 20px;
    }
    .spicy-loader__logo-core { inset: 8px; }
    .spicy-loader__tagline { letter-spacing: .3em; text-indent: .3em; }
    .spicy-loader__progress { bottom: 28px; width: min(300px, 78vw); }
    .spicy-loader__divider::before,
    .spicy-loader__divider::after { width: 44px; }
}
@media (max-width: 380px) {
    .spicy-loader__brand { font-size: 1.5rem; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .spicy-loader__el,
    .spicy-loader__puff,
    .spicy-loader__gold,
    .spicy-loader__logo-orbit,
    .spicy-loader__bg::after {
        animation: none !important;
    }
    .spicy-loader__content {
        transition: opacity .5s ease;
        transform: none;
    }
}