/**
 * Global Dental Clinic 3D Loader
 * Aligned with the clinic's visual identity:
 * - Teal / Cyan clinical gradients
 * - Volumetric 3D levitation & synchronized ground shadow
 * - Dual counter-rotating precision orbital tracks
 * - Sparkling enamel gleam & dental star glints
 * - Glassmorphic HUD card with animated clinical progress beam
 */

:root {
    --loader-overlay: rgb(15 23 42 / 48%);
    --loader-panel-bg: rgb(255 255 255 / 88%);
    --loader-panel-border: rgb(20 184 166 / 28%);
    --loader-panel-shadow: 0 24px 48px -12px rgb(15 118 110 / 22%), 0 0 24px rgb(45 212 191 / 14%);
    --loader-text: #0f766e;
    --loader-track-bg: rgb(204 251 241 / 80%);
    --loader-beam-start: #0d9488;
    --loader-beam-end: #06b6d4;
    --loader-aura-color: rgb(45 212 191 / 28%);
    --loader-ground-shadow: rgb(15 118 110 / 26%);
    --loader-satellite-cyan: #22d3ee;
    --loader-satellite-teal: #14b8a6;
    --loader-glint-color: #38bdf8;
}

html.dark {
    --loader-overlay: rgb(2 6 23 / 84%);
    --loader-panel-bg: rgb(15 23 42 / 88%);
    --loader-panel-border: rgb(45 212 191 / 32%);
    --loader-panel-shadow: 0 28px 56px -12px rgb(0 0 0 / 75%), 0 0 32px rgb(45 212 191 / 18%);
    --loader-text: #5eead4;
    --loader-track-bg: rgb(19 78 74 / 65%);
    --loader-beam-start: #2dd4bf;
    --loader-beam-end: #38bdf8;
    --loader-aura-color: rgb(45 212 191 / 32%);
    --loader-ground-shadow: rgb(4 47 46 / 70%);
    --loader-satellite-cyan: #67e8f9;
    --loader-satellite-teal: #2dd4bf;
    --loader-glint-color: #67e8f9;
}

.tooth-login-page .global-loader {
    --loader-overlay: rgb(8 47 73 / 82%);
    --loader-panel-bg: rgb(15 23 42 / 85%);
    --loader-panel-border: rgb(56 189 248 / 32%);
    --loader-panel-shadow: 0 28px 56px -12px rgb(3 105 161 / 35%), 0 0 36px rgb(56 189 248 / 20%);
    --loader-text: #e0f2fe;
    --loader-track-bg: rgb(12 74 110 / 70%);
    --loader-beam-start: #38bdf8;
    --loader-beam-end: #2dd4bf;
    --loader-aura-color: rgb(56 189 248 / 28%);
    --loader-ground-shadow: rgb(3 105 161 / 35%);
    --loader-satellite-cyan: #38bdf8;
    --loader-satellite-teal: #7dd3fc;
    --loader-glint-color: #bae6fd;
}

/* ==========================================================================
   Base Modal & Layout Container
   ========================================================================== */

.global-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: var(--loader-overlay);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 240ms ease,
        visibility 0s linear 240ms;
    isolation: isolate;
}

html.loader-enabled .global-loader.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 180ms ease,
        visibility 0s linear 0s;
}

/* ==========================================================================
   HUD Glassmorphic Card
   ========================================================================== */

