/* ==================================================
        SAIRAM HERBALS — PREMIUM LOADER
================================================== */

:root{

    --loader-green:#287A43;
    --loader-dark:#173D26;
    --loader-soft:#EAF4EC;
    --loader-cream:#FCFBF6;
    --loader-text:#52645A;
    --loader-gold:#B49355;

}


/* ==================================================
        MAIN OVERLAY
================================================== */

#page-loader{

    position:fixed;

    inset:0;

    width:100%;
    height:100dvh;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

    z-index:999999;

    background:var(--loader-cream);

    opacity:1;
    visibility:visible;

    transition:
        opacity .8s cubic-bezier(.4,0,.2,1),
        visibility .8s ease;

}


/* ==================================================
        HIDE
================================================== */

#page-loader.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


/* ==================================================
        BACKGROUND
================================================== */

.loader-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(40,122,67,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(180,147,85,.07),
            transparent 28%
        ),

        var(--loader-cream);

}


/* ==================================================
        SOFT ORBS
================================================== */

.loader-orb{

    position:absolute;

    display:block;

    border-radius:50%;

    pointer-events:none;

    filter:blur(1px);

}


.loader-orb-one{

    width:320px;
    height:320px;

    top:-170px;
    left:-120px;

    background:
        radial-gradient(
            circle,
            rgba(40,122,67,.10),
            transparent 68%
        );

    animation:
        loaderOrbOne 7s ease-in-out infinite;

}


.loader-orb-two{

    width:280px;
    height:280px;

    right:-120px;
    bottom:-140px;

    background:
        radial-gradient(
            circle,
            rgba(180,147,85,.09),
            transparent 68%
        );

    animation:
        loaderOrbTwo 8s ease-in-out infinite;

}


/* ==================================================
        MAIN CONTENT
================================================== */

.loader-content{

    position:relative;

    z-index:5;

    width:min(440px,calc(100% - 40px));

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}


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

.loader-logo-wrap{

    position:relative;

    width:150px;
    height:150px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:20px;

}


.loader-logo-ring{

    position:absolute;

    width:138px;
    height:138px;

    border-radius:50%;

    border:1px solid rgba(40,122,67,.15);

    animation:
        loaderRing 3.5s ease-in-out infinite;

}


.loader-logo-ring::before{

    content:"";

    position:absolute;

    inset:8px;

    border-radius:50%;

    border:1px dashed rgba(180,147,85,.22);

    animation:
        loaderRingRotate 12s linear infinite;

}


.loader-logo{

    position:relative;

    z-index:2;

    width:105px;
    max-width:75%;

    height:auto;

    display:block;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

    mix-blend-mode:multiply;

    animation:
        loaderLogoIn 1.1s
        cubic-bezier(.22,1,.36,1)
        both;

}


/* ==================================================
        BRAND
================================================== */

.loader-brand{

    animation:
        loaderContentIn .9s
        .18s
        cubic-bezier(.22,1,.36,1)
        both;

}


.loader-brand h1{

    margin:0;

    color:var(--loader-dark);

    font-size:clamp(27px,5vw,35px);

    line-height:1.1;

    font-weight:750;

    letter-spacing:-.7px;

}


.loader-brand p{

    margin:9px 0 0;

    color:var(--loader-text);

    font-size:13px;

    letter-spacing:.35px;

}


/* ==================================================
        PROGRESS AREA
================================================== */

.loader-progress-area{

    width:100%;

    margin-top:42px;

    animation:
        loaderContentIn .9s
        .3s
        cubic-bezier(.22,1,.36,1)
        both;

}


.loader-progress-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:10px;

}


#loader-text{

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:#607068;

    font-size:11px;

    font-weight:500;

    letter-spacing:.2px;

}


#loader-percent{

    flex-shrink:0;

    color:var(--loader-green);

    font-size:12px;

    font-weight:700;

}


/* ==================================================
        PROGRESS BAR
================================================== */

.loader-progress{

    position:relative;

    width:100%;

    height:4px;

    overflow:hidden;

    border-radius:100px;

    background:#E4EDE6;

}


