/**
 * Toggle Track Skin — Tube Tape Deck
 *
 * The hero skin. Warm vintage tape machine aesthetic inspired by
 * Studer A80, Ampex ATR-102. Wood side panels, brushed metal
 * faceplate, glowing vacuum tubes, VU meter feel.
 *
 * @package ToggleTrack
 * @since   1.0.0
 */

/* ---------- Color Palette ---------- */

.tt-skin-tube-tape-deck {
    --tt-bg: #1c1410;
    --tt-text: #e8d5b0;
    --tt-active: #fff8e8;
    --tt-controls: #2c2218;
    --tt-progress: #3a2e22;
    --tt-accent: #d4881c;
}

/* ---------- Keyframe Animations ---------- */

@keyframes tt-tube-glow {
    0%, 100% {
        box-shadow:
            0 0 8px 2px rgba(212, 136, 28, 0.4),
            0 0 20px 4px rgba(212, 136, 28, 0.15),
            inset 0 0 6px rgba(212, 136, 28, 0.3);
    }
    50% {
        box-shadow:
            0 0 12px 4px rgba(212, 136, 28, 0.55),
            0 0 28px 8px rgba(212, 136, 28, 0.25),
            inset 0 0 10px rgba(212, 136, 28, 0.45);
    }
}

@keyframes tt-reel-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Container — Wood & Metal ---------- */

.tt-skin-tube-tape-deck {
    border-radius: 6px;
    /* Wood side panels via left/right borders */
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-image-source: linear-gradient(
        180deg,
        #8b6914 0%,
        #a67c32 8%,
        #7a5c1a 16%,
        #9e7528 24%,
        #6d4e12 32%,
        #a07028 40%,
        #8b6020 48%,
        #b07e30 56%,
        #7a5818 64%,
        #9a7024 72%,
        #6d4e14 80%,
        #a87a2c 88%,
        #8b6418 100%
    );
    border-image-slice: 1;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(232, 213, 176, 0.05) inset;
}

/* Brushed metal faceplate overlay */
.tt-skin-tube-tape-deck .tt-wrapper {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(232, 213, 176, 0.02) 1px,
            transparent 2px,
            transparent 4px
        ),
        linear-gradient(
            180deg,
            rgba(232, 213, 176, 0.06) 0%,
            transparent 5%,
            transparent 95%,
            rgba(0, 0, 0, 0.15) 100%
        );
    padding: 20px;
}

/* ---------- Track Buttons ---------- */

.tt-skin-tube-tape-deck .tt-track-btn {
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.8em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.tt-skin-tube-tape-deck .tt-track-btn:hover {
    background: #3a2e22;
}

.tt-skin-tube-tape-deck .tt-track-btn.tt-active {
    border-bottom-color: rgba(180, 110, 10, 0.4);
    box-shadow: 0 0 8px rgba(212, 136, 28, 0.2);
}

/* ---------- Vacuum Tube Indicators ---------- */

/* Two glowing tubes positioned top-right and top-left of the wrapper */
.tt-skin-tube-tape-deck .tt-wrapper::before,
.tt-skin-tube-tape-deck .tt-wrapper::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 40% 35%,
        #f0a030 0%,
        #d4881c 30%,
        #a06010 60%,
        #6a3a08 100%
    );
    animation: tt-tube-glow 3s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

.tt-skin-tube-tape-deck .tt-wrapper::before {
    top: 8px;
    right: 12px;
}

.tt-skin-tube-tape-deck .tt-wrapper::after {
    top: 8px;
    right: 34px;
}

/* Ensure wrapper is relative for tube positioning */
.tt-skin-tube-tape-deck .tt-wrapper {
    position: relative;
}

/* ---------- Play Button ---------- */

.tt-skin-tube-tape-deck .tt-play-btn {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    background:
        radial-gradient(
            circle at 35% 35%,
            #3a2e22 0%,
            #2c2218 60%,
            #1c1410 100%
        );
    border: 2px solid rgba(212, 136, 28, 0.3);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(232, 213, 176, 0.1);
}