.global-loader__panel {
    position: relative;
    display: flex;
    min-width: 14rem;
    max-width: min(92vw, 20rem);
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 1.75rem 2rem 1.4rem;
    border: 1px solid var(--loader-panel-border);
    border-radius: 1.75rem;
    background: var(--loader-panel-bg);
    box-shadow: var(--loader-panel-shadow);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.loader-enabled .global-loader.is-active .global-loader__panel {
    animation: dental-panel-pop 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dental-panel-pop {
    from {
        transform: scale(0.92) translateY(8px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   3D Visual Stage
   ========================================================================== */

.global-loader__stage {
    position: relative;
    display: grid;
    width: 9rem;
    height: 10rem;
    place-items: center;
    perspective: 750px;
    transform-style: preserve-3d;
}

/* Ambient Radiance Aura */
.global-loader__aura {
    position: absolute;
    inset: 10% 6% 16%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--loader-aura-color) 0%, transparent 72%);
    filter: blur(10px);
    animation: dental-aura-pulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes dental-aura-pulse {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* ==========================================================================
   Orbital Clinical Rings & Satellites
   ========================================================================== */

.global-loader__orbit-track {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* Outer Counter-Clockwise Orbit */
.global-loader__orbit-track--outer {
    inset: 6% 0% 16%;
    border: 2px dashed rgb(45 212 191 / 55%);
    border-top-color: transparent;
    border-left-color: rgb(45 212 191 / 20%);
    box-shadow: 0 0 12px rgb(45 212 191 / 20%);
    transform: rotateX(68deg) rotateY(-18deg);
    animation: dental-orbit-outer 4.5s linear infinite;
}

/* Inner Clockwise Orbit */
.global-loader__orbit-track--inner {
    inset: 18% 10% 24%;
    border: 1.5px solid rgb(56 189 248 / 50%);
    border-bottom-color: transparent;
    border-right-color: rgb(56 189 248 / 20%);
    box-shadow: 0 0 10px rgb(56 189 248 / 20%);
    transform: rotateX(64deg) rotateY(22deg);
    animation: dental-orbit-inner 3.2s linear infinite;
}

.global-loader__satellite {
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
}

.global-loader__satellite--cyan {
    top: -0.35rem;
    left: 50%;
    transform: translateX(-50%);
    background: #22d3ee;
    box-shadow:
        0 0 10px #22d3ee,
        0 0 20px #06b6d4,
        0 0 30px #0891b2;
}

.global-loader__satellite--teal {
    bottom: -0.35rem;
    left: 50%;
    transform: translateX(-50%);
    background: #2dd4bf;
    box-shadow:
        0 0 10px #2dd4bf,
        0 0 20px #14b8a6,
        0 0 28px #0d9488;
}

@keyframes dental-orbit-outer {
    from {
        transform: rotateX(68deg) rotateY(-18deg) rotateZ(360deg);
    }
    to {
        transform: rotateX(68deg) rotateY(-18deg) rotateZ(0deg);
    }
}

@keyframes dental-orbit-inner {
    from {
        transform: rotateX(64deg) rotateY(22deg) rotateZ(0deg);
    }
    to {
        transform: rotateX(64deg) rotateY(22deg) rotateZ(360deg);
    }
}

/* ==========================================================================
   Ground Levitation Shadow
   ========================================================================== */

.global-loader__ground-shadow {
    position: absolute;
    bottom: 0.4rem;
    width: 60%;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--loader-ground-shadow);
    filter: blur(5px);
    animation: dental-ground-shadow 2.8s ease-in-out infinite;
}

@keyframes dental-ground-shadow {
    0%, 100% {
        transform: scaleX(1) scaleY(1);
        opacity: 0.65;
    }
    50% {
        transform: scaleX(0.74) scaleY(0.68);
        opacity: 0.25;
    }
}

/* ==========================================================================
   3D Levitating Tooth Rig
   ========================================================================== */

.global-loader__tooth-rig {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 6.5rem;
    transform-style: preserve-3d;
    animation: dental-tooth-float-3d 2.8s ease-in-out infinite;
}

@keyframes dental-tooth-float-3d {
    0%, 100% {
        transform: translateY(0px) rotateY(-16deg) rotateX(6deg) scale(1);
    }
    50% {
        transform: translateY(-13px) rotateY(18deg) rotateX(-5deg) scale(1.05);
    }
}

.global-loader__tooth-svg {
    width: 100%;
    height: auto;
    overflow: visible;
    filter:
        drop-shadow(0 14px 14px rgb(15 118 110 / 28%))
        drop-shadow(0 4px 8px rgb(6 182 212 / 20%));
}

.global-loader__tooth-depth {
    opacity: 0.95;
    vector-effect: non-scaling-stroke;
}

.global-loader__tooth-enamel {
    vector-effect: non-scaling-stroke;
}

/* Enamel Gleam Animation (100% Reliable X-Translation along rotated axis) */
.global-loader__gleam {
    animation: dental-gleam-sweep 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes dental-gleam-sweep {
    0%, 15% {
        transform: translateX(0);
        opacity: 0;
    }
    30% {
        opacity: 0.95;
    }
    55%, 100% {
        transform: translateX(260px);
        opacity: 0;
    }
}

/* ==========================================================================
   Dental Sparkle Glints (4-Point Stars at Crown Apex)
   ========================================================================== */

.global-loader__glint {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    color: #ffffff;
    filter: drop-shadow(0 0 6px #67e8f9) drop-shadow(0 0 12px #22d3ee);
}

.global-loader__glint svg {
    width: 100%;
    height: 100%;
}

.global-loader__glint--left {
    top: 0.45rem;
    left: 0.75rem;
    width: 1.15rem;
    height: 1.15rem;
    animation: dental-glint-twinkle 2.8s ease-in-out infinite;
}

.global-loader__glint--right {
    top: 0.85rem;
    right: 0.85rem;
    width: 0.95rem;
    height: 0.95rem;
    animation: dental-glint-twinkle 2.8s ease-in-out infinite 1.4s;
}

@keyframes dental-glint-twinkle {
    0%, 100% {
        transform: scale(0.2) rotate(0deg);
        opacity: 0;
    }
    30% {
        transform: scale(1.2) rotate(45deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.8) rotate(90deg);
        opacity: 0.6;
    }
    70% {
        transform: scale(0.15) rotate(135deg);
        opacity: 0;
    }
}

/* ==========================================================================
   HUD Content & Medical Beam Progress
   ========================================================================== */

.global-loader__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.global-loader__message {
    margin: 0;
    color: var(--loader-text);
    font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-align: center;
}

.global-loader__progress-track {
    position: relative;
    width: 6.5rem;
    height: 3.5px;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--loader-track-bg);
}

.global-loader__progress-beam {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--loader-beam-start), var(--loader-beam-end));
    box-shadow: 0 0 8px var(--loader-beam-end);
    animation: dental-beam-sweep 1.8s ease-in-out infinite;
}

@keyframes dental-beam-sweep {
    0% {
        right: -35%;
        left: auto;
        width: 30%;
    }
    50% {
        right: 25%;
        left: auto;
        width: 50%;
    }
    100% {
        right: 105%;
        left: auto;
        width: 30%;
    }
}

/* ==========================================================================
   Reduced Motion Support (Gentle transitions, never freeze the loader)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .global-loader {
        transition-duration: 100ms;
    }

    /* Keep all loader animations alive so user knows system is actively working */
    .global-loader__tooth-rig {
        animation-duration: 3.6s;
    }

    .global-loader__orbit-track--outer {
        animation-duration: 6.5s;
    }

    .global-loader__orbit-track--inner {
        animation-duration: 5s;
    }
}

@media print {
    .global-loader {
        display: none !important;
    }
}