/* ===================================================================
   RIPPLES - plugin audio demos (A/B bench + one-shot pad grid)
   Nocturne tokens only. Pairs with js/ab-demo.js.
   =================================================================== */

.abd{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(194,74,44,.09), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  padding:clamp(20px,3vw,34px);
  overflow:hidden;
}
.abd::before{
  /* faint scanline so the panel reads as a piece of gear, not a card */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(241,235,222,.022) 0 1px,transparent 1px 3px);
}
.abd > *{position:relative}

/* ---------------- header row ---------------- */
.abd-head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(18px,2.4vw,26px);
}
.abd-src{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-dim);
}
.abd-src b{color:var(--cream);font-weight:500}
.abd-label{
  font-family:"Bebas Neue",sans-serif;font-size:1.05rem;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cream);
}
.abd-badges{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.abd-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-faint);border:1px solid var(--line);border-radius:999px;padding:5px 10px;
  white-space:nowrap;
}
.abd-badge i{width:5px;height:5px;border-radius:50%;background:var(--cream-faint);flex:none}
.abd.is-ready .abd-badge{color:var(--cream-dim);border-color:var(--line-strong)}
.abd.is-locked .abd-status i{background:var(--accent-bright);box-shadow:0 0 8px var(--accent-glow)}

/* ---------------- transport ---------------- */
.abd-stage{display:flex;align-items:center;gap:clamp(14px,2vw,22px)}

.abd-play{
  flex:none;width:clamp(52px,5vw,62px);height:clamp(52px,5vw,62px);border-radius:50%;
  border:1px solid var(--line-strong);background:rgba(241,235,222,.04);
  color:var(--cream);cursor:pointer;display:grid;place-items:center;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .18s var(--ease);
}
.abd-play:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.04)}
.abd-play:active{transform:scale(.97)}
.abd-play svg{width:20px;height:20px;fill:currentColor;pointer-events:none}
.abd-play .ic-pause,
.abd.is-playing .abd-play .ic-play{display:none}
.abd.is-playing .abd-play .ic-pause{display:block}
.abd.is-playing .abd-play{background:var(--accent);border-color:var(--accent)}
.abd.is-loading .abd-play{animation:abd-pulse 1.1s var(--ease) infinite}
@keyframes abd-pulse{0%,100%{opacity:1}50%{opacity:.45}}

.abd-wave{
  flex:1;min-width:0;height:clamp(58px,7vw,80px);cursor:pointer;position:relative;
}
.abd-canvas{display:block;width:100%;height:100%}

.abd-time{
  flex:none;font-family:var(--mono);font-size:.75rem;color:var(--cream-dim);
  font-variant-numeric:tabular-nums;min-width:74px;text-align:right;
}
.abd-time .abd-cur{color:var(--cream)}
.abd-time .abd-dur{opacity:.5}

/* ---------------- the A/B switch (the hero) ---------------- */
.abd-switch{
  position:relative;display:flex;flex-wrap:wrap;gap:4px;
  margin-top:clamp(18px,2.4vw,26px);
  padding:5px;border:1px solid var(--line);border-radius:999px;
  background:rgba(8,7,6,.5);
}
.abd-pill{
  position:absolute;top:0;left:0;border-radius:999px;
  background:var(--accent);box-shadow:0 4px 18px var(--accent-glow);
  transition:transform .34s var(--ease),width .34s var(--ease),height .34s var(--ease);
  pointer-events:none;
}
.abd-chip{
  position:relative;z-index:1;flex:1 1 0;   /* equal widths - no chip looks "more selected" than another */
  border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.02em;
  color:var(--cream-dim);padding:11px 18px;border-radius:999px;white-space:nowrap;
  transition:color .25s var(--ease);
}
.abd-chip:hover{color:var(--cream)}
.abd-chip.is-on{color:var(--cream)}
/* dry sits apart - it is the reference, not another flavor */
.abd-chip[data-clip="dry"]{flex:0 0 auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.abd-chip[data-clip="dry"] + .abd-chip::before{
  content:"";position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:var(--line-strong);
}

.abd-note{
  margin-top:16px;color:var(--cream-dim);font-size:.95rem;line-height:1.6;max-width:62ch;min-height:3em;
}
.abd-note--in{animation:abd-fade .38s var(--ease)}
@keyframes abd-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.abd-hint{
  margin-top:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream-faint);
}
.abd.is-playing .abd-hint{color:var(--accent-bright)}

