/* ==========================================================================
   THÈME MATRIX - Styles pour les pages avec thématique cyberpunk/Matrix
   Fichier: 06-themes/matrix.css
   ========================================================================== */

/* ==========================================================================
   HERO SECTION MATRIX
   ========================================================================== */
.matrix-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #00ff00;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    height: 30vh;
    background: #000000;
    font-family: 'Courier New', 'Monaco', monospace;
}

/* Effet Matrix - caractères qui tombent */
.matrix-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 98px,
            rgba(0, 255, 0, 0.03) 100px,
            rgba(0, 255, 0, 0.03) 102px
        );
    z-index: 1;
    animation: matrixScroll 20s linear infinite;
}

/* Couche de caractères animés */
.matrix-hero::after {
    content: '01001000 01100101 01101100 01101100 01101111 00100000 01010111 01101111 01110010 01101100 01100100 00001010 01000101 01100011 01101111 01110000 01101000 01101111 01110100 00001010 01001001 01101110 01101110 01101111 01110110 01100001 01110100 01101001 01101111 01101110 00001010 01010100 01100101 01100011 01101000 01101110 01101111 01101100 01101111 01100111 01111001';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 120%;
    color: rgba(0, 255, 0, 0.1);
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 2px;
    word-wrap: break-word;
    white-space: normal;
    z-index: 1;
    animation: matrixRain 15s linear infinite;
    pointer-events: none;
}

/* Animations Matrix */
@keyframes matrixRain {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes matrixScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100px);
    }
}

/* Effet de grille Matrix */
.matrix-hero .matrix-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
    animation: matrixGridPulse 4s ease-in-out infinite alternate;
}

@keyframes matrixGridPulse {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.3;
    }
}

/* Contenu du hero par-dessus l'effet Matrix */
.matrix-hero > * {
    position: relative;
    z-index: 3;
}

.matrix-hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 
        0 0 10px #00ff00,
        0 0 20px #00ff00,
        0 0 30px #00ff00,
        0 0 40px #00ff00;
    font-weight: 700;
    color: #00ff00;
    animation: matrixGlow 2s ease-in-out infinite alternate;
    font-family: 'Courier New', 'Monaco', monospace;
    letter-spacing: 2px;
}

.matrix-hero p {
    font-size: 1.3rem;
    max-width: 700px;
    margin-bottom: 30px;
    text-shadow: 
        0 0 5px #00ff00,
        0 0 10px #00ff00;
    opacity: 0.9;
    line-height: 1.6;
    color: #66ff66;
    animation: matrixTextGlow 3s ease-in-out infinite alternate;
}

/* Animation du texte principal */
@keyframes matrixGlow {
    0% {
        text-shadow: 
            0 0 10px #00ff00,
            0 0 20px #00ff00,
            0 0 30px #00ff00;
    }
    100% {
        text-shadow: 
            0 0 15px #00ff00,
            0 0 25px #00ff00,
            0 0 35px #00ff00,
            0 0 45px #00ff00;
    }
}

/* Animation du sous-texte */
@keyframes matrixTextGlow {
    0% {
        text-shadow: 
            0 0 5px #00ff00,
            0 0 10px #00ff00;
        opacity: 0.8;
    }
    100% {
        text-shadow: 
            0 0 8px #00ff00,
            0 0 15px #00ff00,
            0 0 20px #00ff00;
        opacity: 1;
    }
}

/* ==========================================================================
   ÉLÉMENTS MATRIX
   ========================================================================== */

/* Boutons style Matrix */
.btn-matrix {
    background: transparent;
    color: #00ff00;
    border: none;
    padding: 12px 30px;
    border-radius: 0;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Courier New', 'Monaco', monospace;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin: 10px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
}

.btn-matrix::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent,
        rgba(0, 255, 0, 0.2),
        transparent
    );
    transition: left 0.5s;
}

.btn-matrix:hover {
    background: rgba(0, 255, 0, 0.1);
    box-shadow: 
        0 0 20px #00ff00,
        inset 0 0 20px rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 10px #00ff00;
    color: #00ff00;
    text-decoration: none;
    transform: translateY(-2px);
}

.btn-matrix:hover::before {
    left: 100%;
}

