/* =====================================================
   Minimal working cassette CSS
   (safe for bitmap fills + dark mode)
===================================================== */

/* ---- Page reset ---- */

html,
body {
    margin: 0;
    padding: 0;
    background: transparent !important;
}


/* ---- SVG container ---- */

svg {
    display: block;
    width: 640px;
    max-width: 100%;

    /* critical: prevents dark-mode extensions
       from inserting grey backgrounds */
    background: transparent !important;
}


/* ---- Spool wobble animations ---- */

@keyframes wobble1 {
    from { transform: translateX(0.2px); }
    to   { transform: translateX(-0.2px); }
}

@keyframes wobble2 {
    from { transform: translateX(0.2px); }
    to   { transform: translateX(-0.2px); }
}

#left-spool {
    animation: wobble2 1s infinite alternate;
    animation-play-state: paused;
    transform-box: fill-box;
    transform-origin: center;
}

#right-spool {
    animation: wobble1 1.3s infinite alternate;
    animation-play-state: paused;
    transform-box: fill-box;
    transform-origin: center;
}


/* ---- Gear rotation ---- */

@keyframes gearspin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.gears {
    transform-box: fill-box;
    transform-origin: center;
    animation: gearspin 2s linear infinite;
    animation-play-state: paused;
}


/* ---- Controls ---- */

#play-button,
#pause-button {
    cursor: pointer;
    pointer-events: all;
}

#pause-button {
    display: none;
}


/* ---- Label text ---- */

.cassette-label {
    font-size: 5px;
    font-family: 'Permanent Marker', cursive;
    fill: #222;
}