/* ==========================================================================
   Launch Labs — "Difference" (concise). A SEPARATE minimal prototype — it does
   NOT modify or reuse any other section. All selectors namespaced .diff.

   One idea, two lines, on near-black: white type, Launch red for emphasis only.
   A short pinned scrub (~130vh) transitions between the two statements, then
   "We start with why someone should choose you." resolves into
   "We design around why people buy." A powerful pause, not a sequence.

   Base styles are the readable static fallback (reduced motion / no JS):
   the setup line + the final line. js/difference.js adds .is-motion for the
   animated version. To revert: delete this file, js/difference.js, the .diff
   markup and their <link>/<script> lines.
   ========================================================================== */

.diff {
  position: relative;
  background: #010202;
  color: #FFFFFF;
}

.diff__stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
}

/* Base / static fallback: setup + final, stacked and readable (the animated
   intermediate line is hidden here). */
.diff__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 6vw, 3.75rem);
  text-align: center;
}

.diff__line {
  margin: 0 auto;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.diff__l1 {
  font-weight: 700;
  font-size: clamp(1.7rem, 3.8vw, 3.1rem);
  line-height: 1.14;
  max-width: 20ch;
  color: rgba(255, 255, 255, 0.88);
}

.diff__l2 {
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 4.2rem);
  max-width: 18ch;
  display: none; /* animated intermediate — motion only */
}

.diff__l3 {
  font-weight: 800;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  max-width: 16ch;
}

.diff__red { color: #D92632; }

/* ==========================================================================
   Animated version — applied only when js/difference.js runs with GSAP.
   The three lines stack on the same centre and cross-fade, so line 2
   visibly resolves into the final line.
   ========================================================================== */
.diff.is-motion .diff__inner {
  display: block;
  position: absolute;
  inset: 0;
}

.diff.is-motion .diff__line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 60rem);
  max-width: min(92vw, 60rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.diff.is-motion .diff__l2 { display: block; }

@media (max-width: 40rem) {
  .diff__l1 { font-size: clamp(1.5rem, 6.6vw, 2.2rem); }
  .diff__l2 { font-size: clamp(1.8rem, 8.4vw, 2.6rem); }
  .diff__l3 { font-size: clamp(2rem, 9vw, 2.8rem); }
}

/* Reduced motion is the readable base layout above — js/difference.js never
   pins or animates in that case. */