/* =====================================================
   Analog Signalworks - Common Visual Effects
   Shared animations and effects across all pages

   This file contains reusable visual effects:
   - Rotating border glow on hover
   - Button shine/sweep effect
   - Shimmer animation for text

   To use these effects, add the appropriate class:
   - .glow-effect - Adds rotating border glow on hover
   - .glow-effect-slow - Slower rotation for larger elements
   - .btn - Already has shine effect built in
   ===================================================== */

/* =====================================================
   CSS Custom Properties for Effects
   Adjust these to change effect appearance globally
   ===================================================== */

:root {
    /* Rotating Border Glow Colors */
    --glow-color: #FF6519;
    --glow-color-bright: #FF8C4B;
    --glow-spread: 20px;
    --glow-opacity: 0.3;

    /* Animation Speeds */
    --glow-speed-normal: 3.14159s;  /* ~pi seconds for normal cards */
    --glow-speed-slow: 10.44s;       /* 5x slower for large elements */

    /* Button Shine */
    --shine-color: rgba(255, 255, 255, 0.2);
    --shine-speed: 0.5s;

    /* Shimmer Animation */
    --shimmer-speed: 5s;
}

/* =====================================================
   Register CSS Custom Property for Smooth Rotation
   Required for the conic-gradient animation to work
   ===================================================== */

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

/* =====================================================
   Rotating Border Glow Keyframes
   ===================================================== */

@keyframes rotateBorder {
    from {
        --rotation: 0deg;
    }
    to {
        --rotation: 360deg;
    }
}

/* =====================================================
   Shimmer Animation Keyframes
   Used for text gradient animation
   ===================================================== */

@keyframes shimmer {
    0%, 100% {
        background-position: 100% 50%;
    }
    40% {
        background-position: 0% 50%;
    }
    40.01%, 99.99% {
        background-position: 0% 50%;
    }
}

/* =====================================================
   Button Shine Keyframes
   ===================================================== */

@keyframes buttonShine {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

/* =====================================================
   Glow Effect - Base Setup
   Add .glow-effect class to any card-like element
   ===================================================== */

.glow-effect {
    position: relative;
    z-index: 0;
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.5s ease 0.15s;
}

/* Anchor elements using glow-effect need explicit overrides */
a.glow-effect {
    color: inherit;
    text-decoration: none;
}

a.glow-effect:hover {
    color: inherit;
}

/* Rotating border glow container (pseudo-element) */
.glow-effect::before {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: -1;
    border-radius: 15px;
    padding: 3px;
    background: conic-gradient(
        from var(--rotation, 0deg),
        transparent 0%,
        transparent 10%,
        var(--glow-color) 20%,
        var(--glow-color-bright) 25%,
        var(--glow-color) 30%,
        transparent 40%,
        transparent 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;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* Show and animate on hover - normal speed */
.glow-effect:hover::before {
    opacity: 1;
    animation: rotateBorder var(--glow-speed-normal) linear infinite;
    transition: opacity 0.3s ease;
}

/* Outer glow/blur effect on hover */
.glow-effect:hover {
    box-shadow:
        0 0 var(--glow-spread) rgba(255, 101, 25, var(--glow-opacity)),
        0 0 calc(var(--glow-spread) * 2) rgba(255, 101, 25, calc(var(--glow-opacity) / 2));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* =====================================================
   Glow Effect - Slow Variant
   Use .glow-effect-slow for larger elements
   ===================================================== */

.glow-effect-slow::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(
        from var(--rotation, 0deg),
        transparent 0%,
        transparent 10%,
        var(--glow-color) 20%,
        var(--glow-color-bright) 25%,
        var(--glow-color) 30%,
        transparent 40%,
        transparent 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;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    border-radius: 15px;
}

.glow-effect-slow:hover::before {
    opacity: 1;
    animation: rotateBorder var(--glow-speed-slow) linear infinite;
    transition: opacity 0.3s ease;
}

/* =====================================================
   Button Shine Effect
   Applied to .btn elements automatically
   ===================================================== */

.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--shine-color) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

.btn:hover::before {
    animation: buttonShine var(--shine-speed) ease-out forwards;
}

/* =====================================================
   Shimmer Text Effect
   Add .shimmer-text class for animated gradient text
   ===================================================== */

.shimmer-text {
    background: linear-gradient(
        90deg,
        #FF6519 0%,
        #FF8C4B 25%,
        #ff9d4c 50%,
        #FF8C4B 75%,
        #FF6519 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer var(--shimmer-speed) ease-in-out infinite;
}

/* =====================================================
   Utility: Disable transitions during theme change
   Prevents flash when switching themes
   ===================================================== */

.no-transitions,
.no-transitions * {
    transition: none !important;
}