/* ==========================================================================
   TuneDance frontend — the search grind (problem agitation).

   REDESIGN. The copy here is one story: a single search session that runs from
   hope to defeat. The previous build did not say so. It carried seven type
   scales across ten paragraphs and flipped alignment centred -> split ->
   centred -> split -> centred, so nothing repeated and nothing told the reader
   these beats were consecutive. It read as loose fragments because structurally
   it was loose fragments.

   Now: three acts, one shape. Every act is the same grid - narration left, the
   media it describes right, never alternating. The repetition is what makes the
   sequence legible at a glance; the eye learns the shape once and then only
   has to read.

   Type carries two roles instead of seven:
     .grind__say   narration, ~20px, softened ink
     .grind__hit   a moment, ~38px, full ink and weight
   with .grind__verdict as the terminus. Escalation happens inside an act, not
   by giving every paragraph its own size.

   One alignment rule: headings centre because they are titles, everything else
   runs off a single left edge that never moves.

   Ground is unchanged - a near-neutral drifting toward the teal end of the
   page's palette with one low warm pool, so it reads as late light rather than
   daylight. The two marker sweeps stay the only saturated things in the frame:
   gold is the feeling the buyer wants, blue is the keyword they settle for
   typing, and the gap between those two marks IS the problem the product
   solves.
   ========================================================================== */

.grind {
  position: relative;
  isolation: isolate;
  /* clip rather than hidden so the sticky media columns below can pin to the
     viewport; hidden would make this section their scroll container. Still
     contains the blurred ::before / ::after bleed. */
  overflow: clip;
  padding: clamp(64px, 7.6vw, 124px) 24px clamp(64px, 7.6vw, 118px);
  background: linear-gradient(180deg, #f5f5f2 0%, #eff2ef 55%, #eaefeb 100%);
  color: #23262d;
  text-align: center;
}

/* A hint of late light, nothing more. These were three times this strong and
   that is what tipped the section out of the page. */
.grind::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 14% 12%, rgba(255, 190, 108, 0.1) 0%, transparent 70%),
    radial-gradient(46% 50% at 88% 22%, rgba(22, 152, 142, 0.13) 0%, transparent 72%),
    radial-gradient(58% 44% at 50% 108%, rgba(38, 104, 108, 0.09) 0%, transparent 76%);
  filter: blur(70px);
}

/* Barely-there edge fall-off. At any real strength this is the single thing
   that makes a light section stop looking like the rest of the page. */
.grind::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(78% 68% at 50% 46%, transparent 52%, rgba(40, 54, 52, 0.05) 100%);
}

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

