/* =========================================================
   SABARMATI UPDHAN PREMIUM LOADER
   Tailwind handles layout.
   CSS handles devotional animation / artwork.
========================================================= */

#pageLoader{
    background:
        radial-gradient(
            circle at 50% 42%,
            #fffef8 0%,
            #fff7e5 38%,
            #f8ead0 72%,
            #f1dfbf 100%
        );

    opacity:1;

    visibility:visible;

    transition:
        opacity .65s ease,
        visibility .65s ease;
}


/* PAGE LOAD OUT */

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


/* =========================================================
   SOFT BACKGROUND GLOW
========================================================= */

.loader-bg-glow{
    position:absolute;

    border-radius:999px;

    filter:blur(80px);

    pointer-events:none;
}

.loader-bg-glow-one{
    width:420px;
    height:420px;

    left:-150px;
    top:-130px;

    background:
        rgba(151,19,49,.13);

    animation:
        loaderFloatOne 5s ease-in-out infinite;
}

.loader-bg-glow-two{
    width:460px;
    height:460px;

    right:-190px;
    bottom:-160px;

    background:
        rgba(208,158,58,.16);

    animation:
        loaderFloatTwo 5.5s ease-in-out infinite;
}


/* =========================================================
   SUBTLE JAIN / MANDALA PATTERN
========================================================= */

.loader-jain-pattern{
    position:absolute;

    inset:-20%;

    opacity:.17;

    background:
        repeating-radial-gradient(
            circle at center,
            rgba(183,132,38,.28) 0,
            rgba(183,132,38,.28) 1px,
            transparent 1px,
            transparent 24px
        );

    animation:
        loaderPatternPulse 4s ease-in-out infinite;
}


/* =========================================================
   ORBITS
========================================================= */

.loader-orbit{
    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

    transform:
        translate(-50%,-50%);

    pointer-events:none;
}


.loader-orbit-one{
    width:285px;
    height:285px;

    border:
        1px solid rgba(139,22,52,.20);

    box-shadow:
        0 0 30px rgba(164,114,31,.08);

    animation:
        loaderRotate 9s linear infinite;
}


.loader-orbit-two{
    width:245px;
    height:245px;

    border:
        1px dashed rgba(198,151,52,.52);

    animation:
        loaderRotateReverse 12s linear infinite;
}


.loader-orbit-three{
    width:205px;
    height:205px;

    border:
        1px solid rgba(139,22,52,.12);

    animation:
        loaderBreath 2.6s ease-in-out infinite;
}


/* ORBIT DECORATIVE DOTS */

.loader-orbit-one::before,
.loader-orbit-one::after,
.loader-orbit-two::before,
.loader-orbit-two::after{
    content:"";

    position:absolute;

    width:9px;
    height:9px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #f4d67e,
            #b77716
        );

    box-shadow:
        0 0 15px rgba(210,163,66,.65);
}


.loader-orbit-one::before{
    left:26px;
    top:40px;
}

.loader-orbit-one::after{
    right:24px;
    bottom:39px;
}

.loader-orbit-two::before{
    top:-5px;
    left:50%;
}

.loader-orbit-two::after{
    bottom:-5px;
    left:50%;
}


/* =========================================================
   LOGO CENTER
========================================================= */

.loader-logo-shell{
    width:165px;
    height:165px;

    border-radius:50%;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 20px 55px rgba(104,52,26,.14),
        inset 0 0 0 1px rgba(205,159,62,.28);

    animation:
        loaderLogoBreath 2.5s ease-in-out infinite;
}


.loader-main-logo{
    width:146px;
    height:146px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 8px 12px rgba(114,42,28,.17)
        );
}


.loader-golden-halo{
    position:absolute;

    inset:-20px;

    border-radius:50%;

    background:
        conic-gradient(
            from 0deg,
            transparent,
            rgba(218,176,79,.26),
            transparent,
            rgba(143,24,52,.14),
            transparent
        );

    filter:blur(9px);

    animation:
        loaderRotate 6s linear infinite;
}


