/* ==========================================================================
   Preloader & Page Transitions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Preloader Overlay
   -------------------------------------------------------------------------- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.75rem;
    background:
        radial-gradient(ellipse at top left, rgba(8, 168, 217, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(8, 168, 217, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated background orbs */
.preloader::before,
.preloader::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.preloader::before {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(8, 168, 217, 0.35) 0%, transparent 70%);
    top: -100px;
    left: -100px;
    animation: preloaderOrbA 12s ease-in-out infinite;
}

.preloader::after {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(7, 144, 184, 0.28) 0%, transparent 70%);
    bottom: -150px;
    right: -150px;
    animation: preloaderOrbB 14s ease-in-out infinite;
}

@keyframes preloaderOrbA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(80px, 60px) scale(1.15); }
    66%      { transform: translate(40px, 120px) scale(0.95); }
}

@keyframes preloaderOrbB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-70px, -50px) scale(1.1); }
    66%      { transform: translate(-30px, -100px) scale(0.95); }
}

/* Floating particles */
.preloader__particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.preloader__particles span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary, #08a8d9);
    opacity: 0.25;
    animation: preloaderFloat 8s ease-in-out infinite;
}

.preloader__particles span:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s;   width: 8px; height: 8px; }
.preloader__particles span:nth-child(2) { top: 65%; left: 80%; animation-delay: -2s;  width: 5px; height: 5px; }
.preloader__particles span:nth-child(3) { top: 35%; left: 75%; animation-delay: -4s;  width: 7px; height: 7px; }
.preloader__particles span:nth-child(4) { top: 80%; left: 25%; animation-delay: -1s;  width: 4px; height: 4px; }
.preloader__particles span:nth-child(5) { top: 15%; left: 60%; animation-delay: -3s;  width: 6px; height: 6px; }
.preloader__particles span:nth-child(6) { top: 70%; left: 50%; animation-delay: -5s;  width: 5px; height: 5px; }
.preloader__particles span:nth-child(7) { top: 45%; left: 10%; animation-delay: -6s;  width: 7px; height: 7px; }
.preloader__particles span:nth-child(8) { top: 25%; left: 90%; animation-delay: -2.5s;width: 4px; height: 4px; }

@keyframes preloaderFloat {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.15;
    }
    25% {
        transform: translate(20px, -30px);
        opacity: 0.4;
    }
    50% {
        transform: translate(-15px, -50px);
        opacity: 0.3;
    }
    75% {
        transform: translate(-30px, -20px);
        opacity: 0.5;
    }
}

/* Ensure loader content sits above background effects */
.preloader > *:not(.preloader__particles) {
    position: relative;
    z-index: 1;
}

.preloader.preloader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Logo inside preloader */
.preloader__logo {
    width: 220px;
    height: auto;
    opacity: 0;
    animation:
        preloaderLogoIn 0.6s 0.1s cubic-bezier(0.4, 0, 0.2, 1) forwards,
        preloaderLogoBreathe 3s 0.8s ease-in-out infinite;
}

@keyframes preloaderLogoIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes preloaderLogoBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* Spinner — elegant dual orbital arcs with pulsing core */
.preloader__spinner {
    position: relative;
    width: 64px;
    height: 64px;
}

/* Outer rotating arc */
.preloader__spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--color-primary, #08a8d9);
    border-right-color: var(--color-primary, #08a8d9);
    animation: preloaderSpin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Inner counter-rotating arc */
.preloader__spinner::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: var(--color-primary-dark, #0790b8);
    border-left-color: var(--color-primary-dark, #0790b8);
    animation: preloaderSpinReverse 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Pulsing center dot */
.preloader__spinner-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--color-primary, #08a8d9);
    box-shadow: 0 0 0 0 rgba(8, 168, 217, 0.5);
    animation: preloaderPulse 1.5s ease-out infinite;
}

@keyframes preloaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes preloaderSpinReverse {
    to { transform: rotate(-360deg); }
}

@keyframes preloaderPulse {
    0% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(8, 168, 217, 0.6);
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(8, 168, 217, 0);
    }
    100% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(8, 168, 217, 0);
    }
}

