/* ===========================================================
   СКРОЛЛ-СКРАБ — «Артефакт»
   Самодостаточный компонент. Не зависит от artefakt.css,
   но подхватывает его токены, если они есть.
   Подключение: этот файл + scrub.js. Разметка — см. README.md
   =========================================================== */

[data-scrub] {
  --scrub-bg:      var(--walnut, #100904);
  --scrub-ink:     var(--cream, #ffedd7);
  --scrub-accent:  var(--ember, #dc5000);
  --scrub-travel:  140vh;   /* высота прокрутки поверх липкого экрана */
  --scrub-stage:   100svh;  /* высота липкого кадра */

  position: relative;
  display: block;
  background: var(--scrub-bg);
  /* до инициализации JS секция не должна ломать поток */
  min-height: var(--scrub-stage);
}

/* Высоту задаёт JS (data-scrub-travel), это — запасное значение */
[data-scrub][data-scrub-ready] {
  height: calc(var(--scrub-stage) + var(--scrub-travel));
}

/* Статичный режим: reduced-motion, медленная сеть, провал загрузки */
[data-scrub][data-scrub-static] {
  height: auto;
  min-height: var(--scrub-stage);
}

.scrub__stage {
  position: sticky;
  top: 0;
  height: var(--scrub-stage);
  width: 100%;
  overflow: hidden;
  display: block;
  background: var(--scrub-bg);
}

[data-scrub][data-scrub-static] .scrub__stage {
  position: relative;
}

.scrub__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* фон виден, пока кадр не отрисован */
  background: var(--scrub-bg);
}

/* Постер — запасной путь, если кадры не загрузились */
.scrub__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

[data-scrub][data-scrub-failed] .scrub__poster { display: block; }
[data-scrub][data-scrub-failed] .scrub__canvas { display: none; }

/* --- Индикатор предзагрузки --- */
.scrub__load {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6vh, 64px);
  transform: translateX(-50%);
  width: min(240px, 42vw);
  opacity: 1;
  transition: opacity .5s ease .1s;
  pointer-events: none;
  z-index: 2;
}

.scrub__load[hidden] { display: block; opacity: 0; }

.scrub__bar {
  position: relative;
  height: 2px;
  width: 100%;
  background: color-mix(in srgb, var(--scrub-ink) 22%, transparent);
  overflow: hidden;
}

.scrub__bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--scrub-accent);
  transition: width .18s linear;
}

.scrub__pct {
  display: block;
  margin-top: 10px;
  font: 500 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--scrub-ink) 62%, transparent);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Свободный слой поверх кадра (заголовки и т.п.) --- */
.scrub__overlay {
  position: relative;
  z-index: 3;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.scrub__overlay > * { pointer-events: auto; }

/* Подсказка «крути» — гаснет после начала прокрутки */
.scrub__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4.5vh, 48px);
  transform: translateX(-50%);
  z-index: 4;
  font: 500 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--scrub-ink) 55%, transparent);
  transition: opacity .4s ease;
  pointer-events: none;
}

[data-scrub][data-scrub-moved] .scrub__hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .scrub__bar > i,
  .scrub__load,
  .scrub__hint { transition: none; }
}