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

   The page's pivot: everything above it is a complaint, everything below it is
   the product. So it is the one band that changes temperature, and it holds
   the largest type on the page.

   No marker highlights here. The source doc marks the payoff with a yellow
   highlighter and sets half the section in caps, but that is the author
   thinking on the page rather than a design. What carries this instead is
   scale, one gradient, and the product's own language: a waveform that plays
   itself in under the payoff, so the section shows an idea becoming music
   rather than underlining the sentence that says so.

   Ratio between the quietest line and the loudest is about 8:1. That gap is
   the whole design.
   ========================================================================== */

.turn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(70px, 8.4vw, 140px) 24px clamp(66px, 8vw, 126px);
  background: linear-gradient(180deg, #f4faf6 0%, #edf7f1 58%, #e8f5ed 100%);
  color: var(--on-stage);
  text-align: center;
}

.turn::before {
  content: "";
  position: absolute;
  inset: -24% -12%;
  z-index: 0;
  pointer-events: none;
  /* The pools used to be cut flat by overflow:hidden at the section's top
     edge, which drew a hard line under the pivot band. Faded in from the top
     instead, so the light ground rising out of the band stays clean. */
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 40%);
  mask-image: linear-gradient(180deg, transparent 18%, #000 40%);
  background:
    radial-gradient(40% 46% at 16% 10%, rgba(0, 201, 126, 0.26) 0%, transparent 68%),
    radial-gradient(44% 48% at 86% 18%, rgba(14, 139, 255, 0.16) 0%, transparent 70%),
    radial-gradient(56% 42% at 50% 104%, rgba(0, 201, 126, 0.16) 0%, transparent 74%);
  filter: blur(76px);
}

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

/* Set small and tracked rather than shouted. The doc writes this line in caps
   because it is emphatic; an eyebrow says the same thing without spending the
   section's one loud voice on it. Sentence case in the markup, uppercased in
   CSS, so it is not read out letter by letter. */
.turn__eyebrow {
  margin: 0 auto clamp(18px, 2.2vw, 30px);
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pop-green-deep);
}

/* A real line, not a caption: it was 21px grey on a 40ch measure and read
   as small print between two headlines. */
/* The two things being refused get struck out by hand, in the red the
   problem sections use, so the line cancels them before it is read. */
.turn__strike {
  position: relative;
  white-space: nowrap;
}

