/* ============================================
   BORDER EFFECTS & ANIMATIONS - ShibaMC
   Beautiful border effects for glass elements
   ============================================ */

/* ========================================
   1. ANIMATED GRADIENT BORDERS
   ======================================== */

/* Gradient border rotating */
.border-gradient-rotate {
    position: relative;
    border: none !important;
}

.border-gradient-rotate::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        45deg,
        #9c27b0,
        #673ab7,
        #3f51b5,
        #2196f3,
        #00bcd4,
        #009688,
        #4caf50,
        #8bc34a,
        #cddc39,
        #ffeb3b,
        #ffc107,
        #ff9800,
        #ff5722,
        #f44336,
        #e91e63,
        #9c27b0
    );
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: borderGradientRotate 8s linear infinite;
    opacity: 0.8;
}

.border-gradient-rotate::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 0, 21, 0.95);
    border-radius: inherit;
    z-index: -1;
}

@keyframes borderGradientRotate {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

/* ========================================
   2. NEON GLOW BORDERS
   ======================================== */

.border-neon-glow {
    position: relative;
    border: 2px solid rgba(156, 39, 176, 0.5);
    box-shadow: 
        0 0 5px rgba(156, 39, 176, 0.5),
        0 0 10px rgba(156, 39, 176, 0.3),
        inset 0 0 5px rgba(156, 39, 176, 0.2);
    animation: neonGlowPulse 2s ease-in-out infinite;
}

@keyframes neonGlowPulse {
    0%, 100% {
        border-color: rgba(156, 39, 176, 0.5);
        box-shadow: 
            0 0 5px rgba(156, 39, 176, 0.5),
            0 0 10px rgba(156, 39, 176, 0.3),
            inset 0 0 5px rgba(156, 39, 176, 0.2);
    }
    50% {
        border-color: rgba(156, 39, 176, 1);
        box-shadow: 
            0 0 10px rgba(156, 39, 176, 0.8),
            0 0 20px rgba(156, 39, 176, 0.6),
            0 0 30px rgba(156, 39, 176, 0.4),
            inset 0 0 10px rgba(156, 39, 176, 0.4);
    }
}

/* Multi-color neon */
.border-neon-rainbow {
    position: relative;
    border: 2px solid;
    animation: neonRainbow 4s linear infinite;
}

@keyframes neonRainbow {
    0% { 
        border-color: #9c27b0;
        box-shadow: 0 0 10px #9c27b0, 0 0 20px #9c27b0, inset 0 0 10px rgba(156, 39, 176, 0.3);
    }
    16.66% { 
        border-color: #2196f3;
        box-shadow: 0 0 10px #2196f3, 0 0 20px #2196f3, inset 0 0 10px rgba(33, 150, 243, 0.3);
    }
    33.33% { 
        border-color: #00bcd4;
        box-shadow: 0 0 10px #00bcd4, 0 0 20px #00bcd4, inset 0 0 10px rgba(0, 188, 212, 0.3);
    }
    50% { 
        border-color: #4caf50;
        box-shadow: 0 0 10px #4caf50, 0 0 20px #4caf50, inset 0 0 10px rgba(76, 175, 80, 0.3);
    }
    66.66% { 
        border-color: #ffeb3b;
        box-shadow: 0 0 10px #ffeb3b, 0 0 20px #ffeb3b, inset 0 0 10px rgba(255, 235, 59, 0.3);
    }
    83.33% { 
        border-color: #ff5722;
        box-shadow: 0 0 10px #ff5722, 0 0 20px #ff5722, inset 0 0 10px rgba(255, 87, 34, 0.3);
    }
    100% { 
        border-color: #9c27b0;
        box-shadow: 0 0 10px #9c27b0, 0 0 20px #9c27b0, inset 0 0 10px rgba(156, 39, 176, 0.3);
    }
}

/* ========================================
   3. DANCING CORNERS
   ======================================== */

.border-dancing-corners {
    position: relative;
    border: 2px solid transparent;
}

.border-dancing-corners::before,
.border-dancing-corners::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #9c27b0;
    animation: dancingCorners 3s ease-in-out infinite;
}

.border-dancing-corners::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    animation-delay: 0s;
}

.border-dancing-corners::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    animation-delay: 1.5s;
}

@keyframes dancingCorners {
    0%, 100% {
        width: 20px;
        height: 20px;
        opacity: 1;
    }
    50% {
        width: 40px;
        height: 40px;
        opacity: 0.6;
    }
}

/* ========================================
   4. BORDER SCAN LINE
   ======================================== */

.border-scan-line {
    position: relative;
    border: 2px solid rgba(156, 39, 176, 0.3);
    overflow: hidden;
}

.border-scan-line::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        #9c27b0,
        #673ab7,
        #3f51b5,
        transparent
    );
    animation: scanLineHorizontal 3s linear infinite;
    box-shadow: 0 0 10px #9c27b0;
}

