/* ============================================================
   TRIPLEX LINERS — V2 · EXPERIENCE COMPONENTS
   Extends tlp-core.css. Same tokens, same namespace.
   These are the "discover it" components: things that DEMONSTRATE
   the system instead of listing claims about it.
   ============================================================ */

/* ---------- HERO: cinematic, slow drift, state-specific ---------- */
.tlp-hero--tall { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; }
/* Phone: the headline has to fit the hand, not the desktop grid. */
@media (max-width: 620px) {
  .tlp-hero--tall { min-height: 92vh; }
  .tlp-hero .tlp-h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); line-height: 1.12; }
  .tlp-hero .tlp-lead { font-size: 1.0625rem; line-height: 1.55; }
  .tlp-hero .tlp-eyebrow { font-size: .6875rem; letter-spacing: .1em; }
}
/* Top padding clears the fixed nav on every width — the headline must never
   sit behind the bar on a phone. */
.tlp-hero--tall .tlp-hero__inner {
  padding-block: calc(74px + clamp(2.5rem, 11vh, 8rem)) clamp(4.5rem, 11vh, 7rem); }
.tlp-hero__media img, .tlp-hero__media .tlp-hero__plate {
  animation: tlp-drift 26s var(--tlp-ease) infinite alternate;
  transform-origin: 62% 40%;
}
@keyframes tlp-drift { from { transform: scale(1.06); } to { transform: scale(1.14); } }

.tlp-hero__cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3;
  font-size: var(--tlp-size-xs); letter-spacing: var(--tlp-track-wide); text-transform: uppercase;
  color: var(--tlp-inverse-ink-soft); }
.tlp-hero__cue span { display: block; width: 1px; height: 34px;
  background: linear-gradient(180deg, transparent, var(--tlp-accent));
  animation: tlp-cue 2.4s var(--tlp-ease) infinite; }
@keyframes tlp-cue { 0%,100% { opacity:.25; transform: scaleY(.55); transform-origin: top; }
                     50%      { opacity:1;   transform: scaleY(1);   transform-origin: top; } }

/* ---------- TEXT FILL: copy lights up word by word as you scroll it ----------
   The words are always readable at rest (24% floor, never invisible) — this
   adds pace, it does not gate the content behind an animation. */
.tlp-fill--on .tlp-w { opacity: .45; transition: opacity 200ms linear; }
.tlp-fill--off .tlp-w { opacity: 1; }

/* ---------- OPENER: the hook, before any proof ---------- */
.tlp-opener { font-family: var(--tlp-font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.35rem); line-height: 1.35; letter-spacing: -0.015em;
  max-width: 22ch; margin: 0; }
.tlp-opener strong { font-weight: 400; color: var(--tlp-accent); }

/* ---------- THE CUTAWAY: animated liner cross-section ---------- */
.tlp-cutaway { display: grid; gap: var(--tlp-5); align-items: center; }
@media (min-width: 940px) { .tlp-cutaway { grid-template-columns: .82fr 1.18fr; gap: var(--tlp-6); } }

.tlp-cutaway__key { width: 100%; max-width: 420px; margin-inline: auto; color: var(--tlp-inverse-ink); }
.tlp-cutaway__key .tlp-k-shell,
.tlp-cutaway__key .tlp-k-ground { fill: none; stroke: currentColor; stroke-width: 2;
  opacity: .42; stroke-linecap: round; }
.tlp-cutaway__key .tlp-k-ground { stroke-dasharray: 3 7; opacity: .3; }
.tlp-cutaway__key .tlp-k-solid { fill: currentColor; opacity: .5; }
.tlp-cutaway__key .tlp-k-wall { fill: currentColor; opacity: .20; stroke: currentColor;
  stroke-opacity: .34; stroke-width: 1.5; }
