/* stickman.css - Version: PARALLAX_ENGINE_V2 */

#gear-bot-box {
    width: 100%;
    height: 90px;
    position: relative;
    overflow: hidden; 
    background: rgba(0, 255, 204, 0.02);
    border: 1px solid rgba(0, 255, 204, 0.1);
    border-radius: 4px;
}

/* --- DER LAUFBAND-EFFEKT (Hintergrund) --- */
.stickman-floor {
    position: absolute;
    bottom: 15px;
    width: 200%; /* Doppelte Breite für nahtlosen Loop */
    height: 1px;
    background: repeating-linear-gradient(90deg, 
        var(--neon) 0px, 
        var(--neon) 10px, 
        transparent 10px, 
        transparent 40px);
    opacity: 0.2;
    display: none; /* Nur sichtbar beim Laufen */
}

/* Wenn die Klasse .walk aktiv ist, bewegt sich der Boden */
.walk .stickman-floor {
    display: block;
    animation: parallax-move 0.8s linear infinite;
}

@keyframes parallax-move {
    from { transform: translateX(0); }
    to { transform: translateX(-50px); } /* Verschiebt das Muster */
}

/* --- DER STICKMAN (Zentriert) --- */
.stickman-svg {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: 35px;
    height: 70px;
    stroke: var(--neon);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px var(--neon));
    z-index: 5;
}

/* --- ANIMATIONEN FÜR GLIEDMASSEN --- */

/* Laufen: Beine schwingen */
.walk .sm-leg-l {
    animation: leg-swing 0.3s infinite alternate;
    transform-origin: 10px 30px;
}
.walk .sm-leg-r {
    animation: leg-swing 0.3s infinite alternate-reverse;
    transform-origin: 10px 30px;
}

@keyframes leg-swing {
    from { transform: rotate(-20deg); }
    to { transform: rotate(20deg); }
}

/* Zittern: Bei Kälte (shiver) */
.shiver .stickman-svg {
    animation: shiver-fast 0.1s infinite;
}

@keyframes shiver-fast {
    0% { transform: translateX(-51%); }
    50% { transform: translateX(-49%); }
    100% { transform: translateX(-50%); }
}

/* Atmen: Im Stillstand (idle) */
.idle .sm-head {
    animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
}

/* Der Schrank am Ende des Laufbands */
.closet-target {
    z-index: 1;
    /* Position wird jetzt dynamisch vom JS gesteuert */
}

.gear-item-box {
    width: 45px;
    height: 45px;
    background: rgba(0, 255, 204, 0.03);
    border: 1px solid rgba(0, 255, 204, 0.1);
    border-radius: 4px;
    padding: 5px;
    color: var(--neon);
    animation: piktogramm-drop 0.5s ease-out forwards;
}

.piktogramm-svg {
    width: 100%;
    height: 100%;
}

@keyframes piktogramm-drop {
    0% { transform: translateY(-15px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}