/* ================================================================
   TONEKEEP — HERO (the real plugin UI, repurposed for the web)
   Adapted from tonekeep-ui/style.css, scoped under #hero so it
   can live inside a scrolling page.
   ================================================================ */

:root {
  --sky:        #E4EAF0;
  --sky-deep:   #D8E1E8;
  --knob:       #1E2530;
  --notch:      #4AB8DE;
  --text:       #182038;
  --text-dim:   #3A5878;
  --line:       #5A7898;
  --panel-line: rgba(90, 120, 152, 0.42);
  --font:       "Avenir Next", "Segoe UI", Inter, Arial, sans-serif;
}

#hero, #hero * { box-sizing: border-box; }

#hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(18px, 3vw, 42px) clamp(18px, 3vw, 42px) clamp(76px, 8svh, 112px);
  background: var(--bg, #f4f6f3);
  font-family: var(--font);
}

#hero #plugin {
  width: min(94vw, 1320px);
  height: min(82svh, 760px);
  min-height: 500px;
  margin-top: clamp(0px, 1.5svh, 18px);
  display: flex; flex-direction: column;
  background: linear-gradient(145deg, #EDF2F7 0%, #E4EAF0 48%, #DAE2E8 100%);
  border: 1px solid rgba(90, 120, 152, 0.28);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(16,24,43,0.16);
  overflow: hidden;
}

/* ── 3D Viewport ─────────────────────────────────────────────── */
#hero #viewport {
  flex: 1; min-height: 0;
  position: relative;
  overflow: hidden;
}
#hero #webgl-canvas {
  display: block; width: 100%; height: 100%;
  touch-action: none;
}
#hero #load-status {
  position: absolute; bottom: 6px; left: 10px;
  font-size: 8px; color: rgba(30,40,60,0.30);
  letter-spacing: 0.08em; pointer-events: none;
  text-transform: uppercase;
}

/* ── Corner anchor marks ─────────────────────────────────────── */
#hero .cnr {
  position: absolute; top: 14px;
  width: 190px; height: 78px;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 5px;
}
#hero #cnr-tl {
  left: 14px; width: 250px;
  border-top: 6px solid #E4EAF1; border-left: 6px solid #E4EAF1;
  padding: 21px 0 0 20px;
}
#hero #cnr-tr {
  right: 14px; width: 300px;
  border-top: 6px solid #E4EAF1; border-right: 6px solid #E4EAF1;
  align-items: flex-end; padding: 21px 20px 0 0;
}
#hero .cnr-text {
  font-size: 30px; font-weight: 800;
  color: #E4EAF1; letter-spacing: 0.12em;
  white-space: nowrap; line-height: 1; text-transform: uppercase;
}
#hero .cnr-sub {
  font-size: 22px; font-weight: 800;
  color: #A8C7DC; letter-spacing: 0.08em;
  white-space: nowrap; line-height: 1; text-transform: uppercase;
}

/* ── Audio demo toggle (top-right under the corner mark) ──────── */
.audio-toggle {
  position: absolute; top: 70px; right: 22px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 11px;
  border: 1.5px solid rgba(228,234,241,0.55);
  border-radius: 999px;
  background: rgba(30,37,48,0.42);
  color: #E4EAF1;
  font: 700 12px/1 var(--font);
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background .15s, border-color .15s, transform .1s;
}
.audio-toggle:hover { background: rgba(30,37,48,0.62); border-color: #E4EAF1; }
.audio-toggle:active { transform: translateY(1px); }
.audio-ico {
  width: 13px; height: 13px; display: inline-block;
  background: currentColor;
  /* speaker-muted glyph */
  -webkit-mask: var(--ico-muted) center/contain no-repeat;
          mask: var(--ico-muted) center/contain no-repeat;
}
.audio-toggle[data-state="muted"]   { --ico-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 5V4L7 9H3zm13.5 3 2.7-2.7-1.4-1.4L15 10.6 12.3 7.9l-1.4 1.4L13.6 12l-2.7 2.7 1.4 1.4L15 13.4l2.7 2.7 1.4-1.4L16.5 12z'/%3E%3C/svg%3E"); }
.audio-toggle[data-state="playing"] { --ico-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 5V4L7 9H3zm13 3a4 4 0 0 0-2.2-3.6v7.2A4 4 0 0 0 16 12zm-2.2-8v2.1a6 6 0 0 1 0 11.8V21a8 8 0 0 0 0-17z'/%3E%3C/svg%3E"); }
.audio-toggle.pulse { animation: audiopulse 1.6s ease-in-out infinite; }
@keyframes audiopulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,184,222,0.0); }
  50%     { box-shadow: 0 0 0 6px rgba(74,184,222,0.18); }
}

/* ── Scroll cue ──────────────────────────────────────────────── */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3svh, 34px);
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 46px;
  color: #1D2530;
  filter: drop-shadow(0 0 10px rgba(29,37,48,0.22));
  text-decoration: none;
}
.scroll-cue:hover { color: #2b3948; }
.scroll-cue .chev {
  width: 24px; height: 24px;
  border-right: 4px solid currentColor; border-bottom: 4px solid currentColor;
  transform: rotate(45deg);
  animation: bob 1.7s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(3px,3px); } }

