/* Лаборатория v2 — вёрстка компьютера: широкие сцены, «закреплённая» сцена
 * (sticky) и длинная дорожка прокрутки под ней; прокрутка двигает таймлайн
 * (app.js → Timeline.seek). Длина сцены — --len экранов.
 */
.hint-m { display: none; }
.dots { display: none; }
.pin { height: calc(var(--len, 1) * 100vh); }
.pin > .stage { position: sticky; top: 0; height: 100vh; }
#s1 { --len: 2.4; }
#s2 { --len: 4.4; }
#s3 { --len: 6; }
.rm .pin { height: auto; }
.rm .pin > .stage { position: relative; height: auto; min-height: 100vh; }

/* ------------------------------------------------------------------ 1 */
#s1 .stage { display: grid; align-content: center; padding: var(--bar-h) 7vw 0; }
#s1 .kicker { position: absolute; top: calc(var(--bar-h) + 7vh); left: 7vw; }
.kin { font-size: clamp(64px, 11.2vw, 200px); position: relative; z-index: 1; }
/* українські титри довші — кегль менший, щоб не залазити на єдинорога праворуч */
html[data-lang="uk"] .kin { font-size: clamp(54px, 8.2vw, 150px); }
.lw2 { padding-left: 14vw; }
.lw3 { padding-left: 5vw; }
#s1 .sub { position: absolute; left: 7vw; bottom: 9vh; max-width: 34ch; font-size: 17px; }
#s1 .hint { position: absolute; right: 7vw; bottom: 9vh; }
.h3d { right: 4vw; top: calc(var(--bar-h) + 3vh); bottom: 16vh; width: 34vw; }

/* ------------------------------------------------------------------ 2 */
#s2 .stage {
  display: grid; grid-template-columns: minmax(250px, .9fr) 1.6fr minmax(230px, .7fr);
  align-items: center; gap: 3vw; padding: calc(var(--bar-h) + 2vh) 5vw 4vh;
}
.b-copy h2 { font-size: clamp(34px, 3.6vw, 56px); margin: 16px 0; }
.b-copy .lead { max-width: 34ch; }
#s2 .viewer { height: min(80vh, 760px); }
.knobs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; align-content: center; }
.knob { width: 100%; max-width: 130px; }
.k-side { grid-column: 1 / -1; display: grid; gap: 14px; margin-top: 8px; }
.knob[data-k="fh"] { grid-column: 1 / -1; justify-self: center; max-width: 150px; }
.picks { margin-top: 26px; max-width: 34ch; }
.try { position: absolute; right: 5vw; bottom: 5vh; }

/* ------------------------------------------------------------------ 3 */
#s3 .stage { padding-top: calc(var(--bar-h) + 6vh); }
.p-head { padding: 0 7vw; display: flex; align-items: end; justify-content: space-between; gap: 4vw; }
.p-head h2 { font-size: clamp(36px, 4.4vw, 68px); margin-top: 12px; }
#s3 .bars { position: absolute; left: 7vw; right: 7vw; top: calc(var(--bar-h) + 2vh); display: flex; gap: 6px; }
.bars i { flex: 1; height: 2px; background: var(--bg-3); overflow: hidden; }
.bars b { display: block; height: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(var(--b, 0)); }
.track {
  list-style: none; margin: 0; padding: 0 7vw; position: absolute; left: 0; top: 34vh;
  display: flex; gap: 6vw; width: max-content; transform: translateX(var(--tx, 0px)); will-change: transform;
}
.fr { width: min(34vw, 520px); position: relative; display: grid; gap: 12px; }
.fr-n { position: absolute; top: -13vh; left: -1vw; font-size: 14vw; z-index: -1; }
.fr-art { max-height: 40vh; }
.fr p { max-width: 36ch; }
.rm .track { position: relative; top: 0; flex-wrap: wrap; width: auto; margin-top: 12vh; padding-bottom: 12vh; transform: none; }
.rm .fr { width: calc((100% - 12vw) / 3); margin-bottom: 14vh; }

/* ------------------------------------------------------------------ 4 */
#s4 .stage { padding: 20vh 6vw 16vh; }
.marq { top: 5vh; }
.c-head { position: relative; margin-bottom: 7vh; }
.c-head h2 { font-size: clamp(40px, 5.4vw, 84px); margin-top: 14px; max-width: 14ch; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2vw; perspective: 1400px; }
.card:nth-child(3n + 2) { transform: translateY(9vh); }
.card a { height: min(54vh, 520px); padding: 22px; align-content: end; gap: 6px; transition: transform .5s var(--ease), box-shadow .5s; }
.card a:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 80%); }
.card a:hover .art { transform: scale(1.08); }
/* ритм входа: карточки «бьют» по очереди, через одну с разных сторон */
.card { --rx: 0; --ry: 80px; --rr: 5deg; }
.card:nth-child(even) { --ry: 140px; --rr: -5deg; }
.cards .card > a { opacity: 0; translate: 0 var(--ry); rotate: var(--rr); scale: .94;
  transition: opacity .9s var(--ease), translate 1s var(--spring), rotate 1s var(--spring), scale 1s var(--spring), transform .5s var(--ease), box-shadow .5s; }
.cards .card.in > a { opacity: 1; translate: none; rotate: none; scale: none; }
.card:nth-child(1).in > a, .card:nth-child(4).in > a { transition-delay: 0s; }
.card:nth-child(2).in > a, .card:nth-child(5).in > a { transition-delay: .12s; }
.card:nth-child(3).in > a, .card:nth-child(6).in > a { transition-delay: .24s; }
.sda .cards .card > a { transition: transform .5s var(--ease), box-shadow .5s; animation: beat linear both; animation-timeline: view(); }
.sda .card:nth-child(3n + 1) > a { animation-range: entry 0% cover 30%; }
.sda .card:nth-child(3n + 2) > a { animation-range: entry 10% cover 38%; }
.sda .card:nth-child(3n) > a { animation-range: entry 20% cover 46%; }
@keyframes beat {
  from { opacity: 0; translate: 0 var(--ry); rotate: var(--rr); scale: .94; }
  70% { opacity: 1; }
  to { opacity: 1; translate: none; rotate: none; scale: none; }
}
.rm .cards .card > a { opacity: 1; translate: none; rotate: none; scale: none; }

/* ------------------------------------------------------------------ 5 */
#s5 .stage { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 4vh; padding: 16vh 7vw 5vh; }
.kin2 .line { display: block; }
.kin2 .line.ac { padding-left: 12vw; }
.cta-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.foot { margin-top: auto; padding-top: 8vh; border-top: 1px solid var(--line); padding-top: 18px; }