/* v3, компьютер: полный режим. Страница прокручивается, каждая станция — экран высотой
 * в окно; камера летит по прокрутке. Карточки — слева, изделие — справа (смещение
 * кадра делает сцена). Справа — рельс станций. */
#tour { position: relative; z-index: 10; pointer-events: none; outline: none; }
.st { height: 100vh; display: flex; align-items: center; padding: 96px 48px 48px max(48px, 5vw); }
.st .card { pointer-events: auto; width: min(420px, 38vw); padding: 28px 30px 26px; }
.st h2 { font-size: clamp(26px, 2.4vw, 34px); }
.st[data-id="intro"] .card { width: min(460px, 40vw); padding: 32px 34px 28px; }
.st[data-id="intro"] h1 { font-size: clamp(36px, 3.6vw, 54px); }
.st[data-id="intro"] .text { font-size: 17px; }
.st[data-id="outro"] { justify-content: center; align-items: flex-end; padding-bottom: 10vh; }
.st[data-id="outro"] .card { text-align: center; width: min(520px, 50vw); }
.st[data-id="outro"] .acts { justify-content: center; }
.hint-scroll { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.hint-scroll::before { content: ""; width: 18px; height: 28px; border: 2px solid currentColor; border-radius: 10px;
  background: radial-gradient(circle at 50% 30%, currentColor 2px, transparent 3px); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 50% { background-position: 0 6px; } }

/* карточка проявляется, когда её станция в кадре */
.st .card { opacity: .0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.st.on .card { opacity: 1; transform: none; }
.no-gl .st .card, .reduced .st .card { opacity: 1; transform: none; }

/* рельс станций */
#nav { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 20; }
#nav a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 28px; color: var(--muted);
  text-decoration: none; font-size: 13px; font-weight: 600; }
#nav a span { opacity: 0; transform: translateX(6px); transition: opacity .25s var(--ease), transform .25s var(--ease);
  padding: 3px 9px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); }
#nav a i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; transition: all .25s var(--ease); }
#nav a:hover span, #nav a:focus-visible span, #nav a[aria-current="step"] span { opacity: 1; transform: none; }
#nav a[aria-current="step"] { color: var(--accent); }
#nav a[aria-current="step"] i { background: currentColor; transform: scale(1.25); }
#pager, .hint-swipe { display: none; }

/* крупный план: панель справа, карточки уходят, прокрутка стоит */
#focus { right: 24px; top: 88px; width: 360px; max-height: calc(100vh - 112px); overflow: auto; border-radius: var(--radius);
  padding: 24px 24px 22px; animation: slidein .45s var(--ease); }
@keyframes slidein { from { opacity: 0; transform: translateX(24px); } }
.focusing { overflow: hidden; }
.focusing #tour, .focusing #nav { opacity: 0; pointer-events: none; transition: opacity .3s; }
.focusing #tour .card { pointer-events: none; }
.pickable #gl { cursor: pointer; }
.f-grip { display: none; }
/* мышью — тянуть стол по горизонтали, а прокрутка сенсорного экрана остаётся вертикальной */
#gl { touch-action: pan-y; }
/* подсказка — под изделием, в свободной от карточки части кадра */
#ghint { left: calc(max(48px, 5vw) + min(420px, 38vw) + 16px); right: 90px; bottom: 7vh; margin: 0 auto;
  width: max-content; max-width: min(440px, calc(100vw - max(48px, 5vw) - min(420px, 38vw) - 106px)); }
.focusing #gl { cursor: grab; }
.focusing #gl:active { cursor: grabbing; }

/* без WebGL: те же экраны, рисунок в карточке, без «мёртвой» сцены */
.no-gl .st { height: auto; min-height: 70vh; }