.loader-progress-fill{

    position:relative;

    width:0%;

    height:100%;

    border-radius:inherit;

    background:

        linear-gradient(
            90deg,
            #246E3C,
            #4C9A61
        );

    box-shadow:
        0 0 10px rgba(40,122,67,.18);

    transition:
        width .08s linear;

}


.loader-progress-fill::after{

    content:"";

    position:absolute;

    top:0;
    right:-35px;

    width:35px;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.8),
            transparent
        );

    animation:
        loaderShine 1.4s ease-in-out infinite;

}


/* ==================================================
        FOOTER DETAIL
================================================== */

.loader-footer{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:27px;

    color:#91A098;

    font-size:9px;

    font-weight:600;

    letter-spacing:1.1px;

    text-transform:uppercase;

    animation:
        loaderContentIn .9s
        .45s
        cubic-bezier(.22,1,.36,1)
        both;

}


.loader-footer i{

    color:var(--loader-green);

    font-size:13px;

}


.loader-footer-line{

    width:28px;

    height:1px;

    background:#D4DED7;

}


/* ==================================================
        LOGO ANIMATION
================================================== */

@keyframes loaderLogoIn{

    0%{

        opacity:0;

        transform:
            translateY(8px)
            scale(.94);

        filter:blur(4px);

    }

    65%{

        opacity:1;

        transform:
            translateY(-1px)
            scale(1.015);

        filter:blur(0);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ==================================================
        CONTENT ANIMATION
================================================== */

@keyframes loaderContentIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==================================================
        RING
================================================== */

@keyframes loaderRing{

    0%,
    100%{

        transform:scale(.97);

        opacity:.65;

    }

    50%{

        transform:scale(1.025);

        opacity:1;

    }

}


@keyframes loaderRingRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ==================================================
        SHINE
================================================== */

@keyframes loaderShine{

    0%{

        transform:translateX(-50px);

        opacity:0;

    }

    30%{

        opacity:1;

    }

    70%{

        opacity:1;

    }

    100%{

        transform:translateX(90px);

        opacity:0;

    }

}


/* ==================================================
        BACKGROUND MOTION
================================================== */

@keyframes loaderOrbOne{

    0%,
    100%{

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    50%{

        transform:
            translate3d(20px,15px,0)
            scale(1.08);

    }

}


@keyframes loaderOrbTwo{

    0%,
    100%{

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    50%{

        transform:
            translate3d(-18px,-12px,0)
            scale(1.06);

    }

}


/* ==================================================
        TABLET
================================================== */

@media(max-width:768px){

    .loader-content{

        width:min(390px,calc(100% - 40px));

    }

    .loader-logo-wrap{

        width:130px;
        height:130px;

        margin-bottom:17px;

    }

    .loader-logo-ring{

        width:120px;
        height:120px;

    }

    .loader-logo{

        width:90px;

    }

    .loader-progress-area{

        margin-top:35px;

    }

}


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

@media(max-width:480px){

    .loader-content{

        width:calc(100% - 44px);

    }

    .loader-logo-wrap{

        width:112px;
        height:112px;

    }

    .loader-logo-ring{

        width:105px;
        height:105px;

    }

    .loader-logo{

        width:78px;

    }

    .loader-brand h1{

        font-size:26px;

    }

    .loader-brand p{

        font-size:12px;

    }

    .loader-progress-area{

        margin-top:31px;

    }

    #loader-text{

        font-size:10px;

    }

    #loader-percent{

        font-size:11px;

    }

    .loader-footer{

        gap:7px;

        font-size:8px;

        letter-spacing:.9px;

    }

    .loader-footer-line{

        width:20px;

    }

    .loader-orb-one{

        width:220px;
        height:220px;

    }

    .loader-orb-two{

        width:200px;
        height:200px;

    }

}


/* ==================================================
        REDUCED MOTION
================================================== */

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

    .loader-logo,
    .loader-logo-ring,
    .loader-logo-ring::before,
    .loader-orb,
    .loader-content,
    .loader-progress-fill::after{

        animation:none !important;

    }

}