/**
 * Loading Animation Component
 * 
 * A reusable animated gradient border effect for loading states.
 * Apply the class 'is-loading' to any element with position: relative
 * to show the animated border.
 * 
 * Requirements:
 * - Parent element must have `position: relative`
 * - Parent element should have a `border-radius` defined
 * 
 * CSS Variables (define in :root):
 * - --loading-color-1: Dark color
 * - --loading-color-2: Mid color
 * - --loading-color-3: Light color
 * - --loading-color-4: Accent color
 * - --loading-transition-duration: Fade in/out duration
 * 
 * Usage:
 * <div class="my-card is-loading">...</div>
 */

/* Custom property for animating gradient rotation */
@property --loading-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Rotation animation */
@keyframes loading-border-rotate {
    0% {
        --loading-angle: 0deg;
    }
    100% {
        --loading-angle: 360deg;
    }
}

/* Base class - enable border-color transition */
.is-loading-ready {
    transition: border-color var(--loading-transition-duration, 0.4s) ease;
}

/* Base pseudo-elements (hidden by default, animation always running) */
.is-loading-ready::before,
.is-loading-ready::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
    transition: opacity var(--loading-transition-duration, 0.4s) ease-in-out;
    animation: loading-border-rotate 3s linear infinite;
}

/* Border layer */
.is-loading-ready::before {
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--loading-angle, 0deg),
        var(--loading-color-1, #152540),
        var(--loading-color-2, #597099),
        var(--loading-color-3, #BEE1F6),
        var(--loading-color-4, #0F95E2),
        var(--loading-color-2, #597099),
        var(--loading-color-1, #152540)
    );
    mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    -webkit-mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}

/* Glow layer */
.is-loading-ready::after {
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from var(--loading-angle, 0deg),
        var(--loading-color-1, #152540),
        var(--loading-color-2, #597099),
        var(--loading-color-3, #BEE1F6),
        var(--loading-color-4, #0F95E2),
        var(--loading-color-2, #597099),
        var(--loading-color-1, #152540)
    );
    filter: blur(10px);
    z-index: -1;
}

/* Loading state - hide original border and show animated border */
.is-loading-ready.is-loading {
    border-color: transparent !important;
}

.is-loading-ready.is-loading::before {
    opacity: 1;
    transition: opacity var(--loading-transition-duration, 0.4s) ease-in-out;
}

.is-loading-ready.is-loading::after {
    opacity: 0.5;
    transition: opacity var(--loading-transition-duration, 0.4s) ease-in-out;
}