.tt-skin-tube-tape-deck .tt-play-btn:hover {
    border-color: rgba(212, 136, 28, 0.5);
}

.tt-skin-tube-tape-deck .tt-play-btn:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* ---------- Progress Bar — VU Meter Aesthetic ---------- */

.tt-skin-tube-tape-deck .tt-progress-bar {
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(212, 136, 28, 0.15);
    background:
        linear-gradient(
            180deg,
            #2a2018 0%,
            #3a2e22 40%,
            #2a2018 100%
        );
}

.tt-skin-tube-tape-deck .tt-progress-fill {
    border-radius: 1px;
    background: linear-gradient(
        180deg,
        #e8a030 0%,
        #d4881c 50%,
        #b06c14 100%
    );
    box-shadow: 0 0 6px rgba(212, 136, 28, 0.4);
}

/* ---------- Reel Indicators ---------- */

.tt-skin-tube-tape-deck .tt-track-selector {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
}

/* Left reel */
.tt-skin-tube-tape-deck .tt-track-selector::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at center,
            #1c1410 4px,
            #3a2e22 5px,
            #3a2e22 7px,
            #2c2218 8px,
            #3a2e22 9px,
            #2c2218 10px,
            transparent 11px
        );
    border: 2px solid rgba(212, 136, 28, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Right reel */
.tt-skin-tube-tape-deck .tt-track-selector::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at center,
            #1c1410 4px,
            #3a2e22 5px,
            #3a2e22 7px,
            #2c2218 8px,
            #3a2e22 9px,
            #2c2218 10px,
            transparent 11px
        );
    border: 2px solid rgba(212, 136, 28, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ---------- Time Display ---------- */

.tt-skin-tube-tape-deck .tt-time {
    color: var(--tt-accent);
    text-shadow: 0 0 4px rgba(212, 136, 28, 0.3);
    font-weight: 600;
}

/* ---------- Control Buttons ---------- */

.tt-skin-tube-tape-deck .tt-loop-btn,
.tt-skin-tube-tape-deck .tt-loudness-btn,
.tt-skin-tube-tape-deck .tt-ab-btn {
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.06em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

.tt-skin-tube-tape-deck .tt-loop-btn:hover,
.tt-skin-tube-tape-deck .tt-loudness-btn:hover,
.tt-skin-tube-tape-deck .tt-ab-btn:hover {
    background: #3a2e22;
}

.tt-skin-tube-tape-deck .tt-loop-btn.tt-active,
.tt-skin-tube-tape-deck .tt-loudness-btn.tt-active,
.tt-skin-tube-tape-deck .tt-ab-btn.tt-active {
    box-shadow: 0 0 8px rgba(212, 136, 28, 0.3);
}

/* ---------- Volume & Speed Sliders ---------- */

.tt-skin-tube-tape-deck .tt-volume-label,
.tt-skin-tube-tape-deck .tt-speed-label {
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(232, 213, 176, 0.6);
}

/* ---------- Meter ---------- */

.tt-skin-tube-tape-deck .tt-meter {
    border: 1px solid rgba(212, 136, 28, 0.2);
    border-radius: 2px;
}

.tt-skin-tube-tape-deck .tt-meter-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.65em;
    color: rgba(232, 213, 176, 0.5);
}

/* ---------- Loading Overlay ---------- */

.tt-skin-tube-tape-deck .tt-loading {
    background: rgba(28, 20, 16, 0.92);
}

.tt-skin-tube-tape-deck .tt-loading-text {
    color: var(--tt-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8em;
}

/* ---------- Loop Markers ---------- */

.tt-skin-tube-tape-deck .tt-loop-marker {
    background: var(--tt-accent);
    box-shadow: 0 0 4px rgba(212, 136, 28, 0.5);
}