.grind__heading {
  margin: 0 auto clamp(26px, 3.2vw, 44px);
  max-width: 26ch;
  font-size: clamp(30px, 4.5vw, 62px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.038em;
  color: #191c22;
  text-wrap: balance;
}

/* The pivot of the sentence. Marker rather than colour-on-text so it ties to
   the gold sweep further down, and tilted the way a real highlighter lands. */
.grind__one {
  display: inline-block;
  padding: 0.02em 0.22em 0.06em;
  background: linear-gradient(96deg, #ffd23d, #ffb62e);
  transform: rotate(-2.2deg);
  border-radius: 0.1em;
}

/* --- The story ----------------------------------------------------------- */

/* Two columns, one continuous read. Text left, media right, both flowing.
   The previous build cut this into three separate act rows, each with its own
   short media slot beside a tall block of text, which left several hundred
   pixels of nothing in every row. */
.grind__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(30px, 4.4vw, 72px);
  margin-bottom: clamp(52px, 6.2vw, 92px);
  text-align: left;
}

/* One size for the whole narration. This is the lesson from the cenematic
   page: the body never changes size, and interest comes from the devices
   sitting inside it - the marker sweeps, the chant list, the punch lines. */
.grind__text {
  min-width: 0;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.62;
  color: #3d434d;
}

.grind__text p { margin: 0 0 16px; }
.grind__text strong { font-weight: 800; color: #191c22; }

.grind__lead {
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 800;
  letter-spacing: -0.014em;
  color: #191c22;
}

/* Highlighter passes. Gold is the feeling the buyer wants, blue is the keyword
   they settle for typing, and the gap between the two marks IS the problem. */
.grind__mark {
  padding: 0.08em 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-style: italic;
  border-radius: 0.2em;
}

.grind__mark--want {
  background: linear-gradient(96deg, rgba(255, 210, 61, 0.92), rgba(255, 182, 46, 0.92));
  color: #22190a;
}

.grind__mark--typed {
  background: rgba(74, 108, 190, 0.2);
  color: #1d2a4a;
}

/* The beats. One size for all of them, only a little above the body: the old
   38px in a 600px column broke "Preview. Skip." across two lines mid-phrase. */
.grind__text p.grind__punch {
  margin: 24px 0 16px;
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height: 1.2;
  color: #191c22;
}

.grind__text p.grind__punch--time { margin-top: 30px; }

/* The chant. Tight stack with a hanging marker, the way the cenematic page
   sets its "No ..." list - structure you can see without changing type size. */
.grind__loop-lines {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.grind__loop-lines li {
  position: relative;
  margin-bottom: 9px;
  padding-left: 30px;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  color: #6f7683;
  animation: grind-loop 4.5s linear infinite;
}

.grind__loop-lines li::before {
  content: "\21bb";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  color: #1d7d72;
}

/* 1.5s per line across a 4.5s cycle: the highlight is always on exactly one of
   the three, and never stops. */
.grind__loop-lines li:nth-child(1) { animation-delay: 0s; }
.grind__loop-lines li:nth-child(2) { animation-delay: 1.5s; }
.grind__loop-lines li:nth-child(3) { animation-delay: 3s; }

@keyframes grind-loop {
  0%   { color: #191c22; }
  28%  { color: #191c22; }
  42%  { color: #6f7683; }
  100% { color: #6f7683; }
}

@media (prefers-reduced-motion: reduce) {
  .grind__loop-lines li { animation: none; color: #191c22; }
}

/* The gut punch, and the only place on the page this red appears. Red sits
   opposite the section's teal on the wheel, which is why it lands: nothing
   else in the frame is anywhere near it. */
.grind__text p.grind__verdict {
  margin: 22px 0 20px;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.018em;
}

.grind__verdict-mark {
  padding: 0.14em 0.34em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: linear-gradient(96deg, #8d2418 0%, #781d14 100%);
  color: #ffe8c4;
  border-radius: 0.2em;
}

.grind__text p.grind__handoff {
  margin-top: 26px;
  font-weight: 700;
  color: #4b5260;
}

/* --- The clip ------------------------------------------------------------ */

/* Pinned while the story scrolls past it, the way the cenematic page holds its
   video. align-self:start because a stretched column has nothing left to
   travel. */
.grind__media {
  position: sticky;
  top: clamp(24px, 7vh, 84px);
  align-self: start;
  min-width: 0;
  /* the panel and dots overhang the frame; keep them off the copy column */
  padding: 34px 34px 40px 0;
  margin-top: -34px;
}

/* 16:9, matching the source, so nothing is cropped off the sides.

   isolation:isolate gives the decoration below a stacking context to sit in,
   so its negative z-index lands behind the video and not behind the whole
   section. */
.grind__clip-frame {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 16 / 9;
  margin: 0;
}

/* The panel the clip sits on. It has to be genuinely bigger than the video for
   any of this to be visible: an earlier pass extended it only 24px and drew the
   ripples inside it, so the video covered the lot and all that showed was the
   corner dots.

   Warm grey, with the section's gold running through it. A cream plate went
   too yellow against the marker and a periwinkle one fought the section's
   green-grey ground; a neutral lets the gold carry the colour on its own. Sound ripples spread from the
   bottom-right corner in the same gold, because the subject is music and the
   pattern is what music looks like. Weighted low and right - an even margin
   all round would read as a frame. */
.grind__clip-frame::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -14px -34px -40px -14px;
  border-radius: 22px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23d99a16' stroke-width='2.8'%3E%3Ccircle cx='300' cy='300' r='54' stroke-opacity='.7'/%3E%3Ccircle cx='300' cy='300' r='102' stroke-opacity='.6'/%3E%3Ccircle cx='300' cy='300' r='150' stroke-opacity='.5'/%3E%3Ccircle cx='300' cy='300' r='198' stroke-opacity='.42'/%3E%3Ccircle cx='300' cy='300' r='246' stroke-opacity='.34'/%3E%3Ccircle cx='300' cy='300' r='294' stroke-opacity='.26'/%3E%3Ccircle cx='300' cy='300' r='342' stroke-opacity='.18'/%3E%3Ccircle cx='300' cy='300' r='390' stroke-opacity='.12'/%3E%3C/g%3E%3C/svg%3E") bottom right -30px / 70% auto no-repeat,
    linear-gradient(135deg, #efece6 0%, #e2ddd4 100%);
}

/* A dot field breaking the opposite corner, so the composition has a second
   beat and the panel does not read as a rectangle behind a rectangle. */
.grind__clip-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -52px;
  top: -52px;
  width: 128px;
  height: 128px;
  opacity: 0.55;
  /* the dots take the plate's gold too, so the two corners speak one colour */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='2.6' cy='2.6' r='2.1' fill='%23d99a16'/%3E%3C/svg%3E") repeat;
  -webkit-mask-image: radial-gradient(70% 70% at 20% 20%, #000 20%, transparent 78%);
  mask-image: radial-gradient(70% 70% at 20% 20%, #000 20%, transparent 78%);
}

.grind__clip {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
}

/* Motion the reader did not ask for: hold the poster frame instead. */
@media (prefers-reduced-motion: reduce) {
  .grind__clip { display: none; }
  .grind__clip-frame {
    border-radius: 16px;
    background: #e4e7ea url("https://wayaframe.b-cdn.net/website/tunedance/assets/video/search-grind-poster.webp") center / cover no-repeat;
  }
}

/* --- Second movement: the money ------------------------------------------ */

/* A section headline in its own right, not a label on the left column: it
   opens the second movement, so it centres on the full width the way the
   section's h2 does. */
.grind__sub {
  position: relative;
  z-index: 1;
  margin: 0 auto clamp(28px, 3.4vw, 48px);
  /* No cap: the line is about 990px at the 52px size, so anything narrower
     than the section's own 1200px broke it in two for no reason. */
  max-width: none;
  text-align: center;
  font-size: clamp(28px, 3.9vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #191c22;
  text-wrap: balance;
}

/* The word the movement is actually about, given the section's own device.

   A thin underline was not enough at 52px - it read as punctuation rather than
   emphasis. This is a highlighter pass: the same gold that marks ONE in the h2
   above, so the section speaks one language, but drawn as a swept shape rather
   than a rectangle. The edges rise and fall a little and the ends are not
   square, which is what separates a marker stroke from a background colour.

   Painted behind the text rather than as a background on the span so the ink
   stays full black on top of it. */
.grind__sub-brush {
  position: relative;
  white-space: nowrap;
  display: inline-block;
  /* Padding widens the sweep past the glyphs; the negative right margin gives
     that space back so the comma still sits tight against the word. */
  padding: 0 0.1em;
  margin-right: -0.09em;
  transform: rotate(-1.4deg);
}

.grind__sub-brush::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.02em;
  right: -0.02em;
  top: 0.1em;
  bottom: 0.02em;
  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='%23ffc233'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Copy left, evidence right - and the pile stays in that same left column so
   the shot has something to stay pinned against.

   This is one grid rather than two stacked blocks because a sticky element can
   only travel inside its own containing block. When the shot lived in a grid
   that ended before the pile, it unpinned and slid away while there was still
   half the argument left to read. Spanning it across both content rows gives
   it the full run. */
.grind__money {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  /* start, not center: sticky needs the track to begin at the top so the shot
     has room to travel. */
  align-items: start;
  gap: clamp(28px, 4vw, 68px);
  margin-bottom: clamp(46px, 5.6vw, 84px);
  text-align: left;
}

/* One cell holds the copy and the bill, so the grid is a single row and the
   pinned shot beside it has nothing to distribute its height into. */
.grind__money-copy { grid-column: 1; min-width: 0; }
.grind__shot { grid-column: 2; }

/* Same size and rhythm as the story column above: the movement changes
   subject, not typography. */
.grind__col p {
  margin: 0 0 16px;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.62;
  color: #3d434d;
}

.grind__col p:last-child { margin-bottom: 0; }
.grind__col strong { font-weight: 800; color: #191c22; }

/* The prices are the argument, so they get marked. Same gold pass as ONE and
   Expensive - in this section gold means "this is the word that matters". */
.grind__cost {
  position: relative;
  z-index: 0;
  display: inline;
  font-weight: 700;
  color: #191c22;
  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='%23ffc233'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.06em 0.18em;
}

/* The pivot into the list below it. */
.grind__col p.grind__col-turn {
  margin-top: clamp(18px, 2.2vw, 28px);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #191c22;
}

/* No frame: the shot already carries its own white rows and shadows, and a
   border around it would be a card holding a picture of cards. */
.grind__shot {
  position: sticky;
  top: clamp(24px, 7vh, 84px);
}

.grind__shot img {
  width: 100%;
  height: auto;
}

/* --- The bill stacking up ---------------------------------------------- */

/* One column on the left, on the same measure as the copy column above it, so
   the six costs stack in a single run. The ink climbs 1 to 6 down the list,
   which is what makes it read as something piling up rather than as six equal
   items. The conclusion below still spans the full width. */
.grind__pile {
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

/* Tight. Six lines with generous leading read as a spaced-out list; six lines
   packed together read as a bill. */
.grind__pile li {
  position: relative;
  margin-bottom: 7px;
  padding-left: 30px;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: #191c22;
}

.grind__pile li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  color: #d99a16;
}

/* Ink climbs down the list. Six identical lines read as a list; six lines that
   darken read as something piling up, which is what the copy is describing. */
.grind__pile li:nth-child(1) { color: #4b5260; }
.grind__pile li:nth-child(2) { color: #444b57; }
.grind__pile li:nth-child(3) { color: #3d434f; }
.grind__pile li:nth-child(4) { color: #343a45; }
.grind__pile li:nth-child(5) { color: #262b34; }
.grind__pile li:nth-child(6) { color: #191c22; font-weight: 700; }

/* Full width, below the grid: the conclusion the whole movement builds to. */
.grind__payoff {
  margin: 0 0 clamp(10px, 1.4vw, 20px);
  text-align: left;
  font-size: clamp(21px, 2.5vw, 33px);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -0.026em;
  color: #191c22;
  text-wrap: balance;
}

@media (max-width: 860px) {
  .grind__columns,
  .grind__money {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .grind__money-copy,
  .grind__shot { grid-column: 1; }

  .grind__media,
  .grind__shot { position: static; }
  .grind__shot { max-width: 560px; }
}