```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM PAGE LOADER / PRELOADER
   ------------------------------------------------------------
   File: /assets/css/components/loader.css
   Full Path:
   /public_html/assets/css/components/loader.css

   Version: 1.0

   Used For:
   - Initial Page Load
   - Premium Brand Reveal
   - Loading Indicator
   - Page Transition Support

   Depends On:
   - variables.css
   - typography.css
   - global.css
   ============================================================ */


/* ============================================================
   01. PAGE LOADER
   ============================================================ */

.page-loader {
    position: fixed;

    inset: 0;

    z-index: 99999;

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

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            #04130e 0%,
            var(--color-primary-deep) 48%,
            var(--color-primary) 100%
        );

    overflow: hidden;

    isolation: isolate;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.55s ease,
        visibility 0.55s ease;
}


/* ============================================================
   02. LOADER HIDDEN
   ============================================================ */

.page-loader.is-loaded {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/* ============================================================
   03. LOADER BACKGROUND GLOW
   ============================================================ */

.page-loader::before {
    content: "";

    position: absolute;

    top: -25%;
    right: -15%;

    width:
        clamp(320px, 55vw, 850px);

    height:
        clamp(320px, 55vw, 850px);

    border-radius:
        var(--radius-circle);

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 104, 0.14) 0%,
            rgba(212, 175, 104, 0.05) 38%,
            transparent 70%
        );

    pointer-events: none;

    animation:
        loaderGlowFloat 7s ease-in-out infinite;
}


/* ============================================================
   04. SECOND BACKGROUND GLOW
   ============================================================ */

.page-loader::after {
    content: "";

    position: absolute;

    bottom: -32%;
    left: -18%;

    width:
        clamp(360px, 60vw, 900px);

    height:
        clamp(360px, 60vw, 900px);

    border-radius:
        var(--radius-circle);

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.018) 38%,
            transparent 70%
        );

    pointer-events: none;

    animation:
        loaderGlowFloatReverse 8s ease-in-out infinite;
}


/* ============================================================
   05. LOADER INNER
   ============================================================ */

.loader-inner {
    position: relative;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width:
        min(90%, 520px);

    text-align: center;
}


/* ============================================================
   06. LOADER EMBLEM
   ============================================================ */

.loader-emblem {
    position: relative;

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

    width:
        clamp(92px, 11vw, 122px);

    height:
        clamp(92px, 11vw, 122px);

    margin-bottom:
        clamp(1.4rem, 4vw, 2.1rem);

    border:
        1px solid rgba(212, 175, 104, 0.25);

    border-radius:
        var(--radius-circle);

    background:
        rgba(255, 255, 255, 0.025);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.18);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


/* ============================================================
   07. EMBLEM OUTER RING
   ============================================================ */

.loader-emblem::before {
    content: "";

    position: absolute;

    inset: -8px;

    border:
        1px solid rgba(212, 175, 104, 0.13);

    border-top-color:
        var(--color-secondary-light);

    border-radius:
        var(--radius-circle);

    animation:
        loaderRotate 2.8s linear infinite;
}


/* ============================================================
   08. EMBLEM INNER RING
   ============================================================ */

.loader-emblem::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px dashed rgba(212, 175, 104, 0.28);

    border-radius:
        var(--radius-circle);

    animation:
        loaderRotateReverse 7s linear infinite;
}


/* ============================================================
   09. EMBLEM CONTENT
   ============================================================ */

.loader-emblem-content {
    position: relative;

    z-index: 3;

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

    width:
        calc(100% - 26px);

    height:
        calc(100% - 26px);

    border-radius:
        var(--radius-circle);

    color:
        var(--color-primary-deep);

    background:
        var(--gradient-gold);

    box-shadow:
        0 12px 35px rgba(183, 138, 61, 0.18);

    font-family:
        var(--font-heading);

    font-size:
        clamp(1.2rem, 3vw, 1.75rem);

    font-weight:
        var(--font-semibold);

    line-height: 1;

    letter-spacing:
        -0.04em;
}


/* ============================================================
   10. EMBLEM IMAGE
   ============================================================ */

.loader-emblem-image {
    display: block;

    width: 58%;
    height: 58%;

    object-fit: contain;
}


/* ============================================================
   11. LOADER EYEBROW
   ============================================================ */

.loader-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-bottom:
        10px;

    color:
        var(--color-secondary-light);

    font-family:
        var(--font-ui);

    font-size:
        0.43rem;

    font-weight:
        var(--font-bold);

    line-height: 1;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

    opacity: 0;

    animation:
        loaderFadeUp 0.7s 0.15s ease forwards;
}


/* ============================================================
   12. EYEBROW LINES
   ============================================================ */

.loader-eyebrow::before,
.loader-eyebrow::after {
    content: "";

    width: 22px;
    height: 1px;

    background:
        rgba(212, 175, 104, 0.50);
}


/* ============================================================
   13. BRAND NAME
   ============================================================ */

.loader-brand {
    margin: 0;

    color:
        #ffffff;

    font-family:
        var(--font-heading);

    font-size:
        clamp(1.65rem, 5vw, 3rem);

    font-weight:
        var(--font-semibold);

    line-height:
        1.08;

    letter-spacing:
        -0.035em;

    opacity: 0;

    animation:
        loaderFadeUp 0.75s 0.25s ease forwards;
}


/* ============================================================
   14. BRAND ACCENT
   ============================================================ */

.loader-brand-accent {
    color:
        var(--color-secondary-light);
}


/* ============================================================
   15. LOADER TAGLINE
   ============================================================ */

.loader-tagline {
    max-width: 360px;

    margin:
        10px
        auto
        0;

    color:
        rgba(255, 255, 255, 0.46);

    font-family:
        var(--font-ui);

    font-size:
        0.46rem;

    font-weight:
        var(--font-medium);

    line-height:
        1.6;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    opacity: 0;

    animation:
        loaderFadeUp 0.75s 0.35s ease forwards;
}


/* ============================================================
   16. LOADER PROGRESS
   ============================================================ */

.loader-progress {
    position: relative;

    width:
        min(240px, 70vw);

    height: 2px;

    margin-top:
        clamp(1.5rem, 4vw, 2rem);

    border-radius:
        var(--radius-pill);

    background:
        rgba(255, 255, 255, 0.08);

    overflow: hidden;

    opacity: 0;

    animation:
        loaderFadeIn 0.6s 0.45s ease forwards;
}


/* ============================================================
   17. PROGRESS BAR
   ============================================================ */

.loader-progress-bar {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 42%;

    border-radius:
        inherit;

    background:
        var(--gradient-gold);

    box-shadow:
        0 0 15px rgba(212, 175, 104, 0.35);

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


/* ============================================================
   18. LOADING TEXT
   ============================================================ */

.loader-text {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top:
        12px;

    color:
        rgba(255, 255, 255, 0.36);

    font-family:
        var(--font-ui);

    font-size:
        0.4rem;

    font-weight:
        var(--font-semibold);

    line-height: 1;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


/* ============================================================
   19. LOADING DOTS
   ============================================================ */

.loader-dots {
    display: inline-flex;
    align-items: center;

    gap: 4px;
}


/* ============================================================
   20. LOADING DOT
   ============================================================ */

.loader-dot {
    width: 4px;
    height: 4px;

    border-radius:
        var(--radius-circle);

    background:
        var(--color-secondary-light);

    animation:
        loaderDot 1.2s ease-in-out infinite;
}


/* ============================================================
   21. DOT DELAYS
   ============================================================ */

.loader-dot:nth-child(2) {
    animation-delay:
        0.15s;
}

.loader-dot:nth-child(3) {
    animation-delay:
        0.30s;
}


/* ============================================================
   22. LOADER DECORATIVE LINE
   ============================================================ */

.loader-line {
    position: absolute;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 104, 0.13),
            transparent
        );

    pointer-events: none;
}


/* ============================================================
   23. HORIZONTAL DECORATIVE LINE
   ============================================================ */

.loader-line-horizontal {
    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;
}


/* ============================================================
   24. VERTICAL DECORATIVE LINE
   ============================================================ */

.loader-line-vertical {
    top: 0;
    left: 50%;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(212, 175, 104, 0.10),
            transparent
        );
}


/* ============================================================
   25. LOADER GRID
   ============================================================ */

.loader-grid {
    position: absolute;

    inset: 0;

    z-index: 0;

    opacity: 0.12;

    background-image:
        linear-gradient(
            rgba(212, 175, 104, 0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(212, 175, 104, 0.07) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            #000 0%,
            transparent 72%
        );

    mask-image:
        radial-gradient(
            circle at center,
            #000 0%,
            transparent 72%
        );

    pointer-events: none;
}


/* ============================================================
   26. LOADER CORNER
   ============================================================ */

.loader-corner {
    position: absolute;

    z-index: 2;

    width: 42px;
    height: 42px;

    opacity: 0.45;

    pointer-events: none;
}


/* ============================================================
   27. TOP LEFT CORNER
   ============================================================ */

.loader-corner-top-left {
    top: 24px;
    left: 24px;

    border-top:
        1px solid var(--color-secondary-light);

    border-left:
        1px solid var(--color-secondary-light);
}


/* ============================================================
   28. TOP RIGHT CORNER
   ============================================================ */

.loader-corner-top-right {
    top: 24px;
    right: 24px;

    border-top:
        1px solid var(--color-secondary-light);

    border-right:
        1px solid var(--color-secondary-light);
}


/* ============================================================
   29. BOTTOM LEFT CORNER
   ============================================================ */

.loader-corner-bottom-left {
    bottom: 24px;
    left: 24px;

    border-bottom:
        1px solid var(--color-secondary-light);

    border-left:
        1px solid var(--color-secondary-light);
}


/* ============================================================
   30. BOTTOM RIGHT CORNER
   ============================================================ */

.loader-corner-bottom-right {
    right: 24px;
    bottom: 24px;

    border-right:
        1px solid var(--color-secondary-light);

    border-bottom:
        1px solid var(--color-secondary-light);
}


/* ============================================================
   31. MINIMAL LOADER
   ============================================================ */

.page-loader-minimal {
    background:
        var(--color-primary-deep);
}


/* ============================================================
   32. MINIMAL LOADER INNER
   ============================================================ */

.page-loader-minimal
.loader-inner {
    width: auto;
}


/* ============================================================
   33. MINIMAL SPINNER
   ============================================================ */

.loader-spinner {
    position: relative;

    width: 54px;
    height: 54px;

    border:
        1px solid rgba(212, 175, 104, 0.18);

    border-top-color:
        var(--color-secondary-light);

    border-radius:
        var(--radius-circle);

    animation:
        loaderRotate 0.9s linear infinite;
}


/* ============================================================
   34. SPINNER INNER
   ============================================================ */

.loader-spinner::before {
    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-bottom-color:
        var(--color-secondary);

    border-radius:
        inherit;

    animation:
        loaderRotateReverse 1.35s linear infinite;
}


/* ============================================================
   35. LOGO LOADER
   ============================================================ */

.loader-logo {
    display: block;

    width:
        min(180px, 55vw);

    height: auto;

    object-fit: contain;

    opacity: 0;

    animation:
        loaderLogoReveal 0.8s 0.15s ease forwards;
}


/* ============================================================
   36. LOADER EXIT
   ============================================================ */

.page-loader.is-exiting
.loader-inner {
    animation:
        loaderExit 0.4s ease forwards;
}


/* ============================================================
   37. BODY LOADING STATE
   ============================================================ */

body.is-loading {
    overflow: hidden;
}


/* ============================================================
   38. LOADER ROTATE
   ============================================================ */

@keyframes loaderRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   39. LOADER REVERSE ROTATE
   ============================================================ */

@keyframes loaderRotateReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}


/* ============================================================
   40. LOADER FADE UP
   ============================================================ */

@keyframes loaderFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ============================================================
   41. LOADER FADE IN
   ============================================================ */

@keyframes loaderFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* ============================================================
   42. LOADER PROGRESS ANIMATION
   ============================================================ */

@keyframes loaderProgress {

    0% {
        left: -45%;
        width: 35%;
    }

    50% {
        width: 52%;
    }

    100% {
        left: 110%;
        width: 35%;
    }

}


/* ============================================================
   43. LOADER DOT ANIMATION
   ============================================================ */

@keyframes loaderDot {

    0%,
    80%,
    100% {
        opacity: 0.3;

        transform:
            translateY(0);
    }

    40% {
        opacity: 1;

        transform:
            translateY(-3px);
    }

}


/* ============================================================
   44. LOADER LOGO REVEAL
   ============================================================ */

@keyframes loaderLogoReveal {

    from {
        opacity: 0;

        transform:
            scale(0.94)
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);
    }

}


/* ============================================================
   45. LOADER EXIT ANIMATION
   ============================================================ */

@keyframes loaderExit {

    from {
        opacity: 1;

        transform:
            scale(1);
    }

    to {
        opacity: 0;

        transform:
            scale(0.97);
    }

}


/* ============================================================
   46. GLOW FLOAT
   ============================================================ */

@keyframes loaderGlowFloat {

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

    50% {
        transform:
            translate3d(-20px, 18px, 0)
            scale(1.04);
    }

}


/* ============================================================
   47. REVERSE GLOW FLOAT
   ============================================================ */

@keyframes loaderGlowFloatReverse {

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

    50% {
        transform:
            translate3d(22px, -16px, 0)
            scale(1.05);
    }

}


/* ============================================================
   48. LOADER NO JAVASCRIPT FALLBACK

   IMPORTANT:
   Add class="no-js" on <html> initially.
   JavaScript should replace no-js with js.
   ============================================================ */

.no-js
.page-loader {
    display: none;
}


/* ============================================================
   49. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .loader-grid {
        background-size:
            44px 44px;
    }

    .loader-corner {
        width: 34px;
        height: 34px;
    }

}


/* ============================================================
   50. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .loader-inner {
        width:
            min(88%, 420px);
    }

    .loader-emblem {
        width: 92px;
        height: 92px;
    }

    .loader-grid {
        background-size:
            38px 38px;
    }

    .loader-corner-top-left {
        top: 16px;
        left: 16px;
    }

    .loader-corner-top-right {
        top: 16px;
        right: 16px;
    }

    .loader-corner-bottom-left {
        bottom: 16px;
        left: 16px;
    }

    .loader-corner-bottom-right {
        right: 16px;
        bottom: 16px;
    }

}


/* ============================================================
   51. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .loader-emblem {
        width: 82px;
        height: 82px;

        margin-bottom:
            1.35rem;
    }

    .loader-brand {
        font-size:
            clamp(1.55rem, 9vw, 2.2rem);
    }

    .loader-tagline {
        max-width:
            280px;

        font-size:
            0.41rem;

        letter-spacing:
            0.055em;
    }

    .loader-progress {
        width:
            min(210px, 68vw);
    }

    .loader-corner {
        width: 28px;
        height: 28px;
    }

}


/* ============================================================
   52. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    .loader-emblem {
        width: 74px;
        height: 74px;
    }

    .loader-brand {
        font-size:
            1.55rem;
    }

    .loader-eyebrow::before,
    .loader-eyebrow::after {
        width: 15px;
    }

}


/* ============================================================
   53. LANDSCAPE MOBILE
   ============================================================ */

@media (
    max-width: 767.98px
) and (
    orientation: landscape
) {

    .loader-emblem {
        width: 64px;
        height: 64px;

        margin-bottom:
            0.8rem;
    }

    .loader-brand {
        font-size:
            1.55rem;
    }

    .loader-tagline {
        margin-top:
            5px;
    }

    .loader-progress {
        margin-top:
            1rem;
    }

}


/* ============================================================
   54. REDUCED MOTION
   ============================================================ */

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

    .page-loader,
    .page-loader::before,
    .page-loader::after,
    .loader-emblem::before,
    .loader-emblem::after,
    .loader-eyebrow,
    .loader-brand,
    .loader-tagline,
    .loader-progress,
    .loader-progress-bar,
    .loader-dot,
    .whatsapp-online-dot,
    .loader-spinner,
    .loader-spinner::before,
    .loader-logo,
    .page-loader.is-exiting
    .loader-inner {
        animation: none;
    }

    .loader-eyebrow,
    .loader-brand,
    .loader-tagline,
    .loader-progress,
    .loader-logo {
        opacity: 1;

        transform: none;
    }

}


/* ============================================================
   55. PRINT
   ============================================================ */

@media print {

    .page-loader {
        display: none !important;
    }

    body.is-loading {
        overflow: visible;
    }

}


/* ============================================================
   END OF ULTRA PREMIUM PAGE LOADER SYSTEM
   ============================================================ */
```