/* ── Shared ── */
.dsk-ac--border-spin,
.dsk-ac--border-pulse,
.dsk-ac--border-snake,
.dsk-ac--bg-aurora,
.dsk-ac--bg-pulse,
.dsk-ac--bg-ripple {
    --dsk-ac-border-1:     #6a42c2;
    --dsk-ac-border-2:     #e040fb;
    --dsk-ac-border-width: 2px;
    --dsk-ac-bg-1:         #6a42c2;
    --dsk-ac-bg-2:         #1a0533;
    --dsk-ac-duration:     4s;
}

/* ── Border: Spin ── */
.dsk-ac--border-spin {
    border: var(--dsk-ac-border-width) solid transparent !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    background-image:
        linear-gradient(#000, #000),
        conic-gradient(
            from 0deg,
            var(--dsk-ac-border-1),
            var(--dsk-ac-border-2),
            var(--dsk-ac-border-1)
        ) !important;
    animation: dsk-ac-spin var(--dsk-ac-duration) linear infinite !important;
}

@property --dsk-ac-spin-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes dsk-ac-spin {
    from { --dsk-ac-spin-angle: 0deg; }
    to   { --dsk-ac-spin-angle: 360deg; }
}

/* ── Border: Pulse ── */
.dsk-ac--border-pulse {
    border: var(--dsk-ac-border-width) solid var(--dsk-ac-border-1) !important;
    animation: dsk-ac-border-pulse var(--dsk-ac-duration) ease-in-out infinite;
}

@keyframes dsk-ac-border-pulse {
    0%, 100% { border-color: var(--dsk-ac-border-1); box-shadow: 0 0 0px var(--dsk-ac-border-1); }
    50%      { border-color: var(--dsk-ac-border-2); box-shadow: 0 0 16px var(--dsk-ac-border-2); }
}

/* ── Border: Snake ── */
.dsk-ac--border-snake {
    position: relative;
}

.dsk-ac--border-snake::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: var(--dsk-ac-border-width) !important;
    background: linear-gradient(
        var(--dsk-ac-snake-angle, 0deg),
        var(--dsk-ac-border-1),
        var(--dsk-ac-border-2)
    ) !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: dsk-ac-snake var(--dsk-ac-duration) linear infinite !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

@property --dsk-ac-snake-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes dsk-ac-snake {
    from { --dsk-ac-snake-angle: 0deg; }
    to   { --dsk-ac-snake-angle: 360deg; }
}

/* ── Background: Aurora ── */
.dsk-ac--bg-aurora {
    background: linear-gradient(
        135deg,
        var(--dsk-ac-bg-1),
        var(--dsk-ac-bg-2),
        var(--dsk-ac-bg-1)
    ) !important;
    background-size: 300% 300% !important;
    animation: dsk-ac-aurora var(--dsk-ac-duration) ease-in-out infinite;
}

@keyframes dsk-ac-aurora {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Background: Pulse ── */
.dsk-ac--bg-pulse {
    animation: dsk-ac-bg-pulse var(--dsk-ac-duration) ease-in-out infinite;
}

@keyframes dsk-ac-bg-pulse {
    0%, 100% { background-color: var(--dsk-ac-bg-1) !important; }
    50%      { background-color: var(--dsk-ac-bg-2) !important; }
}

/* ── Background: Ripple ── */
.dsk-ac--bg-ripple {
    position: relative;
}

.dsk-ac--bg-ripple::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: radial-gradient(
        circle at center,
        var(--dsk-ac-bg-2) 0%,
        transparent 70%
    ) !important;
    opacity: 0;
    animation: dsk-ac-ripple var(--dsk-ac-duration) ease-in-out infinite !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.dsk-ac--bg-ripple > * {
    position: relative;
    z-index: 1;
}

@keyframes dsk-ac-ripple {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1.2); }
}