/*!
 * WCL Scroll Progress v1.0 — CSS-часть.
 * Движок (scroll-progress.js) пишет в секцию --p (линейный 0..1) и --pe (сглаженный).
 * Тут описано, ЧТО эти цифры двигают. Правим только переменные карточек.
 */

/* ---------- секция-сцена ---------- */
[data-scroll-progress] {
  --p: 0;                    /* линейный прогресс скролла 0..1 */
  --sp-travel: 0px;          /* вылет .sp-track за экран — считает JS */
  --pe: 0;                   /* он же со сглаживанием easeInOutCubic */
  position: relative;
}

/* Липкая сцена: секция высокая, картинка внутри стоит на месте, пока идёт скролл.
   Высоту задаём на самой секции: min-height: 250vh и т.п. */
.sp-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ---------- карточка ---------- */
/* Все значения интерполируются от «старт» к «финиш» по прогрессу --t. */
.sp-card {
  --sx: 0px;   --ex: 0px;    /* X: откуда → куда */
  --sy: 0px;   --ey: 0px;    /* Y: откуда → куда */
  --s0: 1;     --s1: 1;      /* масштаб */
  --r0: 0deg;  --r1: 0deg;   /* поворот */
  --o0: 1;     --o1: 1;      /* прозрачность */
  --b0: 0px;   --b1: 0px;    /* размытие */
  --d: 0;                    /* задержка карточки, 0..0.8 — даёт «веер» */

  /* прогресс конкретной карточки с учётом её задержки */
  --t: clamp(0, calc((var(--pe) - var(--d)) / (1 - var(--d))), 1);

  transform:
    translate3d(
      calc(var(--sx) + (var(--ex) - var(--sx)) * var(--t)),
      calc(var(--sy) + (var(--ey) - var(--sy)) * var(--t)),
      0)
    scale(calc(var(--s0) + (var(--s1) - var(--s0)) * var(--t)))
    rotate(calc(var(--r0) + (var(--r1) - var(--r0)) * var(--t)));
  opacity: calc(var(--o0) + (var(--o1) - var(--o0)) * var(--t));
  filter: blur(calc(var(--b0) + (var(--b1) - var(--b0)) * var(--t)));
  will-change: transform, opacity;
}

/* Полоса прогресса секции — бесплатно, из той же переменной */
.sp-progress {
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: 100%; transform-origin: left center;
  transform: scaleX(var(--p));
  background: linear-gradient(90deg, var(--c1, #00d4ff), var(--c2, #8b5cf6));
}

/* Горизонтальная лента, которую тянет вертикальный скролл */
.sp-track {
  display: flex;
  gap: 24px;
  will-change: transform;
  transform: translate3d(calc(var(--pe) * -1 * var(--sp-travel)), 0, 0);
}

/* Появление заголовка: до старта прячем, к 30% прогресса выводим */
.sp-fade {
  position: relative;
  z-index: 5;                /* карточки летят ПОД заголовком, а не по нему */
  --t: clamp(0, calc(var(--pe) / .3), 1);
  opacity: var(--t);
  transform: translate3d(0, calc(24px - 24px * var(--t)), 0);
}


/* ---------- раскладки под авто-разлёт ---------- */
/* Финиш карточки = её штатное место в layout. Поэтому сборку можно
   собирать в сетку, в ряд, в стопку — animation этого не знает. */

.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  width: min(1140px, 92vw);
}
.sp-grid > * { min-width: 0; }          /* иначе распирает грид */

/* Стопка: карточки ложатся друг на друга со сдвигом (кейсы, портфолио) */
.sp-deck { position: relative; width: min(520px, 84vw); height: min(360px, 52vh); }
.sp-deck > .sp-card { position: absolute; inset: 0; }
.sp-deck > .sp-card:nth-child(1) { --ex: -18px; --ey: -18px; --r1: -3deg; }
.sp-deck > .sp-card:nth-child(2) { --ex:  -6px; --ey:  -6px; --r1: -1deg; }
.sp-deck > .sp-card:nth-child(3) { --ex:   6px; --ey:   6px; --r1:  1deg; }
.sp-deck > .sp-card:nth-child(4) { --ex:  18px; --ey:  18px; --r1:  3deg; }

/* Порядок наложения: чем позже карточка «прилетает», тем она выше */
.sp-deck > .sp-card:nth-child(1) { z-index: 1 }
.sp-deck > .sp-card:nth-child(2) { z-index: 2 }
.sp-deck > .sp-card:nth-child(3) { z-index: 3 }
.sp-deck > .sp-card:nth-child(4) { z-index: 4 }

/* Мобильная амплитуда разлёта считается в JS (scatter): <768px множитель × .55 */

/* ---------- доступность ---------- */
/* Движок при reduce сразу ставит --pe:1 (финальное состояние), плюс глушим переходы */
@media (prefers-reduced-motion: reduce) {
  .sp-card, .sp-track, .sp-fade { transition: none !important; filter: none !important; }
  .sp-deck > .sp-card { position: relative; inset: auto; }   /* стопка разворачивается в столбик */
  .sp-stage { position: static; height: auto; }
}