.tlp-cutaway__key .tlp-k-soil { fill: url(#tlpKeySoil); }
.tlp-cutaway__key .tlp-k-zone { fill: var(--tlp-accent); opacity: 0;
  transition: opacity 620ms var(--tlp-ease) 260ms; }
.tlp-cutaway__key .tlp-k-ring { fill: none; stroke: var(--tlp-accent); stroke-width: 2;
  opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.55);
  transition: opacity 620ms var(--tlp-ease) 420ms, transform 620ms var(--tlp-ease) 420ms; }
.tlp-cutaway__key .tlp-k-lead { fill: none; stroke: var(--tlp-accent); stroke-width: 2;
  stroke-dasharray: 70; stroke-dashoffset: 70;
  transition: stroke-dashoffset 720ms var(--tlp-ease) 760ms; }
.is-in .tlp-cutaway__key .tlp-k-zone { opacity: .95; }
.is-in .tlp-cutaway__key .tlp-k-ring { opacity: .9; transform: scale(1); }
.is-in .tlp-cutaway__key .tlp-k-lead { stroke-dashoffset: 0; }

/* magnified wall section — layers build from the soil side inward */
.tlp-wall { position: relative; border: 1px solid var(--tlp-line);
  border-radius: var(--tlp-radius-lg); overflow: hidden; background: var(--tlp-surface); }
.tlp-wall__stack { display: block; width: 100%; height: auto; color: rgba(255,255,255,.6); }
.tlp-wall__band { transform: scaleX(0); transform-origin: left center;
  transition: transform 760ms var(--tlp-ease); }
.is-in .tlp-wall__band { transform: scaleX(1); }
.is-in .tlp-wall__band--1 { transition-delay: 100ms; }
.is-in .tlp-wall__band--2 { transition-delay: 400ms; }
.is-in .tlp-wall__band--3 { transition-delay: 700ms; }
.is-in .tlp-wall__band--4 { transition-delay: 1000ms; }

/* H2S only appears once the wall is built — the stop has to be the payoff */
.tlp-wall__h2s { opacity: 0; transition: opacity 700ms var(--tlp-ease) 1500ms; }
.is-in .tlp-wall__h2s { opacity: 1; }
.tlp-wall__stopline { opacity: 0; transition: opacity 500ms var(--tlp-ease) 2000ms; }
.is-in .tlp-wall__stopline { opacity: .95; }
.tlp-wall__tick, .tlp-wall__num { opacity: 0; transition: opacity 500ms var(--tlp-ease) 1200ms; }
.is-in .tlp-wall__tick, .is-in .tlp-wall__num { opacity: 1; }

.tlp-wall__labels { list-style: none; margin: 0; padding: var(--tlp-3) var(--tlp-4) var(--tlp-4);
  counter-reset: tlplayer; }
.tlp-wall__labels li { display: grid; grid-template-columns: 22px 1fr; gap: var(--tlp-2);
  align-items: start; padding-block: var(--tlp-2);
  border-top: 1px solid rgba(255,255,255,.14);
  opacity: 0; transform: translateX(-10px);
  transition: opacity 560ms var(--tlp-ease), transform 560ms var(--tlp-ease); }
.tlp-wall__labels li:first-child { border-top: 0; }
.is-in .tlp-wall__labels li { opacity: 1; transform: none; }
.is-in .tlp-wall__labels li:nth-child(1) { transition-delay: 240ms; }
.is-in .tlp-wall__labels li:nth-child(2) { transition-delay: 540ms; }
.is-in .tlp-wall__labels li:nth-child(3) { transition-delay: 840ms; }
.is-in .tlp-wall__labels li:nth-child(4) { transition-delay: 1140ms; }
.tlp-wall__labels .tlp-idx { font-family: var(--tlp-font-mono); font-size: var(--tlp-size-sm);
  font-weight: 600; color: var(--tlp-accent); margin-top: 3px; }
.tlp-wall__labels b { display: block; font-weight: 600; font-size: var(--tlp-size-base);
  color: var(--tlp-inverse-ink); }
.tlp-wall__labels span.tlp-desc { display: block; font-size: var(--tlp-size-sm);
  color: var(--tlp-inverse-ink-soft); }
.tlp-wall__labels li.is-key b { color: var(--tlp-accent); }

/* ---------- THE SHIFT: scroll-driven install timeline ---------- */
.tlp-shift { position: relative; }
.tlp-shift__track { position: relative; padding-left: 30px; }
.tlp-shift__track::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: currentColor; opacity: .18; }
.tlp-shift__fill { position: absolute; left: 7px; top: 6px; width: 2px; height: 0;
  background: var(--tlp-accent); transition: height 120ms linear; }
.tlp-step { position: relative; padding-block: var(--tlp-3); }
.tlp-step::before { content: ""; position: absolute; left: -30px; top: calc(var(--tlp-3) + 8px);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--tlp-inverse-bg); border: 2px solid currentColor; opacity: .4;
  transition: background 400ms var(--tlp-ease), border-color 400ms var(--tlp-ease), opacity 400ms; }
.tlp-step.is-reached::before { background: var(--tlp-accent); border-color: var(--tlp-accent); opacity: 1; }
.tlp-step__t { font-family: var(--tlp-font-mono); font-size: var(--tlp-size-xs); font-weight: 600;
  letter-spacing: var(--tlp-track-wide); color: var(--tlp-accent); }
.tlp-step__h { font-family: var(--tlp-font-display); font-size: var(--tlp-size-xl); margin: 4px 0 6px; }
.tlp-step__d { font-size: var(--tlp-size-base); opacity: .82; margin: 0; max-width: 46ch; }

