/* --- BANNIÈRE--- */
.hero.smk-snes-banner {
    position: relative;
    height: 230px;
    overflow: hidden;
    background-color: #f7ce8c; 
    padding: 0 !important;
    border-bottom: 4px solid #000;
}

@media screen and (min-width: 769px) {
    .hero.smk-snes-banner {
        height: 360px; 
    }
}

/* --- LOGO --- */
.hero-body-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    z-index: 200;
    pointer-events: none;
}

.mk-logo-responsive {
    display: block;
    height: auto;
    width: auto;
    
    max-width: 300px;
    
    transform: translateY(5px); 
    
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.7));
}

@media screen and (min-width: 769px) {
    .mk-logo-responsive {
        max-width: 600px;   
        transform: translateY(+10px); 
    }
}

/* --- FOND --- */
.layer-scrolling-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65%; 
    z-index: 1; 
    background-image: url('../img/index-banner.png');
    background-size: 2000px 100%;
    background-repeat: repeat-x;
    image-rendering: pixelated;
    animation: scrollBackgroundInfinite 11s linear infinite;
}

/* --- SOL / BITUME --- */
.layer-ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35%;
    z-index: 3;
    background-color: #333333;
}

/* --- VIBREUR --- */
.layer-ground::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 120%;
    height: 10px;
    background-image: 
        repeating-linear-gradient(90deg, 
            #cc0000 0px, #cc0000 40px,
            #ffffff 40px, #ffffff 80px
        );
    z-index: 4;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); 
    animation: scrollBgFast var(--road-duration, 0.44s) linear infinite;
}

/* --- LIGNE D'ARRIVÉE --- */
.layer-finish-line {
    position: absolute;
    bottom: 0;
    left: 100%; 
    height: 35%; 
    width: 60px; 
    
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000),
        linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
    
    z-index: 5; 
    box-shadow: -2px 0 5px rgba(0,0,0,0.3);
    
    animation: scrollFinishLine 22s linear infinite;
}

/* --- ITEM BOX --- */
.item-box {
    position: absolute;
    background-image: url('../img/item_box.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 100;
}

/* --- KART --- */
.kart-container-moving {
    position: absolute;
    left: 0; 
    will-change: transform; 
    width: 50px;
}

@media screen and (min-width: 769px) {
    .kart-container-moving {
        width: 100px; 
    }
}

.kart-static-png {
    width: 100%;
    image-rendering: pixelated;
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.4));
    animation: snesBounce 0.15s infinite alternate ease-in-out;
}

/* --- KEYFRAMES --- */
@keyframes scrollBackgroundInfinite {
    from { background-position: 0 0; }
    to { background-position: -2000px 0; }
}

@keyframes scrollBgFast { 
    0% { background-position: 0 0; } 
    100% { background-position: -80px 0; } 
}

@keyframes snesBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-3px); }
}

@keyframes scrollFinishLine {
    from { transform: translateX(0); }
    to { transform: translateX(-4000px); } 
}