/**
 * Border Effects System — Base
 *
 * @property declarations, keyframes, base variables, intensity modifiers,
 * animation trigger classes, and bg-layers border layer.
 */

/* ==========================================================================
   @property Declarations (for smooth angle interpolation)
   ========================================================================== */

@property --border-fx-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* ==========================================================================
   Base Variables
   ========================================================================== */

:root {
    --border-fx-width: 2px;
    /* Glow */
    --border-fx-glow-spread: 8px;
    --border-fx-glow-color: color-mix(in oklch, var(--color-primary) 40%, transparent);

    /* Corner */
    --border-fx-corner-size: 20px;
    --border-fx-corner-width: 2px;
    --border-fx-corner-color: var(--color-primary);

    /* Animation */
    --border-fx-angle: 0deg;
    --border-fx-duration: 3s;

    /* Double border */
    --border-fx-outer-width: 1px;
    --border-fx-inner-width: 1px;
    --border-fx-gap: 3px;
    /* Frame */
    --border-fx-frame-color: color-mix(in oklch, var(--color-base-content) 20%, transparent);
    --border-fx-frame-offset: 6px;
}

/* ==========================================================================
   Intensity Modifiers
   ========================================================================== */

.border-fx-sm { --border-fx-width: 1px; }
.border-fx-md { --border-fx-width: 2px; }
.border-fx-lg { --border-fx-width: 3px; }

/* Glow intensity */
.border-fx-sm[class*="border-fx-glow"] { --border-fx-glow-spread: 4px; }
.border-fx-md[class*="border-fx-glow"] { --border-fx-glow-spread: 8px; }
.border-fx-lg[class*="border-fx-glow"] { --border-fx-glow-spread: 12px; }

/* Corner intensity */
.border-fx-sm[class*="border-fx-corners"] { --border-fx-corner-size: 16px; --border-fx-corner-width: 1px; }
.border-fx-md[class*="border-fx-corners"] { --border-fx-corner-size: 20px; --border-fx-corner-width: 2px; }
.border-fx-lg[class*="border-fx-corners"] { --border-fx-corner-size: 24px; --border-fx-corner-width: 3px; }

/* ==========================================================================
   Animation Triggers
   ========================================================================== */

/* Default: paused */
.border-fx-on-hover [class*="border-fx-animated"]::before,
.border-fx-on-hover.border-fx-animated-pulse {
    animation-play-state: paused;
}

@media (hover: hover) {
    .border-fx-on-hover:hover [class*="border-fx-animated"]::before,
    .border-fx-on-hover:hover .border-fx-animated-pulse {
        animation-play-state: running;
    }
}

.border-fx-always [class*="border-fx-animated"]::before,
.border-fx-always.border-fx-animated-pulse {
    animation-play-state: running;
}

/* ==========================================================================
   bg-layers Border Layer
   ========================================================================== */

.bg-layers__border {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
}

/* Gradient technique for bg-layers elements */
.bg-layers__border[class*="border-fx-gradient"]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--border-fx-width, 2px);
    background: var(--border-fx-gradient);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Glow technique for bg-layers elements (outline, not box-shadow) */
.bg-layers__border[class*="border-fx-glow"] {
    outline: var(--border-fx-glow-spread) solid transparent;
    filter: drop-shadow(0 0 var(--border-fx-glow-spread) var(--border-fx-glow-color));
}

/* ==========================================================================
   Solid Border Presets (basic replacements for old border utilities)
   ========================================================================== */

.border-fx-solid {
    border: var(--border-fx-width) solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
}

.border-fx-solid-muted {
    border: var(--border-fx-width) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
}

.border-fx-solid-accent {
    border: var(--border-fx-width) solid var(--color-accent);
}

.border-fx-dashed {
    border: var(--border-fx-width) dashed color-mix(in oklch, var(--color-base-content) 20%, transparent);
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes border-fx-spin {
    to { --border-fx-angle: 360deg; }
}

@keyframes border-fx-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes border-fx-dash {
    to { stroke-dashoffset: -100; }
}

@keyframes border-fx-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ==========================================================================
   Focus States
   ========================================================================== */

[class*="border-fx-glow"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}