/* fh-spatial-03.css — принятый вариант №3 «Пространственная сцена»: заставка и
 * главное меню. Перенесено из selected/source/styles.css пакета
 * FullHouse-Claude-Handoff-v1 (см. BUILD-REPORT, раздел «Источники»).
 *
 * Отличия от исходника (обоснование — в BUILD-REPORT):
 * — селекторы даны без префикса `#fh-spatial-03 `: классы fh-sp-* уникальны в
 *   проекте, а общие сбросы (box-sizing, [hidden], button{cursor}) уже заданы
 *   глобально в fh-theme-4.2.2.css — дублирование убрано, а не забыто;
 * — своего @font-face нет: используется уже встроенный в проект 'Manrope'
 *   (css/fh-fonts.css, кириллица+латиница+₽, лицензия SIL OFL) вместо
 *   отдельного FHSpatialManrope с двумя шрифтовыми файлами;
 * — декоративная рамка «телефона» браузерного просмотра (radius 30px,
 *   box-shadow, фиксированная min-height 825/785px) заменена на реальный
 *   полноэкранный вид WebView — это прямое указание docs/03-INTEGRATION.md,
 *   раздел 7: «внешняя рамка телефона не должна создавать внутренние поля
 *   поверх настоящего экрана». Все остальные размеры, отступы, радиусы
 *   карточек/кнопок (24/13px) и цвета не менялись.
 *
 * Все анимации, ключевые кадры и длительности (9s / 5.4s / 1.8s / 4500ms /
 * 500ms) — как в docs/02-MOTION-SPEC.md, без сокращений.
 */

