/**
 * MTB reusable animated border utilities.
 *
 * Usage:
 *   <div class="mtb-anim-border mtb-anim-border--trace" style="border-radius: 8px;">...</div>
 *
 * Custom properties (optional):
 *   --mtb-anim-border-width      Border thickness (default: 1px)
 *   --mtb-anim-border-color      Highlight / border color (default: brand red)
 *   --mtb-anim-border-bg         Inner fill behind content (default: #fff)
 *   --mtb-anim-border-speed      Animation duration (default: 2.5s)
 *   --mtb-anim-border-glow       Glow color for pulse variant (default: rgba brand red)
 *   --mtb-anim-border-trace-len  Trace segment length as % of perimeter (default: 18)
 *
 * Variants:
 *   mtb-anim-border--trace         Constant-length segment travels border; color -> white
 *   mtb-anim-border--rainbow       Full rainbow gradient shifts along the border
 *   mtb-anim-border--shimmer       Bright highlight sweeps the border (premium sheen)
 *   mtb-anim-border--metallic      (legacy alias) prefer .mtb-metallic-shimmer
 *   mtb-metallic-shimmer           Figma-style: real track div under surface div
 *   mtb-anim-border--glow-pulse    Soft outer glow breathes in and out
 *   mtb-anim-border--corner-chase  Four short segments chase around the perimeter
 *   mtb-anim-border--marching-dash Dashed segments march around the border
 *   mtb-anim-border--heat-wave     Warm wide segment orbits; color -> orange -> white
 *
 * Note: --trace uses an injected SVG (see Scripts/border-animations.js) so the
 * segment keeps the same length on top/bottom and left/right edges.
 */

.mtb-anim-border {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --mtb-anim-border-width: 1px;
    --mtb-anim-border-color: var(--mtb-brand-red, #BF1E2D);
    --mtb-anim-border-bg: #ffffff;
    --mtb-anim-border-speed: 2.5s;
    --mtb-anim-border-glow: rgba(191, 30, 45, 0.45);
    --mtb-anim-border-trace-len: 18;
}

.mtb-anim-border > * {
    position: relative;
    z-index: 1;
}

/* Shared inner fill for rotating-ring variants (not used by SVG trace) */
.mtb-anim-border--shimmer::after,
.mtb-anim-border--corner-chase::after,
.mtb-anim-border--marching-dash::after,
.mtb-anim-border--heat-wave::after {
    content: "";
    position: absolute;
    inset: var(--mtb-anim-border-width);
    border-radius: inherit;
    background: var(--mtb-anim-border-bg);
    pointer-events: none;
    z-index: 0;
}

/* Shared rotating ring setup */
.mtb-anim-border--shimmer::before,
.mtb-anim-border--corner-chase::before,
.mtb-anim-border--marching-dash::before,
.mtb-anim-border--heat-wave::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 0;
    animation: mtb-anim-border-ring-rotate var(--mtb-anim-border-speed) linear infinite;
}

@keyframes mtb-anim-border-ring-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Trace: SVG stroke with pathLength — constant segment length on all sides */
.mtb-anim-border--trace {
    overflow: visible;
    --mtb-anim-border-width: 2px;
    --mtb-anim-border-trace-len: 28;
    --mtb-anim-border-speed: 2.8s;
}

.mtb-anim-border--trace::before,
.mtb-anim-border--trace::after {
    content: none;
    display: none;
}

.mtb-anim-border__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.mtb-anim-border__svg-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtb-anim-border__svg-path--tip {
    stroke: #FFFFFF;
    stroke-width: var(--mtb-anim-border-width);
}

.mtb-anim-border__svg-path--head {
    stroke: var(--mtb-anim-border-color);
    stroke-width: var(--mtb-anim-border-width);
}

