/* ==========================================================================
   Iryst — homepage set pieces
   --------------------------------------------------------------------------
   Hand-written, like motion.css. These sections use their own semantic classes
   rather than Tailwind utilities: Tailwind only emits classes it can see in
   source files, it cannot scan .cshtml, and a utility that never appeared in
   the Next source simply would not exist in iryst.css. Only .container-x,
   .eyebrow and .measure are borrowed, and all three are already emitted.

   Both sections are scroll-linked. Their motion is a function of scroll
   position rather than a one-shot triggered on entry, so they keep giving
   while the reader is actually scrolling instead of finishing before they
   start.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scrubbed statement
   One sentence. Each word lifts from muted to full as the section passes
   through the viewport, so the line "writes itself" at the reader's pace.
   -------------------------------------------------------------------------- */
.stmt {
  position: relative;
  padding-block: clamp(96px, 18vh, 200px);
  border-block: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in oklab, var(--primary) 7%, transparent), transparent 60%),
    var(--bg);
  overflow: hidden;
}

.stmt__line {
  margin: 1.75rem 0 0;
  max-width: 20ch;
  font-family: var(--font-display), Georgia, serif;
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Each word is its own span so it can be lit independently. Without motion
   they simply render as normal text at full contrast. */
.sw {
  display: inline-block;
  color: var(--fg);
  transition: color 260ms var(--mo-ease-soft, ease), opacity 260ms var(--mo-ease-soft, ease);
}
.js-motion .sw {
  color: color-mix(in oklab, var(--muted-fg) 55%, transparent);
}
.js-motion .sw.sw-on { color: var(--fg); }
/* The one word carrying the emphasis. */
.js-motion .sw.sw-key.sw-on { color: var(--primary); }
.sw.sw-key { color: var(--primary); }

.stmt__foot {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.stmt__meter {
  position: relative;
  height: 2px;
  width: min(260px, 42vw);
  background: var(--border);
  overflow: hidden;
  border-radius: 2px;
}
.stmt__meter i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--primary), var(--teal));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.stmt__note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted-fg);
}

/* --------------------------------------------------------------------------
   2. Pinned deliverables rail
   The section is taller than the viewport; a sticky child holds still while
   the track inside it moves sideways, so vertical scrolling reads as
   horizontal travel. Falls back to an ordinary swipeable row whenever the
   pin is not appropriate.
   -------------------------------------------------------------------------- */
.rail {
  position: relative;
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.rail__scroll { position: relative; }

.rail__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.rail__head { flex: none; padding-block: clamp(24px, 5vh, 56px) clamp(20px, 4vh, 40px); }
.rail__head h2 {
  margin: 1rem 0 0;
  max-width: 24ch;
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1.06;
}

.rail__track {
  display: flex;
  gap: 1.25rem;
  padding-inline: var(--gutter);
  will-change: transform;
}

.rail__card {
  flex: none;
  width: min(78vw, 380px);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
/* A hairline that fills as the card reaches the middle of the screen. */
.rail__card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--teal));
  transform: scaleX(var(--rail-lit, 0));
  transform-origin: 0 50%;
  transition: transform 420ms var(--mo-ease, ease);
}
.rail__n {
  font-family: var(--font-jetbrains), ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--primary);
}
.rail__card h3 {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
}
.rail__card p {
  margin: 0;
  color: var(--muted-fg);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.rail__bar {
  flex: none;
  height: 2px;
  margin: clamp(20px, 4vh, 44px) var(--gutter) 0;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.rail__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--teal));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Fallback: an ordinary horizontal scroller. Used on narrow screens, under
   reduced motion, and any time the pin cannot be set up. */
.rail.rail--flat .rail__pin {
  position: static;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.rail.rail--flat .rail__scroll { height: auto !important; }
.rail.rail--flat .rail__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  transform: none !important;
}
.rail.rail--flat .rail__card { scroll-snap-align: start; }
.rail.rail--flat .rail__card::after { transform: scaleX(1); }
.rail.rail--flat .rail__bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rail__pin { position: static; height: auto; min-height: 0; overflow: visible; }
  .rail__scroll { height: auto !important; }
  .rail__track { overflow-x: auto; transform: none !important; }
  .rail__card::after { transform: scaleX(1); }
  .rail__bar { display: none; }
  .sw { color: var(--fg) !important; }
  .stmt__meter i { transform: scaleX(1); }
}