.turn__strike::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 40%;
  height: 0.34em;
  transform: rotate(-2deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 50 9, 110 14, 197 10' fill='none' stroke='%23e0301b' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M8 16 C 70 13, 130 16, 190 13' fill='none' stroke='%23e0301b' stroke-width='4' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.turn__producer {
  margin: 0 auto clamp(14px, 1.8vw, 24px);
  max-width: 50ch;
  font-size: clamp(19px, 2.1vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: #2b313c;
}

.turn__idea {
  position: relative;
  z-index: 0;
  margin: 0 auto clamp(18px, 2.4vw, 36px);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.038em;
  color: var(--on-stage);
}

/* The words the set-up turns on get a marker stroke under them: hand-pulled,
   in the product's green, so the idea is underlined by the product rather
   than by the page. */
.turn__idea-mark {
  position: relative;
  white-space: nowrap;
}

.turn__idea-mark::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.06em;
  bottom: -0.14em;
  height: 0.22em;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 14 C 50 8, 110 11, 196 6' fill='none' stroke='%2300c97e' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M12 19 C 70 14, 130 17, 180 13' fill='none' stroke='%2300c97e' stroke-width='4.5' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* --- The stage: the payoff on a full-bleed waveform ---------------------- */

.turn__stage {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin: 0 0 clamp(32px, 4vw, 60px) calc(50% - 50vw);
  padding: clamp(14px, 1.8vw, 28px) 24px 0;
}

.turn__stage-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

/* Held right down, because its only job is to make the line under it land. */
.turn__pre {
  margin: 0 auto clamp(10px, 1.3vw, 16px);
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26, 30, 38, 0.5);
}

/* The largest thing on the page. Sentence case, not the doc's caps: at this
   size caps lose the word shapes and the line stops being readable at a
   glance, which is the only thing a display line has to do.

   Ink for the set-up, and the payoff on the hero's marker: white on the
   green-to-blue sweep, tilted the couple of degrees the page's markers sit
   at. Gradient text was tried here first and went flat on the green ground;
   the filled sweep is the page's loudest device and this is its loudest
   line. */
.turn__display {
  display: inline-block;
  margin: 0 auto;
  max-width: 15ch;
  font-size: clamp(44px, 8.6vw, 124px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: var(--on-stage);
  text-wrap: balance;
}

.turn__display-mark {
  display: inline-block;
  padding: 0.02em 0.2em 0.08em;
  border-radius: 0.14em;
  background: linear-gradient(98deg, #05b46c 0%, #0f8fc0 50%, #1f5cf0 100%);
  color: #ffffff;
  transform: rotate(-1.6deg);
  box-shadow:
    0 0.26em 0.8em rgba(5, 169, 107, 0.38),
    0 0.08em 0.2em rgba(46, 107, 255, 0.35);
}

/* --- The waveform ------------------------------------------------------- */

/* Full-bleed under the display line, mirrored about its own middle so it
   reads as audio rather than as a chart. */
.turn__wave {
  display: block;
  width: 100%;
  height: clamp(90px, 12vw, 180px);
  margin-top: clamp(16px, 2.2vw, 34px);
  pointer-events: none;
}

/* Final state is the default, so no script means a drawn waveform rather than
   an empty strip. reveal.js arms the bars flat and lets them play in from the
   left, and once they have landed each one keeps breathing on its own clock
   so the line under the payoff never goes still. */
.turn__wave rect {
  transform-box: fill-box;
  transform-origin: center;
}

.turn__wave.is-armed rect { transform: scaleY(0.02); }

.turn__wave.is-armed.is-in rect {
  animation:
    turn-wave-in 620ms cubic-bezier(0.18, 0.85, 0.24, 1) calc(var(--i) * 7ms) both,
    turn-wave-breathe var(--d, 2.4s) ease-in-out calc(var(--i) * 7ms + 620ms) infinite alternate;
}

@keyframes turn-wave-in {
  from { transform: scaleY(0.02); }
  to   { transform: scaleY(1); }
}

@keyframes turn-wave-breathe {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.55); }
}

/* --- The three negations ------------------------------------------------ */

/* One sentence in the doc, three items here. They are three parallel facts and
   setting them as a row lets the eye take all three in one pass. */
.turn__nos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 26px);
  margin: 0 auto clamp(28px, 3.4vw, 46px);
  padding: 0;
  list-style: none;
}

/* Ink at a real size. These were 19px grey and read as a footnote under the
   biggest line on the page. */
.turn__nos li {
  position: relative;
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-stage);
}

.turn__nos li + li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: clamp(10px, 1.6vw, 26px);
  border-radius: 50%;
  background: var(--pop-green);
  vertical-align: 0.22em;
}

.turn__close {
  margin: 0 auto;
  max-width: 74ch;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: #4d5462;
  text-wrap: balance;
}

/* The claim in ink, the uses in ink, the joins between them a step softer,
   so the line reads as a run of things you can make rather than a sentence
   to be parsed. */
.turn__close-lead {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-stage);
}

.turn__close b {
  font-weight: 700;
  color: var(--on-stage);
}

/* The page's marker sweep on the three words the line turns on, in the
   product's mint, the same pass "Never" gets two sections up. */
.turn__close-mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0.02em 0.14em;
  margin: 0 -0.06em;
  white-space: nowrap;
  transform: rotate(-1.2deg);
}

.turn__close-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.02em;
  right: -0.02em;
  top: 0.06em;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9 C 40 4, 92 6.5, 140 4.5 C 168 3.4, 186 5, 197.5 7 L 196 36 C 150 39.5, 96 37, 52 39 C 30 40, 14 38.5, 3 36.5 Z' fill='%2386f2c6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

@media (max-width: 560px) {
  .turn__display { max-width: 11ch; }
  .turn__nos { gap: 8px 14px; }
  .turn__nos li + li::before { margin-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .turn__wave.is-armed rect,
  .turn__wave.is-armed.is-in rect { transform: none; animation: none; }
}