/* ==========================================================================
   TuneDance frontend — the pivot.

   The page's turn from complaint to product, and the one dark band on an
   otherwise light page. Three layers behind the words:

   - Ground: white. The band stays light like the page around it; what sets
     it apart is colour, not darkness.
   - Aurora: three big blurred pools in the brand green, pink and blue,
     drifting slowly, so the band is lit from within and never still.
   - Spectrum: a full-width analyser along the bottom in the green-to-blue
     gradient, every bar breathing on its own clock.

   The bottom edge is cut by a waveform in the next section's ground colour,
   so the light section rises up through the spectrum instead of starting at
   a line. Everything animated is off under Reduce Motion.
   ========================================================================== */

.pivot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 7.6vw, 120px) 24px clamp(170px, 20vw, 300px);
  background: linear-gradient(150deg, #ffffff 0%, #f6fbff 50%, #fbfaf8 100%);
  color: var(--on-stage);
  text-align: center;
}

/* --- Aurora -------------------------------------------------------------- */

.pivot__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.pivot__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.pivot__orb--green {
  left: -8%;
  top: -30%;
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(0, 201, 126, 0.55) 0%, rgba(0, 201, 126, 0) 66%);
  animation: pivot-drift-a 22s ease-in-out infinite alternate;
}

.pivot__orb--teal {
  left: 30%;
  bottom: -50%;
  width: 54vw;
  height: 54vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(circle, rgba(255, 93, 143, 0.42) 0%, rgba(255, 93, 143, 0) 66%);
  animation: pivot-drift-b 26s ease-in-out infinite alternate;
}

.pivot__orb--blue {
  right: -14%;
  top: -20%;
  width: 60vw;
  height: 60vw;
  max-width: 860px;
  max-height: 860px;
  background: radial-gradient(circle, rgba(14, 139, 255, 0.5) 0%, rgba(14, 139, 255, 0) 66%);
  animation: pivot-drift-c 19s ease-in-out infinite alternate;
}

@keyframes pivot-drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(14vw, 10vh) scale(1.18); }
}

@keyframes pivot-drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-16vw, -8vh) scale(1.12); }
}

@keyframes pivot-drift-c {
  from { transform: translate(0, 0) scale(1.08); }
  to   { transform: translate(-10vw, 14vh) scale(0.94); }
}

/* --- Spectrum ------------------------------------------------------------ */

.pivot__spectrum {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: clamp(180px, 24vw, 340px);
  opacity: 0.5;
  pointer-events: none;
}

/* Each bar on its own duration and a negative delay from its index, so the
   whole row is mid-motion when the reader arrives and never falls into step. */
.pivot__spectrum rect {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: pivot-bar var(--d, 2.4s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -170ms);
}

@keyframes pivot-bar {
  from { transform: scaleY(0.28); }
  to   { transform: scaleY(1); }
}

/* --- Words --------------------------------------------------------------- */

.pivot__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
}

/* Same gradient as "That idea becomes music" two sections down, so the
   question and its answer are set in one voice. Static: a sliding gradient
   was tried here and read as a gimmick next to the pools. */
.pivot__q {
  margin: 0 auto clamp(22px, 2.8vw, 38px);
  max-width: 22ch;
  font-size: clamp(34px, 5.4vw, 78px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.042em;
  background-image: linear-gradient(96deg, #06d492 0%, #00bd7f 42%, #0a7fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-wrap: balance;
}

/* A real measure, not a column: the old block held this to 44ch and it read
   as a caption. */
.pivot__a {
  margin: 0 auto;
  max-width: 60ch;
  font-size: clamp(18px, 1.9vw, 25px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #3d434d;
  text-wrap: pretty;
}

/* The bold clause is the promise, so it gets its own lines under the set-up
   rather than starting three words from the end of one. Balanced, so the two
   lines it makes are even instead of a long one and an orphan. */
.pivot__a strong {
  display: block;
  margin-top: 0.3em;
  font-weight: 800;
  color: var(--on-stage);
  text-wrap: balance;
}

/* --- The edge into the next section ------------------------------------- */

.pivot__edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  width: 100%;
  height: clamp(60px, 8.4vw, 120px);
  pointer-events: none;
}

/* A green rim just above the cut, so the next section's ground reads as
   rising out of the band rather than pasted over it. */
.pivot__edge-glow { fill: rgba(0, 201, 126, 0.25); }

/* Exactly the colour the section under it opens with. */
.pivot__edge-fill { fill: #fdfcfa; }

@media (prefers-reduced-motion: reduce) {
  .pivot__orb,
  .pivot__spectrum rect { animation: none; }
}

@media (max-width: 700px) {
  .pivot { padding-bottom: clamp(120px, 26vw, 170px); }
  .pivot__q { max-width: none; }
  .pivot__spectrum { opacity: 0.4; }
}