/* ── Knobs strip + gain bars ─────────────────────────────────── */
#hero #controls {
  flex-shrink: 0; height: 108px;
  display: flex; align-items: center;
  padding: 0 16px; gap: 4px;
  background: var(--sky);
  border-top: 1px solid rgba(90, 120, 152, 0.22);
}
#hero #knobs-strip {
  flex: 1; display: flex; align-items: center;
  justify-content: space-evenly; min-width: 0;
}
#hero .gain-bar {
  flex-shrink: 0; width: 46px; height: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
#hero .gain-bar-lbl { font-size: 12px; font-weight: 800; color: var(--text-dim); letter-spacing: 0.10em; }
#hero .gain-clip {
  width: 14px; height: 3px; border-radius: 2px;
  background: rgba(30,37,48,0.15);
  transition: background .06s linear, box-shadow .06s linear;
}
#hero .gain-clip.hot { background: #D24A3A; box-shadow: 0 0 5px rgba(210,74,58,0.72); }
#hero .gain-bar-track {
  flex: 1; width: 18px;
  background: rgba(30,37,48,0.16);
  border: 1px solid var(--panel-line); border-radius: 3px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
#hero .gain-bar-fill {
  --meter-clip: 100%;
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 2px;
  background: linear-gradient(to top, #4AB8DE 0%, #28D8A0 58%, #F0A030 82%, #D24A3A 100%);
  clip-path: inset(var(--meter-clip) 0 0 0);
  transition: clip-path .05s linear;
}
#hero .gain-bar-zero { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.30); pointer-events: none; }

#hero .k { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 88px; cursor: ns-resize; }
#hero .k-lbl { font-size: 12px; font-weight: 800; color: var(--text-dim); letter-spacing: 0.10em; white-space: nowrap; text-transform: uppercase; }
#hero .k-val { font-size: 12px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; }
#hero .knob-svg { width: 55px; height: 55px; display: block; touch-action: none; cursor: ns-resize; overflow: visible; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.28)); }
#hero .k-body { fill: var(--knob); }
#hero .k-notch { fill: var(--notch); }
#hero .knob-svg.active .k-body { fill: #2c2824; }
#hero .knob-svg.active .k-notch { fill: #f0a030; }
#hero .knob-svg:hover .k-body { fill: #242220; }

/* ── Download rows (replace the plugin's CAB IR / REV selectors) ─ */
#hero #downloads {
  flex-shrink: 0;
  display: flex; gap: 10px;
  padding: 10px 16px 16px;
  background: var(--sky);
}
.dl-row {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 18px;
  background: var(--knob);
  border: 2px solid var(--panel-line); border-radius: 6px;
  color: #DCEAF4; text-decoration: none;
  transition: border-color .15s, background .15s, transform .08s, box-shadow .15s;
}
.dl-row:hover {
  border-color: var(--notch);
  background: #232c3a;
  box-shadow: 0 6px 22px rgba(20,30,48,0.28);
}
.dl-row:active { transform: translateY(1px); }
.dl-os { flex-shrink: 0; color: #A8C8DC; display: inline-flex; }
.dl-row:hover .dl-os { color: var(--notch); }
.dl-text { display: flex; flex-direction: column; line-height: 1.05; flex: 1; min-width: 0; }
.dl-line1 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #7E9AB4; }
.dl-line2 { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; color: #EAF3FA; white-space: nowrap; }
.dl-fmt { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #6E8AA6; text-transform: uppercase; }

/* ── Responsive: tighten the plugin for small screens ────────── */
@media (max-width: 760px) {
  #hero { padding: 12px; }
  #hero #plugin {
    width: 100%;
    height: calc(100svh - 56px);
    min-height: 520px;
    border-radius: 12px;
  }
  #hero #cnr-tl { width: 60%; padding-left: 14px; }
  #hero #cnr-tr { width: 60%; }
  #hero .cnr-text { font-size: 22px; }
  #hero .cnr-sub { font-size: 15px; }
  #hero #controls { height: auto; flex-wrap: wrap; padding: 10px 10px 4px; gap: 8px 2px; }
  #hero #knobs-strip { flex: 1 1 100%; flex-wrap: wrap; justify-content: space-around; gap: 8px 0; order: 3; }
  #hero .k { width: 22%; }
  #hero .gain-bar { height: 60px; order: 1; }
  #hero #downloads { flex-direction: column; padding: 10px; }
  .dl-row { height: 52px; }
  .audio-toggle { top: auto; bottom: 14px; right: 12px; }
}

@media (max-width: 420px) {
  #hero {
    height: 92svh;
    min-height: 600px;
    padding: 12px 12px 60px;
  }
  #hero #plugin {
    height: calc(92svh - 84px);
    min-height: 520px;
  }
  #hero #controls {
    display: none;
  }
  #hero #cnr-tl {
    top: 12px;
    left: 12px;
    width: auto;
    height: auto;
    border-width: 4px;
    padding: 14px 0 0 14px;
  }
  #hero #cnr-tr {
    display: none;
  }
  #hero .cnr-text {
    font-size: 24px;
    letter-spacing: 0.08em;
  }
  .audio-toggle {
    top: 14px;
    right: 14px;
    bottom: auto;
  }
  #hero #downloads {
    flex-direction: column;
    gap: 6px;
    padding: 10px;
  }
  .dl-row {
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 10px;
  }
  .dl-line1,
  .dl-fmt {
    display: none;
  }
  .dl-text {
    flex: 0 1 auto;
  }
  .dl-line2 {
    font-size: 15px;
  }
  .scroll-cue {
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue .chev, .audio-toggle.pulse { animation: none; }
}