/* ==========================================================================
   Waveform navigation — persistent, shared across every section.
   Exact Figma values: container 2808x268 at (3042,110) in the 6000x3375
   canvas. Bars: 8px wide / 17px gap when inactive; the ACTIVE group's own
   bars go to 13px wide / 11.7px gap (the group-to-group gap stays 17px).
   Inactive opacity 84%. Active label 48px / tracking 3.84px with a blue
   glow; inactive label 40px / tracking 3.2px.
   ========================================================================== */

.wave-nav {
  position: absolute;
  left: 3042px;
  top: 110px;
  width: 2808px;
  height: 268px;
  pointer-events: auto;
  --bar-color: #fff;
}

/* Light-background sections (build-up / break / release) use dark bars+text */
.wave-nav[data-tone="light"] { --bar-color: #0a0a0a; }

.wave-nav__bars {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  gap: 17px;
}

.wave-nav__group {
  display: flex;
  align-items: center;
  gap: 17px;
  height: 100%;
  opacity: 0.84;
  transition: opacity 500ms ease, gap 450ms cubic-bezier(.2,.8,.2,1), filter 450ms ease;
  cursor: pointer;
  background: none;
  padding: 0;
}

.wave-nav__bar {
  flex: none;
  width: 8px;
  border-radius: 4px;
  background: var(--bar-color);
  align-self: center;
  transition: width 450ms cubic-bezier(.2,.8,.2,1), box-shadow 450ms ease, background 450ms ease;
}

/* current section = fully lit, thicker bars, tight gap, blue glow */
.wave-nav__group.is-active {
  opacity: 1;
  gap: 11.7px;
  filter: drop-shadow(-2px 3px 10.5px rgba(var(--blue-glow), 0.55));
}
.wave-nav__group.is-active .wave-nav__bar { width: 13px; }

/* hovered (but not active) = a touch taller / brighter, softer glow */
.wave-nav__group.is-hover:not(.is-active) {
  opacity: 0.95;
  filter: drop-shadow(-1px 2px 7px rgba(var(--blue-glow), 0.35));
}
.wave-nav__group.is-hover:not(.is-active) .wave-nav__bar {
  transform: scaleY(1.12);
}

/* This layer spans the whole nav (for absolutely-positioned labels/lines),
   but must not block pointer events over the bars row beneath it — only the
   label buttons themselves should be interactive. */
.wave-nav__labels { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.wave-nav__label { pointer-events: auto; }

.wave-nav__line {
  position: absolute;
  width: 4px;
  background: var(--bar-color);
  opacity: 0.5;
}

.wave-nav__label {
  position: absolute;
  top: 231px;
  height: 37px;
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 3.2px;
  line-height: 1;
  color: var(--bar-color);
  opacity: 0.84;
  white-space: nowrap;
  background: none;
  padding: 0;
  transform-origin: left center;
  transition: opacity 500ms ease, font-size 450ms cubic-bezier(.2,.8,.2,1),
              letter-spacing 450ms ease, text-shadow 450ms ease, transform 450ms ease;
}

.wave-nav__label.is-hover:not(.is-active) {
  opacity: 0.95;
  transform: scale(1.05);
}

.wave-nav__label.is-active {
  opacity: 1;
  font-size: 48px;
  letter-spacing: 3.84px;
  top: 227px;
  text-shadow: -2px 3px 21px rgba(var(--blue-glow), 0.6);
}

/* Cover + outro-hero: no section is "current", show the plain resting nav */
body.on-cover .wave-nav__group,
body.on-cover .wave-nav__label {
  opacity: 1 !important;
  filter: none !important;
  font-size: 40px !important;
  letter-spacing: 3.2px !important;
  gap: 17px !important;
}
body.on-cover .wave-nav__bar { width: 8px !important; }