/* Tape keys (design handoff SPEC §4), seek bars, and the SoundCloud widget frame used by js/sc-player.js */

/* --- tape key: 56×36 cassette-deck key, latched slightly down (2px) while playing.
       --tk scales every key; it grows on big screens (bottom of this file). --- */
.tape-key {
    --tk: 1;
    position: relative;
    flex: none;
    display: block;
    width: calc(56px * var(--tk));
    height: calc(40px * var(--tk));
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.tape-key::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(36px * var(--tk));
    box-sizing: border-box;
    border: 1px solid #f5f5f5;
    background: #000;
    transition: background 0.12s, top 0.12s;
}
.tape-key:hover::before {
    background: #1c1c1c;
}
/* ▶ drawn as a CSS triangle, centred in the key */
.tape-key::after {
    content: '';
    position: absolute;
    top: calc(18px * var(--tk));
    left: 50%;
    width: 0;
    height: 0;
    margin: calc(-7px * var(--tk)) 0 0 calc(-3px * var(--tk));
    border-top: calc(7px * var(--tk)) solid transparent;
    border-bottom: calc(7px * var(--tk)) solid transparent;
    border-left: calc(11px * var(--tk)) solid #f5f5f5;
}
.tape-key.is-playing::before {
    top: 2px;
    background: #f5f5f5;
}
/* pause: two 4×13 bars, 4px apart */
.tape-key.is-playing::after {
    top: calc(18px * var(--tk) + 2px);
    width: calc(4px * var(--tk));
    height: calc(13px * var(--tk));
    margin: calc(-6.5px * var(--tk)) 0 0 calc(-6px * var(--tk));
    border: 0;
    background: #000;
    box-shadow: calc(8px * var(--tk)) 0 0 #000;
}
.tape-key.is-loading::before {
    opacity: 0.5;
}
.tape-key:focus-visible {
    outline: 1px solid #f5f5f5;
    outline-offset: 3px;
}

/* --- previous / next keys: narrower keys with ◀◀ / ▶▶ (two triangles) --- */
.tape-key.tk-prev,
.tape-key.tk-next {
    width: calc(44px * var(--tk));
}
.tape-key.tk-prev::after,
.tape-key.tk-next::after {
    margin-top: calc(-6px * var(--tk));
    border-top-width: calc(6px * var(--tk));
    border-bottom-width: calc(6px * var(--tk));
}
.tape-key.tk-next::after {
    margin-left: calc(-9px * var(--tk));
    border-left: calc(9px * var(--tk)) solid #f5f5f5;
}
.tape-key.tk-prev::after {
    margin-left: calc(0px * var(--tk));
    border-left: 0;
    border-right: calc(9px * var(--tk)) solid #f5f5f5;
}
.tape-key.tk-next i,
.tape-key.tk-prev i {
    position: absolute;
    top: calc(18px * var(--tk));
    left: 50%;
    width: 0;
    height: 0;
    margin-top: calc(-6px * var(--tk));
    border-top: calc(6px * var(--tk)) solid transparent;
    border-bottom: calc(6px * var(--tk)) solid transparent;
    pointer-events: none;
}
.tape-key.tk-next i {
    margin-left: 0;
    border-left: calc(9px * var(--tk)) solid #f5f5f5;
}
.tape-key.tk-prev i {
    margin-left: calc(-9px * var(--tk));
    border-right: calc(9px * var(--tk)) solid #f5f5f5;
}
.tape-key.tk-prev:active::before,
.tape-key.tk-next:active::before {
    top: 2px;
}
.tape-key.tk-prev:active::after,
.tape-key.tk-next:active::after,
.tape-key.tk-prev:active i,
.tape-key.tk-next:active i {
    top: calc(18px * var(--tk) + 2px);
}
.tape-key[hidden] {
    display: none;
}
.tape-key[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* --- seek bar: thin line, taller invisible hit area --- */
.seek {
    position: relative;
    padding: 8px 0;
    cursor: pointer;
    touch-action: none;
}
.seek:focus-visible {
    outline: 1px solid #f5f5f5;
    outline-offset: 2px;
}

/* bigger keys on big screens */
@media (min-width: 1400px) {
    .tape-key { --tk: 1.2; }
}
@media (min-width: 1900px) {
    .tape-key { --tk: 1.4; }
}

/* --- SoundCloud widget: hidden; slides up only if the phone blocks playback --- */
.sc-player-frame {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.sc-player-frame iframe {
    display: block;
    width: 100%;
    height: 166px;
    border: 0;
}
.sc-player-hint {
    display: none;
}
.sc-player-frame.sc-player-revealed {
    width: 100%;
    height: auto;
    opacity: 1;
    pointer-events: auto;
    z-index: 2000;
    border-top: 1px solid #fff;
    background: #000;
}
.sc-player-revealed .sc-player-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    color: #f5f5f5;
    font: 14px Helvetica, 'Helvetica Neue', Arial, sans-serif;
}
.sc-player-hint button {
    padding: 0 4px;
    border: 0;
    background: none;
    color: #fff;
    font: 24px/1 Arial, sans-serif;
    opacity: 0.65;
    cursor: pointer;
}