/* ============================================================
   ABOUT: la ficha-sintetizador. En reposo se ven los stats y la
   onda decorativa; con .oscillator aparecen el osciloscopio (que
   cruza toda la pantalla y se toca como un theremin), los tres
   potes, los modulos con su modal (y su ON/OFF), el volumen y
   los chips. El JS que lo mueve esta en js/about.js y js/synth.js.
   ============================================================ */
.osc-about {
    padding: 0; /* la onda y el osciloscopio van de lado a lado */
}
.osc-inner {
    width: 100vw;
    max-height: 92vh;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 24px 0;
}
.osc-inner::-webkit-scrollbar { display: none; }
.osc-about:not(.hidden) .osc-inner { animation: oscAboutIn 0.3s ease; }
@keyframes oscAboutIn { from { opacity: 0; transform: translateY(16px); } }

.oscab { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.oscab-head { text-align: center; }
.oscab-name { font-size: clamp(48px, 9vw, 96px); line-height: 0.9; color: var(--highlight); text-shadow: 3px 3px 0 #000; }
.oscab-role { font-size: clamp(18px, 2.6vw, 26px); }

/* onda decorativa (reposo) ↔ osciloscopio en vivo, ambos a pantalla completa */
.oscab-wave {
    display: flex; align-items: flex-end; justify-content: space-between;
    width: 100vw; padding: 0 10px; height: 60px;
}
.oscab-bar { width: 5px; height: 100%; background: var(--highlight); transform-origin: bottom; animation: oscabWave 1.1s ease-in-out infinite; }
@keyframes oscabWave { 0%, 100% { transform: scaleY(0.18); } 50% { transform: scaleY(1); } }
.oscab-scope { display: none; width: 100vw; height: 140px; touch-action: none; }
.oscab.oscillator .oscab-wave { display: none; }
.oscab.oscillator .oscab-scope { display: block; }

/* pista de que el sinte se toca (solo en modo oscilador) */
.oscab-hint { display: none; font-size: 15px; color: var(--dim); margin-top: -12px; }
.oscab.oscillator .oscab-hint { display: block; }

/* ficha: los tres stats, solo en reposo */
.oscab-desk { display: flex; gap: clamp(16px, 4vw, 46px); align-items: flex-end; padding: 10px 0; }
.oscab.oscillator .oscab-desk { display: none; }
.oscab-fader { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; }
.oscab-track { position: relative; width: 10px; height: 180px; background: rgba(255, 255, 255, 0.14); }
.oscab-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--highlight); transform-origin: bottom; animation: oscabFill 0.5s ease-out; }
@keyframes oscabFill { from { transform: scaleY(0); } }
.oscab-knob { position: absolute; left: 50%; width: 30px; height: 14px; background: #fff; transform: translate(-50%, 50%); box-shadow: 0 0 0 3px #000; }
.oscab-flbl { font-size: 14px; color: var(--dim); text-align: center; line-height: 1.15; }

/* potenciometros: solo en modo oscilador */
.oscab-pots { display: none; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 6vw, 80px); }
.oscab.oscillator .oscab-pots { display: flex; }
.oscab-pot { display: flex; flex-direction: column; align-items: center; gap: 8px; width: clamp(104px, 28vw, 140px); }
.oscab-dial {
    position: relative; width: 74px; height: 74px; border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #2a2a2a, #0d0d0d 70%);
    box-shadow: inset 0 0 0 3px var(--highlight), 0 3px 0 #000;
    transform: rotate(var(--a, 0deg)); transition: transform 0.12s ease;
    cursor: ns-resize; touch-action: none;
}
.oscab-tick { position: absolute; left: 50%; top: 7px; width: 4px; height: 24px; background: var(--highlight); transform: translateX(-50%); }
.oscab-plbl { font-size: 15px; color: var(--dim); }
.oscab-pval { font-size: 19px; color: var(--highlight); text-align: center; line-height: 1.1; }