/* ---------------- pad grid (one-shots) ---------------- */
.abd-pads{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:10px;margin-top:clamp(16px,2vw,22px);
}
.abd-pad{
  position:relative;overflow:hidden;
  aspect-ratio:1.35;border:1px solid var(--line);border-radius:11px;
  background:linear-gradient(180deg,rgba(241,235,222,.045),rgba(241,235,222,.012));
  color:var(--cream-dim);cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  display:grid;place-items:center;text-align:center;padding:8px;
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;
}
.abd-pad:hover{color:var(--cream);border-color:var(--line-strong)}
.abd-pad::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(120% 120% at 50% 100%, var(--accent), transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.abd-pad.is-hit{color:var(--cream);border-color:var(--accent);transform:scale(.965)}
.abd-pad.is-hit::after{opacity:.55;transition:opacity .04s}
.abd-pad[data-role="dry"],
.abd-pad[data-clip="dry"]{
  border-style:dashed;border-color:var(--line-strong);color:var(--cream);
  background:rgba(8,7,6,.4);
}
.abd-pads.is-loading .abd-pad{opacity:.5}

/* paired sets (Detonate): source -> blast, bound together so the
   before/after relationship is readable without a caption */
.abd-pads--pairs{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.abd-pair{
  display:flex;align-items:stretch;gap:12px;
  border:1px solid var(--line);border-radius:14px;padding:12px;
  background:rgba(8,7,6,.35);
}
.abd-pair .abd-pad{flex:1;aspect-ratio:auto;min-height:82px}
.abd-arrow{
  flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:1.05rem;color:var(--cream-faint);
}
.abd-pair .abd-pad[data-role="wet"]{
  border-style:solid;border-color:rgba(194,74,44,.4);color:var(--cream);
  background:linear-gradient(180deg,rgba(194,74,44,.14),rgba(194,74,44,.04));
}

/* ---------------- no-JS / no-WebAudio fallback ---------------- */
.abd-fallback{display:grid;gap:8px}
.abd-fallback audio{width:100%}
.abd--js .abd-fallback{display:none}
.abd:not(.abd--js) .abd-stage,
.abd:not(.abd--js) .abd-switch,
.abd:not(.abd--js) .abd-pads,
.abd:not(.abd--js) .abd-hint{display:none}

/* ---------------- mobile ---------------- */
@media (max-width:720px){
  .abd-head{gap:10px}
  .abd-badges{margin-left:0;width:100%}
  /* the waveform is the point - give it the row and drop the clock below */
  .abd-stage{flex-wrap:wrap;row-gap:4px}
  .abd-time{order:3;width:100%;min-width:0;font-size:.7rem;text-align:right}
  .abd-switch{border-radius:14px;flex-direction:column;gap:2px}
  .abd-pill{border-radius:11px}
  .abd-chip{flex:1 1 auto;text-align:left}
  .abd-chip[data-clip="dry"] + .abd-chip::before{display:none}
  .abd-note{min-height:0}
  .abd-pads{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
  .abd-pads--pairs{grid-template-columns:1fr}
  .abd-pair{padding:10px;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .abd-pill,.abd-chip,.abd-play,.abd-pad{transition:none}
  .abd-note--in{animation:none}
  .abd.is-loading .abd-play{animation:none}
}


/* ===================================================================
   COMPACT - the variant that lives in the hero, directly under the
   product shot. Same component, roughly a third of the height: no
   section heading, no source line, no usage hint.
   =================================================================== */
.abd--compact{
  border-radius:10px;
  padding:14px clamp(14px,1.6vw,18px) 16px;
}
.abd--compact .abd-head{margin-bottom:12px;align-items:center;gap:10px}
.abd--compact .abd-badge{font-size:.56rem;padding:4px 8px;gap:5px}
.abd--compact .abd-badge i{width:4px;height:4px}

.abd--compact .abd-stage{gap:12px}
.abd--compact .abd-play{width:40px;height:40px}
.abd--compact .abd-play svg{width:15px;height:15px}
.abd--compact .abd-wave{height:42px}
.abd--compact .abd-time{font-size:.66rem;min-width:62px}

.abd--compact .abd-switch{margin-top:12px;padding:4px;gap:3px}
.abd--compact .abd-chip{padding:8px 12px;font-size:.76rem}
.abd--compact .abd-chip[data-clip="dry"]{font-size:.64rem;padding:8px 12px}

.abd--compact .abd-note{
  margin-top:11px;font-size:.82rem;line-height:1.5;color:var(--cream-faint);
  min-height:0;max-width:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.abd--compact .abd-pads{grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:6px;margin-top:0}
.abd--compact .abd-pad{aspect-ratio:1.7;border-radius:8px;font-size:.62rem;letter-spacing:.08em}
.abd--compact .abd-pads--pairs{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.abd--compact .abd-pair{padding:7px;gap:7px;border-radius:10px}
.abd--compact .abd-pair .abd-pad{min-height:52px;aspect-ratio:auto}
.abd--compact .abd-arrow{font-size:.8rem}

@media (max-width:720px){
  .abd--compact .abd-pads{grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}
  .abd--compact .abd-pads--pairs{grid-template-columns:1fr}
}