/* ==========================================================================
   Royal Mandir Divine Preloader Architecture
   Theme: Sacred Pure Auspicious Gold & Cream (Radiating Positive Energy)
   ========================================================================== */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, #FFFDF8 0%, #FAF1E4 60%, #F5E5D0 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1), visibility 1s ease;
    will-change: opacity, transform;
}

#preloader.preloader-hidden {
    opacity: 0;
    transform: scale(1.04);
    visibility: hidden;
    pointer-events: none;
}

/* Background Rotating Sunburst Rays (Warm Golden Energy) */
.preloader-bg-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 700px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        rgba(197, 145, 45, 0.14) 0deg 15deg,
        transparent 15deg 30deg,
        rgba(197, 145, 45, 0.14) 30deg 45deg,
        transparent 45deg 60deg,
        rgba(197, 145, 45, 0.14) 60deg 75deg,
        transparent 75deg 90deg,
        rgba(197, 145, 45, 0.14) 90deg 105deg,
        transparent 105deg 120deg,
        rgba(197, 145, 45, 0.14) 120deg 135deg,
        transparent 135deg 150deg,
        rgba(197, 145, 45, 0.14) 150deg 165deg,
        transparent 165deg 180deg,
        rgba(197, 145, 45, 0.14) 180deg 195deg,
        transparent 195deg 210deg,
        rgba(197, 145, 45, 0.14) 210deg 225deg,
        transparent 225deg 240deg,
        rgba(197, 145, 45, 0.14) 240deg 255deg,
        transparent 255deg 270deg,
        rgba(197, 145, 45, 0.14) 270deg 285deg,
        transparent 285deg 300deg,
        rgba(197, 145, 45, 0.14) 300deg 315deg,
        transparent 315deg 330deg,
        rgba(197, 145, 45, 0.14) 330deg 345deg,
        transparent 345deg 360deg
    );
    border-radius: 50%;
    animation: preloaderSpinRays 24s linear infinite;
    pointer-events: none;
}

@keyframes preloaderSpinRays {
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.preloader-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}

/* Center Emblem with Counter-Rotating Glowing Rings */
.preloader-emblem-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-ring-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed rgba(185, 125, 20, 0.55);
    border-radius: 50%;
    animation: preloaderRingCW 8s linear infinite;
}

.preloader-ring-inner {
    position: absolute;
    width: 82%;
    height: 82%;
    border: 1.5px solid transparent;
    border-top-color: #E65100;
    border-bottom-color: #B32D00;
    border-radius: 50%;
    animation: preloaderRingCCW 3s linear infinite;
}

@keyframes preloaderRingCW {
    100% { transform: rotate(360deg); }
}

@keyframes preloaderRingCCW {
    100% { transform: rotate(-360deg); }
}

.preloader-logo-badge {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFE082 0%, #C88D00 100%);
    border: 2.5px solid #7E1900;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7E1900;
    font-size: 1.8rem;
    box-shadow: 0 0 25px rgba(200, 140, 0, 0.35);
}

/* Sacred Sanskrit Mantra Chant (Vermilion Red) */
.preloader-chant {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 1.28rem;
    font-weight: 700;
    color: #8C1D00;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(140, 29, 0, 0.15);
}

.preloader-title {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1200;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

/* Progress Track Bar */
.preloader-progress-track {
    width: 220px;
    height: 5px;
    background: rgba(185, 125, 20, 0.18);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.preloader-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #D84315 0%, #F57C00 50%, #E6A100 100%);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(245, 124, 0, 0.5);
    transition: width 0.15s ease-out;
}

.preloader-percent {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #8C1D00;
    letter-spacing: 1.5px;
}

/* ==========================================================================
   Sacred Flower Petal Shower Animation (Pushpa Vrishti)
   ========================================================================== */
.preloader-flower-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.preloader-flower {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
}

/* Bottom-Left Corner Flower Fountain Launch */
.preloader-flower.shower-bottom-left {
    bottom: -30px;
    animation: preloaderFlowerBottomLeft var(--fall-duration, 3.2s) cubic-bezier(0.25, 1, 0.5, 1) infinite var(--fall-delay, 0s);
}

@keyframes preloaderFlowerBottomLeft {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.5) rotate(0deg);
    }
    15% {
        opacity: 0.95;
    }
    50% {
        /* Shoot upwards towards center-left area */
        transform: translate3d(var(--arc-x, 150px), var(--arc-y, -340px), 0) scale(1.18) rotate(190deg);
        opacity: 0.95;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        /* Fall down towards bottom right and disappear */
        transform: translate3d(var(--end-x, 260px), 60px, 0) scale(0.5) rotate(360deg);
        opacity: 0;
    }
}

/* Bottom-Right Corner Flower Fountain Launch */
.preloader-flower.shower-bottom-right {
    bottom: -30px;
    animation: preloaderFlowerBottomRight var(--fall-duration, 3.2s) cubic-bezier(0.25, 1, 0.5, 1) infinite var(--fall-delay, 0s);
}

@keyframes preloaderFlowerBottomRight {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.5) rotate(0deg);
    }
    15% {
        opacity: 0.95;
    }
    50% {
        /* Shoot upwards towards center-right area */
        transform: translate3d(calc(-1 * var(--arc-x, 150px)), var(--arc-y, -340px), 0) scale(1.18) rotate(-190deg);
        opacity: 0.95;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        /* Fall down towards bottom left and disappear */
        transform: translate3d(calc(-1 * var(--end-x, 260px)), 60px, 0) scale(0.5) rotate(-360deg);
        opacity: 0;
    }
}