/* What I Do mixer: compact and full presentations built from the console components (assets/console/js).
   Everything is scoped under .mx-* so it never collides with the page. Layout is in "design pixels": each strip's inner part is drawn 200 px
   wide (340 on phones) and scaled with CSS zoom to the real strip width (set by mixer.js as --k). */

/* ---------- the bay ---------- */
#services .console-list { background: var(--c-channel, #0b0b0c); box-shadow: 0 0 0 1px #000, 0 12px 30px rgb(0 0 0 / 0.35); border-radius: 3px; overflow: visible; }
.mx-strip { position: relative; display: flex; flex-direction: column; min-width: 0; align-self: stretch; isolation: isolate; border-radius: 2px; }
.mx-paint { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mx-head { position: relative; padding: 14px 10px 0; }
.mx-head .ch-tape { display: block; }
.mx-inner { position: relative; width: 200px; flex: 1 1 auto; zoom: var(--k, 1); margin: 0 auto; display: grid; justify-items: center; align-content: start; gap: 12px; padding: 10px 0 18px; pointer-events: none; }
.mx-strip ssl-screw { position: absolute; z-index: 1; }
.mx-strip ssl-screw:nth-of-type(1) { left: 7px; top: 7px; } .mx-strip ssl-screw:nth-of-type(2) { right: 7px; top: 7px; }
.mx-strip ssl-screw:nth-of-type(3) { left: 7px; bottom: 7px; } .mx-strip ssl-screw:nth-of-type(4) { right: 7px; bottom: 7px; }

/* the overlay that makes the whole strip a button (the accessible control: aria-pressed, aria-controls); components sit under it, the fader above it */
.mx-hit { all: unset; position: absolute; inset: 0; z-index: 2; cursor: pointer; border-radius: 2px; touch-action: manipulation; }
.mx-hit:focus-visible { outline: 3px solid var(--accent, #D96548); outline-offset: -3px; }
.mx-strip[data-solo] { box-shadow: inset 0 3px 0 var(--accent, #D96548); }

/* ---------- keys ---------- */
.mx-keys { display: flex; gap: 10px; justify-content: center; align-items: flex-start; }
.mx-keys > div { display: block; line-height: 0; }
.mx-solo, .mx-cut { zoom: 0.4; }   /* the same size whether the strip is open or not */
.mx-solo ssl-button, .mx-cut ssl-button { display: inline-block; }
.mx-btn { zoom: 0.31; display: block; line-height: 0; }
.mx-bank .mx-btn { zoom: 0.31; }

/* ---------- decorative knob groups (full presentation only) ---------- */
.mx-strip[data-state="full"] .mx-inner { width: 372px; }
.mx-knobs { display: grid; grid-template-columns: 160px 160px; gap: 0 12px; width: 332px; }
.mx-mod { position: relative; height: 560px; }
.mx-mod > * { position: absolute; }
.mx-eq { border-left: 1px solid rgb(216 216 212 / 0.28); margin-left: -6px; }
.mx-pos, .mx-lab { line-height: 0; } .mx-pos { width: 0; height: 0; } .mx-pos > * { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); } .mx-lab { transform: translate(0, -50%); } .mx-lab.mx-c { transform: translate(-50%, -50%); }
.mx-mod ssl-label { font-size: 8.4px; }
.mx-pos ssl-knob { zoom: 0.5; margin: 0 !important; }
.mx-pos .mx-btn { zoom: 0.3; }
.mx-pos ssl-led { display: block; zoom: 0.3; margin: 0 !important; }
.mx-line { display: block; }
.mx-tick { width: 0; border-left: 1px solid rgb(216 216 212 / 0.5); }
.mx-brk { border-top: 1px solid rgb(216 216 212 / 0.5); box-sizing: border-box; }
.mx-brk.mx-l { border-left: 1px solid rgb(216 216 212 / 0.5); } .mx-brk.mx-r { border-right: 1px solid rgb(216 216 212 / 0.5); }
.mx-bank { display: grid; gap: 4px; width: 340px; }
.mx-bank .mx-btns { display: flex; justify-content: space-around; gap: 4px; align-items: flex-start; }
.mx-bank .mx-btns > span { display: grid; justify-items: center; gap: 0; line-height: 0; }

/* ---------- meter and fader ---------- */
.mx-mf { display: flex; justify-content: center; align-items: flex-start; gap: 14px; }
.mx-meterwrap { line-height: 0; zoom: 0.8; transition: zoom 200ms ease; }
.mx-strip[data-state="full"] .mx-meterwrap { zoom: 1; }
.mx-faderwrap { line-height: 0; position: relative; z-index: 3; pointer-events: auto; }

/* ---------- compact vs full ---------- */
.mx-strip[data-state="compact"] .mx-full-only { display: none; }
#services .console-list.has-solo .mx-strip[data-state="compact"] .mx-inner { opacity: 0.45; }
#services .console-list.has-solo .mx-strip[data-state="compact"] ssl-screw { opacity: 0.45; }

/* the bay grows and shrinks between the two presentations in 220 ms (mixer.js sets the heights) */
@media (min-width: 900px) {
  #services .console-list { padding: 6px; gap: 11px; transition: height 220ms cubic-bezier(0.2, 0.7, 0.2, 1), grid-template-columns 220ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .console-list > li:nth-child(1) .mx-strip { grid-column: 1; grid-row: 1; } .console-list > li:nth-child(2) .mx-strip { grid-column: 2; grid-row: 1; }
  .console-list > li:nth-child(3) .mx-strip { grid-column: 3; grid-row: 1; } .console-list > li:nth-child(4) .mx-strip { grid-column: 4; grid-row: 1; }
  .console-list > li:nth-child(5) .mx-strip { grid-column: 5; grid-row: 1; } .console-list > li:nth-child(6) .mx-strip { grid-column: 6; grid-row: 1; }
}

/* ---------- phones and small tablets: strips become rows; the open row shows the full module, rearranged ---------- */
@media (max-width: 899.98px) {
  #services .console-list { padding: 6px; gap: 8px; }
  .mx-strip { height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mx-head { flex: 1 1 0; min-width: 0; padding: 10px 8px 10px 14px; order: 1; }
  .mx-inner { width: 340px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "keys keys" "knobs knobs" "mf mf"; gap: 10px 12px; padding: 8px 0 14px; justify-items: center; order: 3; flex: 0 0 100%; }
  .mx-strip[data-state="full"] .mx-inner { width: 340px; }
  .mx-strip[data-state="compact"] .mx-inner { width: auto; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 4px; flex: 0 0 auto; order: 2; zoom: 1; }
  .mx-strip[data-state="compact"] .mx-mf { order: -1; } .mx-strip[data-state="compact"] .mx-meterwrap { zoom: 0.3; }
  
  .mx-keys { grid-area: keys; } .mx-knobs { grid-area: knobs; width: 332px; } .mx-bank { grid-area: bank; width: 190px; } .mx-mf { grid-area: mf; }
  .mx-strip[data-state="compact"] .mx-inner, .mx-strip[data-state="compact"] .mx-keys { display: flex; }
  .mx-strip ssl-screw { display: none; }
}

@media (prefers-reduced-motion: reduce) { #services .console-list, .mx-solo, .mx-meterwrap { transition: none; } }

@media (min-width: 900px) {
  .mx-inner { align-content: space-between; }
  .mx-strip[data-state="compact"] .mx-inner { grid-template-rows: auto 1fr; }
  .mx-strip[data-state="compact"] .mx-mf { align-self: end; }
  .mx-strip[data-state="compact"] .mx-slot-knobs, .mx-strip[data-state="compact"] .mx-slot-bank { display: none; }
}

/* ?mx-modules=eq: only the EQ section in the open strip (same width as a compact strip) */
.mx-knobs.mx-eqonly { grid-template-columns: 160px; width: 160px; }
.mx-eqonly .mx-eq { border-left: 0; margin-left: 0; }
@media (min-width: 900px) { .mx-eq-only .mx-strip[data-state="full"] .mx-inner { width: 200px; } }

/* the "click me!" note on one closed channel */
.mx-click { position: absolute; left: 50%; top: -84px; z-index: 1; display: grid; justify-items: center; gap: 4px; margin-left: -65px; width: 130px; pointer-events: none; color: var(--accent, #D96548); transform: rotate(-5deg); animation: mx-nudge 2.4s ease-in-out infinite; }
.mx-click span { padding: 6px 10px 7px; font: 400 18px/1.1 "Rock Salt", "Segoe Print", cursive; color: #0e0c08; background: #e6dcb8; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)); white-space: nowrap; }
.mx-click svg { margin-top: -2px; width: 38px; height: 43px; }
@keyframes mx-nudge { 50% { transform: rotate(-5deg) translateY(-4px); } }
.mx-clicked .mx-click, .mx-strip[data-solo] .mx-click { display: none; }
@media (max-width: 899.98px) { .mx-click { display: none; } }
@media (prefers-reduced-motion: reduce) { .mx-click { animation: none; } }
.mx-q { display: block; color: rgb(216 216 212 / 0.85); }

/* hover (desktop, mouse only): the strip grows a little and glows; its tape grows more and drifts as if it floated in a thick liquid */
@media (min-width: 900px) and (hover: hover) {
  .mx-strip { transition: scale 280ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 280ms ease; }
  .mx-strip:hover { scale: 1.025; z-index: 3; box-shadow: 0 0 0 1px rgb(217 101 72 / 0.55), 0 0 26px 3px rgb(217 101 72 / 0.38); }
  .mx-strip[data-solo]:hover { box-shadow: inset 0 3px 0 var(--accent, #D96548), 0 0 0 1px rgb(217 101 72 / 0.55), 0 0 26px 3px rgb(217 101 72 / 0.38); }
  .mx-head { z-index: 1; }
  .mx-head .ch-tape { transition: scale 320ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .mx-strip:hover .mx-head { z-index: 3; }
  .mx-strip:hover .mx-head .ch-tape { scale: 1.14; animation: mx-drift 3.6s ease-in-out infinite; }
}
@keyframes mx-drift {
  0%, 100% { transform: translate(0, 0) rotate(var(--tl, 0deg)); }
  22% { transform: translate(1.6px, -2.4px) rotate(calc(var(--tl, 0deg) + 0.7deg)); }
  46% { transform: translate(-1.2px, 1.4px) rotate(calc(var(--tl, 0deg) - 0.6deg)); }
  71% { transform: translate(1.4px, 1.8px) rotate(calc(var(--tl, 0deg) + 0.4deg)); }
}
@media (prefers-reduced-motion: reduce) { .mx-strip, .mx-head .ch-tape { transition: none; } .mx-strip:hover .mx-head .ch-tape { animation: none; scale: 1; } .mx-strip:hover { scale: 1; } }

/* ---------- tape: bigger, bolder and different on every strip (the values come from styleTape in mixer.js) ---------- */
#services .mx-head .ch-name {
  font-size: clamp(0.66rem, calc((100cqw - 1.4rem) / 10), 1.15rem); -webkit-text-stroke: 0.9px #0e0c08; text-shadow: 0.7px 0 0 #0e0c08, -0.4px 0 0 #0e0c08, 0 0.6px 1px rgb(14 12 8 / 0.4);
  background:
    var(--tape-fibre) var(--fx, 0) var(--fy, 0),
    linear-gradient(100deg, transparent calc(var(--cr, 40%) - 1.2%), rgb(0 0 0 / 0.11) var(--cr, 40%), rgb(255 255 255 / 0.3) calc(var(--cr, 40%) + 0.7%), transparent calc(var(--cr, 40%) + 2.2%)),
    radial-gradient(ellipse at var(--sx, 50%) var(--sy, 50%), rgb(125 85 25 / var(--sa, 0.15)), transparent 48%),
    linear-gradient(var(--curl, to right), rgb(95 65 20 / 0.3), transparent 15%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 35%, rgb(120 90 30 / 0.2)),
    var(--tone, #e6dcb8);
  clip-path: var(--clip);
}
@media (min-width: 900px) { #services .mx-head .ch-name { height: 6.2rem; } }

/* hover, turned up: the tape swells well past its strip and floats, swaying slowly */
@media (min-width: 900px) and (hover: hover) {
  .mx-head .ch-tape { transition: scale 380ms cubic-bezier(0.2, 0.9, 0.25, 1.25), filter 380ms ease; }
  .mx-strip:hover .mx-head .ch-tape { scale: 1.38; filter: drop-shadow(0 14px 12px rgb(0 0 0 / 0.55)); animation: mx-drift var(--dur, 3.8s) ease-in-out infinite; }
}
@keyframes mx-drift {
  0%, 100% { transform: translate(0, 0) rotate(calc(var(--tl, 0deg) + var(--hr, 3deg) * 0.4)); }
  22% { transform: translate(4px, -6px) rotate(calc(var(--tl, 0deg) + var(--hr, 3deg) * 1.2)); }
  46% { transform: translate(-4px, 3px) rotate(calc(var(--tl, 0deg) - var(--hr, 3deg) * 0.5)); }
  71% { transform: translate(5px, 5px) rotate(calc(var(--tl, 0deg) + var(--hr, 3deg) * 0.8)); }
}