/* ===== Панель-форма "Демонстрация" (Figma 2898:5344, "Project Order") =====
     Открывается кнопкой .menu-demo-btn в хедере и декоративными .btn-demo
     (Hero)/.demo-cta (слайд 10), см. js/nav-menu.js. Тот же архитектурный
     приём, что у Lastpopup выше — НАСТОЯЩИЙ fixed-оверлей СНАРУЖИ
     #stage/.stage-wrap (не масштабируется вместе со сценой), чтобы затемнение
     и панель были ПОВЕРХ .menubar (z-index 100/apps-sidebar) и Lastpopup
     (150/200) целиком — z-index 300/310. UI-заглушка: валидация +
     success-сообщение, реальной отправки нет (сайт статический). */
  #demo-panel-backdrop{
    position:fixed; inset:0; z-index:300;
    background:rgba(0,0,0,0.6);
    opacity:0; pointer-events:none;
    transition:opacity 0.35s ease;
  }
  #demo-panel-backdrop.is-open{ opacity:1; pointer-events:auto; }
  /* closed: translateX(100% + 40px), НЕ ровно 100% — кнопка-крестик
     нарочно высовывается левее .demo-panel__box, и ровно 100% сдвинуло бы
     саму панель на её же ширину, оставляя половину кружка видимой торчащей
     за правым краем экрана даже в закрытом состоянии. +40px с запасом
     перекрывает нахлёст крестика и убирает сомнение о суб-пиксельных
     округлениях. */
  #demo-panel{
    position:fixed; right:0; top:0; bottom:0; width:min(900px, 100vw);
    z-index:310;
    transform:translateX(calc(100% + 40px)); transition:transform 0.4s ease;
    pointer-events:none;
  }
  #demo-panel.is-open{ transform:translateX(0); pointer-events:auto; }
  /* Чёрная плашка отстоит от ПРАВОГО/ВЕРХНЕГО/НИЖНЕГО края браузера ровно на
     24px, растянута по высоте (100vh - 48px), а не центрирована по контенту.
     .demo-panel__box — position:absolute внутри #demo-panel (последний уже
     position:fixed на весь экран, задаёт систему координат) с inset
     сверху/снизу/справа 24px — ширина по-прежнему фиксированная (776px, с
     max-width на случай узких окон), только слева не прибита, поэтому width
     остаётся смысловой. */
  .demo-panel__box{
    position:absolute; box-sizing:border-box;
    top:24px; right:24px; bottom:24px;
    width:776px; max-width:calc(100vw - 24px - 40px);
    background:var(--ink); border-radius:32px;
  }
  /* ВАЖНО: overflow-y:auto живёт на ВНУТРЕННЕМ .demo-panel__scroll, НЕ на
     .demo-panel__box самом — иначе overflow-y:auto на .demo-panel__box заодно
     вычисляет overflow-x в auto (правило CSS — если один overflow-* не
     visible, второй из visible становится auto), а auto — это КЛИППИНГ:
     кнопка-крестик, которая НАМЕРЕННО высовывается за левый край box,
     обрезалась бы этим overflow пополам. .demo-panel__box остаётся
     overflow:visible (дефолт) — крестик виден целиком. height:100% (не
     max-height) — box теперь сам уже ровно нужной высоты (top/bottom:24px
     выше), .demo-panel__scroll просто заполняет его целиком.
     Центрирование короткого контента (форма помещается не на всю высоту /
     success-текст) НЕ через justify-content:center на скролл-контейнере —
     классический CSS-баг центрированного flex с overflow: браузер не даёт
     доскроллить до НАЧАЛА переполнения (свободное место есть только с одной
     стороны технически, но justify-content:center считает, что оно поровну, и
     блокирует scrollTop ниже некоторого не-нулевого значения). Вместо этого
     сам контент (.demo-panel__form/.demo-panel__success — прямые flex-дети
     .demo-panel__scroll) получает margin-top:auto;margin-bottom:auto — когда
     контент короче контейнера, auto-отступы забирают свободное место поровну
     (тот же визуальный центр), а когда контент длиннее (реальный overflow) —
     auto считается в 0, контент просто прижимается к началу, и весь диапазон
     scrollTop честно доступен с обеих сторон. */
  .demo-panel__scroll{
    height:100%; box-sizing:border-box; overflow-y:auto; border-radius:32px;
    padding:60px 50px; display:flex; flex-direction:column; align-items:center;
    gap:32px;
    scrollbar-width:thin; scrollbar-color:#10abb5 transparent;
  }
  /* Трек скроллбара прозрачный (не залит отдельным цветом типа #000) — фон
     под ним просто фон самой плашки (var(--ink)), без второго слоя цвета,
     которое дало бы едва заметный шов/полосу от несовпадения оттенков.
     Виден только бирюзовый ползунок. */
  .demo-panel__scroll::-webkit-scrollbar{ width:8px; }
  .demo-panel__scroll::-webkit-scrollbar-track{ background:none; }
  .demo-panel__scroll::-webkit-scrollbar-thumb{ background:#10abb5; border-radius:100px; }
  .demo-panel__scroll::-webkit-scrollbar-thumb:hover{ background:#0d8e96; }
  /* Кнопка-крестик закрытия — чёрный кружок слева от панели, целиком СНАРУЖИ
     .demo-panel__box, с чистым зазором 16px от его левого края:
     translate(-100% - 16px) сдвигает кружок на всю его собственную ширину
     (совмещая правый край кружка с левым краем box) плюс ещё 16px зазора.
     Вертикально center — это ТОЧНО центр box (box сам на всю высоту, см.
     .demo-panel__box выше). */
  .demo-panel__close{
    position:absolute; left:0; top:50%; transform:translate(calc(-100% - 16px), -50%);
    width:60px; height:60px; border-radius:50%; border:none;
    background:var(--ink); cursor:pointer; z-index:2;
    display:flex; align-items:center; justify-content:center;
  }
  .demo-panel__close span{
    position:absolute; width:22px; height:2px; background:#fff; border-radius:1px;
  }
  .demo-panel__close span:first-child{ transform:rotate(45deg); }
  .demo-panel__close span:last-child{ transform:rotate(-45deg); }
  .demo-panel__form{
    width:100%; margin-top:auto; margin-bottom:auto;
    display:flex; flex-direction:column; align-items:center; gap:32px;
  }
  .demo-panel__title{ width:100%; text-align:center; }
  .demo-panel__title p{
    /* 600 (SemiBold), не 700 — правка 2026-08-07. В проекте живут ровно три
       начертания Unbounded (600/500/400), и Bold тут был последним хвостом
       старой раскладки. */
    margin:0; font-family:'Unbounded',sans-serif; font-weight:600; font-size:32px;
    line-height:1.3; color:#fff;
  }
  .demo-panel__subtitle{
    margin-top:10px !important; font-weight:400 !important; font-size:18px !important;
    line-height:1.4 !important; color:#fff;
  }
  .demo-field-grid{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:24px 24px; }
  /* Плавающий лейбл — чистый CSS (:placeholder-shown), без JS: пусто — лейбл
     стоит на месте значения (14px, белый); в фокусе ИЛИ уже с текстом —
     лейбл уезжает наверх (10px, жёлтый), значение — жёлтым, линия снизу тоже
     жёлтая (Figma 2898:4394, состояния Default/Focus). placeholder=" "
     (пробел, не пусто) — единственный кросс-браузерный способ включить
     :placeholder-shown при пустом поле. */
  .demo-field{
    position:relative; height:48px; border-bottom:1px solid #fff; box-sizing:border-box;
  }
  /* :is(input, textarea) — поле "Комментарий" многострочное (<textarea>, см.
     .demo-field--textarea ниже), общие правила плавающего лейбла/цвета/
     подсветки границы написаны один раз на оба тега, чтобы не дублировать
     логику. */
  .demo-field :is(input, textarea){
    position:absolute; left:0; right:0; bottom:6px;
    width:100%; background:none; border:none; outline:none; padding:0;
    font-family:'Unbounded',sans-serif; font-weight:400; font-size:14px; color:#fff;
  }
  .demo-field__label{
    position:absolute; left:0; bottom:6px; pointer-events:none;
    font-family:'Unbounded',sans-serif; font-weight:400; font-size:14px; color:#fff;
    transition:font-size 0.15s ease, top 0.15s ease, bottom 0.15s ease, color 0.15s ease;
  }
  .demo-field :is(input, textarea):focus ~ .demo-field__label,
  .demo-field :is(input, textarea):not(:placeholder-shown) ~ .demo-field__label{
    top:0; bottom:auto; font-size:10px; color:var(--yellow);
  }
  .demo-field :is(input, textarea):focus,
  .demo-field :is(input, textarea):not(:placeholder-shown){ color:var(--yellow); }
  /* Подсказка-маска телефона (js/nav-menu.js подставляет сюда текст
     "+7 (___) ___-__-__" в placeholder ТОЛЬКО на время фокуса пустого поля) —
     белый 50%. Остальные поля используют placeholder=" " (пробел) — правило
     безвредно и для них, пробел не имеет видимого глифа независимо от цвета. */
  .demo-field :is(input, textarea)::placeholder{ color:rgba(255,255,255,0.5); opacity:1; }
  .demo-field:focus-within{ border-bottom-color:var(--yellow); }
  .demo-field:has(:is(input, textarea):not(:placeholder-shown)){ border-bottom-color:var(--yellow); }
  .demo-field--full{ width:100%; }
  /* Многострочное поле "Комментарий" — сама плашка растёт
     (height:auto/min-height вместо фиксированных 48px), textarea без resize
     (чтобы не ломала сетку панели), лейбл в пустом состоянии стоит НАВЕРХУ
     поля (там, где начинается текст), а не внизу как у однострочных полей —
     иначе он бы наезжал на первую строку ввода. */
  .demo-field--textarea{ height:auto; min-height:112px; }
  .demo-field--textarea textarea{
    top:22px; bottom:6px; height:auto; resize:none; overflow-y:auto;
    line-height:1.4;
  }
  .demo-field--textarea .demo-field__label{ top:22px; bottom:auto; }
  .demo-field--textarea textarea:focus ~ .demo-field__label,
  .demo-field--textarea textarea:not(:placeholder-shown) ~ .demo-field__label{
    top:0;
  }
  .demo-checkbox{ width:100%; display:flex; gap:16px; align-items:flex-start; cursor:pointer; }
  .demo-checkbox input{ position:absolute; opacity:0; width:24px; height:24px; margin:0; cursor:pointer; }
  .demo-checkbox__box{
    position:relative; flex-shrink:0; width:24px; height:24px; margin-top:2px;
    border:1px solid #969696; border-radius:6px; box-sizing:border-box;
  }
  .demo-checkbox input:checked ~ .demo-checkbox__box{ border-color:var(--yellow); background:var(--yellow); }
  .demo-checkbox__box::after{
    content:''; position:absolute; left:8px; top:4px; width:5px; height:10px;
    border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(40deg);
    opacity:0;
  }
  .demo-checkbox input:checked ~ .demo-checkbox__box::after{ opacity:1; }
  .demo-checkbox__text{
    /* Было Lato — переведено на Source Sans Pro 2026-08-03: у Lato физически
       нет кириллического начертания (Google его не выпускал), а этот текст
       весь на русском — с Lato он молча падал на системный шрифт. Source
       Sans Pro уже используется в проекте (см. css/base.css) — заодно на
       1 шрифт меньше, а не больше. */
    flex:1; margin:0; font-family:'Source Sans Pro',sans-serif; font-weight:400;
    font-size:14px; line-height:1.5; color:#fff;
  }
  /* Ссылки на политику/согласие внутри текста чекбокса — клик по
     самой ссылке НЕ переключает чекбокс (стандартное поведение браузеров для
     интерактивных потомков внутри <label>), доп. JS не нужен. */
  .demo-checkbox__text a{ color:var(--yellow); text-decoration:underline; }
  .demo-panel__submit-wrap{ width:100%; display:flex; flex-direction:column; align-items:center; padding-top:8px; }
  .demo-panel__submit{
    height:56px; padding:0 28px; border:none; border-radius:40px;
    background:var(--yellow); color:var(--ink); cursor:pointer;
    font-family:'Source Sans Pro',sans-serif; font-weight:600; font-size:21px;
    letter-spacing:1px; text-transform:uppercase;
  }
  .demo-panel__submit:disabled{ opacity:0.5; cursor:default; }
  /* Success-сообщение после "отправки" (UI-заглушка) — заменяет форму внутри
     той же карточки, без реальной отправки данных. */
  .demo-panel__success{
    display:none; width:100%; margin-top:auto; margin-bottom:auto; text-align:center;
    font-family:'Unbounded',sans-serif; font-weight:400; font-size:18px; line-height:1.5; color:#fff;
  }
  .demo-panel__success.is-shown{ display:block; }
  .demo-panel__form.is-hidden{ display:none; }

  .slide{ position:absolute; left:0; width:1440px; height:760px; }
  #slide-1{ top:0; }
  #slide-2{ top:760px; }
  #slide-3{ top:1520px; }