/* Сцена «Подставка» (3D). На основном сайте работает в режиме «шаги» (html.deck) и в обычной прокрутке.
   Светлая тема задаётся страницей (stand.html), сцена подхватывает её по color-scheme. */

/* --- обвязка страницы-прототипа (в index.html не нужна) --- */
.stand-page{background:radial-gradient(80vmax 60vmax at 85% 10%,var(--accent-soft),transparent 60%),var(--bg)}
.sp-bar{position:fixed;top:12px;left:12px;right:12px;z-index:20;display:flex;align-items:center;gap:12px;justify-content:space-between;pointer-events:none}
.sp-bar>*{pointer-events:auto}
.sp-back,.sp-theme{padding:9px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--hair);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);text-decoration:none;font-size:14px}
.sp-note{font-size:13px;color:var(--muted)}
.sp-intro{padding:22vh 20px 12vh}
.sp-intro h1{font-size:clamp(28px,4.4vw,52px);max-width:18em}
.sp-outro{padding:20vh 20px 30vh}
@media (max-width:600px){.sp-note{display:none}}

/* --- сама сцена --- */
.stand-scene{position:relative;height:420vh}
.stand-pin{position:sticky;top:0;height:100vh;height:100svh;max-width:1240px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:24px;align-items:center}
.stand-copy{position:relative;z-index:2}
.stand-copy h2{font-size:clamp(26px,3.4vw,42px);margin-bottom:26px}

.sc-step{position:relative;padding:16px 0 16px 46px;border-top:1px solid var(--hair)}
.sc-step h3{color:var(--muted);transition:color .45s var(--ease)}
.sc-step.on h3{color:var(--text)}
.sc-step:last-of-type{border-bottom:1px solid var(--hair)}
.sc-step p{color:var(--muted);font-size:15.5px;max-height:0;overflow:hidden;opacity:0;transition:max-height .55s var(--ease),opacity .4s var(--ease),margin .4s var(--ease)}
.sc-step.on p{max-height:9em;opacity:1;margin-top:6px}
.sc-n{position:absolute;left:0;top:19px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-step.on .sc-n{color:var(--accent)}

.sc-brands{display:flex;flex-wrap:wrap;gap:8px;max-height:0;overflow:hidden;opacity:0;transition:max-height .55s var(--ease),opacity .4s var(--ease),margin .4s var(--ease)}
.sc-step.on .sc-brands{max-height:100px;opacity:1;margin-top:12px}
.sc-brands button{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--hair);background:var(--glass);font-size:14px;transition:border-color .3s,background .3s}
.sc-brands button i{width:12px;height:12px;border-radius:50%;background:#D9743A}
.sc-brands button[data-brand="1"] i{background:#8FB573}
.sc-brands button[data-brand="2"] i{background:#6E86B8}
.sc-brands button[data-brand="3"] i{background:linear-gradient(135deg,#E58FA8,#6B3C8F)}
.sc-brands button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}

.sc-dots{display:flex;gap:8px;margin-top:22px}
.sc-dots button{width:26px;height:6px;border-radius:3px;background:var(--line);transition:background .3s,width .4s var(--spring)}
.sc-dots button.on{background:var(--accent);width:44px}

.stand-view{position:relative;height:min(78vh,760px);min-height:320px}
.stand-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.sc-labels span{position:absolute;left:0;top:0;white-space:nowrap;font-size:13px;padding:6px 11px;border-radius:999px;
  background:var(--glass);border:1px solid var(--hair);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none;will-change:transform}
.sc-labels span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px}
.sc-labels span.on{opacity:1}

.stand-fallback{display:none;position:absolute;inset:6% 10%;width:80%;height:88%}
.no-gl .stand-fallback{display:block}
.no-gl .stand-view canvas,.no-gl .sc-labels{display:none}

@media (max-width:900px){
  .stand-pin{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:4px;padding-top:64px;padding-bottom:18px;align-items:stretch}
  .stand-view{order:-1;height:auto;min-height:0}
  .stand-copy h2{display:none}
  .stand-copy .kicker{margin-bottom:6px}
  .sc-step{display:none;padding:10px 0 4px 40px;border:0}
  .sc-step.on{display:block}
  .sc-step:last-of-type{border:0}
  .sc-step p{font-size:15px}
  .sc-n{top:13px}
  .sc-dots{margin-top:12px}
  .sc-labels span{font-size:12px;padding:5px 9px}
  .sc-step.on .sc-brands{max-height:90px}
  .sc-brands{gap:6px}
  .sc-brands button{height:32px;padding:0 12px 0 9px;font-size:13.5px}
}
.stand-scene .stand-head{margin:0}

/* режим «шаги» основного сайта: экран стоит, шаги идут колесом/свайпом, анимация сама по времени */
.deck .stand-scene{height:auto}
.deck .stand-pin{position:relative;top:auto;height:auto;flex:1 1 auto;min-height:0;width:100%}
.deck .stand-view{height:min(calc(100vh - 150px),760px)}
.deck .sc-dots{display:none}
@media (max-width:900px){
  .deck .stand-pin{padding-top:0;padding-bottom:0}
  .deck .stand-view{height:auto}
}

@media (prefers-reduced-motion:reduce){
  .sc-step h3,.sc-step p,.sc-brands,.sc-labels span,.sc-dots button{transition:none}
}