/* =========================================================
   WINJOB — Temporal Gateway Loader
   Design DNA: Matches 404/403 error pages
   ========================================================= */

.page-loading {
    --wj-bg: #1f1b2d;
    --wj-orange: #fd5631;
    --wj-orange-soft: #ff8068;
    --wj-purple: #5d3cf2;
    --wj-purple-soft: #a08cff;
    --wj-white: #ffffff;
    --wj-muted: #9994a8;

    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 99999;

    background:
        radial-gradient(circle at 68% 45%, rgba(93, 60, 242, .075), transparent 35%),
        radial-gradient(circle at 28% 65%, rgba(253, 86, 49, .045), transparent 32%),
        var(--wj-bg);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
    contain: layout style paint;
    isolation: isolate;
}

.page-loading.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================================================
   Background Grid (مثل 404)
   ========================================================= */

.loader-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .17;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
}

/* =========================================================
   Floating Particles — سبک
   ========================================================= */

.loader-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.loader-particles span {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    will-change: transform, opacity;
    animation: wj-float var(--dur, 7s) ease-in-out infinite alternate;
}

.loader-particles span:nth-child(1) { left: 12%; top: 22%; --dur: 5.4s; }
.loader-particles span:nth-child(2) { left: 88%; top: 26%; --dur: 6.8s; }
.loader-particles span:nth-child(3) { left: 8%;  top: 74%; --dur: 6.2s; }
.loader-particles span:nth-child(4) { left: 92%; top: 70%; --dur: 5.9s; }
.loader-particles span:nth-child(5) { left: 50%; top: 8%;  --dur: 7.2s; }
.loader-particles span:nth-child(6) { left: 26%; top: 90%; --dur: 5.6s; }
.loader-particles span:nth-child(7) { left: 74%; top: 92%; --dur: 6.5s; }

@keyframes wj-float {
    from { transform: translate3d(0, 0, 0)     scale(.5); opacity: .15; }
    to   { transform: translate3d(0, -14px, 0) scale(1.3); opacity: .55; }
}

/* =========================================================
   Inner Layout
   ========================================================= */

.page-loading-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(560px, calc(100% - 40px));
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 2;
}

.page-loading.active .page-loading-inner {
    opacity: 1;
}

/* =========================================================
   Temporal Gateway SVG
   ========================================================= */

.loader-gateway {
    width: min(520px, 90vw);
    height: min(520px, 90vw);
    margin-bottom: 8px;
    overflow: visible;
    display: block;
}

/* =========================================================
   SVG Animations
   ========================================================= */

/* --- Data Flow (خطوط مدار متحرک) --- */
.wj-data {
    stroke-dasharray: 5 13;
    animation: wj-data-flow 4.5s linear infinite;
}

@keyframes wj-data-flow {
    to { stroke-dashoffset: -72; }
}

/* --- Pulse (دایره‌های تنفس) --- */
.wj-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: wj-pulse 3.8s ease-in-out infinite;
}

@keyframes wj-pulse {
    0%, 100% { opacity: .42; transform: scale(.97); }
    50%      { opacity: .75; transform: scale(1.025); }
}

/* --- Rotating rings --- */
.wj-ring-cw {
    transform-origin: 300px 300px;
    animation: wj-spin-cw 18s linear infinite;
}

.wj-ring-ccw {
    transform-origin: 300px 300px;
    animation: wj-spin-ccw 24s linear infinite;
}

@keyframes wj-spin-cw  { to { transform: rotate(360deg); } }
@keyframes wj-spin-ccw { to { transform: rotate(-360deg); } }

/* --- Sand falling (ذرات داده در حال ریختن) --- */
.wj-sand-drop {
    fill: var(--wj-orange);
    animation: wj-sand-fall 1.4s linear infinite;
    will-change: transform, opacity;
}

.wj-sand-drop:nth-of-type(2) { animation-delay: .35s; }
.wj-sand-drop:nth-of-type(3) { animation-delay: .70s; }
.wj-sand-drop:nth-of-type(4) { animation-delay: 1.05s; }

@keyframes wj-sand-fall {
    0%   { transform: translateY(0);     opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(60px); opacity: 0; }
}

/* --- Top sand drains --- */
.wj-sand-top {
    transform-origin: 300px 240px;
    animation: wj-sand-drain 2.8s ease-in-out infinite;
}

@keyframes wj-sand-drain {
    0%, 100% { transform: scaleY(1);    opacity: 1; }
    50%      { transform: scaleY(.35);  opacity: .7; }
}

/* --- Bottom sand fills --- */
.wj-sand-bottom {
    transform-origin: 300px 380px;
    animation: wj-sand-fill 2.8s ease-in-out infinite;
}

@keyframes wj-sand-fill {
    0%, 100% { transform: scaleY(.4); opacity: .6; }
    50%      { transform: scaleY(1);  opacity: 1; }
}

/* --- Core pulse --- */
.wj-core-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: wj-core 2s ease-in-out infinite;
}

@keyframes wj-core {
    0%, 100% { opacity: .5;  transform: scale(.9); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

/* --- Node blinks --- */
.wj-node {
    animation: wj-node-blink 3s ease-in-out infinite;
}

.wj-node:nth-of-type(2n) { animation-delay: .8s; }
.wj-node:nth-of-type(3n) { animation-delay: 1.6s; }

@keyframes wj-node-blink {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* =========================================================
   Brand
   ========================================================= */

.loader-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 22px;
}

.loader-brand-name {
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .3em;
    padding-left: .3em;
    background: linear-gradient(90deg, #fff 0%, #ff8068 50%, #a08cff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: brand-shimmer 3s ease-in-out infinite;
}

@keyframes brand-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.loader-brand-tagline {
    margin-top: 8px;
    color: rgba(255, 255, 255, .3);
    font-family: monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    padding-left: .22em;
}

/* =========================================================
   Progress
   ========================================================= */

.loader-progress {
    width: min(340px, 100%);
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
}

.loader-progress-track {
    position: relative;
    flex: 1;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);
}

.loader-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--wj-purple), var(--wj-orange));
    box-shadow: 0 0 8px rgba(253, 86, 49, .5);
    transition: width .1s linear;
}

.loader-progress-glow {
    position: absolute;
    top: 0;
    left: -25%;
    width: 25%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
    animation: wj-shine 1.3s linear infinite;
}

@keyframes wj-shine {
    from { transform: translateX(0); }
    to   { transform: translateX(500%); }
}

.loader-progress-percent {
    min-width: 42px;
    color: rgba(255, 255, 255, .38);
    font-family: monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: right;
}

/* =========================================================
   Completion
   ========================================================= */

.page-loading.complete .loader-gateway {
    animation: wj-complete .6s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes wj-complete {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    70%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

.page-loading.complete .wj-core-solid {
    fill: url(#wjCompleteGrad);
}

.page-loading.complete .loader-progress-bar {
    width: 100% !important;
    box-shadow: 0 0 14px rgba(253, 86, 49, .9), 0 0 30px rgba(253, 86, 49, .3);
}

.page-loading.complete .loader-brand-name {
    background: linear-gradient(90deg, #fd5631, #ff8068, #fd5631);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================================
   Closing
   ========================================================= */

.page-loading.is-closing {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s linear;
}

.page-loading.is-closing .page-loading-inner {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 0;
    transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 576px) {
    .loader-gateway {
        width: min(360px, 92vw);
        height: min(360px, 92vw);
    }
    .loader-brand-name { font-size: 19px; }
    .loader-progress   { width: min(280px, 100%); }
}

/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .page-loading *,
    .page-loading::before,
    .page-loading::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}