/* Лаборатория v2 — вёрстка телефона: не уменьшенный компьютер, а «ролики»
 * 9:16. Каждая сцена — экран, вертикальный свайп переключает сцену
 * (scroll-snap), кадры процесса и виды — горизонтальные свайпы-истории.
 * Сцена проигрывает свой таймлайн, когда встала на экран (app.js).
 */
html { scroll-snap-type: y mandatory; }
.hint-d { display: none; }
.scene { height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }
.stage { height: 100svh; }
.rm .scene { height: auto; min-height: 100svh; }
.rm .stage { height: auto; min-height: 100svh; }
.rm html, html.rm { scroll-snap-type: none; }
.tc { display: none; }
.bar { gap: 8px; }
.bar .cart span { display: none; }
.bar .btn-s { padding: 0 13px; }
/* узкий телефон (320–350): «Створити» в шапке не помещался — ужимаем поля переключателя языка и промежутки */
@media (max-width: 350px) {
  .bar { gap: 6px; }
  .bar-r { gap: 6px; }
  .lang button { padding: 6px 7px; }
  .bar .btn-s { padding: 0 11px; }
}
.dots { position: fixed; right: 8px; top: 50%; transform: translateY(-50%); z-index: 40; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px; }
.dots li { width: 4px; height: 4px; border-radius: 2px; background: var(--line); transition: height .4s var(--spring), background .3s; }
.dots li.on { height: 18px; background: var(--acc); }

/* ------------------------------------------------------------------ 1 */
#s1 .stage { display: flex; flex-direction: column; justify-content: flex-start; gap: 2svh;
  padding: calc(var(--bar-h) + 3svh) 20px calc(78px + env(safe-area-inset-bottom)); }
/* единорог — между титрами и подписью, в первом же экране */
#s1 .kicker { order: 0; } .kin { order: 1; } .h3d { order: 2; } #s1 .sub { order: 3; }
.h3d { position: relative; flex: 1; min-height: 190px; margin: -2svh -20px 0; }
/* низкий экран (320×568…700): подпись наезжала на «Гортайте вгору» — единорогу меньше места */
@media (max-height: 760px) { .h3d { min-height: 130px; } }
.h-foot { gap: 1px; }
/* подпись автора модели на телефоне — в две строки: подвал выше 52 px, ссылка упиралась в подставку */
.uni-art { bottom: 66px; height: calc(100% - 66px); }
.h3d .cv { height: calc(100% - 66px); }
.kin { font-size: min(17.5vw, 10.5svh); }
/* українські титри довші («Подивіться.») — менший кегль, щоб рядок не вилазив за екран і лишалось місце єдинорогу.
 * Третій член min() — ширина: «Подивіться.» с отступом 4vw в широком засечном шрифте телефона
 * (Noto Serif на Android, Iowan на iPhone — шире Palatino) занимает до 6.4em; делим доступную
 * ширину (экран − поля 2×20px − отступ) на 7em — с запасом под выносы глифов и обводку. */
html[data-lang="uk"] .kin { font-size: min(13.6vw, 9svh, calc((96vw - 40px) / 7)); }
html[data-lang="uk"] .lw2 { padding-left: 4vw; }
.lw2 { padding-left: 8vw; }
#s1 .sub { font-size: 16px; max-width: 30ch; position: relative; z-index: 1; }
#s1 .hint { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); justify-content: center; flex-direction: column; gap: 6px; }
#s1 .kicker { position: relative; z-index: 1; }
.lb { display: none; }