/* modulos con modal */
.oscab-mods { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; }
.oscab.oscillator .oscab-mods { display: flex; }
.oscab-mod {
    font-size: 19px; line-height: 1; padding: 5px 15px 7px;
    color: var(--text); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.32);
    transition: transform 0.15s ease, color 0.15s ease;
}
.oscab-mod:hover, .oscab-mod:focus-visible { color: var(--highlight); transform: translateY(-2px) rotate(-1.5deg); outline: none; }
.oscab-mod.on { background: var(--highlight); color: #000; box-shadow: none; clip-path: polygon(0 12%, 97% 0, 100% 90%, 3% 100%); }

/* volumen y cancion: solo en modo oscilador */
.oscab-vol { display: none; align-items: center; gap: 12px; }
.oscab.oscillator .oscab-vol { display: flex; }
.oscab-vbtn {
    font-size: 26px; line-height: 1; width: 34px; height: 34px;
    color: var(--text); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    transition: color 0.15s, transform 0.15s;
}
.oscab-vbtn:hover, .oscab-vbtn:focus-visible { color: var(--highlight); transform: scale(1.12); outline: none; }
.oscab-vmeter { display: inline-flex; gap: 4px; }
.oscab-vseg { width: 9px; height: 20px; background: rgba(255, 255, 255, 0.18); }
.oscab-vseg.on { background: var(--highlight); }

/* mismo chip que el "sound" del home (aqui .controls no aplica, se repite el look) */
.oscab-chip {
    font-size: 20px; line-height: 1; padding: 2px 14px 4px; margin-left: 8px;
    color: var(--text-window); opacity: 0.45;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    transform: rotate(2.5deg); transition: transform 0.15s ease;
}
.oscab-chip.on {
    opacity: 1; background: var(--highlight); color: #000; text-shadow: none;
    clip-path: polygon(0 14%, 96% 0, 100% 88%, 4% 100%);
}
.oscab-chip:hover, .oscab-chip:focus-visible { transform: rotate(2.5deg) scale(1.12); outline: none; }

.oscab-osc-btn {
    font-size: 22px; color: #000; background: var(--highlight);
    padding: 6px 20px; transform: rotate(-1deg);
    box-shadow: 3px 3px 0 #000; transition: transform 0.15s ease;
}
.oscab-osc-btn:hover, .oscab-osc-btn:focus-visible { transform: rotate(-2deg) scale(1.06); outline: none; }

/* ===== Modal de cada modulo ===== */
.oscab-modal {
    position: fixed; inset: 0; z-index: 70;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 4, 14, 0.72); padding: 20px;
}
.oscab-modal.hidden { display: none; }
.oscab-modal-box {
    width: min(420px, 92vw);
    background: #0b0b16;
    box-shadow: 0 0 0 3px var(--highlight), 6px 6px 0 rgba(0, 0, 0, 0.7);
    padding: 14px 18px 18px;
    animation: oscabModalIn 0.18s ease-out;
}
@keyframes oscabModalIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
.oscab-modal-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; color: var(--highlight); font-size: 28px; line-height: 1;
}
.oscab-modal-title { flex: 1; }
.oscab-modal-close { font-size: 30px; line-height: 1; padding: 0 6px; color: var(--text); }
.oscab-modal-close:hover, .oscab-modal-close:focus-visible { color: var(--highlight); outline: none; }

/* ON/OFF del efecto en la cabecera del modal */
.oscab-modal-onoff {
    font-size: 17px; line-height: 1; padding: 4px 13px 6px;
    color: var(--dim); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
    transition: transform 0.15s ease;
}
.oscab-modal-onoff:hover, .oscab-modal-onoff:focus-visible { color: var(--highlight); transform: scale(1.08); outline: none; }
.oscab-modal-onoff.on {
    background: var(--highlight); color: #000; box-shadow: none;
    clip-path: polygon(0 12%, 97% 0, 100% 90%, 3% 100%);
}
.oscab-modal-onoff.hidden { display: none; }

.oscab-prow { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.oscab-pname { flex: 0 0 96px; font-size: 17px; color: var(--dim); }
.oscab-pnum { flex: 0 0 84px; text-align: right; font-size: 17px; color: var(--highlight); }
.oscab-prange {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 10px; background: rgba(255, 255, 255, 0.16); outline: none;
}
.oscab-prange::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 8px; height: 20px; background: var(--highlight); box-shadow: 0 0 0 2px #000;
}
.oscab-prange::-moz-range-thumb {
    width: 8px; height: 20px; border: none; border-radius: 0;
    background: var(--highlight); box-shadow: 0 0 0 2px #000;
}