/* Streametx - Intro Screen */
.intro-screen {
    position: fixed; inset: 0; background: #0a0d15; z-index: 99999;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; transition: opacity 600ms ease;
    overflow: hidden;
    background-image: 
        radial-gradient(ellipse at 0% 50%, rgba(0, 60, 180, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(0, 60, 180, 0.12) 0%, transparent 50%);
}
.intro-screen.fade-out { opacity: 0; pointer-events: none; }

.intro-logo {
    width: 80px; height: 80px;
    background: var(--rojo, #e50914);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; color: white; margin-bottom: 24px;
    animation: introLogoIn 0.5s ease-out;
    box-shadow: 0 0 60px rgba(229, 9, 20, 0.3);
}

.intro-title {
    font-size: 28px; font-weight: 900; font-style: italic;
    color: white; margin-bottom: 6px;
    animation: introFadeUp 0.5s ease-out 0.15s both;
    letter-spacing: 0.5px;
}
.intro-title span { color: #e50914; }

.intro-subtitle {
    font-size: 13px; color: #4b5563; margin-bottom: 40px;
    animation: introFadeUp 0.5s ease-out 0.25s both;
}

.intro-steps { width: 280px; display: flex; flex-direction: column; gap: 14px; }

.intro-step {
    display: flex; align-items: center; gap: 12px;
    opacity: 0; transform: translateX(-16px);
}
.intro-step.active { animation: introStepIn 0.35s ease-out forwards; }
.intro-step.done .intro-bar-fill { width: 100% !important; background: #22c55e; }

.intro-step-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
    transition: all 0.3s;
}
.intro-step.done .intro-step-icon { background: #22c55e; }

.intro-step-content { flex: 1; }
.intro-step-text { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 5px; }

.intro-bar {
    width: 100%; height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px; overflow: hidden;
}
.intro-bar-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #e50914, #ff4444);
    border-radius: 3px; transition: width 0.1s linear;
}

@keyframes introLogoIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes introFadeUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes introStepIn { from { transform: translateX(-16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }