/* Shared animated startup loader. Keep this file common to every client website. */
.website-startup-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--primary, #1683ff) 24%, transparent), transparent 34%),
        radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--primary-soft, #005ee8) 20%, transparent), transparent 38%),
        linear-gradient(145deg, #070b14 0%, #0b1220 48%, #070d18 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity .55s ease, visibility .55s ease;
}

.website-startup-loader.is-complete {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.website-loader-aurora {
    position: absolute;
    width: min(68vw, 860px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(28px);
    opacity: .38;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary, #1683ff) 36%, transparent), transparent 68%);
    animation: websiteLoaderFloat 8s ease-in-out infinite alternate;
}

.website-loader-aurora-one { left: -20vw; top: -28vw; }
.website-loader-aurora-two { right: -24vw; bottom: -30vw; animation-delay: -3s; animation-duration: 10s; }

.website-loader-card {
    position: relative;
    width: min(88vw, 430px);
    padding: 34px 34px 30px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
    border: 1px solid color-mix(in srgb, var(--primary, #1683ff) 30%, rgba(255,255,255,.16));
    box-shadow:
        0 34px 90px rgba(0,0,0,.42),
        0 0 54px color-mix(in srgb, var(--primary, #1683ff) 15%, transparent),
        inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    overflow: hidden;
}

.website-loader-card::before {
    content: "";
    position: absolute;
    inset: -45% -35%;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.12) 48%, transparent 62%);
    transform: translateX(-30%) rotate(8deg);
    animation: websiteLoaderSheen 3.8s ease-in-out infinite;
    pointer-events: none;
}

.website-loader-logo-shell {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
}

.website-loader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--primary, #1683ff);
    border-right-color: color-mix(in srgb, var(--primary, #1683ff) 42%, #fff);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primary, #1683ff) 45%, transparent));
    animation: websiteLoaderSpin 2.8s linear infinite;
}

.website-loader-ring-two {
    inset: 9px;
    opacity: .72;
    animation-direction: reverse;
    animation-duration: 4.2s;
}

.website-loader-logo {
    position: relative;
    z-index: 2;
    width: 74px;
    height: 74px;
    object-fit: contain;
    border-radius: 22px;
    padding: 8px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 34px rgba(0,0,0,.28), 0 0 26px color-mix(in srgb, var(--primary, #1683ff) 20%, transparent);
    animation: websiteLoaderLogoPulse 2.4s ease-in-out infinite;
}

.website-loader-kicker {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
    color: color-mix(in srgb, var(--primary, #1683ff) 54%, #fff);
    font: 850 10px/1.2 "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    letter-spacing: .20em;
}

.website-loader-company {
    position: relative;
    z-index: 2;
    font: 900 clamp(23px, 4vw, 31px)/1.05 "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    letter-spacing: -.035em;
    text-shadow: 0 4px 24px rgba(0,0,0,.26);
}

.website-loader-status {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    color: rgba(255,255,255,.70);
    font: 650 13px/1.45 "Segoe UI", Arial, sans-serif;
}

.website-loader-progress {
    position: relative;
    z-index: 2;
    height: 4px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
}

.website-loader-progress span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary, #1683ff) 76%, #fff), #fff, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--primary, #1683ff) 56%, transparent);
    animation: websiteLoaderProgress 1.55s ease-in-out infinite;
}

.website-loader-dots {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 17px;
}

.website-loader-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.52);
    animation: websiteLoaderDot 1.25s ease-in-out infinite;
}
.website-loader-dots span:nth-child(2) { animation-delay: .15s; }
.website-loader-dots span:nth-child(3) { animation-delay: .30s; }

@keyframes websiteLoaderSpin { to { transform: rotate(360deg); } }
@keyframes websiteLoaderFloat { to { transform: translate3d(7vw, 5vh, 0) scale(1.08); } }
@keyframes websiteLoaderSheen {
    0%, 18% { transform: translateX(-52%) rotate(8deg); opacity: 0; }
    42% { opacity: 1; }
    72%, 100% { transform: translateX(52%) rotate(8deg); opacity: 0; }
}
@keyframes websiteLoaderLogoPulse {
    0%,100% { transform: scale(1); box-shadow: 0 16px 34px rgba(0,0,0,.28), 0 0 22px color-mix(in srgb, var(--primary, #1683ff) 16%, transparent); }
    50% { transform: scale(1.045); box-shadow: 0 18px 38px rgba(0,0,0,.30), 0 0 34px color-mix(in srgb, var(--primary, #1683ff) 27%, transparent); }
}
@keyframes websiteLoaderProgress {
    0% { transform: translateX(-125%); }
    100% { transform: translateX(340%); }
}
@keyframes websiteLoaderDot {
    0%,100% { transform: translateY(0); opacity: .38; }
    50% { transform: translateY(-5px); opacity: 1; }
}

@media (max-width: 560px) {
    .website-loader-card { padding: 28px 22px 25px; border-radius: 26px; }
    .website-loader-logo-shell { width: 96px; height: 96px; }
    .website-loader-logo { width: 64px; height: 64px; border-radius: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .website-loader-aurora,
    .website-loader-card::before,
    .website-loader-ring,
    .website-loader-logo,
    .website-loader-progress span,
    .website-loader-dots span { animation: none !important; }
}