/* ------------------------------------------------------------------ 2 */
#s2 .stage { display: flex; flex-direction: column; padding: calc(var(--bar-h) + 1svh) 18px calc(10px + env(safe-area-inset-bottom)); gap: 1.2svh; }
.b-copy h2 { font-size: min(8.6vw, 4.4svh); margin-top: 8px; }
.b-copy .lead { display: none; }
#s2 .viewer { flex: 1; min-height: 0; margin: 0 -18px; }
.ghost { font-size: 30vw; }
.knobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.knob { width: 100%; max-width: 104px; justify-self: center; }
.k-num { font-size: 19px; }
.k-name { font-size: 11px; }
.k-side { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* фигурка: ручка высоты слева, материал и цвет справа, кнопка конфигуратора — строкой ниже */
#s2[data-m="figure"] .knobs { grid-template-columns: 92px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; }
#s2[data-m="figure"] .k-side { grid-column: 2; align-items: flex-start; gap: 8px; }
/* 9 цветов (с графитом и чёрным) — одной строкой */
#s2[data-m="figure"] .sw { gap: 4px; flex-wrap: nowrap; }
#s2[data-m="figure"] .sw button { width: 22px; height: 22px; flex: none; }
.mat button { min-height: 34px; padding: 0 11px; font-size: 12px; }
.b-go { justify-self: stretch; min-height: 44px; }
.picks { flex-wrap: nowrap; overflow-x: auto; margin: 1svh -18px 0; padding: 2px 18px; scrollbar-width: none; }
.picks::-webkit-scrollbar { display: none; }
.picks button { min-height: 34px; font-size: 12px; }
.viewer .credit { font-size: 10px; }
.sw button { width: 30px; height: 30px; }
.try { text-align: center; font-size: 13px; min-height: 1.4em; }
.badge { font-size: 12px; bottom: 3%; }

/* ------------------------------------------------------------------ 3: истории */
#s3 .stage { display: flex; flex-direction: column; padding-top: calc(var(--bar-h) + 1svh); }
.p-head { padding: 0 20px; }
.p-head h2 { font-size: min(9vw, 4.6svh); margin-top: 8px; }
#s3 .bars { display: flex; gap: 4px; padding: 2svh 20px 0; }
.bars i { flex: 1; height: 3px; border-radius: 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; flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.fr { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative; display: flex; flex-direction: column;
  justify-content: center; gap: 1.6svh; padding: 0 28px 6svh; }
.fr-n { position: absolute; right: 16px; top: 2svh; font-size: 30vw; }
.fr-art { max-height: 36svh; }
.fr h3 { font-size: min(10vw, 5.4svh); }
.fr p { font-size: 17px; }
.rm .track { flex-direction: column; overflow: visible; }
.rm .fr { flex: none; padding: 6svh 28px; }

/* ------------------------------------------------------------------ 4: карусель */
#s4 .stage { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--bar-h) + 2svh) 0 4svh; gap: 3svh; }
.marq { top: calc(var(--bar-h) + 1svh); font-size: 26vw; }
.c-head { padding: 0 20px; position: relative; }
.c-head h2 { font-size: min(10vw, 5.2svh); margin-top: 8px; }
.cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2svh 12vw 3svh; scrollbar-width: none;
  overscroll-behavior-x: contain; }
.cards::-webkit-scrollbar { display: none; }
.card { flex: 0 0 76vw; scroll-snap-align: center; }
.card a { height: min(56svh, 460px); padding: 20px; align-content: end; gap: 6px; transform: scale(.88); opacity: .55;
  transition: transform .5s var(--spring), opacity .5s; }
.card.on a { transform: none; opacity: 1; }
.sda .card a { transition: none; animation: focus linear both; animation-timeline: view(inline); }
@keyframes focus {
  0% { transform: scale(.82) rotate(-3deg); opacity: .4; }
  50% { transform: none; opacity: 1; }
  100% { transform: scale(.82) rotate(3deg); opacity: .4; }
}
.card b { font-size: min(8.4vw, 34px); }
.rm .card a { transform: none; opacity: 1; }

/* ------------------------------------------------------------------ 5 */
#s5 .stage { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--bar-h) + 3svh) 20px calc(12px + env(safe-area-inset-bottom)); gap: 3svh; }
.kin2 { font-size: min(19vw, 10svh); }
.kin2 .line { display: block; }
.kin2 .line.ac { padding-left: 10vw; }
.cta-row { display: grid; gap: 16px; justify-items: center; }
.cta-row .btn { width: 100%; }
.note { text-align: center; }
.foot { margin-top: auto; justify-content: center; border-top: 1px solid var(--line); padding-top: 14px; }