/* ==========================================================================
   Page Transition Loader — centered version
   A full-screen transition screen shown between page navigations: a
   circular progress ring (tracks real navigation progress) wrapped
   around a breathing briefcase mark, with a short status label.
   No top bar / line-based indicator anywhere.
   Fully responsive and respects prefers-reduced-motion.
   ========================================================================== */

:root {
    --loader-ring-size: clamp(76px, 22vw, 108px);
    --loader-ring-stroke: 4px;
    --loader-badge-size: clamp(46px, 13vw, 62px);
    --loader-icon-size: clamp(22px, 6vw, 28px);
}

/* -------------------------------------------------------------------- */
/* Full-screen overlay                                                  */
/* -------------------------------------------------------------------- */

#page-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(60% 60% at 50% 42%, var(--brand-soft, #EAF1FF) 0%, rgba(255, 255, 255, .97) 68%),
        var(--paper, #fff);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

@supports (top: env(safe-area-inset-top)) {
    #page-loader-overlay {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

body.is-page-loading #page-loader-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease, visibility 0s linear 0s;
}

/* -------------------------------------------------------------------- */
/* Center cluster                                                       */
/* -------------------------------------------------------------------- */

.page-loader-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transform: translateY(10px) scale(.94);
    opacity: 0;
    transition: opacity .38s cubic-bezier(.4, 0, .2, 1),
                transform .38s cubic-bezier(.4, 0, .2, 1);
}

body.is-page-loading .page-loader-center {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition-delay: .05s;
}

/* Ring + badge stack */
.page-loader-mark {
    position: relative;
    width: var(--loader-ring-size);
    height: var(--loader-ring-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-loader-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.page-loader-ring-track {
    fill: none;
    stroke: var(--brand-soft, #EAF1FF);
    stroke-width: var(--loader-ring-stroke);
}

.page-loader-ring-progress {
    fill: none;
    stroke: var(--brand, #2563EB);
    stroke-width: var(--loader-ring-stroke);
    stroke-linecap: round;
    stroke-dasharray: 326.7;
    stroke-dashoffset: 326.7;
    transition: stroke-dashoffset .25s cubic-bezier(.4, 0, .2, 1);
}

.page-loader-badge {
    width: var(--loader-badge-size);
    height: var(--loader-badge-size);
    border-radius: 50%;
    background: linear-gradient(155deg, var(--brand-light, #3B82F6), var(--brand, #2563EB) 60%, var(--brand-dark, #1D4ED8));
    box-shadow: 0 10px 24px -8px rgba(37, 99, 235, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: page-loader-breathe 1.6s ease-in-out infinite;
}

@keyframes page-loader-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

.page-loader-icon {
    width: var(--loader-icon-size);
    height: var(--loader-icon-size);
    fill: none;
    stroke: #fff;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Briefcase latch: a quiet, single-detail animation — the clasp
   glints once per breathing cycle, echoing "unlocking an opportunity" */
.page-loader-icon .pl-latch {
    transform-origin: 24px 17px;
    animation: page-loader-latch 1.6s ease-in-out infinite;
}

@keyframes page-loader-latch {
    0%, 60%, 100% { opacity: .55; }
    30%           { opacity: 1; }
}

/* -------------------------------------------------------------------- */
/* Status label                                                         */
/* -------------------------------------------------------------------- */

.page-loader-label {
    margin: 0;
    font-family: var(--font, 'Inter', sans-serif);
    font-size: clamp(13px, 3.4vw, 14px);
    font-weight: 600;
    color: var(--text-soft, #475467);
    letter-spacing: .01em;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.page-loader-dots span {
    animation: page-loader-dot-fade 1.4s ease-in-out infinite;
    opacity: 0;
}

.page-loader-dots span:nth-child(1) { animation-delay: 0s; }
.page-loader-dots span:nth-child(2) { animation-delay: .2s; }
.page-loader-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes page-loader-dot-fade {
    0%, 80%, 100% { opacity: 0; }
    40%           { opacity: 1; }
}

/* -------------------------------------------------------------------- */
/* Incoming page fade / rise-in (content underneath, after overlay      */
/* clears)                                                              */
/* -------------------------------------------------------------------- */

body.page-fade-init main {
    opacity: 0;
    transform: translateY(6px);
}

body.page-fade-in main {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .38s cubic-bezier(.4, 0, .2, 1),
                transform .38s cubic-bezier(.4, 0, .2, 1);
}

body.page-fade-out main {
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

/* -------------------------------------------------------------------- */
/* Mobile-specific tuning                                                */
/* -------------------------------------------------------------------- */

@media (max-width: 480px) {
    .page-loader-center {
        gap: 14px;
    }
}

/* -------------------------------------------------------------------- */
/* Reduced motion: keep it functional but calm                          */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .page-loader-badge,
    .page-loader-icon .pl-latch,
    .page-loader-dots span,
    .page-loader-center {
        animation: none !important;
    }

    .page-loader-dots span {
        opacity: 1;
    }

    #page-loader-overlay,
    .page-loader-ring-progress,
    body.page-fade-init main,
    body.page-fade-in main,
    body.page-fade-out main {
        transition-duration: .15s !important;
        transform: none !important;
    }
}