/* Progress bar under spinner */
.preloader__bar {
    width: 120px;
    height: 3px;
    background: var(--color-slate-200, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
    opacity: 0;
    animation: preloaderLogoIn 0.4s 0.3s ease forwards;
}

.preloader__bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary, #08a8d9), var(--color-primary-dark, #0790b8));
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.preloader__bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: preloaderBarShimmer 1.4s linear infinite;
}

@keyframes preloaderBarShimmer {
    to { left: 150%; }
}

/* --------------------------------------------------------------------------
   Page Transition Overlay
   -------------------------------------------------------------------------- */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    overflow: hidden;
}

.page-transition__curtain {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top left, rgba(8, 168, 217, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(8, 168, 217, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%);
    transform: translateY(100%);
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
    overflow: hidden;
}

/* Loader contents inside the curtain — hidden until curtain is in view */
.page-transition__logo {
    width: 220px;
    height: auto;
    opacity: 0;
    transition: opacity 0.25s ease 0.15s;
}

.page-transition__spinner {
    position: relative;
    width: 64px;
    height: 64px;
    opacity: 0;
    transition: opacity 0.25s ease 0.2s;
}

.page-transition__spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--color-primary, #08a8d9);
    border-right-color: var(--color-primary, #08a8d9);
    animation: preloaderSpin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.page-transition__spinner::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: var(--color-primary-dark, #0790b8);
    border-left-color: var(--color-primary-dark, #0790b8);
    animation: preloaderSpinReverse 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Outgoing — curtain slides up to cover page, loader fades in */
.page-transition.is-leaving .page-transition__curtain {
    animation: curtainUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-transition.is-leaving .page-transition__logo,
.page-transition.is-leaving .page-transition__spinner {
    opacity: 1;
}

/* Incoming — curtain slides up and out to reveal page */
.page-transition.is-entering .page-transition__curtain {
    transform: translateY(0);
    animation: curtainOut 0.4s 0.05s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-transition.is-entering .page-transition__logo,
.page-transition.is-entering .page-transition__spinner {
    opacity: 1;
    transition: opacity 0.2s ease;
}

@keyframes curtainUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes curtainOut {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
}

/* Page content fade-in after transition */
.page-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.page-content.is-entering {
    opacity: 0;
    transform: translateY(12px);
}

.page-content.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Mobile Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .preloader__logo,
    .page-transition__logo {
        width: 170px;
    }

    .preloader__spinner,
    .page-transition__spinner {
        width: 56px;
        height: 56px;
    }

    .preloader__spinner::after,
    .page-transition__spinner::after {
        inset: 8px;
    }

    .preloader__bar {
        width: 100px;
    }
}

@media (max-width: 480px) {
    .preloader__logo,
    .page-transition__logo {
        width: 140px;
    }

    .preloader__spinner,
    .page-transition__spinner {
        width: 48px;
        height: 48px;
    }

    .preloader__spinner::after,
    .page-transition__spinner::after {
        inset: 7px;
    }

    .preloader__spinner-core {
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
    }

    .preloader__bar {
        width: 80px;
    }
}

/* --------------------------------------------------------------------------
   Reduced Motion — respect user preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .preloader {
        transition: opacity 0.15s ease;
    }

    .preloader__spinner::after {
        animation-duration: 1.5s;
    }

    .preloader__logo {
        animation: none;
        opacity: 1;
    }

    .page-transition.is-leaving .page-transition__curtain,
    .page-transition.is-entering .page-transition__curtain {
        animation-duration: 0.15s;
    }

    .page-content {
        transition-duration: 0.1s;
    }
}

/* Prevent scroll while preloader is active */
html.is-loading {
    overflow: hidden;
}