.border-scan-line::after {
    content: '';
    position: absolute;
    top: -100%;
    right: -2px;
    width: 3px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent,
        #9c27b0,
        #673ab7,
        #3f51b5,
        transparent
    );
    animation: scanLineVertical 3s linear infinite;
    animation-delay: 1.5s;
    box-shadow: 0 0 10px #9c27b0;
}

@keyframes scanLineHorizontal {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes scanLineVertical {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* ========================================
   5. BORDER WAVE EFFECT
   ======================================== */

.border-wave {
    position: relative;
    border: 2px solid transparent;
}

.border-wave::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #9c27b0,
        transparent,
        #673ab7,
        transparent,
        #3f51b5,
        transparent
    );
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderWave 3s linear infinite;
}

@keyframes borderWave {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* ========================================
   6. DOTTED ANIMATED BORDER
   ======================================== */

.border-dotted-animate {
    position: relative;
    border: none;
}

.border-dotted-animate::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 4px dotted #9c27b0;
    border-radius: inherit;
    animation: rotateDots 10s linear infinite;
    opacity: 0.7;
}

@keyframes rotateDots {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   7. DASHED RUNNING BORDER
   ======================================== */

.border-dashed-run {
    position: relative;
    border: 2px dashed rgba(156, 39, 176, 0.6);
    background-clip: padding-box;
    animation: dashedRun 20s linear infinite;
}

@keyframes dashedRun {
    0% { 
        border-image: repeating-linear-gradient(
            90deg,
            #9c27b0 0px,
            #9c27b0 10px,
            transparent 10px,
            transparent 20px
        ) 2;
    }
    100% { 
        border-image: repeating-linear-gradient(
            90deg,
            #9c27b0 20px,
            #9c27b0 30px,
            transparent 30px,
            transparent 40px
        ) 2;
    }
}

/* ========================================
   8. BORDER PULSE EFFECT
   ======================================== */

.border-pulse {
    position: relative;
    border: 2px solid rgba(156, 39, 176, 0.5);
    animation: borderPulse 2s ease-in-out infinite;
}

@keyframes borderPulse {
    0%, 100% {
        border-width: 2px;
        border-color: rgba(156, 39, 176, 0.5);
    }
    50% {
        border-width: 4px;
        border-color: rgba(156, 39, 176, 1);
    }
}

/* ========================================
   9. BORDER SHIMMER EFFECT
   ======================================== */

.border-shimmer {
    position: relative;
    border: 2px solid rgba(156, 39, 176, 0.3);
    overflow: hidden;
}

.border-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmerMove 3s ease-in-out infinite;
}

@keyframes shimmerMove {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ========================================
   10. CORNER BRACKET BORDERS
   ======================================== */

.border-corners-bracket {
    position: relative;
    border: none;
}

.border-corners-bracket::before,
.border-corners-bracket::after,
.border-corners-bracket .corner-tl,
.border-corners-bracket .corner-tr,
.border-corners-bracket .corner-bl,
.border-corners-bracket .corner-br {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 3px solid #9c27b0;
    transition: all 0.3s ease;
}

/* Top-left */
.border-corners-bracket::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    animation: cornerGlow 2s ease-in-out infinite;
    animation-delay: 0s;
}

/* Top-right */
.border-corners-bracket::after {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    animation: cornerGlow 2s ease-in-out infinite;
    animation-delay: 0.5s;
}

/* Bottom corners - need extra elements in HTML */
.border-corners-bracket-full {
    position: relative;
    border: 1px solid rgba(156, 39, 176, 0.2);
}

.border-corners-bracket-full::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    border-top: 3px solid #9c27b0;
    border-left: 3px solid #9c27b0;
    border-radius: 4px 0 0 0;
    animation: cornerGlow 2s ease-in-out infinite;
}

.border-corners-bracket-full::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
    border-top: 3px solid #9c27b0;
    border-right: 3px solid #9c27b0;
    border-radius: 0 4px 0 0;
    animation: cornerGlow 2s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes cornerGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(156, 39, 176, 0.3);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 15px rgba(156, 39, 176, 0.8);
        opacity: 0.7;
    }
}

/* ========================================
   11. BORDER EXPAND ON HOVER
   ======================================== */

.border-expand-hover {
    position: relative;
    border: 2px solid rgba(156, 39, 176, 0.3);
    transition: all 0.3s ease;
}

.border-expand-hover::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(156, 39, 176, 0);
    border-radius: inherit;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.border-expand-hover:hover {
    border-color: rgba(156, 39, 176, 0.6);
}

.border-expand-hover:hover::before {
    inset: -4px;
    border-color: rgba(156, 39, 176, 0.8);
    box-shadow: 
        0 0 20px rgba(156, 39, 176, 0.4),
        inset 0 0 20px rgba(156, 39, 176, 0.1);
}

/* ========================================
   12. GLITCH BORDER EFFECT
   ======================================== */

.border-glitch {
    position: relative;
    border: 2px solid #9c27b0;
}

.border-glitch::before,
.border-glitch::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid #9c27b0;
    border-radius: inherit;
    opacity: 0;
}