/* =========================================================
   DECORATIVE STARS
========================================================= */

.loader-lotus{
    position:absolute;

    z-index:15;

    color:#c79532;

    text-shadow:
        0 0 12px rgba(212,164,60,.4);

    animation:
        loaderStarPulse 1.8s ease-in-out infinite;
}


.loader-lotus-top{
    top:5px;
    left:50%;

    transform:
        translateX(-50%);
}


.loader-lotus-bottom{
    bottom:5px;
    left:50%;

    transform:
        translateX(-50%);

    animation-delay:.7s;
}


/* =========================================================
   PARTICLES
========================================================= */

.loader-particle{
    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:
        #d8a942;

    box-shadow:
        0 0 9px rgba(221,178,78,.75);

    animation:
        loaderParticle 2.2s ease-in-out infinite;
}

.p1{
    left:47px;
    top:86px;
}

.p2{
    right:47px;
    top:90px;

    animation-delay:.3s;
}

.p3{
    left:37px;
    bottom:95px;

    animation-delay:.6s;
}

.p4{
    right:39px;
    bottom:91px;

    animation-delay:.9s;
}

.p5{
    left:82px;
    top:37px;

    animation-delay:1.2s;
}

.p6{
    right:83px;
    bottom:36px;

    animation-delay:1.5s;
}


/* =========================================================
   BOTTOM PROGRESS
========================================================= */

.loader-progress-wrap{
    position:absolute;

    left:50%;
    bottom:-17px;

    width:120px;

    transform:
        translateX(-50%);
}


.loader-progress-line{
    position:relative;

    width:100%;
    height:3px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(136,21,49,.10);
}


.loader-progress-line span{
    position:absolute;

    top:0;
    left:-50%;

    width:50%;
    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #831631,
            #dfb754,
            #831631
        );

    animation:
        loaderProgress 1.4s ease-in-out infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes loaderRotate{

    from{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
}


@keyframes loaderRotateReverse{

    from{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }
}


@keyframes loaderBreath{

    0%,
    100%{
        opacity:.42;

        transform:
            translate(-50%,-50%)
            scale(.96);
    }

    50%{
        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1.05);
    }
}


@keyframes loaderLogoBreath{

    0%,
    100%{
        transform:scale(.96);
    }

    50%{
        transform:scale(1.025);
    }
}


@keyframes loaderStarPulse{

    0%,
    100%{
        opacity:.35;
        transform:
            translateX(-50%)
            scale(.8);
    }

    50%{
        opacity:1;
        transform:
            translateX(-50%)
            scale(1.2);
    }
}


@keyframes loaderParticle{

    0%,
    100%{
        opacity:.25;
        transform:
            translateY(5px)
            scale(.7);
    }

    50%{
        opacity:1;
        transform:
            translateY(-5px)
            scale(1.3);
    }
}


@keyframes loaderProgress{

    from{
        left:-50%;
    }

    to{
        left:100%;
    }
}


@keyframes loaderPatternPulse{

    0%,
    100%{
        opacity:.10;
        transform:scale(.96);
    }

    50%{
        opacity:.18;
        transform:scale(1.02);
    }
}


@keyframes loaderFloatOne{

    0%,
    100%{
        transform:
            translate3d(0,0,0);
    }

    50%{
        transform:
            translate3d(25px,18px,0);
    }
}


@keyframes loaderFloatTwo{

    0%,
    100%{
        transform:
            translate3d(0,0,0);
    }

    50%{
        transform:
            translate3d(-28px,-15px,0);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:640px){

    #pageLoader > div.relative{
        transform:scale(.82);
    }
}


@media(max-width:380px){

    #pageLoader > div.relative{
        transform:scale(.70);
    }
}


/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

    #pageLoader *{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }
}