/* Развилка (вариант F, утверждён 20.09.2026): кино на весь экран и две карточки направлений.
   Страница делает одно — просит выбрать направление. Фон следует за карточкой под курсором. */
body.gw{min-height:100vh;display:flex;flex-direction:column;--veil-t:6,10,16;--veil-a:24,16,4}
body.gw .npk-amb,body.gw .npk-weave{display:none}
body.gw .npk-dir{display:none}          /* на развилке выбор и так на экране, полоса дублировала бы его */
body.gw .npk-head{background:none;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
body.gw main{flex:1;display:flex;flex-direction:column;position:relative;z-index:2;isolation:isolate}   /* выше подвала: кнопка паузы закреплена внизу справа */
.gw .bgw{position:fixed;inset:0;overflow:hidden;z-index:-3;opacity:0;transition:opacity 1.1s ease}
.gw .bg{width:100%;height:100%;object-fit:cover;display:block}
.gw .bgw.a .bg{transform:scale(1.34)}           /* у ролика с гранулой вшиты чёрные поля */
body.gw[data-side="t"] .bgw.t,body.gw[data-side="a"] .bgw.a{opacity:1}
.gw main::before{content:"";position:fixed;inset:0;z-index:-2;transition:background .8s}
body.gw[data-side="t"] main::before{background:linear-gradient(180deg,rgba(var(--veil-t),.72) 0%,rgba(var(--veil-t),.38) 34%,rgba(var(--veil-t),.86) 100%)}
body.gw[data-side="a"] main::before{background:linear-gradient(180deg,rgba(var(--veil-a),.72) 0%,rgba(var(--veil-a),.38) 34%,rgba(var(--veil-a),.86) 100%)}

.ask-dir{padding-top:clamp(28px,7vh,84px)}
/* 21.09.2026: вместо «НПК «КРЕДОНИКС»» одной разреженной строкой — наименование целиком
   в две строки. Прежний набор (капс + трекинг .16em) на длинной фразе рассыпался. */
.ask-dir small{display:block;color:var(--amber);margin-bottom:16px}
.ask-dir small b{display:block;font-size:13px;font-weight:600;letter-spacing:.05em;opacity:.9}
.ask-dir small i{display:block;font-style:normal;font-size:15.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;margin-top:3px}
.ask-dir h1{font-size:clamp(34px,5vw,76px);line-height:1;font-weight:800;letter-spacing:-.04em;margin:0}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:auto;padding-block:clamp(28px,5vh,56px) clamp(24px,5vh,56px)}
.door{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);border:1px solid rgba(255,255,255,.14);cursor:pointer;
  padding:clamp(22px,2.6vw,38px);min-height:clamp(260px,38vh,380px);background:rgba(10,10,10,.5);backdrop-filter:blur(10px) saturate(1.1);
  transition:border-color .3s,background .3s,transform .4s var(--ease),opacity .3s}
.door::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.door.on{border-color:rgba(245,166,35,.6);background:rgba(10,10,10,.34);transform:translateY(-4px)} .door.on::before{transform:scaleX(1)}
.doors.picked .door:not(.on){opacity:.72}
.chip{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);padding:6px 12px;border-radius:6px;border:1px solid currentColor;margin-bottom:auto}
.door h2{font-size:clamp(28px,3.2vw,48px);line-height:1.04;font-weight:800;letter-spacing:-.03em;margin:28px 0 12px}
.door p{color:#d2d2d2;font-size:clamp(15px,1.1vw,17.5px);max-width:30em;margin-bottom:22px}
.go{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:auto;min-height:46px;font-weight:700;font-size:16px;padding:12px 22px;border-radius:10px;border:1px solid var(--amber);color:var(--amber);transition:background .18s,color .18s}
.go i{font-style:normal;transition:transform .18s var(--ease)}
.door:hover .go,.door.on .go{background:var(--amber);color:#140c00} .door:hover .go i{transform:translateX(4px)}
body.gw .npk-foot{background:rgba(6,7,8,.84)}
.gw-cap{position:fixed;right:clamp(16px,4vw,40px);bottom:clamp(16px,3vh,28px);z-index:3;display:flex}

/* Телефон (решение Антона 20.09.2026, после пробы «слева-справа»): двери сверху и снизу, обе на одном экране без прокрутки.
   Экран поделён пополам по горизонтали, у каждой половины свой ролик — горизонтальные ролики ложатся в такие половины без сильной обрезки.
   Сетка main: заголовок / дверь «ткань» / дверь «гранула» = ровно 50svh; ролики — элементы той же сетки, поэтому граница совпадает с дверями. */
@media (max-width:820px) and (orientation:portrait){
  body.gw{min-height:100svh}
  body.gw main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(min-content,1fr) minmax(min-content,50svh);min-height:100svh;margin-top:-66px}
  body.gw main::before{display:none}
  .gw .bgw{position:relative;inset:auto;opacity:1;transition:none;grid-column:1;min-height:0}
  .gw .bgw.t{grid-row:1/3} .gw .bgw.a{grid-row:3;border-top:1px solid rgba(255,255,255,.22)}
  .gw .bgw .bg{position:absolute;inset:0}
  .gw .bgw.t .bg{object-position:30% 50%}       /* в кадре остаются рулон, барабан и ванна */
  .gw .bgw::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,10,.62) 0%,rgba(6,8,10,.18) 38%,rgba(6,8,10,.9) 100%)}
  .ask-dir{grid-row:1;grid-column:1;padding-top:calc(66px + 10px);padding-bottom:4px}
  .ask-dir small{margin-bottom:6px}
  .ask-dir small b{font-size:11px} .ask-dir small i{font-size:13px;margin-top:1px} .ask-dir h1{font-size:clamp(24px,7.2vw,34px)}
  .doors{display:contents}
  .door,.door.on{grid-column:1;min-height:0;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;opacity:1;
    justify-content:flex-end;padding:14px clamp(16px,4vw,48px) 20px}
  .door.t{grid-row:2} .door.a{grid-row:3}
  .doors.picked .door:not(.on){opacity:1}
  .door::before{display:none}
  .chip{margin-bottom:10px;font-size:10.5px;padding:5px 9px;background:rgba(8,8,8,.55)}
  .door h2{font-size:clamp(24px,7vw,32px);margin:0 0 8px}
  .door p{font-size:14.5px;line-height:1.45;max-width:26em;color:#dcdcdc}
  .go,.door.on .go{margin-top:14px;min-height:48px;padding:11px 20px;font-size:15px;background:var(--amber);color:#140c00}
}
@media (max-width:820px) and (orientation:portrait) and (max-height:700px){.door p{display:none} .door,.door.on{padding-top:6px;padding-bottom:14px}
  .chip{margin-bottom:8px} .ask-dir{padding-top:calc(66px + 2px)} .ask-dir h1{font-size:24px} .go,.door.on .go{margin-top:10px;min-height:44px}}