/* =========================================================
   Echo Rig — detalhes de áudio da home de DJs.
   A página é tratada como uma faixa a tocar: deck com waveform
   (scroll = playhead), VU meter estéreo que reage à velocidade do
   scroll, divisores de espectro entre secções e a batida a 124 BPM.
   Tudo aria-hidden: é ambiente, não conteúdo.
   ========================================================= */

:root {
  --rig-beat: 0.4839s;              /* 60 / 124 BPM */
  --rig-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --rig-hot: #FF4D8D;               /* clip — único tom fora do roxo, só no topo do VU */
}

/* ---------------- batida: pontos das eyebrows ---------------- */
@keyframes rig-beat {
  0%   { transform: scale(1.55); box-shadow: 0 0 0 0 rgba(184, 126, 234, .55), 0 0 14px rgba(155, 78, 224, .9); }
  35%  { transform: scale(1);    box-shadow: 0 0 0 7px rgba(184, 126, 234, 0), 0 0 6px rgba(155, 78, 224, .5); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(184, 126, 234, 0), 0 0 6px rgba(155, 78, 224, .5); }
}
.rig-on .eyebrow > span:first-child {
  animation: rig-beat var(--rig-beat) cubic-bezier(.2, .7, .3, 1) infinite;
}

/* ---------------- calha mínima à direita ----------------
   Sem caixa nem texto fixo: só uma waveform fina, com a posição na
   página. Em repouso fica quase invisível; ao fazer scroll (ou ao
   passar o rato) acende, e o nome da secção + o tempo aparecem junto
   ao playhead durante um instante. */
.rig-deck {
  position: fixed;
  right: clamp(8px, 1vw, 16px);
  top: 50%;
  z-index: 80;
  width: 14px;
  height: clamp(110px, 20vh, 180px);
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.19, 1, .22, 1);
  --e: 0;
}
.rig-deck.is-on { opacity: .38; transform: translate(0, -50%); pointer-events: auto; }
.rig-deck.is-on.is-active,
.rig-deck.is-on:hover { opacity: 1; }

.rig-wave {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* zona de clique maior que o desenho, sem aumentar o desenho */
.rig-wave::before { content: ""; position: absolute; inset: 0 -10px; }
.rig-wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rig-wave .rig-wave__bg rect { fill: rgba(241, 241, 241, .2); }
.rig-wave .rig-wave__fg rect { fill: url(#rig-grad); }

.rig-wave__head {
  position: absolute;
  left: -3px; right: -3px;
  top: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: #fff;
  /* a energia do scroll acende o playhead */
  box-shadow: 0 0 calc(4px + 14px * var(--e)) rgba(212, 174, 255, calc(.45 + .55 * var(--e)));
  pointer-events: none;
}
.rig-wave__hover {
  position: absolute;
  left: -3px; right: -3px;
  top: 0;
  height: 1px;
  background: rgba(241, 241, 241, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.rig-wave:hover .rig-wave__hover { opacity: 1; }

/* etiqueta junto ao playhead: secção · tempo */
.rig-tag {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translate(6px, -50%);
  padding: 5px 8px;
  border: 1px solid var(--line, rgba(212, 174, 255, .16));
  border-radius: 8px;
  background: rgba(10, 8, 15, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  font: 600 9px/1 var(--rig-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.19, 1, .22, 1);
}
.rig-tag em { font-style: normal; color: var(--purple-200, #D4AEFF); margin-left: 6px; }
.rig-deck.is-tag .rig-tag,
.rig-deck:hover .rig-tag { opacity: 1; transform: translate(0, -50%); }

/* ---------------- divisores de espectro ---------------- */
.rig-eq {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, var(--container, 1180px));
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(241, 241, 241, .32);
  font: 600 9px/1 var(--rig-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
}
.rig-eq__bars {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.rig-eq__bars i {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--purple-200, #D4AEFF), var(--purple, #7928D1) 50%, var(--purple-200, #D4AEFF));
  opacity: .55;
  transform: scaleY(.06);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---------------- quando não há espaço ou movimento ---------------- */
/* abaixo de 1200px a margem lateral desaparece e a calha tapava os cards */
@media (max-width: 1199px), (max-height: 599px) {
  .rig-deck { display: none; }
}
@media (max-width: 640px) {
  .rig-eq { height: 44px; gap: 8px; }
  .rig-eq__lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rig-on .eyebrow > span:first-child { animation: none; }
  .rig-deck { transition: none; }
}