/* Generated loader families (x*) — driven by --sl-hue / --sl-variant / --sl-speed */

.site-loader--gen {
    --site-loader-accent: hsl(var(--sl-hue, 260) 82% 56%);
    --site-loader-accent-soft: color-mix(in srgb, var(--site-loader-accent) 35%, transparent);
    --site-loader-track: color-mix(in srgb, var(--site-loader-accent) 18%, transparent);
    --site-loader-glow: color-mix(in srgb, var(--site-loader-accent) 45%, transparent);
    --site-loader-duration: var(--sl-speed, 1.1s);
}

.site-loader__icon--placeholder {
    display: inline-block;
    width: var(--site-loader-size);
    height: var(--site-loader-size);
    border-radius: 14px;
    background: var(--site-loader-icon-bg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* xring */
.site-loader--family-xring .site-loader__fx::before {
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 50%;
    border: 3px solid var(--site-loader-track);
    border-top-color: var(--site-loader-accent);
    animation: siteLoaderSpin var(--site-loader-duration) linear infinite;
}
.site-loader--family-xring[data-sl-variant="1"] .site-loader__fx::before { border-width: 2px; }
.site-loader--family-xring[data-sl-variant="2"] .site-loader__fx::before { border-style: dashed; border-top-style: solid; }
.site-loader--family-xring[data-sl-variant="3"] .site-loader__fx::before { border-width: 5px; filter: drop-shadow(0 0 10px var(--site-loader-glow)); }
.site-loader--family-xring[data-sl-variant="4"] .site-loader__fx::after {
    inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 50%;
    border: 2px solid transparent; border-bottom-color: var(--site-loader-accent);
    animation: siteLoaderSpinRev calc(var(--site-loader-duration) * 0.85) linear infinite;
}
.site-loader--family-xring[data-sl-variant="5"] .site-loader__fx::before { border-style: dotted; border-top-style: solid; }
.site-loader--family-xring[data-sl-variant="6"] .site-loader__icon { border-radius: 50%; }
.site-loader--family-xring[data-sl-variant="7"] .site-loader__fx::before {
    border-image: conic-gradient(from 0deg, var(--site-loader-accent), transparent) 1;
    border-color: transparent; border-top-color: var(--site-loader-accent); border-style: solid; border-width: 3px;
}

/* xneon */
.site-loader--family-xneon .site-loader__fx::before {
    inset: 0; width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid var(--site-loader-accent);
    box-shadow: 0 0 14px var(--site-loader-glow), inset 0 0 10px var(--site-loader-accent-soft);
    animation: siteLoaderSpin var(--site-loader-duration) linear infinite;
}
.site-loader--family-xneon[data-sl-variant="2"] .site-loader__fx::after {
    inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 50%;
    border: 2px solid transparent; border-top-color: color-mix(in srgb, var(--site-loader-accent) 70%, #fff);
    animation: siteLoaderSpinRev calc(var(--site-loader-duration) * 1.2) linear infinite;
}
.site-loader--family-xneon[data-sl-variant="4"] .site-loader__fx::before { animation-name: siteLoaderPulse; border-radius: 18px; }
.site-loader--family-xneon[data-sl-variant="6"] .site-loader__icon { box-shadow: 0 0 24px var(--site-loader-glow); }

/* xorbit */
.site-loader--family-xorbit .site-loader__fx::before {
    inset: 0; width: 100%; height: 100%; border-radius: 50%;
    border: 2px dashed var(--site-loader-track);
    animation: siteLoaderSpin calc(var(--site-loader-duration) * 1.4) linear infinite;
}
.site-loader--family-xorbit .site-loader__fx::after {
    width: 12px; height: 12px; border-radius: 50%; inset: auto; top: 4px; left: 50%;
    margin-left: -6px; background: var(--site-loader-accent);
    box-shadow: 0 0 10px var(--site-loader-glow);
    animation: siteLoaderSpin var(--site-loader-duration) linear infinite;
    transform-origin: 6px calc(var(--site-loader-orbit) / 2 - 4px);
}
.site-loader--family-xorbit[data-sl-variant="3"] .site-loader__fx::before { border-style: solid; border-width: 1px; }
.site-loader--family-xorbit[data-sl-variant="5"] .site-loader__fx::after { width: 8px; height: 8px; margin-left: -4px; }

/* xbars */
.site-loader--family-xbars .site-loader__fx::before,
.site-loader--family-xbars .site-loader__fx::after {
    inset: auto; width: 8px; height: 42%; bottom: 18%; border-radius: 4px;
    background: var(--site-loader-accent); animation: siteLoaderWave var(--site-loader-duration) ease-in-out infinite;
}
.site-loader--family-xbars .site-loader__fx::before { left: calc(50% - 16px); animation-delay: 0s; }
.site-loader--family-xbars .site-loader__fx::after { left: calc(50% + 8px); animation-delay: 0.18s; }
.site-loader--family-xbars[data-sl-variant="1"] .site-loader__fx::before { left: calc(50% - 22px); width: 6px; }
.site-loader--family-xbars[data-sl-variant="2"] .site-loader__fx { filter: drop-shadow(0 0 8px var(--site-loader-glow)); }
.site-loader--family-xbars[data-sl-variant="4"] .site-loader__fx::before,
.site-loader--family-xbars[data-sl-variant="4"] .site-loader__fx::after { width: 10px; border-radius: 2px; }
.site-loader--family-xbars[data-sl-variant="6"] .site-loader__icon { border-radius: 8px; }

/* xpulse */
.site-loader--family-xpulse .site-loader__fx::before {
    inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 50%;
    border: 3px solid var(--site-loader-accent);
    animation: siteLoaderPulse var(--site-loader-duration) ease-in-out infinite;
}
.site-loader--family-xpulse .site-loader__fx::after {
    inset: 0; width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid var(--site-loader-accent-soft);
    animation: siteLoaderRipple calc(var(--site-loader-duration) * 1.4) ease-out infinite;
}
.site-loader--family-xpulse[data-sl-variant="3"] .site-loader__fx::before { border-radius: 18px; }
.site-loader--family-xpulse[data-sl-variant="5"] .site-loader__icon { animation: siteLoaderPulse calc(var(--site-loader-duration) * 1.1) ease-in-out infinite; }

/* xripple */
.site-loader--family-xripple .site-loader__fx::before,
.site-loader--family-xripple .site-loader__fx::after {
    inset: 0; width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid var(--site-loader-accent);
    animation: siteLoaderRipple calc(var(--site-loader-duration) * 1.5) ease-out infinite;
}
.site-loader--family-xripple .site-loader__fx::after { animation-delay: 0.45s; opacity: 0.7; }
.site-loader--family-xripple[data-sl-variant="2"] .site-loader__fx::before { border-width: 3px; }
.site-loader--family-xripple[data-sl-variant="4"] .site-loader__fx::before { border-radius: 20%; }
.site-loader--family-xripple[data-sl-variant="7"] .site-loader__fx::after { border-color: color-mix(in srgb, var(--site-loader-accent) 50%, #fff); }

/* xarc */
.site-loader--family-xarc .site-loader__fx::before {
    inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%;
    border: 3px solid transparent; border-top-color: var(--site-loader-accent); border-right-color: var(--site-loader-accent);
    animation: siteLoaderSpin var(--site-loader-duration) linear infinite;
}
.site-loader--family-xarc[data-sl-variant="1"] .site-loader__fx::before { border-right-color: transparent; }
.site-loader--family-xarc[data-sl-variant="3"] .site-loader__fx::after {
    inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 50%;
    border: 2px solid transparent; border-bottom-color: var(--site-loader-accent);
    animation: siteLoaderSpinRev calc(var(--site-loader-duration) * 0.9) linear infinite;
}
.site-loader--family-xarc[data-sl-variant="5"] .site-loader__fx::before { border-width: 5px; filter: drop-shadow(0 0 8px var(--site-loader-glow)); }
.site-loader--family-xarc[data-sl-variant="7"] .site-loader__fx::before { border-style: dashed; border-top-style: solid; border-right-style: solid; }

/* xdots */
.site-loader--family-xdots .site-loader__fx::before,
.site-loader--family-xdots .site-loader__fx::after {
    inset: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--site-loader-accent);
    animation: siteLoaderFadeDots var(--site-loader-duration) ease-in-out infinite;
}
.site-loader--family-xdots .site-loader__fx::before { left: calc(50% - 18px); top: calc(50% - 5px); }
.site-loader--family-xdots .site-loader__fx::after { left: calc(50% + 8px); top: calc(50% - 5px); animation-delay: 0.2s; }
.site-loader--family-xdots[data-sl-variant="2"] .site-loader__fx::before,
.site-loader--family-xdots[data-sl-variant="2"] .site-loader__fx::after { animation-name: siteLoaderBounce; }
.site-loader--family-xdots[data-sl-variant="4"] .site-loader__fx::before { box-shadow: 22px 0 0 var(--site-loader-accent); width: 8px; height: 8px; }
.site-loader--family-xdots[data-sl-variant="6"] .site-loader__fx::after { display: none; }

/* xcube */
.site-loader--family-xcube .site-loader__fx::before {
    inset: 18%; width: 64%; height: 64%; border-radius: 8px;
    background: linear-gradient(135deg, var(--site-loader-accent), color-mix(in srgb, var(--site-loader-accent) 40%, #000));
    animation: siteLoaderCube calc(var(--site-loader-duration) * 1.6) linear infinite;
    transform-style: preserve-3d;
}
.site-loader--family-xcube[data-sl-variant="2"] .site-loader__fx::before { border-radius: 4px; }
.site-loader--family-xcube[data-sl-variant="4"] .site-loader__fx::before { border-radius: 50%; }
.site-loader--family-xcube[data-sl-variant="6"] .site-loader__icon { border-radius: 10px; transform: rotate(8deg); }

/* xwave */
.site-loader--family-xwave .site-loader__fx::before {
    inset: auto; left: 18%; right: 18%; height: 4px; bottom: 22%; border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--site-loader-accent), transparent);
    animation: siteLoaderPulse var(--site-loader-duration) ease-in-out infinite;
}
.site-loader--family-xwave .site-loader__fx::after {
    inset: auto; left: 24%; right: 24%; height: 4px; bottom: 30%; border-radius: 999px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--site-loader-accent) 65%, #fff), transparent);
    animation: siteLoaderPulse calc(var(--site-loader-duration) * 1.15) ease-in-out infinite reverse;
}
.site-loader--family-xwave[data-sl-variant="3"] .site-loader__fx::before { height: 6px; bottom: 18%; }
.site-loader--family-xwave[data-sl-variant="5"] .site-loader__icon { border-radius: 50%; }

/* xseg */
.site-loader--family-xseg .site-loader__fx::before {
    inset: 0; width: 100%; height: 100%; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--site-loader-accent) 0 18%, transparent 18% 100%);
    animation: siteLoaderSpin var(--site-loader-duration) linear infinite;
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.site-loader--family-xseg[data-sl-variant="1"] .site-loader__fx::before {
    background: conic-gradient(var(--site-loader-accent) 0 12%, transparent 12% 33%, var(--site-loader-accent) 33% 45%, transparent 45% 66%, var(--site-loader-accent) 66% 78%, transparent 78% 100%);
}
.site-loader--family-xseg[data-sl-variant="3"] .site-loader__fx::before {
    background: conic-gradient(from 40deg, var(--site-loader-accent) 0 28%, transparent 28% 100%);
}
.site-loader--family-xseg[data-sl-variant="5"] .site-loader__fx::before { filter: drop-shadow(0 0 8px var(--site-loader-glow)); }
.site-loader--family-xseg[data-sl-variant="7"] .site-loader__fx::after {
    inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); border-radius: 50%;
    border: 1px solid var(--site-loader-track);
}

/* xglass */
.site-loader--family-xglass .site-loader__fx::before {
    inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--site-loader-accent) 55%, #fff);
    background: color-mix(in srgb, var(--site-loader-accent) 12%, transparent);
    backdrop-filter: blur(2px);
    animation: siteLoaderSpin var(--site-loader-duration) linear infinite;
}
.site-loader--family-xglass .site-loader__icon {
    background: color-mix(in srgb, var(--site-loader-icon-bg) 80%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.site-loader--family-xglass[data-sl-variant="2"] .site-loader__fx::before { border-radius: 22px; }
.site-loader--family-xglass[data-sl-variant="4"] .site-loader__fx::before { border-width: 1px; }
.site-loader--family-xglass[data-sl-variant="6"] .site-loader__fx::after {
    inset: 14px; border-radius: 50%; border: 1px dashed var(--site-loader-accent-soft);
    animation: siteLoaderSpinRev calc(var(--site-loader-duration) * 1.3) linear infinite;
}

/* xcyber */
.site-loader--family-xcyber .site-loader__fx::before {
    inset: 0; width: 100%; height: 100%; border-radius: 12px;
    border: 2px solid var(--site-loader-accent);
    clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
    animation: siteLoaderSpin var(--site-loader-duration) steps(8) infinite;
}
.site-loader--family-xcyber .site-loader__fx::after {
    inset: 10px; border: 1px solid var(--site-loader-track);
    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
    animation: siteLoaderSpinRev calc(var(--site-loader-duration) * 1.25) linear infinite;
}
.site-loader--family-xcyber[data-sl-variant="3"] .site-loader__fx::before { border-radius: 4px; clip-path: none; }
.site-loader--family-xcyber[data-sl-variant="5"] .site-loader__icon { border-radius: 6px; filter: contrast(1.1); }

/* xbounce */
.site-loader--family-xbounce .site-loader__fx::before,
.site-loader--family-xbounce .site-loader__fx::after {
    inset: auto; width: 12px; height: 12px; border-radius: 50%; background: var(--site-loader-accent);
    animation: siteLoaderBounce var(--site-loader-duration) ease-in-out infinite;
}
.site-loader--family-xbounce .site-loader__fx::before { left: calc(50% - 20px); bottom: 18%; }
.site-loader--family-xbounce .site-loader__fx::after { left: calc(50% + 8px); bottom: 18%; animation-delay: 0.15s; }
.site-loader--family-xbounce[data-sl-variant="2"] .site-loader__fx::before { box-shadow: 28px 0 0 var(--site-loader-accent); }
.site-loader--family-xbounce[data-sl-variant="4"] .site-loader__fx::before,
.site-loader--family-xbounce[data-sl-variant="4"] .site-loader__fx::after { border-radius: 3px; }
.site-loader--family-xbounce[data-sl-variant="6"] .site-loader__icon { animation: siteLoaderBounce calc(var(--site-loader-duration) * 1.2) ease-in-out infinite; }

/* xdual */
.site-loader--family-xdual .site-loader__fx::before,
.site-loader--family-xdual .site-loader__fx::after {
    inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%;
    border: 3px solid transparent; border-top-color: var(--site-loader-accent);
    animation: siteLoaderSpin var(--site-loader-duration) linear infinite;
}
.site-loader--family-xdual .site-loader__fx::after {
    inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px);
    border-top-color: transparent; border-bottom-color: color-mix(in srgb, var(--site-loader-accent) 70%, #fff);
    animation-name: siteLoaderSpinRev; animation-duration: calc(var(--site-loader-duration) * 0.85);
}
.site-loader--family-xdual[data-sl-variant="3"] .site-loader__fx::before { border-width: 2px; }
.site-loader--family-xdual[data-sl-variant="5"] .site-loader__fx::after { border-left-color: var(--site-loader-accent); }
.site-loader--family-xdual[data-sl-variant="7"] .site-loader__icon { box-shadow: 0 0 18px var(--site-loader-glow); }

/* xcomet */
.site-loader--family-xcomet .site-loader__fx::before {
    inset: 0; width: 100%; height: 100%; border-radius: 50%;
    background: conic-gradient(from 180deg, transparent 0 72%, var(--site-loader-accent) 88%, transparent 100%);
    animation: siteLoaderSpin calc(var(--site-loader-duration) * 0.85) linear infinite;
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    filter: drop-shadow(0 0 8px var(--site-loader-glow));
}
.site-loader--family-xcomet[data-sl-variant="2"] .site-loader__fx::before { filter: blur(0.2px) drop-shadow(0 0 12px var(--site-loader-glow)); }
.site-loader--family-xcomet[data-sl-variant="4"] .site-loader__fx::after {
    inset: 16px; border-radius: 50%; border: 1px solid var(--site-loader-track);
}
.site-loader--family-xcomet[data-sl-variant="6"] .site-loader__icon { border-radius: 50%; }

/* xhex */
.site-loader--family-xhex .site-loader__fx::before {
    inset: 8%; width: 84%; height: 84%;
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
    border: 0; background: transparent;
    box-shadow: inset 0 0 0 3px var(--site-loader-accent);
    animation: siteLoaderSpin calc(var(--site-loader-duration) * 1.35) linear infinite;
}
.site-loader--family-xhex[data-sl-variant="2"] .site-loader__fx::before {
    box-shadow: inset 0 0 0 2px var(--site-loader-accent), 0 0 14px var(--site-loader-glow);
}
.site-loader--family-xhex[data-sl-variant="4"] .site-loader__fx::after {
    inset: 22%; clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
    box-shadow: inset 0 0 0 2px var(--site-loader-track);
    animation: siteLoaderSpinRev calc(var(--site-loader-duration) * 1.1) linear infinite;
}
.site-loader--family-xhex[data-sl-variant="6"] .site-loader__icon { clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%); border-radius: 0; }

/* xsoft */
.site-loader--family-xsoft .site-loader__fx::before {
    inset: 0; width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle, var(--site-loader-accent-soft), transparent 70%);
    animation: siteLoaderPulse calc(var(--site-loader-duration) * 1.3) ease-in-out infinite;
}
.site-loader--family-xsoft .site-loader__fx::after {
    inset: 10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--site-loader-accent) 40%, transparent);
    animation: siteLoaderSpin calc(var(--site-loader-duration) * 1.6) linear infinite;
}
.site-loader--family-xsoft[data-sl-variant="3"] .site-loader__icon { border-radius: 50%; box-shadow: 0 0 20px var(--site-loader-glow); }
.site-loader--family-xsoft[data-sl-variant="5"] .site-loader__fx::before { border-radius: 24px; }
.site-loader--family-xsoft[data-sl-variant="7"] .site-loader__fx::after { border-style: dashed; }