.mtb-anim-border__svg-path--c1,
.mtb-anim-border__svg-path--c2,
.mtb-anim-border__svg-path--c3,
.mtb-anim-border__svg-path--c4,
.mtb-anim-border__svg-path--c5,
.mtb-anim-border__svg-path--c6,
.mtb-anim-border__svg-path--tail {
    stroke-width: var(--mtb-anim-border-width);
}

@keyframes mtb-anim-border-trace-dash {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -100;
    }
}

/* Rainbow: full-spectrum border with horizontal color shift */
.mtb-anim-border--rainbow {
    overflow: visible;
}

.mtb-anim-border--rainbow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--mtb-anim-border-width);
    background: linear-gradient(
        90deg,
        #ff2d55,
        #ff9500,
        #ffcc00,
        #34c759,
        #5ac8fa,
        #5856d6,
        #af52de,
        #ff2d55
    );
    background-size: 300% 100%;
    -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;
    animation: mtb-anim-border-rainbow-shift 4s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.mtb-anim-border--rainbow::after {
    display: none;
}

@keyframes mtb-anim-border-rainbow-shift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* Shimmer: subtle ring with a bright highlight sweep */
.mtb-anim-border--shimmer {
    border: var(--mtb-anim-border-width) solid color-mix(in srgb, var(--mtb-anim-border-color) 18%, transparent);
}

.mtb-anim-border--shimmer::before {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 285deg,
        color-mix(in srgb, var(--mtb-anim-border-color) 25%, transparent) 300deg,
        #ffffff 315deg,
        color-mix(in srgb, var(--mtb-anim-border-color) 15%, transparent) 330deg,
        transparent 345deg,
        transparent 360deg
    );
    animation-duration: calc(var(--mtb-anim-border-speed) * 1.2);
}

/*
 * Metallic: Figma MetallicShimmerToggle structure (no Tailwind).
 *
 *   <label class="mtb-metallic-shimmer">
 *     <span class="mtb-metallic-shimmer__track"></span>   <!-- spinning metal underneath -->
 *     <span class="mtb-metallic-shimmer__surface">...</span> <!-- content on top -->
 *   </label>
 *
 * Outer shell has 2px padding; the track is a large spinning conic-gradient
 * sibling behind the surface, so only the 2px ring shows metal.
 */
.mtb-metallic-shimmer {
    position: relative;
    display: inline-flex;
    isolation: isolate;
    overflow: hidden;
    border: none;
    border-radius: 22px;
    background: transparent;
    padding: 2px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    --mtb-metallic-speed: 5.5s;
}

.mtb-metallic-shimmer__track {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    padding-top: 200%;
    height: 0;
    background: conic-gradient(
        from 0deg,
        #3a3a3a 0%,
        #a0a0a0 8%,
        #ffffff 16%,
        #d4d4d4 22%,
        #707070 30%,
        #e8e8e8 38%,
        #ffffff 44%,
        #b0b0b0 52%,
        #444444 60%,
        #c8c8c8 68%,
        #ffffff 76%,
        #909090 84%,
        #3a3a3a 100%
    );
    animation: mtb-metallic-spin var(--mtb-metallic-speed) linear infinite;
    pointer-events: none;
    z-index: 0;
}

.mtb-metallic-shimmer__surface {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    background: #ffffff;
    color: #666;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
    min-height: 38px;
}

/* Active / checked — red metallic track only (keep white surface + normal text) */
.mtb-metallic-shimmer:has(input:checked) .mtb-metallic-shimmer__track,
.mtb-metallic-shimmer.is-active .mtb-metallic-shimmer__track {
    background: conic-gradient(
        from 0deg,
        #7a1a1a 0%,
        #c42b2b 8%,
        #ff8080 16%,
        #ff4444 22%,
        #c42b2b 30%,
        #ffc0c0 38%,
        #ffffff 44%,
        #e06060 52%,
        #8b1a1a 60%,
        #c42b2b 68%,
        #ff9090 76%,
        #c42b2b 84%,
        #7a1a1a 100%
    );
}

