/* ==========================================================================
   Launch Labs — "Friction" experiment ("removing friction, turning attention
   into action"). A SEPARATE experimental sibling to the .choice and
   .standout sequences — none of them replace each other.

   A pinned, scroll-scrubbed sequence on near-black: a white circle travels a
   wandering, inefficient white-line route toward a stationary red circle;
   that same line then physically straightens (point-by-point morph, never a
   crossfade) into a clean direct line; the white circle runs the straight
   route with momentum, is absorbed into the red circle, and the red circle
   then expands from its centre until it exceeds the viewport diagonal and
   becomes the red .friction-site below (identical #D92632 -> seamless).

   All motion in js/friction.js (GSAP + ScrollTrigger, already loaded — no new
   library). Palette is strictly near-black #010202 / white #FFFFFF / Launch
   red #D92632. No gradients / shadows / glow / particles / text / logos.

   Reduced motion / no JS: js/friction.js renders the resolved "clarity"
   still (white circle — straight line — red circle) and does not animate.
   To revert: delete this file, js/friction.js, the .friction + .friction-site
   markup and their <link>/<script> lines. Does not modify other sections.
   ========================================================================== */

.friction {
  position: relative;
  background: #010202;
}

.friction__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #010202;
}

.friction__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.friction__path {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.friction__white { fill: #FFFFFF; }
.friction__red { fill: #D92632; }

/* ==========================================================================
   The emerged red section — the red circle the journey resolves into,
   expanded to become the next canvas. Solid Launch red (identical to the
   circle), so continuing from the pinned stage above is seamless. White
   type; the CTA opens the SHAPE modal. Swappable stand-in destination.
   ========================================================================== */
.friction-site {
  position: relative;
  background: #D92632;
  color: #FFFFFF;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 10vw, 8rem) clamp(1.5rem, 5vw, 4rem);
}

.friction-site__inner {
  max-width: 52rem;
  text-align: center;
}

.friction-site__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.friction-site__cta {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  justify-content: center;
}

.friction-site__btn {
  padding: 1.15rem 2.75rem;
  font-size: 0.9375rem;
}

/* White chip on the red canvas (the themed red .btn would vanish); flat, no
   glow/shadow, palette stays red/white/near-black. */
body[data-theme="black"] .friction-site__btn {
  background: #FFFFFF;
  color: #010202;
  border: 1px solid #FFFFFF;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  body[data-theme="black"] .friction-site__btn:hover {
    background: #010202;
    color: #FFFFFF;
    border-color: #010202;
    box-shadow: none;
  }
}

.friction-site__title,
.friction-site__cta {
  opacity: 0;
  transform: translateY(22px);
}

.friction-site.is-visible .friction-site__title {
  animation: friction-rise 0.9s var(--ease) forwards;
}

.friction-site.is-visible .friction-site__cta {
  animation: friction-rise 0.9s var(--ease) forwards;
  animation-delay: 0.25s;
}

@keyframes friction-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion — static clarity still is enough; keep the stage height. */
@media (prefers-reduced-motion: reduce) {
  .friction__stage {
    height: 100vh;
    min-height: 34rem;
  }
}