/* xsharp */
.site-loader--family-xsharp .site-loader__fx::before {
    inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 4px;
    border: 3px solid transparent; border-top-color: var(--site-loader-accent); border-left-color: var(--site-loader-accent);
    animation: siteLoaderSpin var(--site-loader-duration) linear infinite;
}
.site-loader--family-xsharp .site-loader__icon { border-radius: 8px; }
.site-loader--family-xsharp[data-sl-variant="2"] .site-loader__fx::before { border-radius: 0; }
.site-loader--family-xsharp[data-sl-variant="4"] .site-loader__fx::after {
    inset: 16px; border: 2px solid transparent; border-bottom-color: var(--site-loader-accent);
    animation: siteLoaderSpinRev calc(var(--site-loader-duration) * 0.9) linear infinite;
}
.site-loader--family-xsharp[data-sl-variant="6"] .site-loader__fx::before { border-width: 4px; filter: drop-shadow(0 0 6px var(--site-loader-glow)); }

/* xluxe */
.site-loader--family-xluxe .site-loader__fx::before {
    inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--site-loader-accent) 70%, #fbbf24);
    box-shadow: 0 0 16px color-mix(in srgb, var(--site-loader-accent) 40%, #fbbf24);
    animation: siteLoaderSpin calc(var(--site-loader-duration) * 1.25) linear infinite;
}
.site-loader--family-xluxe .site-loader__icon {
    box-shadow: 0 0 20px color-mix(in srgb, var(--site-loader-accent) 35%, #fbbf24), 0 6px 18px rgba(0, 0, 0, 0.16);
}
.site-loader--family-xluxe[data-sl-variant="1"] .site-loader__fx::before { border-style: double; border-width: 4px; }
.site-loader--family-xluxe[data-sl-variant="3"] .site-loader__fx::after {
    inset: 12px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--site-loader-accent) 50%, #fbbf24);
    animation: siteLoaderSpinRev calc(var(--site-loader-duration) * 1.5) linear infinite;
}
.site-loader--family-xluxe[data-sl-variant="5"] .site-loader__icon { border-radius: 50%; }
.site-loader--family-xluxe[data-sl-variant="7"] .site-loader__fx::before {
    background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--site-loader-accent) 40%, #fbbf24), transparent 40%);
    border-color: transparent;
}