.fh-sp-root{--fh-sp-bg:#07064B;--fh-sp-panel:#10185B;--fh-sp-text:#F7F9FF;--fh-sp-muted:#B6C6EA;--fh-sp-blue:#2457FF;--fh-sp-cycle:9s;font-family:'Manrope',Arial,sans-serif;color:var(--fh-sp-text)}
.fh-sp-root button,.fh-sp-root input{font:inherit}

/* ---------- главное меню ---------- */
.fh-sp-main{padding:22px 20px 21px;background:radial-gradient(ellipse at 80% 25%,#123a7138,transparent 50%) var(--fh-sp-bg);min-height:100vh}
.fh-sp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px}
.fh-sp-brand{width:82px;height:39px;object-fit:contain}
.fh-sp-top-right{display:flex;align-items:center;gap:8px}
.fh-sp-device{font-size:10px;letter-spacing:.08em;color:#B1C5EB;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.fh-sp-device:before{content:'';width:5px;height:5px;border-radius:50%;background:#84D9E5;box-shadow:0 0 8px #81D5E969}
.fh-sp-icon-button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;color:#CAD8FF;border:1px solid #B7C9FF24;border-radius:50%;flex:none}
.fh-sp-icon-button svg{width:18px;height:18px}
.fh-sp-intro{margin:26px 0 21px}
.fh-sp-intro h1{font-size:29px;line-height:1.18;letter-spacing:-1.15px;font-weight:500;margin:0}
.fh-sp-intro h1 span{color:#A5BEEB}
.fh-sp-intro p{font-size:12px;line-height:1.6;color:var(--fh-sp-muted);margin:11px 0 0}
.fh-sp-project{position:relative;background:linear-gradient(145deg,#142D6D,#0D1554 55%,#131B59);border:1px solid #A5CDFF2C;border-radius:24px;overflow:hidden}
.fh-sp-project-top{padding:15px 17px 0;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;gap:8px}
.fh-sp-eyebrow{font-size:10px;font-weight:500;letter-spacing:.11em;line-height:1.4;color:#B8CCE8;text-transform:uppercase}
.fh-sp-live{font-size:10px;line-height:1;letter-spacing:.08em;padding:6px 8px;border:1px solid #BBE6FF38;border-radius:7px;color:#CCEFFF;white-space:nowrap}
.fh-sp-scene-wrap{position:relative;width:100%;aspect-ratio:1.31;margin-top:-3px;overflow:hidden;perspective:700px}
.fh-sp-scene-wrap:before{content:'';position:absolute;inset:10% 0 1%;background:radial-gradient(ellipse,#4A9DE223,transparent 63%)}
.fh-sp-scene{display:block;width:100%;height:100%;overflow:visible}
.fh-sp-orbit{transform-origin:200px 188px;animation:fh-sp-orbit var(--fh-sp-cycle) ease-in-out infinite}
.fh-sp-building{transform-origin:200px 195px;animation:fh-sp-hover var(--fh-sp-cycle) ease-in-out infinite}
.fh-sp-wall-left{animation:fh-sp-wall var(--fh-sp-cycle) ease-in-out infinite}
.fh-sp-wall-right{animation:fh-sp-wall var(--fh-sp-cycle) .18s ease-in-out infinite}
.fh-sp-furniture{animation:fh-sp-furniture var(--fh-sp-cycle) ease-in-out infinite}
.fh-sp-light{animation:fh-sp-daylight var(--fh-sp-cycle) ease-in-out infinite}
.fh-sp-trace{stroke-dasharray:45 580;animation:fh-sp-trace calc(var(--fh-sp-cycle)*.6) linear infinite}
.fh-sp-dots{animation:fh-sp-dot var(--fh-sp-cycle) ease-in-out infinite}
.fh-sp-scan{animation:fh-sp-scan var(--fh-sp-cycle) ease-in-out infinite}
.fh-sp-project-content{padding:0 17px 17px;position:relative;z-index:2;margin-top:-7px}
.fh-sp-project-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.fh-sp-project-name{font-size:23px;letter-spacing:-.8px;line-height:1.2;font-weight:500;margin:0;min-width:0;overflow-wrap:anywhere}
.fh-sp-area{white-space:nowrap;font-size:21px;font-weight:500;letter-spacing:-.7px;line-height:1.2}
.fh-sp-area small{font-size:12px;color:#AFC3E5;letter-spacing:0}
.fh-sp-project-sub{margin:7px 0 16px;color:#B8C9E9;font-size:11px;line-height:1.5;display:flex;align-items:center;gap:6px}
.fh-sp-project-sub svg{width:12px;height:12px;flex:none}
.fh-sp-primary{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:50px;border:0;border-radius:13px;padding:13px 16px;background:#E7F3FF;color:#0B2456;font-size:13px;font-weight:600}
.fh-sp-primary svg{width:18px;height:18px;flex:none}
.fh-sp-create{background:var(--fh-sp-blue);color:white;justify-content:center;min-height:52px;margin-top:13px}
.fh-sp-create svg{width:16px;height:16px}
.fh-sp-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 9px}
.fh-sp-section-heading h2{font-size:14px;letter-spacing:-.2px;margin:0;font-weight:500}
.fh-sp-count{font-size:11px;color:#A1B3DA}
.fh-sp-rooms{display:grid;gap:0}
.fh-sp-room{display:flex;align-items:center;text-align:left;gap:11px;width:100%;min-height:61px;padding:10px 0;background:none;border:0;border-bottom:1px solid #B7C9FF19;color:var(--fh-sp-text)}
.fh-sp-room-shape{width:38px;height:38px;flex:none;background:#152266;border-radius:10px;display:grid;place-items:center}
.fh-sp-room-shape:before{content:'';width:21px;height:21px;background:#ADC6ED;clip-path:polygon(0 0,100% 0,100% 65%,63% 65%,63% 100%,0 100%,0 0,12% 12%,12% 86%,49% 86%,49% 51%,87% 51%,87% 12%,12% 12%)}
.fh-sp-room-shape.fh-sp-rectangle:before{clip-path:none;background:transparent;border:2px solid #ADC6ED;width:22px;height:17px}
.fh-sp-room-title{display:block;font-size:12px;line-height:1.5;font-weight:500;overflow-wrap:anywhere}
.fh-sp-room-status{display:block;font-size:10px;line-height:1.5;color:#A9BDE1}
.fh-sp-room-value{font-size:12px;white-space:nowrap;margin-left:auto;color:#D6E5FF}
.fh-sp-room>svg{width:14px;height:14px;color:#8FA9D4;flex:none}
.fh-sp-footer{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:#98ADD4;margin-top:21px;line-height:1.4}
.fh-sp-footer svg{width:11px;height:11px}

/* ---------- заставка ---------- */
.fh-sp-splash{position:fixed;inset:0;z-index:50;display:flex;align-items:center;flex-direction:column;padding:45px 20px 28px;overflow:hidden auto;background:radial-gradient(ellipse at 50% 51%,#17467C88,transparent 57%),#07064B;font-family:'Manrope',Arial,sans-serif;color:var(--fh-sp-text,#F7F9FF)}
.fh-sp-splash-grid{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(#7BBAFF12 1px,transparent 1px),linear-gradient(90deg,#7BBAFF12 1px,transparent 1px);background-size:45px 45px;mask-image:radial-gradient(ellipse,black,transparent 67%);transform:perspective(430px) rotateX(30deg) scale(1.3);pointer-events:none}
.fh-sp-splash-brand{position:relative;width:206px;height:98px;object-fit:contain;margin:41px 0 22px}
.fh-sp-splash .fh-sp-scene-wrap{aspect-ratio:1.15;max-width:350px;margin:33px 0 15px;overflow:visible}
.fh-sp-splash h2{font-size:23px;line-height:1.3;letter-spacing:-.7px;margin:13px 0 10px;font-weight:500;text-align:center;position:relative}
.fh-sp-splash p{font-size:12px;line-height:1.7;color:#B8CDED;text-align:center;position:relative;margin:0}
.fh-sp-splash-indicator{height:3px;width:54px;border-radius:3px;background:#B7C9FF26;overflow:hidden;margin:27px 0 18px;position:relative}
.fh-sp-splash-indicator:before{content:'';display:block;width:24px;height:3px;background:#B9E8FF;animation:fh-sp-loading 1.8s ease-in-out infinite}
.fh-sp-skip{margin-top:auto;position:relative;background:transparent;border:1px solid #B7C9FF40;border-radius:13px;color:#E4EDFF;min-height:46px;padding:12px 28px;font-size:12px}

/* ---------- лист создания пространства ---------- */
.fh-sp-sheet-backdrop{position:fixed;inset:0;z-index:55;display:flex;align-items:flex-end;background:#020529B3;padding-top:90px;backdrop-filter:blur(6px)}
.fh-sp-sheet{position:relative;width:100%;padding:23px 22px calc(26px + env(safe-area-inset-bottom,0px));border-radius:25px 25px 0 0;background:#101A59;box-shadow:0 -15px 55px #02052955;border-top:1px solid #A8C9FA40;max-height:92vh;overflow:auto;font-family:'Manrope',Arial,sans-serif;color:var(--fh-sp-text,#F7F9FF)}
.fh-sp-sheet-close{position:absolute;right:12px;top:12px;border:0;background:#1E2A68}
.fh-sp-sheet-title{margin:5px 38px 7px 0;font-size:23px;line-height:1.2;font-weight:500;letter-spacing:-.6px}
.fh-sp-sheet-description{font-size:12px;line-height:1.6;color:#B7C9ED;margin:0 0 21px}
.fh-sp-field-label{font-size:12px;color:#DDE9FF;display:block;margin-bottom:8px}
.fh-sp-input{min-height:49px;width:100%;border:1px solid #A5C0E85C;color:white;background:#090F43;border-radius:12px;padding:12px;font-size:16px;margin-bottom:16px}
.fh-sp-note{font-size:11px;line-height:1.6;color:#B8CFF0;margin:12px 0 0;min-height:18px}

@keyframes fh-sp-hover{0%,100%{transform:translateY(3px) rotate(-1.3deg) skewY(.7deg)}50%{transform:translateY(-5px) rotate(1.2deg) skewY(-.7deg)}}
@keyframes fh-sp-wall{0%,5%{transform:translateY(-20px);opacity:.08}17%,78%{transform:translateY(0);opacity:1}92%,100%{transform:translateY(-20px);opacity:.08}}
@keyframes fh-sp-furniture{0%,14%{transform:translateY(-14px);opacity:0}25%,78%{transform:translateY(0);opacity:1}91%,100%{transform:translateY(-14px);opacity:0}}
@keyframes fh-sp-daylight{0%,18%,89%,100%{opacity:0}34%,70%{opacity:.7}}
@keyframes fh-sp-orbit{0%,100%{transform:rotate(-6deg) scaleX(.98);opacity:.45}50%{transform:rotate(7deg) scaleX(1.03);opacity:.8}}
@keyframes fh-sp-trace{to{stroke-dashoffset:-625}}
@keyframes fh-sp-dot{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes fh-sp-scan{0%,27%,100%{transform:translateY(40px);opacity:0}35%{opacity:.32}64%{transform:translateY(-80px);opacity:.17}70%{transform:translateY(-90px);opacity:0}}
@keyframes fh-sp-loading{0%,100%{transform:translateX(-24px)}50%{transform:translateX(54px)}}

/* motion:off — статичная собранная сцена, без орбиты/сканирования/полоски (см. MOTION-SPEC) */
.fh-sp-root[data-motion=off] .fh-sp-orbit,.fh-sp-root[data-motion=off] .fh-sp-building,
.fh-sp-root[data-motion=off] .fh-sp-wall-left,.fh-sp-root[data-motion=off] .fh-sp-wall-right,
.fh-sp-root[data-motion=off] .fh-sp-furniture,.fh-sp-root[data-motion=off] .fh-sp-light,
.fh-sp-root[data-motion=off] .fh-sp-trace,.fh-sp-root[data-motion=off] .fh-sp-dots,
.fh-sp-root[data-motion=off] .fh-sp-scan,.fh-sp-root[data-motion=off] .fh-sp-splash-indicator:before{
  animation:none!important;transform:none!important;opacity:1!important}
.fh-sp-root[data-motion=off] .fh-sp-scan{opacity:0!important}
.fh-sp-root[data-motion=off] .fh-sp-splash-indicator:before{opacity:0!important}

@media(max-width:350px){
  .fh-sp-main{padding:18px 15px}
  .fh-sp-intro h1{font-size:26px}
  .fh-sp-device{font-size:9px;letter-spacing:.03em}
  .fh-sp-project-content{padding:0 14px 14px}
  .fh-sp-project-name{font-size:21px}
  .fh-sp-area{font-size:19px}
  .fh-sp-splash-brand{width:190px}
  .fh-sp-splash h2{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .fh-sp-orbit,.fh-sp-building,.fh-sp-wall-left,.fh-sp-wall-right,.fh-sp-furniture,
  .fh-sp-light,.fh-sp-trace,.fh-sp-dots,.fh-sp-scan,.fh-sp-splash-indicator:before{
    animation:none!important;transform:none!important;opacity:1!important}
  .fh-sp-scan,.fh-sp-splash-indicator:before{opacity:0!important}
}