/* =========================================================
   SAAWARIYA TRAVELS — GLOBAL WEBSITE LOADER
   Version 1.0.0
   ========================================================= */

:root {
    --saaw-loader-navy: #0A3D5A;
    --saaw-loader-teal: #27B1B2;
    --saaw-loader-gold: #D49020;
    --saaw-loader-light: #EAF8F8;
    --saaw-loader-muted: #6B7F8B;
}

/* Prevent the page from scrolling while the loader is active. */
html.saawariya-loader-active,
html.saawariya-loader-active body {
    overflow: hidden !important;
}

/* =========================================================
   FULL SCREEN
   ========================================================= */

#saawariya-site-loader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100vh;

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

    background:
        radial-gradient(circle at center, rgba(39, 177, 178, 0.035), transparent 34%),
        #FFFFFF;

    z-index: 2147483647;

    opacity: 1;
    visibility: visible;
    pointer-events: all;

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

    isolation: isolate;

    font-family: "Noto Serif Ethiopic Condensed", Georgia, serif;

    /* Safety: never leave the visitor trapped if JS fails. */
    animation: saawariya-loader-safety-hide 8s forwards;
}

/* =========================================================
   LOADER CONTENT
   ========================================================= */

.saawariya-loader-inner {
    width: min(92vw, 520px);

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

    text-align: center;

    transform: translateZ(0);
}

/* =========================================================
   MARK
   ========================================================= */

.saawariya-loader-mark {
    position: relative;

    width: 150px;
    height: 150px;

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

    margin-bottom: 30px;
}

/* Outer rotating ring */
.saawariya-loader-ring {
    position: absolute;
    inset: 0;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    border: 5px solid rgba(39, 177, 178, 0.10);

    border-top-color: var(--saaw-loader-teal);
    border-right-color: var(--saaw-loader-gold);

    transform: rotate(-18deg);

    animation:
        saawariya-loader-spin 1.35s linear infinite;

    filter: drop-shadow(0 5px 12px rgba(39, 177, 178, 0.08));
}

/* Center circle */
.saawariya-loader-circle {
    position: relative;
    z-index: 2;

    width: 104px;
    height: 104px;

    border-radius: 50%;

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

    background: var(--saaw-loader-navy);

    border: 2px solid rgba(39, 177, 178, 0.85);

    box-shadow:
        0 14px 38px rgba(10, 61, 90, 0.18),
        inset 0 0 0 7px rgba(255,255,255,0.035);

    animation: saawariya-loader-circle-pulse 2s ease-in-out infinite;
}

/* Exact Saawariya logo converted to white */
.saawariya-loader-logo {
    width: 70px;
    height: 70px;

    display: block;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1);

    user-select: none;
    -webkit-user-drag: none;
}

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

.saawariya-loader-brand {
    margin: 0 0 8px;

    color: var(--saaw-loader-navy);

    font-family: "Alice", Georgia, serif;

    font-size: clamp(30px, 5vw, 44px);
    font-weight: 400;

    line-height: 1.15;
    letter-spacing: 0.1px;

    white-space: nowrap;
}

/* =========================================================
   TAGLINE
   ========================================================= */

.saawariya-loader-tagline {
    color: #526F80;

    font-family: "Noto Serif Ethiopic Condensed", Georgia, serif;

    font-size: clamp(12px, 2vw, 16px);
    font-weight: 600;

    line-height: 1.3;

    letter-spacing: clamp(2px, 0.55vw, 4px);

    white-space: nowrap;
}

/* =========================================================
   LOADING DOTS
   ========================================================= */

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

    gap: 9px;

    margin-top: 25px;
}

.saawariya-loader-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--saaw-loader-teal);

    animation: saawariya-loader-dot 1.25s ease-in-out infinite;
}

.saawariya-loader-dots span:nth-child(2) {
    width: 10px;
    height: 10px;
    animation-delay: 0.14s;
}

.saawariya-loader-dots span:nth-child(3) {
    background: var(--saaw-loader-gold);
    animation-delay: 0.28s;
}

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

#saawariya-site-loader.saawariya-loader-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

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

@keyframes saawariya-loader-spin {
    from {
        transform: rotate(-18deg);
    }

    to {
        transform: rotate(342deg);
    }
}

@keyframes saawariya-loader-circle-pulse {
    0%,
    100% {
        transform: scale(1);
    }

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

@keyframes saawariya-loader-dot {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.35;
    }

    50% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

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

@media (max-width: 640px) {

    .saawariya-loader-mark {
        width: 118px;
        height: 118px;
        margin-bottom: 24px;
    }

    .saawariya-loader-ring {
        width: 118px;
        height: 118px;
        border-width: 4px;
    }

    .saawariya-loader-circle {
        width: 84px;
        height: 84px;
    }

    .saawariya-loader-logo {
        width: 56px;
        height: 56px;
    }

    .saawariya-loader-brand {
        font-size: clamp(27px, 8vw, 34px);
    }

    .saawariya-loader-tagline {
        font-size: 11px;
        letter-spacing: 2.3px;
    }

    .saawariya-loader-dots {
        margin-top: 20px;
        gap: 8px;
    }
}

/* Small phones */
@media (max-width: 380px) {

    .saawariya-loader-mark {
        width: 105px;
        height: 105px;
        margin-bottom: 21px;
    }

    .saawariya-loader-ring {
        width: 105px;
        height: 105px;
        border-width: 4px;
    }

    .saawariya-loader-circle {
        width: 76px;
        height: 76px;
    }

    .saawariya-loader-logo {
        width: 50px;
        height: 50px;
    }

    .saawariya-loader-brand {
        font-size: 25px;
    }

    .saawariya-loader-tagline {
        font-size: 10px;
        letter-spacing: 1.9px;
    }
}

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

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

    #saawariya-site-loader {
        animation: saawariya-loader-safety-hide 8s forwards;
    }

    .saawariya-loader-ring,
    .saawariya-loader-circle,
    .saawariya-loader-dots span {
        animation: none;
    }
}

/* =========================================================
   SAFETY FALLBACK
   ========================================================= */

@keyframes saawariya-loader-safety-hide {
    0%,
    82% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}