/* The intro column sticks so the timeline scrolls against it instead of
   leaving a column of dead space underneath a short paragraph. */
@media (min-width: 900px) {
  .tlp-shift-intro { position: sticky; top: 148px; }
}

/* ---------- THE LONG GAME: one dated story, counted up ---------- */
.tlp-longgame { text-align: center; }
.tlp-longgame__year { font-family: var(--tlp-font-display);
  font-size: clamp(4.5rem, 15vw, 11rem); line-height: .88; letter-spacing: -0.04em;
  color: var(--tlp-accent); font-variant-numeric: tabular-nums; }
.tlp-longgame__rule { display: flex; align-items: center; gap: var(--tlp-3);
  max-width: 760px; margin: var(--tlp-4) auto; }
.tlp-longgame__rule::before, .tlp-longgame__rule::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .28; }
.tlp-longgame__rule span { font-size: var(--tlp-size-xs); letter-spacing: var(--tlp-track-wide);
  text-transform: uppercase; opacity: .72; white-space: nowrap; }
.tlp-longgame p { margin-inline: auto; }

/* ---------- VIDEO ---------- */
.tlp-videoslot { max-width: 900px; margin: 2.5rem auto 0; padding: var(--tlp-6) var(--tlp-4);
  border: 2px dashed rgba(255,255,255,.24); border-radius: var(--tlp-radius-lg);
  color: var(--tlp-inverse-ink-soft); }
.tlp-videoslot p { max-width: 52ch; margin-inline: auto; }
.tlp-video { position: relative; max-width: 980px; margin: 2.5rem auto 0;
  aspect-ratio: 16 / 9; border-radius: var(--tlp-radius-lg); overflow: hidden; background: #000; }
.tlp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- SCROLL REVEAL variants ---------- */
.tlp-js .tlp-reveal--up   { transform: translateY(22px); }
.tlp-js .tlp-reveal--left { transform: translateX(-22px); }
.tlp-js .tlp-reveal--in   { transform: scale(.985); }
.tlp-js .tlp-reveal.is-in { transform: none; }

/* ---------- MOTION SAFETY ---------- */
@media (prefers-reduced-motion: reduce) {
  .tlp-hero__media img, .tlp-hero__media .tlp-hero__plate { animation: none; transform: none; }
  .tlp-hero__cue span { animation: none; }
  .tlp-wall__band { transform: none !important; transition: none; }
  .tlp-wall__labels li { opacity: 1 !important; transform: none !important; transition: none; }
  .tlp-cutaway__key .tlp-k-zone { opacity: .9; transition: none; }
  .tlp-cutaway__key .tlp-k-lead { stroke-dashoffset: 0; transition: none; }
  .tlp-step::before { opacity: 1; }
}

/* Headline wrapping — let the browser balance the ragged edge rather than
   breaking on the desktop line break when the column is a phone wide. */
.tlp-h1, .tlp-h2 { text-wrap: balance; }
@media (max-width: 620px) {
  .tlp-hero .tlp-h1 br { display: none; }
  .tlp-hero--tall .tlp-hero__inner { padding-block: calc(74px + 2rem) 4rem; }
}

/* ---------- Centred measure ----------
   A centred heading with left-ragged prose reads as a mistake. When a section
   is centred, the copy block is centred too and capped to a readable measure. */
.tlp-measure-center { max-width: 62ch; margin-inline: auto; }
.tlp-measure-center p { margin-inline: auto; }

/* ---------- Install steps: three cards, centred, no dead gutter ---------- */
.tlp-steps { display: grid; gap: var(--tlp-3); margin-top: var(--tlp-6); }
@media (min-width: 860px) { .tlp-steps { grid-template-columns: repeat(3, 1fr); gap: var(--tlp-4); } }
.tlp-stepcard { display: flex; flex-direction: column; text-align: left; }
.tlp-stepcard__fig { border-radius: var(--tlp-radius-lg); overflow: hidden;
  border: 1px solid var(--tlp-line); background: #0a121e; }
.tlp-stepcard__fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.tlp-stepcard__n { font-family: var(--tlp-font-mono); font-size: var(--tlp-size-xs);
  font-weight: 700; letter-spacing: var(--tlp-track-wide); color: var(--tlp-accent);
  margin-top: var(--tlp-3); }
.tlp-stepcard__h { font-family: var(--tlp-font-display); font-size: var(--tlp-size-xl);
  line-height: 1.2; margin: 6px 0 8px; }
.tlp-stepcard__d { font-size: var(--tlp-size-base); color: var(--tlp-ink-soft); margin: 0; }

/* FAQ full width under a centred heading */
.tlp-faq--wide { max-width: 860px; margin-inline: auto; margin-top: var(--tlp-5); }