/* 
 * Animation d'intro style GTA pour Seynor Coaching
 * Écran de chargement avec agents Valorant
 * Version améliorée avec effets cinématiques
 */

/* Overlay d'intro */
.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden;
}

/* Overlay de grain pour un effet cinématique */
@keyframes noise {
    0%, 100% { background-position: 0 0; }
    10% { background-position: -5% -10%; }
    20% { background-position: -15% 5%; }
    30% { background-position: 7% -25%; }
    40% { background-position: 20% 25%; }
    50% { background-position: -25% 10%; }
    60% { background-position: 15% 5%; }
    70% { background-position: 0% 15%; }
    80% { background-position: 25% 35%; }
    90% { background-position: -10% 10%; }
}

.intro-noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFEmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMTItMzBUMDE6Mzc6MjArMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjU3KzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTEyLTMwVDAxOjM4OjU3KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmIzMzBlMWI0LTk5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');
    background-repeat: repeat;
    opacity: 0.03;
    z-index: 10000;
    pointer-events: none;
    animation: noise 0.5s steps(2) infinite;
}

/* Vignette pour un effet cinématique */
.intro-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.9);
    z-index: 10001;
    pointer-events: none;
}

/* Lignes de scan pour un effet rétro */
@keyframes scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

.intro-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0) 50%, 
        rgba(0, 0, 0, 0.02) 50%);
    background-size: 100% 4px;
    z-index: 10002;
    pointer-events: none;
    animation: scanlines 8s linear infinite;
}

/* Logo d'intro */
.intro-logo {
    font-size: 4rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards 0.5s;
}

/* Agents d'intro */
.intro-agents {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards 1s;
}

.intro-agent {
    width: 150px;
    height: 300px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    transition: transform 0.5s ease;
}

.intro-agent:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 70, 85, 0.5);
}

/* Barre de progression */
.intro-progress-container {
    width: 80%;
    max-width: 600px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards 1.5s;
}

.intro-progress-bar {
    height: 100%;
    width: 0;
    background-color: var(--primary-color);
    border-radius: 5px;
    transition: width 0.5s ease;
}

/* Texte de chargement */
.intro-loading-text {
    color: #fff;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards 2s;
}

/* Animation de fondu vers le haut */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation de pulsation pour les agents */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(255, 70, 85, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    }
}

/* Animation de pulsation pour le texte "Appuyez pour continuer..." */
@keyframes textPulse {
    0% {
        opacity: 0.7;
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 70, 85, 0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
        text-shadow: 0 0 15px rgba(255, 70, 85, 0.8);
    }
    100% {
        opacity: 0.7;
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 70, 85, 0.5);
    }
}

.intro-loading-text.pulse {
    animation: textPulse 1.5s infinite ease-in-out;
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 3px;
}

/* Classe pour indiquer que le chargement a commencé */
.intro-overlay.loading-started .intro-agents {
    opacity: 1;
    transform: translateY(0);
}

.intro-agent:nth-child(1) {
    animation: pulse 4s infinite ease-in-out 2s;
}

.intro-agent:nth-child(2) {
    animation: pulse 4s infinite ease-in-out 3s;
}

.intro-agent:nth-child(3) {
    animation: pulse 4s infinite ease-in-out 4s;
}

.intro-agent:nth-child(4) {
    animation: pulse 4s infinite ease-in-out 5s;
}

.intro-agent:nth-child(5) {
    animation: pulse 4s infinite ease-in-out 6s;
}

/* Responsive */
@media (max-width: 768px) {
    .intro-logo {
        font-size: 3rem;
    }
    
    .intro-agents {
        gap: 15px;
    }
    
    .intro-agent {
        width: 100px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .intro-logo {
        font-size: 2.5rem;
    }
    
    .intro-agents {
        gap: 10px;
    }
    
    .intro-agent {
        width: 80px;
        height: 160px;
    }
}