@keyframes mtb-metallic-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Keep old class name as alias so existing markup still works */
.mtb-anim-border.mtb-anim-border--metallic {
    /* prefer .mtb-metallic-shimmer markup; this disables old pseudo approach */
}

.mtb-anim-border.mtb-anim-border--metallic::before,
.mtb-anim-border.mtb-anim-border--metallic::after {
    content: none;
    display: none;
}

/* Glow pulse: breathing outer glow on a solid border */
.mtb-anim-border--glow-pulse {
    overflow: visible;
    border: var(--mtb-anim-border-width) solid var(--mtb-anim-border-color);
    animation: mtb-anim-border-glow-pulse var(--mtb-anim-border-speed) ease-in-out infinite;
}

.mtb-anim-border--glow-pulse::before,
.mtb-anim-border--glow-pulse::after {
    display: none;
}

@keyframes mtb-anim-border-glow-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 0 var(--mtb-anim-border-glow),
            0 0 0 0 color-mix(in srgb, var(--mtb-anim-border-color) 10%, transparent);
    }

    50% {
        box-shadow:
            0 0 10px 2px var(--mtb-anim-border-glow),
            0 0 22px 6px color-mix(in srgb, var(--mtb-anim-border-color) 18%, transparent);
    }
}

/* Corner chase: four short segments orbit the border */
.mtb-anim-border--corner-chase::before {
    background: conic-gradient(
        from 0deg,
        var(--mtb-anim-border-color) 0deg,
        #ffffff 10deg,
        transparent 10deg,
        transparent 80deg,
        var(--mtb-anim-border-color) 90deg,
        #ffffff 100deg,
        transparent 100deg,
        transparent 170deg,
        var(--mtb-anim-border-color) 180deg,
        #ffffff 190deg,
        transparent 190deg,
        transparent 260deg,
        var(--mtb-anim-border-color) 270deg,
        #ffffff 280deg,
        transparent 280deg,
        transparent 350deg,
        var(--mtb-anim-border-color) 360deg
    );
}

/* Marching dash: repeating dashes travel around the border */
.mtb-anim-border--marching-dash::before {
    background: repeating-conic-gradient(
        from 0deg,
        var(--mtb-anim-border-color) 0deg 14deg,
        transparent 14deg 28deg
    );
    animation-duration: calc(var(--mtb-anim-border-speed) * 0.8);
}

/* Heat wave: wider warm segment; color -> orange -> white */
.mtb-anim-border--heat-wave::before {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 245deg,
        var(--mtb-anim-border-color) 260deg,
        #ff9500 295deg,
        #ffffff 330deg,
        transparent 350deg,
        transparent 360deg
    );
    animation-duration: calc(var(--mtb-anim-border-speed) * 1.4);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mtb-anim-border--shimmer::before,
    .mtb-metallic-shimmer__track,
    .mtb-anim-border--corner-chase::before,
    .mtb-anim-border--marching-dash::before,
    .mtb-anim-border--heat-wave::before,
    .mtb-anim-border--rainbow::before,
    .mtb-anim-border--glow-pulse,
    .mtb-anim-border__svg-path {
        animation: none;
    }

    .mtb-anim-border--glow-pulse {
        box-shadow: 0 0 8px 1px color-mix(in srgb, var(--mtb-anim-border-color) 20%, transparent);
    }

    .mtb-anim-border__svg-path {
        animation: none !important;
    }

    .mtb-anim-border__svg-path--head {
        stroke-dasharray: 100 0;
        stroke-opacity: 1;
    }

    .mtb-anim-border__svg-path--tip,
    .mtb-anim-border__svg-path--c1,
    .mtb-anim-border__svg-path--c2,
    .mtb-anim-border__svg-path--c3,
    .mtb-anim-border__svg-path--c4,
    .mtb-anim-border__svg-path--c5,
    .mtb-anim-border__svg-path--c6,
    .mtb-anim-border__svg-path--tail {
        opacity: 0;
    }
}