/*
 * Benchmarkee Substance Loaders
 * One lightweight visual component, five WebGL/CSS presets.
 */
.bench-substance.is-webgl {
    margin: auto;
}
.bench-substance {
    --bench-substance-size: 72%;
    --bench-substance-duration: 4.7s;
    --bench-substance-a: #151820;
    --bench-substance-b: #737b8a;
    --bench-substance-c: #eef3fb;
   /* --bench-substance-glow: rgba(226, 231, 241, .58);*/
   /*--bench-substance-shadow: rgba(18, 22, 30, .18);*/

    position: relative;
    display: grid;
    width: min(100%, 236px);
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    box-sizing: border-box;
    contain: layout paint style;
    isolation: isolate;
}

.bench-substance__shell {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.bench-substance__shell::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 108%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--bench-substance-glow) 0%, transparent 73%);
    background: radial-gradient(
        circle,
        var(--bench-substance-glow) 0%,
        color-mix(in srgb, var(--bench-substance-glow) 46%, transparent) 38%,
        transparent 73%
    );
    transform: translate(-50%, -50%);
}

.bench-substance__shell::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 14%;
    left: 50%;
    width: calc(var(--bench-substance-size) * .46);
    height: 8px;
    border-radius: 999px;
    pointer-events: none;
    background: var(--bench-substance-shadow);
    filter: blur(1.5px);
    opacity: .68;
    transform: translateX(-50%) scaleX(.78);
}

.bench-substance__canvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 180ms ease;
}

.bench-substance.is-webgl .bench-substance__canvas {
    opacity: 1;
}

.bench-substance__fallback {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: var(--bench-substance-size);
    aspect-ratio: 1;
    border-radius: 46% 54% 61% 39% / 44% 43% 57% 56%;
    background:
        radial-gradient(circle at 29% 23%, rgba(255,255,255,.96), transparent 23%),
        radial-gradient(circle at 73% 72%, var(--bench-substance-c), transparent 46%),
        linear-gradient(145deg, var(--bench-substance-a) 3%, var(--bench-substance-b) 46%, var(--bench-substance-c) 76%, var(--bench-substance-b) 100%);
    box-shadow:
        inset 12px 15px 22px rgba(255,255,255,.16),
        inset -14px -17px 26px rgba(5,8,14,.12),
        0 18px 34px var(--bench-substance-shadow);
    transform: translate(-50%, -50%);
    animation: benchSubstanceMorph var(--bench-substance-duration) cubic-bezier(.45, 0, .2, 1) infinite alternate;
    transition: opacity 160ms ease;
}

.bench-substance.is-webgl .bench-substance__fallback {
    opacity: 0;
}

.bench-substance[data-paused="true"] .bench-substance__fallback,
.bench-substance[data-paused="1"] .bench-substance__fallback {
    animation-play-state: paused;
}

.bench-substance__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes benchSubstanceMorph {
    0% {
        border-radius: 46% 54% 61% 39% / 44% 43% 57% 56%;
        transform: translate(-50%, -50%) translate3d(-4px, 3px, 0) rotate(-3deg) scale(.96, 1.04);
    }
    48% {
        border-radius: 59% 41% 40% 60% / 54% 62% 38% 46%;
        transform: translate(-50%, -50%) translate3d(5px, -5px, 0) rotate(4deg) scale(1.05, .95);
    }
    100% {
        border-radius: 39% 61% 55% 45% / 62% 40% 60% 38%;
        transform: translate(-50%, -50%) translate3d(-2px, 2px, 0) rotate(-2deg) scale(.98, 1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bench-substance__fallback,
    .bench-substance__canvas {
        animation: none !important;
        transition: none !important;
    }
}