/* ========================================
   Bongo Cat SVG Animation Styles
   ======================================== */

:root {
    --bg: #1a1e2d;
    --green: #a5ea9b;
    --pink: #ff61d8;
    --blue: #569cfa;
    --orange: #ffcc81;
    --cyan: #7ed1e2;
    --purple: #667eea;
    --dark-purple: #764ba2;
}

.container svg {
    height: 100%;
    width: 100%;
    overflow: visible;
}

#bongo-cat {
    fill: var(--white);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

#bongo-cat .laptop-cover,
#bongo-cat .headphone .band {
    fill: none;
}

#bongo-cat .paw,
#bongo-cat .head {
    stroke: var(--orange);
}

#bongo-cat .laptop-keyboard {
    stroke-width: 2;
}

#bongo-cat .terminal-code {
    stroke-width: 5;
}

#bongo-cat .music .note,
#bongo-cat .laptop-base,
#bongo-cat .laptop-cover,
#bongo-cat .paw .pads {
    stroke: var(--pink);
}

#bongo-cat .table line,
#bongo-cat .headphone .band,
#bongo-cat .headphone .speaker path:nth-child(3) {
    stroke: var(--green);
}

#bongo-cat .terminal-frame,
#bongo-cat .laptop-keyboard,
#bongo-cat .headphone .speaker path:nth-child(2) {
    stroke: var(--blue);
}

#bongo-cat .terminal-code,
#bongo-cat .headphone .speaker path:first-child {
    stroke: var(--cyan);
}

/* Paw Animation States */
#bongo-cat .paw-right .up,
#bongo-cat .paw-left .up {
    opacity: 1;
}

#bongo-cat .paw-right .down,
#bongo-cat .paw-left .down {
    opacity: 0;
}