/* Lightning Effect CSS for Team Profile */

/* Base lightning effect class */
.lightning-effect {
    position: relative;
    overflow: hidden;
}

/* Nameplate with lightning effect */
.nameplate-effect.lightning-border {
    background-color: rgba(0, 10, 30, 0.8);
    box-shadow: 0 0 15px rgba(0, 140, 255, 0.4);
}

.nameplate-effect.lightning-border:hover {
    box-shadow: 0 0 25px rgba(0, 140, 255, 0.7), 0 0 15px rgba(180, 230, 255, 0.6);
}

.nameplate-effect.lightning-border .nameplate-icon {
    color: #00c3ff;
    animation: lightning-pulse 1.5s infinite ease-out;
}

@keyframes lightning-pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
        text-shadow: 0 0 5px rgba(0, 140, 255, 0.7);
    }
    5% {
        transform: scale(1.4);
        opacity: 1;
        text-shadow: 0 0 15px rgba(180, 230, 255, 0.9), 0 0 25px rgba(0, 140, 255, 0.8);
    }
    10% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    15% {
        transform: scale(1.3);
        opacity: 1;
        text-shadow: 0 0 15px rgba(180, 230, 255, 0.9), 0 0 25px rgba(0, 140, 255, 0.8);
    }
    20% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
        text-shadow: 0 0 5px rgba(0, 140, 255, 0.7);
    }
}

/* Lightning particles container */
.lightning-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* Individual lightning particle */
.lightning-particle {
    position: absolute;
    filter: blur(1px);
    background: linear-gradient(to bottom, #ffffff, #00c3ff, #0066ff);
    box-shadow: 0 0 10px rgba(0, 195, 255, 0.7), 0 0 20px rgba(0, 140, 255, 0.5);
    z-index: 1;
    opacity: 0;
}

/* Lightning bolt particle */
.lightning-bolt {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(0, 195, 255, 0.7), 0 0 20px rgba(0, 140, 255, 0.5);
    z-index: 1;
    opacity: 0;
}

/* Lightning overlay effect */
.nameplate-effect.lightning-border::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 8px;
    background: linear-gradient(45deg, #0066ff, #00c3ff, #80dfff, #ffffff, #80dfff, #00c3ff, #0066ff);
    background-size: 400%;
    animation: border-lightning 3s linear infinite;
    opacity: 0.5;
    filter: blur(5px);
    z-index: -1;
    transition: all 0.3s ease;
}

.nameplate-effect.lightning-border:hover::before {
    animation-duration: 1s;
    opacity: 0.8;
    filter: blur(3px);
}

@keyframes border-lightning {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* Lightning flash animation */
@keyframes lightning-flash {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0.9;
    }
    6% {
        opacity: 0.2;
    }
    7% {
        opacity: 0.8;
    }
    8% {
        opacity: 0.1;
    }
    9% {
        opacity: 0.7;
    }
    10% {
        opacity: 0.1;
    }
    100% {
        opacity: 0;
    }
}

/* Lightning strike animation */
@keyframes lightning-strike {
    0% {
        transform: translateY(-100%) scaleY(0);
        opacity: 0;
    }
    5% {
        transform: translateY(0) scaleY(1);
        opacity: 1;
    }
    10% {
        transform: translateY(0) scaleY(1);
        opacity: 0.8;
    }
    15% {
        transform: translateY(0) scaleY(1);
        opacity: 0.2;
    }
    20% {
        transform: translateY(0) scaleY(1);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scaleY(1);
        opacity: 0;
    }
}

/* Live text effect */
.live-text {
    position: relative;
    display: inline-block;
    color: #ff0000;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
    animation: live-pulse 1.5s infinite ease-in-out;
}

@keyframes live-pulse {
    0% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
    }
}