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

   Two movements in one band, in the source doc's order. First the reveal: the
   product name is the largest word on the page (bigger than the turn's display
   line, on purpose: that line promised, this one delivers) set in the brand
   gradient over a light pool, and the device rises up underneath it. Then the
   copy explains what just arrived, narrowing from a full sentence down to
   three short lines and four requests each answered with the same two words,
   so the type narrows with it and the three-beat ladder climbs a step per line.

   No scroll animation in this band: it renders in place.
   ========================================================================== */

.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 7.6vw, 124px) 24px clamp(64px, 7.6vw, 124px);
  background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 42%, #fbfaf8 100%);
  color: var(--on-stage);
  text-align: center;
}

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

/* --- Movement two: the bridge --------------------------------------------- */

/* A real line, not a caption: the set-up for the section's second half. */
.intro__lead {
  position: relative;
  margin: 0 auto clamp(22px, 2.8vw, 38px);
  padding-top: clamp(30px, 3.6vw, 52px);
  max-width: 900px;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: #3d434d;
  text-wrap: balance;
}

/* The three old costs in ink, so they read as a list; the new one on the
   mint marker, so the sentence lands on the word it exists for. */
.intro__lead b {
  font-weight: 700;
  color: #17202e;
}

.intro__lead-mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0.02em 0.14em;
  margin: 0 -0.06em;
  font-weight: 800;
  color: #17202e;
  white-space: nowrap;
  transform: rotate(-1.2deg);
}

.intro__lead-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%;
}

.intro__lead::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #06d492, #0a7fd8);
}

.intro__nomore {
  margin: 0 auto clamp(40px, 5vw, 76px);
  max-width: 1040px;
  font-size: clamp(28px, 3.8vw, 54px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.038em;
  color: var(--on-stage);
  text-wrap: balance;
}

/* The word the line is against gets struck out by hand: a rough red marker
   stroke, so "no more" is something you see before you read it. */
.intro__strike {
  position: relative;
  white-space: nowrap;
}

.intro__strike::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.08em;
  top: 46%;
  height: 0.2em;
  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%;
}

/* Three steps, left to right, joined by hairlines, the third one on the
   hero's marker because it is the product speaking. Set as a row because it
   is a sequence, and a sequence reads across. */
.intro__ladder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 34px);
  margin: 0 auto clamp(52px, 6.4vw, 100px);
  padding: 0;
  list-style: none;
}

.intro__ladder li {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  margin: 0;
  font-size: clamp(19px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--on-stage);
  white-space: nowrap;
}

.intro__ladder li + li::before {
  content: "";
  display: block;
  width: clamp(20px, 3.4vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, rgba(26, 30, 38, 0.14), rgba(26, 30, 38, 0.32));
}

/* A glyph per step, in the product's green, on the chip in white. */
.intro__ladder-icon {
  flex: 0 0 auto;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.32em;
  vertical-align: -0.12em;
  fill: none;
  stroke: var(--pop-green-deep);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intro__ladder-mark .intro__ladder-icon { stroke: #ffffff; }

.intro__ladder-mark {
  display: inline-flex;
  align-items: center;
  padding: 0.06em 0.28em 0.12em;
  border-radius: 0.14em;
  background: linear-gradient(98deg, #05b46c 0%, #0f8fc0 50%, #1f5cf0 100%);
  color: #ffffff;
  font-size: 1.12em;
  font-weight: 900;
  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);
}

/* Four wants, one answer, repeated: the same call-and-response rows the
   ask-for section set up, so the reader already knows the rhythm. */
.intro__creates {
  max-width: 1000px;
  margin: 0 auto clamp(52px, 6.4vw, 100px);
  padding: 0;
  list-style: none;
  text-align: left;
}

.intro__creates li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(24px, 4vw, 72px);
  padding: clamp(16px, 2vw, 26px) 0;
  border-top: 1px solid rgba(26, 30, 38, 0.14);
}

.intro__creates li:last-child { border-bottom: 1px solid rgba(26, 30, 38, 0.14); }

.intro__want {
  font-size: clamp(19px, 2.2vw, 30px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.028em;
  color: #17202e;
}

.intro__answer {
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  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;
}

/* The close. YOU on the hero's marker, so the three loudest lines on this
   page share one device. */
.intro__now {
  margin: 0 auto;
  font-size: clamp(30px, 4.8vw, 66px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--on-stage);
  text-wrap: balance;
}

.intro__now-you {
  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);
}

/* --- Movement one: the reveal --------------------------------------------- */

.intro__reveal {
  position: relative;
}

/* The pool the name sits in. Blurred and wide, in the hero's three colours,
   so the band changes temperature exactly where the product arrives. */
.intro__pool {
  position: absolute;
  left: 50%;
  top: clamp(-40px, -3vw, -10px);
  z-index: 0;
  width: min(1400px, 140vw);
  height: clamp(420px, 56vw, 760px);
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 30% 30%, rgba(0, 201, 126, 0.32) 0%, transparent 70%),
    radial-gradient(40% 48% at 72% 26%, rgba(14, 139, 255, 0.24) 0%, transparent 72%),
    radial-gradient(30% 36% at 52% 74%, rgba(255, 93, 143, 0.14) 0%, transparent 70%);
  filter: blur(70px);
}

.intro__eyebrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 24px);
  margin: 0 auto clamp(16px, 2vw, 28px);
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pop-green-deep);
}

.intro__eyebrow::before,
.intro__eyebrow::after {
  content: "";
  width: clamp(36px, 6vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(4, 168, 107, 0.55));
}