.border-glitch::before {
    border-color: #00bcd4;
    animation: glitchBorder1 0.5s infinite;
}

.border-glitch::after {
    border-color: #ff5722;
    animation: glitchBorder2 0.5s infinite;
}

@keyframes glitchBorder1 {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0);
    }
    20% {
        opacity: 1;
        transform: translate(-3px, 2px);
    }
    40% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

@keyframes glitchBorder2 {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0);
    }
    30% {
        opacity: 1;
        transform: translate(3px, -2px);
    }
    50% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

/* ========================================
   13. BORDER LASER TRACE
   ======================================== */

.border-laser-trace {
    position: relative;
    border: 1px solid rgba(156, 39, 176, 0.2);
}

.border-laser-trace::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: 
        linear-gradient(90deg, #9c27b0 0%, transparent 50%) top left,
        linear-gradient(0deg, #9c27b0 0%, transparent 50%) top right,
        linear-gradient(-90deg, #9c27b0 0%, transparent 50%) bottom right,
        linear-gradient(180deg, #9c27b0 0%, transparent 50%) bottom left;
    background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%;
    background-repeat: no-repeat;
    animation: laserTrace 4s linear infinite;
    pointer-events: none;
}

@keyframes laserTrace {
    0% {
        background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%;
    }
    25% {
        background-size: 100% 2px, 2px 0%, 0% 2px, 2px 0%;
    }
    50% {
        background-size: 100% 2px, 2px 100%, 0% 2px, 2px 0%;
    }
    75% {
        background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0%;
    }
    100% {
        background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    }
}

/* ========================================
   14. ELECTRIC BORDER
   ======================================== */

.border-electric {
    position: relative;
    border: 2px solid rgba(156, 39, 176, 0.5);
    animation: electricPulse 1s ease-in-out infinite;
}

@keyframes electricPulse {
    0%, 100% {
        box-shadow: 
            0 0 5px rgba(156, 39, 176, 0.5),
            inset 0 0 5px rgba(156, 39, 176, 0.2);
    }
    10%, 30%, 50%, 70%, 90% {
        box-shadow: 
            0 0 20px rgba(156, 39, 176, 1),
            0 0 40px rgba(156, 39, 176, 0.8),
            inset 0 0 10px rgba(156, 39, 176, 0.5);
    }
    20%, 40%, 60%, 80% {
        box-shadow: 
            0 0 5px rgba(156, 39, 176, 0.3),
            inset 0 0 5px rgba(156, 39, 176, 0.1);
    }
}

/* ========================================
   15. MORPHING BORDER
   ======================================== */

.border-morph {
    position: relative;
    border: 3px solid #9c27b0;
    animation: morphBorder 8s ease-in-out infinite;
}

@keyframes morphBorder {
    0%, 100% {
        border-radius: 20px;
        border-color: #9c27b0;
    }
    25% {
        border-radius: 50px 20px;
        border-color: #673ab7;
    }
    50% {
        border-radius: 20px 50px;
        border-color: #3f51b5;
    }
    75% {
        border-radius: 50px;
        border-color: #2196f3;
    }
}

/* ========================================
   UTILITY CLASSES - APPLY TO ELEMENTS
   ======================================== */

/* Apply to cards */
.glass-card.border-enhanced {
    border: 2px solid rgba(156, 39, 176, 0.3);
}

/* Apply to buttons */
.btn.border-enhanced {
    border: 2px solid rgba(156, 39, 176, 0.5);
}

/* Apply to inputs */
.glass-input.border-enhanced {
    border: 2px solid rgba(156, 39, 176, 0.4);
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Disable heavy animations on mobile */
    .border-gradient-rotate::before,
    .border-glitch::before,
    .border-glitch::after {
        animation: none !important;
    }
    
    /* Simplify neon effects */
    .border-neon-glow,
    .border-neon-rainbow {
        animation-duration: 4s;
    }
    
    /* Reduce glow intensity */
    .border-electric {
        animation: none;
        box-shadow: 0 0 10px rgba(156, 39, 176, 0.3);
    }
}

/* ========================================
   REDUCE MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .border-gradient-rotate::before,
    .border-neon-glow,
    .border-neon-rainbow,
    .border-dancing-corners::before,
    .border-dancing-corners::after,
    .border-scan-line::before,
    .border-scan-line::after,
    .border-wave::before,
    .border-dotted-animate::before,
    .border-pulse,
    .border-shimmer::before,
    .border-glitch::before,
    .border-glitch::after,
    .border-laser-trace::before,
    .border-electric,
    .border-morph {
        animation: none !important;
    }
}

/* ========================================
   COMBINATIONS - MIX & MATCH
   ======================================== */

/* Neon + Pulse */
.border-neon-pulse {
    composes: border-neon-glow border-pulse;
}

/* Gradient + Shimmer */
.border-gradient-shimmer {
    composes: border-gradient-rotate border-shimmer;
}

/* Corner + Glow */
.border-corner-glow {
    composes: border-corners-bracket-full border-neon-glow;
}