/* Electric Border Styles */
.electric-border {
    --electric-light-color: oklch(from var(--electric-border-color) l c h);
    --eb-border-width: 2px;
    position: relative;
    border-radius: inherit;
    overflow: visible;
    isolation: isolate;
}

/* Fallback for browsers that don't support oklch 'from' syntax */
@supports not (color: oklch(from red l c h)) {
    .electric-border {
        --electric-light-color: var(--electric-border-color);
    }
}

.eb-svg {
    position: fixed;
    left: -10000px;
    top: -10000px;
    width: 10px;
    height: 10px;
    opacity: 0.001;
    pointer-events: none;
}

.eb-content {
    position: relative;
    border-radius: inherit;
    z-index: 1;
}

.eb-layers {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.eb-stroke,
.eb-glow-1,
.eb-glow-2,
.eb-overlay-1,
.eb-overlay-2,
.eb-background-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-sizing: border-box;
}

.eb-stroke {
    border: var(--eb-border-width) solid var(--electric-border-color);
}

.eb-glow-1 {
    border: var(--eb-border-width) solid var(--electric-border-color);
    opacity: 0.6;
    filter: blur(calc(0.5px + (var(--eb-border-width) * 0.25)));
}

.eb-glow-2 {
    border: var(--eb-border-width) solid var(--electric-light-color);
    opacity: 0.5;
    filter: blur(calc(2px + (var(--eb-border-width) * 0.5)));
}

.eb-background-glow {
    z-index: -1;
    transform: scale(1.08);
    filter: blur(32px);
    opacity: 0.3;
    background: linear-gradient(-30deg, var(--electric-light-color), transparent, var(--electric-border-color));
}

/* Enhanced styles for portfolio video container */
.portfolio-reel-container.electric-border {
    margin: 20px 0;
}

.portfolio-reel-container.electric-border .eb-content {
    border-radius: 16px;
    overflow: hidden;
}

/* Animation enhancements */
@keyframes electricPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.electric-border:hover .eb-glow-1,
.electric-border:hover .eb-glow-2 {
    animation: electricPulse 2s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .electric-border {
        --eb-border-width: 1px;
    }
    
    .eb-background-glow {
        filter: blur(16px);
        transform: scale(1.05);
    }
}

/* Performance optimizations */
.electric-border {
    will-change: transform;
}

.eb-stroke,
.eb-glow-1,
.eb-glow-2 {
    will-change: filter;
}

/* Color variations for different themes */
.electric-border.theme-purple {
    --electric-border-color: #6e45e2;
}

.electric-border.theme-cyan {
    --electric-border-color: #7df9ff;
}

.electric-border.theme-gold {
    --electric-border-color: #ffd700;
}

.electric-border.theme-red {
    --electric-border-color: #ff4444;
}