.intro__eyebrow::after {
  background: linear-gradient(90deg, rgba(4, 168, 107, 0.55), transparent);
}

/* The largest word on the page. Caps here are the wordmark, not a shout: one
   word reads at a glance at any size.

   Extruded. The face keeps the brand gradient; the depth is a copy of the
   word behind it in a stack of darkening greens into blue, stepped down by
   a fraction of an em per layer so it reads as a solid block rather than a
   shadow. A pseudo-element carries the stack because text-shadow on
   gradient-clipped text paints through the transparent fill. */
/* Extruded. The face keeps the brand gradient; the depth is a copy of the
   word behind it in a stack of darkening greens into blue. wordmark.js
   redraws the same mark through a WebGL shader that runs a slow wave
   through the letters; when it does, it hides these two pseudo-elements and
   paints a canvas over the heading, so a page with no script or no WebGL
   shows this static mark instead. */
.intro__name {
  --ex: 0em;
  --ey: 0.0065em;
  position: relative;
  z-index: 1;
  margin: 0 auto clamp(26px, 3.2vw, 46px);
  font-size: clamp(46px, 9.4vw, 128px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  /* the element's own text is invisible; the two pseudo-elements paint the
     depth and the face over it, in that order */
  color: transparent;
}

.intro__name::before,
.intro__name::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
}

.intro__name::before {
  z-index: 0;
  color: transparent;
  text-shadow:
    calc(var(--ex) * 1) calc(var(--ey) * 1) 0 rgb(4,119,83),
    calc(var(--ex) * 2) calc(var(--ey) * 2) 0 rgb(4,116,86),
    calc(var(--ex) * 3) calc(var(--ey) * 3) 0 rgb(4,113,89),
    calc(var(--ex) * 4) calc(var(--ey) * 4) 0 rgb(4,111,92),
    calc(var(--ex) * 5) calc(var(--ey) * 5) 0 rgb(4,108,95),
    calc(var(--ex) * 6) calc(var(--ey) * 6) 0 rgb(5,105,99),
    calc(var(--ex) * 7) calc(var(--ey) * 7) 0 rgb(5,102,102),
    calc(var(--ex) * 8) calc(var(--ey) * 8) 0 rgb(5,100,105),
    calc(var(--ex) * 9) calc(var(--ey) * 9) 0 rgb(5,97,108),
    calc(var(--ex) * 10) calc(var(--ey) * 10) 0 rgb(5,94,111),
    calc(var(--ex) * 11) calc(var(--ey) * 11) 0 rgb(6,92,115),
    calc(var(--ex) * 12) calc(var(--ey) * 12) 0 rgb(6,89,118),
    calc(var(--ex) * 13) calc(var(--ey) * 13) 0 rgb(6,86,121),
    calc(var(--ex) * 14) calc(var(--ey) * 14) 0 rgb(6,83,124),
    calc(var(--ex) * 15) calc(var(--ey) * 15) 0 rgb(6,81,127),
    calc(var(--ex) * 16) calc(var(--ey) * 16) 0 rgb(6,78,130),
    calc(var(--ex) * 17) calc(var(--ey) * 17) 0 rgb(7,75,134),
    calc(var(--ex) * 18) calc(var(--ey) * 18) 0 rgb(7,72,137),
    calc(var(--ex) * 19) calc(var(--ey) * 19) 0 rgb(7,70,140),
    calc(var(--ex) * 20) calc(var(--ey) * 20) 0 rgb(7,67,143),
    calc(var(--ex) * 21) calc(var(--ey) * 21) 0 rgb(7,64,146),
    calc(var(--ex) * 22) calc(var(--ey) * 22) 0 rgb(8,62,150),
    calc(var(--ex) * 30) calc(var(--ey) * 34) 0.5em rgba(10, 95, 180, 0.28);
}

.intro__name::after {
  z-index: 1;
  background-image: linear-gradient(96deg, #06d492 0%, #00bd7f 38%, #0a7fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.intro__name.has-shader::before,
.intro__name.has-shader::after { visibility: hidden; }

.intro__shader {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  display: block;
}

.intro__tagline {
  position: relative;
  z-index: 1;
  margin: 0 auto clamp(22px, 2.6vw, 38px);
  /* px, not ch: 32ch resolved to roughly 640px at this size, breaking the line
     into four inside a 1180px container. */
  max-width: 1240px;
  font-size: clamp(20px, 2.7vw, 36px);
  font-style: italic;
  line-height: 1.26;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

/* Two weights in one sentence: the framing sits back, the payload comes
   forward. The contrast is what makes the line read as a claim rather than
   a caption. */
.intro__tagline-soft {
  font-weight: 500;
  color: rgba(26, 30, 38, 0.56);
}

.intro__tagline-hard {
  font-weight: 800;
  color: var(--on-stage);
}

/* The device. Set wide, with no frame of its own: the shot already carries
   the laptop and the box, so anything around it would be a frame on a frame. */
.intro__device {
  position: relative;
  z-index: 1;
  margin: 0 auto clamp(44px, 5.4vw, 88px);
  max-width: 820px;
}

.intro__device img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(26, 20, 14, 0.18));
}

@media (max-width: 1100px) {
  .intro__ladder { flex-direction: column; gap: 14px; }
  .intro__ladder li + li::before { width: 1px; height: 22px; background: linear-gradient(180deg, rgba(26, 30, 38, 0.14), rgba(26, 30, 38, 0.32)); }
}

@media (max-width: 720px) {
  .intro__creates li {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  .intro__name { letter-spacing: -0.04em; }
}