/* css/streams.css */

.streams-wrapper {
    --neon-red: #FF0000;
    --purple-9ce: #8B5CF6;
    --green-try: #4ADE80;
    --yellow-mister: #FFFF00;
}

@keyframes neon-pulse-purple {
    0% { text-shadow: 0 0 5px var(--purple-9ce), 0 0 10px var(--purple-9ce); }
    100% { text-shadow: 0 0 12px var(--purple-9ce), 0 0 18px var(--purple-9ce); }
}
@keyframes neon-pulse-green {
    0% { text-shadow: 0 0 5px var(--green-try), 0 0 10px var(--green-try); }
    100% { text-shadow: 0 0 12px var(--green-try), 0 0 18px var(--green-try); }
}
@keyframes neon-pulse-red {
    0% { text-shadow: 0 0 5px var(--neon-red), 0 0 10px var(--neon-red); }
    100% { text-shadow: 0 0 12px var(--neon-red), 0 0 18px var(--neon-red); }
}
@keyframes neon-pulse-yellow {
    0% { text-shadow: 0 0 5px var(--yellow-mister), 0 0 10px var(--yellow-mister); }
    100% { text-shadow: 0 0 12px var(--yellow-mister), 0 0 18px var(--yellow-mister); }
}

.name-9ce { color: var(--purple-9ce); animation: neon-pulse-purple 1.5s infinite alternate; }
.name-try { color: var(--green-try); animation: neon-pulse-green 1.5s infinite alternate; }
.neon-text-red { color: var(--neon-red); animation: neon-pulse-red 1.5s infinite alternate; }
.neon-text-yellow { color: var(--yellow-mister); animation: neon-pulse-yellow 1.5s infinite alternate; }

.name-9ce, .name-try, .neon-text-red, .neon-text-yellow {
    display: inline-block;
}

.stream-container {
    background: rgba(15, 15, 15, 0.4); 
    backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 850px;
}

.stream-container:hover {
    border-color: var(--neon-red); 
    background: rgba(25, 25, 25, 0.5); 
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.25); 
    transform: translateY(-6px);
}

.stream-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.stream-container:hover::after { opacity: 1; }

.video-wrapper {
    background: #000;
    border-radius: 1.5rem; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.stream-container:hover .video-wrapper {
    transform: scale(1.01);
    border-color: rgba(255, 255, 255, 0.1);
}

.social-btn {
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 18px; 
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}
.social-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.link-text { position: relative; padding-right: 2rem; }
.link-text .ri-pushpin-line {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 1.2rem; opacity: 0.6; transition: opacity 0.3s ease;
}
.stream-container:hover .ri-pushpin-line { opacity: 1; }