/* ============================================================ ЛАБОРАТОРИЯ
   Витрина приёмов движения. Визуальная система та же — бумага, линейки,
   радиус 0. Отличие одно: здесь у блоков есть рамка, потому что демо
   должно быть отделено от страницы, иначе непонятно, где кончается пример. */

.demo { padding: var(--s9) 0 0; }
.demo:last-of-type { padding-bottom: var(--s9); }

.demo__h {
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s5); align-items: baseline;
  border-bottom: 1px solid var(--ink); padding-bottom: var(--s5);
}
.demo__n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--flame); }
.demo__h h2 {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(24px, 3vw, 42px); letter-spacing: -0.04em; line-height: 1.02;
}
.demo__lead { margin-top: var(--s3); font-size: var(--t-lede); color: var(--ink-mid); max-width: 56ch; }

/* сцена — единственное место с рамкой */
.demo__stage {
  border: 1px solid var(--rule); background: var(--sheet);
  margin: var(--s6) 0; padding: var(--s7) var(--s6);
  position: relative; overflow: hidden;
}

.demo__facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}
.demo__facts > div {
  padding: var(--s5) var(--s5) var(--s6) 0;
  border-right: 1px solid var(--rule); min-width: 0;
}
.demo__facts > div:last-child { border-right: 0; }
.demo__facts > div + div { padding-left: var(--s5); }
.demo__facts dt {
  font-family: var(--mono); font-size: var(--t-lab); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s3);
}
.demo__facts dd { margin: 0; font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.6; }
.demo__facts b { font-family: var(--mono); font-size: var(--t-md); color: var(--violet); }
.demo__facts code {
  font-family: var(--mono); font-size: 12px;
  background: var(--newsprint); border: 1px solid var(--rule); padding: 1px 5px;
}
@media (max-width: 900px) {
  .demo__facts { grid-template-columns: 1fr; }
  .demo__facts > div { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0 !important; }
  .demo__h { grid-template-columns: 44px 1fr; gap: var(--s4); }
}

/* ── 01 · появление и параллакс ─────────────────────────────────────── */
.sc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.sc__card {
  border: 1px solid var(--rule); background: var(--newsprint);
  padding: var(--s5); min-height: 190px;
  display: grid; align-content: space-between;
}
.sc__card b { font-family: var(--disp); font-weight: 700; font-size: var(--t-h3); letter-spacing: -0.03em; }

/* Нативная временная шкала прокрутки: браузер считает прогресс сам,
   основной поток не участвует. Где не поддерживается — блок просто виден. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sc__card {
      animation: sc-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 42%;
    }
    .sc__card--b { animation-name: sc-in, sc-shift; }
    .sc__card--c { animation-name: sc-in, sc-scale; }
  }
}
@keyframes sc-in { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
@keyframes sc-shift { from { transform: translateY(48px) } to { transform: translateY(-14px) } }
@keyframes sc-scale { from { transform: scale(0.92) } to { transform: scale(1) } }

@media (max-width: 760px) { .sc { grid-template-columns: 1fr; } }

/* ── 02 · секвенция ─────────────────────────────────────────────────── */
.seq { display: grid; justify-items: center; gap: var(--s4); }
.seq__c { width: min(360px, 78%); height: auto; border: 1px solid var(--rule); background: var(--newsprint); }
.seq__bar { width: min(360px, 78%); height: 2px; background: var(--rule); }
.seq__bar i { display: block; height: 100%; width: 0; background: var(--flame); }
.seq__hint {
  font-family: var(--mono); font-size: var(--t-lab); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ── 03 · спутник курсора ───────────────────────────────────────────── */
.cur { position: relative; min-height: 220px; display: grid; align-content: center; gap: var(--s4); cursor: crosshair; }
.cur p { font-size: var(--t-lede); color: var(--ink-mid); max-width: 46ch; position: relative; z-index: 1; }
.cur a { border-bottom: 1px solid var(--violet); color: var(--violet); }
.cur__touch { font-size: var(--t-sm) !important; color: var(--ink-faint) !important; }
.cur__dot {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 26px; height: 26px; border: 1px solid var(--violet);
  opacity: 0; pointer-events: none;
  transition: opacity var(--base) var(--ease), width var(--base) var(--ease),
              height var(--base) var(--ease), background var(--base) var(--ease);
}
.cur__dot.is-big { width: 64px; height: 64px; background: color-mix(in srgb, var(--violet) 12%, transparent); }
@media (hover: none) { .cur { cursor: auto; } }

/* ── 04 · магнитная кнопка ──────────────────────────────────────────── */
.mag { min-height: 200px; display: grid; place-content: center; }
.mag__b { transition: transform var(--slow) var(--ease), background var(--base) var(--ease); }

/* ── 05 · заголовок по словам ───────────────────────────────────────── */
.spl { min-height: 180px; display: grid; align-content: center; }
.spl__t {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(26px, 4.4vw, 58px); letter-spacing: -0.04em; line-height: 1.04;
  max-width: 18ch;
}
.spl__w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.spl__w i { display: inline-block; font-style: normal; transform: translateY(105%); }
.spl.is-in .spl__w i, .spl__t.is-in .spl__w i {
  transform: none;
  transition: transform 520ms var(--ease);
  transition-delay: calc(var(--i) * 55ms);
}

/* ── 06 · шторка ────────────────────────────────────────────────────── */
.rev { display: grid; justify-items: center; gap: var(--s5); }
.rev__box {
  width: min(420px, 100%); min-height: 220px;
  background: var(--night); color: var(--newsprint);
  display: grid; align-content: space-between; padding: var(--s5);
  clip-path: inset(0 0 0 0);
}
.rev__box .lab { color: var(--flame); }
.rev__box b { font-family: var(--disp); font-weight: 700; font-size: var(--t-h2); letter-spacing: -0.04em; }
.rev__box.is-in { animation: rev 760ms var(--ease) both; }
@keyframes rev { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }

@media (prefers-reduced-motion: reduce) {
  .rev__box.is-in { animation: none; }
  .spl__w i { transform: none; }
  .mag__b { transition: none; }
}

.spl { gap: var(--s5); justify-items: start; }
.spl__go { margin-top: var(--s3); }