/**
 * Aurora / Liquid Borders — PharmAssist
 *
 * Uses @property to animate a CSS custom property (--angle) that drives
 * a conic-gradient border — gives that Apple Intelligence / Arc Browser shimmer
 * to focused and active elements.
 *
 * Usage:
 *   Add class "aurora-border" to any element that should shimmer.
 *   Elements automatically shimmer on :focus-within or :hover.
 *   Add class "aurora-border--active" to force permanent shimmer.
 */

/* ── Houdini: register --angle so it's animatable ── */
@property --aurora-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --aurora-opacity {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

/* ── Keyframes ── */
@keyframes aurora-spin {
    to { --aurora-angle: 360deg; }
}

@keyframes aurora-fade-in {
    from { --aurora-opacity: 0; }
    to   { --aurora-opacity: 1; }
}

/* ── Base: card/widget shimmer border ── */
.aurora-border {
    position: relative;
    border-radius: inherit;
}

.aurora-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    /* Conic gradient that rotates via --aurora-angle */
    background: conic-gradient(
        from var(--aurora-angle),
        var(--accent-primary)   0%,
        var(--accent-secondary) 25%,
        #ff6b6b                 45%,
        var(--accent-primary)   60%,
        var(--accent-secondary) 80%,
        var(--accent-primary)   100%
    );
    /* Mask so only the border ring is visible */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

/* Trigger: focus, focus-within, hover */
.aurora-border:hover::after,
.aurora-border:focus-within::after,
.aurora-border:focus::after,
.aurora-border--active::after {
    opacity: 1;
    animation: aurora-spin 3s linear infinite;
}

/* Slow the spin for larger elements (cards) */
.aurora-border--slow::after {
    animation-duration: 6s;
}

/* Fast pulse for small interactive elements */
.aurora-border--fast::after {
    animation-duration: 1.5s;
}

/* ── Input fields: shimmer border on focus ── */
.form-input.aurora-border,
.form-select.aurora-border,
.form-textarea.aurora-border {
    border: 1px solid var(--border-color);
    outline: none;
}

.form-input.aurora-border:focus,
.form-select.aurora-border:focus,
.form-textarea.aurora-border:focus {
    border-color: transparent;
    box-shadow: none;
}

/* ── Tool cards: shimmer on hover ── */
.tool-card.aurora-border,
.card.aurora-border {
    overflow: visible; /* let ::after bleed outside */
}

/* ── Dashboard widgets: gentle shimmer on hover ── */
.dashboard-grid .aurora-border::after {
    animation-duration: 5s;
}

/* ── Theme card: shimmer when selected ── */
.theme-card.aurora-border--active::after {
    animation-duration: 4s;
}

/* ── Sidebar item: accent left-edge glow ── */
.sidebar-item.aurora-border::after {
    inset: 0 auto 0 -2px;   /* left edge only */
    border-radius: 2px 0 0 2px;
    width: 3px;
}

/* ── @supports fallback for browsers without @property ──
   Firefox < 128, older Safari: solid accent border instead */
@supports not (background: conic-gradient(from 1deg, red, blue)) {
    .aurora-border:hover,
    .aurora-border:focus-within,
    .aurora-border--active {
        outline: 2px solid var(--accent-primary);
        outline-offset: 2px;
    }
    .aurora-border::after { display: none; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .aurora-border::after,
    .aurora-border:hover::after,
    .aurora-border:focus-within::after,
    .aurora-border--active::after {
        animation: none;
        opacity: 0.6;
        /* Static gradient — still looks premium, just not animated */
        background: linear-gradient(
            135deg,
            var(--accent-primary),
            var(--accent-secondary),
            var(--accent-primary)
        );
    }
}