/* ============================================================
   Sasync loader components
   --------------------------------------------------------------
   Used by <x-loaders.*> Blade components in
   resources/views/components/loaders/.

   Each loader is driven by:
     --loader-size   (e.g. 40px, set inline by the Blade prop)
     --loader-color  (defaults to Sasync cyan, override per usage)

   Extracted from inspiration/sample-loaders.html.
   ============================================================ */

.sasync-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--loader-size, 40px);
    height: var(--loader-size, 40px);
    color: var(--loader-color, #13B5EA);
    line-height: 1;
}

/* Shared keyframes */
@keyframes sasync-loader-spin       { to { transform: rotate(360deg); } }
@keyframes sasync-loader-spin-rev   { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sasync-loader,
    .sasync-loader * {
        animation-duration: 6s !important;
    }
}

/* ------------------------------------------------------------
   01 · Sync Orbit — the Sasync sync-arrows mark, rotating
   ------------------------------------------------------------ */
.sasync-loader-sync-orbit > svg {
    width: 100%;
    height: 100%;
    animation: sasync-loader-spin 2.4s linear infinite;
}

/* ------------------------------------------------------------
   02 · Arc Sweep — conic cyan ring, one continuous revolution
   ------------------------------------------------------------ */
.sasync-loader-arc-sweep {
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 18%, currentColor 92%, transparent);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
    animation: sasync-loader-spin 1.1s linear infinite;
}

/* ------------------------------------------------------------
   04 · Dual Arc — two S-fragment arcs, counter-rotating
   ------------------------------------------------------------ */
.sasync-loader-dual-arc {
    position: relative;
}
.sasync-loader-dual-arc::before,
.sasync-loader-dual-arc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 5px solid transparent;
}
.sasync-loader-dual-arc::before {
    border-top-color: currentColor;
    border-right-color: currentColor;
    animation: sasync-loader-spin 1.5s cubic-bezier(.6, .1, .3, .9) infinite;
}
.sasync-loader-dual-arc::after {
    inset: 14px;
    border-bottom-color: currentColor;
    border-left-color: currentColor;
    opacity: .45;
    animation: sasync-loader-spin-rev 1.1s cubic-bezier(.6, .1, .3, .9) infinite;
}

/* ------------------------------------------------------------
   08 · Concentric — three rings, different speeds, one center
   ------------------------------------------------------------ */
.sasync-loader-concentric {
    position: relative;
}
.sasync-loader-concentric > i {
    position: absolute;
    border-radius: 50%;
    border: 4px solid transparent;
}
.sasync-loader-concentric > i.r1 {
    inset: 0;
    border-top-color: currentColor;
    animation: sasync-loader-spin 1.6s linear infinite;
}
.sasync-loader-concentric > i.r2 {
    inset: 14%;
    border-right-color: currentColor;
    opacity: .7;
    animation: sasync-loader-spin-rev 1.2s linear infinite;
}
.sasync-loader-concentric > i.r3 {
    inset: 28%;
    border-bottom-color: currentColor;
    opacity: .45;
    animation: sasync-loader-spin .9s linear infinite;
}

/* ------------------------------------------------------------
   20 · Gradient Halo — soft dual-tone cyan halo, slow turn
   ------------------------------------------------------------ */
.sasync-loader-gradient-halo {
    position: relative;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        color-mix(in srgb, currentColor 8%, transparent),
        currentColor);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
    animation: sasync-loader-spin 1.5s cubic-bezier(.5, .15, .5, .85) infinite;
}
.sasync-loader-gradient-halo::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: currentColor;
    top: 6px;
    left: 50%;
    margin-left: -7px;
}