/* Cartes Matrix */
.matrix-card {
    background: linear-gradient(145deg, #001100, #002200);
    border: 1px solid #00ff00;
    border-radius: 0;
    padding: 25px;
    margin: 20px 0;
    color: #00ff00;
    font-family: 'Courier New', 'Monaco', monospace;
    box-shadow: 
        0 0 20px rgba(0, 255, 0, 0.2),
        inset 0 0 20px rgba(0, 255, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.matrix-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent,
        #00ff00,
        transparent
    );
    animation: matrixScanLine 3s linear infinite;
}

@keyframes matrixScanLine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.matrix-card h3 {
    color: #00ff00;
    margin-bottom: 15px;
    text-shadow: 0 0 10px #00ff00;
    font-weight: bold;
}

.matrix-card p {
    color: #66ff66;
    line-height: 1.6;
    opacity: 0.9;
}

/* Section Matrix */
.matrix-section {
    background: linear-gradient(145deg, #000000, #001a00);
    color: #00ff00;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.matrix-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 100px,
            rgba(0, 255, 0, 0.02) 100px,
            rgba(0, 255, 0, 0.02) 102px
        );
    pointer-events: none;
}

/* Terminal Matrix */
.matrix-terminal {
    background: #000000;
    border: 2px solid #00ff00;
    border-radius: 0;
    padding: 20px;
    margin: 20px 0;
    font-family: 'Courier New', 'Monaco', monospace;
    color: #00ff00;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
    box-shadow: 
        0 0 30px rgba(0, 255, 0, 0.3),
        inset 0 0 30px rgba(0, 255, 0, 0.05);
}

.matrix-terminal::before {
    content: '> _';
    position: absolute;
    bottom: 10px;
    right: 15px;
    animation: matrixCursor 1s infinite;
}

@keyframes matrixCursor {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* Code Matrix qui défile */
.matrix-code {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Courier New', 'Monaco', monospace;
    font-size: 14px;
    line-height: 16px;
    color: rgba(0, 255, 0, 0.3);
    z-index: 1;
    pointer-events: none;
    animation: matrixCodeFlow 25s linear infinite;
    word-wrap: break-word;
    white-space: pre-wrap;
}

@keyframes matrixCodeFlow {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* Effet de scan line */
.matrix-hero .scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent,
        #00ff00,
        transparent
    );
    z-index: 2;
    animation: matrixScan 3s linear infinite;
}

@keyframes matrixScan {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* Badges Matrix */
.matrix-badge {
    background: transparent;
    color: #00ff00;
    border: 1px solid #00ff00;
    padding: 4px 8px;
    font-family: 'Courier New', 'Monaco', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: matrixBadgePulse 2s ease-in-out infinite alternate;
}

@keyframes matrixBadgePulse {
    0% {
        box-shadow: 0 0 5px #00ff00;
    }
    100% {
        box-shadow: 0 0 15px #00ff00;
    }
}

/* Effet de glitch occasionnel */
@keyframes matrixGlitch {
    0%, 90%, 100% {
        transform: translate(0);
    }
    95% {
        transform: translate(-2px, 2px);
    }
    97% {
        transform: translate(2px, -2px);
    }
}

.matrix-hero h1:hover {
    animation: matrixGlitch 0.3s ease-in-out;
}

/* Particules Matrix */
.matrix-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.matrix-particle {
    position: absolute;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    opacity: 0.7;
    animation: matrixParticleFloat 8s linear infinite;
}

@keyframes matrixParticleFloat {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(calc(100vh + 20px));
        opacity: 0;
    }
}

/* ==========================================================================
   RESPONSIVE MATRIX
   ========================================================================== */
@media (max-width: 768px) {
    .matrix-hero {
        height: 60vh;
        min-height: 350px;
        padding: 20px 15px;
    }
    
    .matrix-hero h1 {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    
    .matrix-hero p {
        font-size: 1.1rem;
        max-width: 90%;
        margin-bottom: 25px;
        line-height: 1.4;
    }
    
    .matrix-hero::after {
        font-size: 10px;
        line-height: 12px;
    }
    
    .matrix-code {
        font-size: 10px;
        line-height: 12px;
    }
    
    .matrix-card {
        padding: 20px;
        margin: 15px 0;
    }
    
    .matrix-terminal {
        padding: 15px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .matrix-hero h1 {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }
    
    .matrix-hero p {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .btn-matrix {
        padding: 10px 20px;
        font-size: 0.9rem;
        margin: 5px;
    }
    
    .matrix-card {
        padding: 15px;
    }
}