.zos-loader {
    --zos-orb-color: #15b5bc;
    --zos-loader-size: clamp(128px, 36vmin, 220px);
    --zos-loader-orbit-duration: 3s;
    display: grid;
    place-items: center;
    min-inline-size: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease-out, visibility 180ms;
}

.zos-loader[hidden] { display: none; }

.zos-loader[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 120ms ease-out;
}

.zos-loader--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1300;
    isolation: isolate;
    overflow: clip;
    transition: none;
}

.zos-loader--fullscreen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fff;
}

.zos-loader--overlay { position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, .96); }
.zos-loader-host { position: relative; }
.zos-loader-orb {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: min(var(--zos-loader-size), 100%, 94vw, 92dvh);
    aspect-ratio: 1;
    isolation: isolate;
    direction: ltr;
}

.zos-loader-orb::before,
.zos-loader-orb::after,
.zos-loader-trail,
.zos-loader-trail::before,
.zos-loader-trail::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.zos-loader-orb::before {
    z-index: 1;
    background: conic-gradient(
        #069fa7 0deg, #43d9df 34deg, #27c3cc84 75deg, #6ce0e15c 108deg,
        #27c6cdad 146deg, #0ab7bd 174deg, #00a9ae 205deg, #46d4d7a8 236deg,
        #74e7e94d 268deg, #71dede64 295deg, var(--zos-orb-color) 334deg, #069fa7 360deg
    );
    mask-image: radial-gradient(circle closest-side, transparent 81.5%, #0008 83.3%,
        #000 84.7% 85.6%, #0007 86.4%, transparent 87.4%);
}

.zos-loader-orb::after {
    background: conic-gradient(#20d5dc 0deg, #6eeaf0 48deg, #75e4e376 106deg,
        #43d9dc 164deg, #21d4d6 202deg, #79e6e77a 268deg, #7ee5e56e 305deg, #20d5dc 360deg);
    mask-image: radial-gradient(circle closest-side, transparent 70%, #0001 75%, #0004 81%,
        #0006 85%, #0004 88%, #0001 93%, transparent 99%);
    opacity: .8;
    animation: zos-loader-bloom 3.6s ease-in-out infinite;
}

.zos-loader-trail {
    z-index: 2;
    animation: zos-loader-orbit var(--zos-loader-orbit-duration) linear infinite;
}

/* The broad bloom has a soft falloff both inside and outside the glass rim. */
.zos-loader-trail::before {
    background:
        radial-gradient(ellipse 5.1% 2.7% at 75.8% 16.2%, #fff 20%, #dfffff 38%, #afffff9c 56%, transparent 100%),
        radial-gradient(ellipse 16% 12% at 76% 16.2%, #12f4fa 8%, #20eef3aa 35%, transparent 100%),
        conic-gradient(from -68deg, transparent, #00d9df12 24deg, #13e5ef66 62deg,
            #00dceee8 94deg, #01e9f0 106deg, #16e2ed88 128deg, #60f5fa30 149deg, transparent 171deg);
    mask-image: radial-gradient(circle closest-side, transparent 61%, #0001 68%, #0004 74%, #000a 80%,
        #000e 84%, #000a 89%, #0002 94%, transparent 98%);
}

/* The white reflection follows the curved edge through the brightest part of the trail. */
.zos-loader-trail::after {
    background:
        radial-gradient(ellipse 8% 4.6% at 75.8% 16.2%, #fff 12%, #e5ffff 32%, #b8fdff 48%, transparent 100%),
        conic-gradient(from -40deg, transparent, #d8ffff28 23deg, #eaffffaa 47deg,
            #f5ffff 73deg, #fff 78deg, #eaffffdf 87deg, #d9ffff46 111deg, transparent 138deg);
    mask-image: radial-gradient(circle closest-side, transparent 82.7%, #0001 84.7%, #000a 85.6%,
        #000 86% 86.4%, #0006 87%, transparent 88.3%);
}

.zos-loader-logo {
    z-index: 3;
    display: block;
    inline-size: 71%;
    block-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
}

.zos-loader[data-visible="false"] .zos-loader-trail,
.zos-loader[data-visible="false"] .zos-loader-orb::after {
    animation-play-state: paused;
}

.zos-loader--fullscreen[data-visible="false"] .zos-loader-trail {
    animation: none;
}

.zos-loader-error {
    max-inline-size: min(320px, 90vw);
    padding: 16px;
    text-align: center;
    color: #171717;
    font-size: 16px;
    line-height: 1.6;
}
.zos-loader-error button {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px 16px;
    color: #171717;
    background: #fff;
    font: inherit;
}

.zos-loader-failure {
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    background: #fff;
}
.zos-loader--bootstrap[data-failed] > .zos-loader-orb { display: none; }

@keyframes zos-loader-orbit { to { transform: rotate(1turn); } }
@keyframes zos-loader-bloom { 50% { opacity: .93; } }

@media (prefers-reduced-motion: no-preference) {
    .zos-loader--fullscreen[data-visible="true"] > .zos-loader-orb {
        --zos-loader-entry: zos-loader-enter 560ms cubic-bezier(.2, .65, .28, 1) both;
        animation: var(--zos-loader-entry);
    }

    .zos-loader--fullscreen[data-exit] {
        --zos-loader-exit-duration: 380ms;
        --zos-loader-exit-easing: cubic-bezier(.55, .06, .76, .7);
        pointer-events: none;
    }

    .zos-loader--fullscreen[data-exit="fast"] {
        --zos-loader-exit-duration: 200ms;
        --zos-loader-exit-easing: cubic-bezier(.42, 0, .66, .9);
    }

    .zos-loader--fullscreen[data-visible="true"][data-exit] > .zos-loader-orb {
        animation: var(--zos-loader-entry), zos-loader-leave var(--zos-loader-exit-duration) var(--zos-loader-exit-easing) both;
    }

    .zos-loader--fullscreen[data-visible="true"][data-exit]::before {
        animation: zos-loader-sweep var(--zos-loader-exit-duration) var(--zos-loader-exit-easing) both;
    }

    @keyframes zos-loader-enter {
        from { transform: translateX(calc(50vw + 55%)); }
        to { transform: translateX(0); }
    }

    @keyframes zos-loader-leave { to { translate: calc(-50vw - 55%) 0; } }
    @keyframes zos-loader-sweep { to { transform: translateX(-100%); } }
}

@media (prefers-reduced-motion: reduce) {
    .zos-loader { transition: none; }
    .zos-loader-trail, .zos-loader-orb::after { animation: none; }
}