/* Шрифты из макета Figma — файлы кладутся в assets/fonts/, см. README.md там.
   Пока файлов нет — font-display:swap подставит системный шрифт, ничего
   не сломается. */
@font-face{
  font-family:"Stalinist One";
  src:url("../assets/fonts/stalinist-one.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geologica";
  src:url("../assets/fonts/geologica-light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}

:root{
  --bg:#0E0606;
  --bg-2:#0E0606;
  --line:rgba(240,238,238,0.18);
  --danger:#c96a4a; /* только служебная пометка "файл не найден", не часть дизайна */
  --shadow:0 20px 60px rgba(0,0,0,0.7);

  /* --- дизайн-система из Figma — единственная используемая на сайте.
     Старые названия переменных (--gold/--parchment/--text и т.п.)
     оставлены только чтобы не переписывать каждое правило по отдельности —
     но теперь указывают строго на ваши цвета, никакой отсебятины. --- */
  --hero-bg:#0E0606;
  --hero-text:#F0EEEE;
  --hero-title-color:rgba(243,232,227,0.8);
  --hero-eyebrow-color:#CBC1BD;
  --hero-line-50:rgba(240,238,238,0.5);
  --hero-line-20:rgba(240,238,238,0.2);
  --hero-press-bg:rgba(255,248,244,0.8);
  --accent-red:#DF1E29;

  --gold:#F0EEEE;
  --gold-bright:rgba(243,232,227,0.8);
  --bronze:#CBC1BD;
  --parchment:#F0EEEE;
  --text:#F0EEEE;
  --text-dim:#CBC1BD;
  --stone:rgba(240,238,238,0.2);
  --stone-light:rgba(240,238,238,0.2);

  --font-display:"Stalinist One", Georgia, serif;
  --font-ui:"Geologica", 'Trebuchet MS', sans-serif;

  /* --- типографическая шкала из гайда Figma (для ОСТАЛЬНЫХ экранов —
     объект/авторы и т.п., карту не трогает). Пока только объявлены,
     нигде не применены — используем по мере переоформления остальных
     страниц (см. вопрос в чате). --- */
  --fs-title-lg:80px;   /* заголовок — главный экран (уже используется в .hero-word) */
  --fs-title-sm:40px;   /* заголовок — остальные экраны */
  --fs-subtitle-lg:32px;
  --fs-subtitle-sm:18px;
  --fs-text:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;}
/* Плавающая базовая единица шрифта — от неё зависят все rem-размеры
   ниже. Между 15" ноутбуком и, скажем, 55" интерактивным столом
   соотношение сторон обычно то же (16:9), но экран физически другой —
   эта формула подстраивает размер текста под реальную ширину/высоту
   вьюпорта, а не держит его на фиксированном числе пикселей всегда. */
/* Раньше здесь был clamp(), реагирующий на ширину экрана — теперь эту
   работу делает масштаб .design-canvas целиком (см. app.js → fitCanvas),
   поэтому базовый размер шрифта фиксированный (карту это не касается —
   там все размеры считаются в JS и не используют rem). */
html{font-size:20px;}
html,body{margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#000;
  font-family:var(--font-ui); color:var(--text); touch-action:none;}
#app{position:relative; width:100vw; overflow:hidden;
  height:100vh;                          /* запасной вариант для старых браузеров */
  height:100dvh;                         /* современный "настоящий" viewport-height */
  height:calc(var(--vh, 1vh) * 100);     /* JS-фикс на случай, если dvh не поддерживается (см. index.html) */
  background:#000;}

.screen{position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:scale(0.985); filter:blur(2px);
  transition:opacity .45s ease, transform .45s ease, filter .45s ease; background:transparent;}
.screen.active{opacity:1; pointer-events:auto; transform:scale(1); filter:blur(0);}

/* ---------- фиксированный холст 1280×720, который целиком
   масштабируется под реальный экран (см. app.js → fitCanvas) — вместо
   переверстки на маленьких экранах раскладка просто одинаково
   уменьшается/увеличивается. Только для экранов объекта/авторов —
   карта и видео устроены иначе, их не трогаем. ---------- */
#screen-object, #screen-authors, #screen-video{align-items:center; justify-content:center; overflow:hidden;}
.design-canvas{position:relative; width:1280px; height:720px; flex-shrink:0;
  transform-origin:center center;}
.design-canvas .obj-body, .design-canvas .authors-body{position:absolute; inset:0; overflow:hidden;}

/* ---------- typography ---------- */
.eyebrow{font-family:var(--font-ui); font-size:1.15rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold); opacity:.85;}
h1,h2,h3{font-weight:400; margin:0; font-variant:small-caps; letter-spacing:.03em;}

/* ---------- мини-логотип в левом верхнем углу (объект/авторы) ----------
   Из Figma: "Древние скифы" 12px Stalinist One + "— название" 12px
   Geologica. Заменил прежнюю центрированную шапку — теперь в углу,
   в паре с кнопкой «Назад», которая тоже в углу (только внизу). */
.mini-logo{position:absolute; left:20px; top:20px; z-index:5; line-height:1.3;}
.mini-logo-brand{font-family:var(--font-display); font-size:12px; font-weight:400;
  text-transform:uppercase; color:rgba(243,232,227,0.8);}
.mini-logo-page{font-family:var(--font-ui); font-size:12px; font-weight:400;
  color:rgba(243,232,227,0.8); margin-top:2px;}

.btn{box-sizing:border-box; font-family:var(--font-ui); font-weight:300; font-size:1.3rem;
  letter-spacing:.01em; text-transform:uppercase; color:var(--hero-text);
  background:var(--hero-line-20); border:2px solid var(--hero-text); border-radius:100px;
  padding:12px 24px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;}
.btn:hover{border-color:var(--accent-red); color:var(--accent-red);}
.btn:active{background:var(--accent-red); border-color:var(--accent-red); color:var(--hero-bg);}
.btn.ghost{background:var(--hero-line-20);}
.btn-back{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:6;}

/* ================= ЗАГРУЗКА ================= */
#screen-boot{background:#000; align-items:center; justify-content:center;}
.boot-loading{display:flex; flex-direction:column; align-items:center; gap:22px;}
.boot-eyebrow{font-family:var(--font-ui); font-size:1.2rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--text-dim);}
.boot-dots{display:flex; gap:8px;}
.boot-dots span{width:8px; height:8px; border-radius:50%; background:var(--gold);
  animation:bootPulse 1.1s ease-in-out infinite;}
.boot-dots span:nth-child(2){animation-delay:.15s;}
.boot-dots span:nth-child(3){animation-delay:.3s;}
@keyframes bootPulse{0%,80%,100%{opacity:.25; transform:scale(1);} 40%{opacity:1; transform:scale(1.3);}}

/* --- экран загрузки МЕЖДУ страницами (не только при самом первом
   запуске) — показывается, пока контент новой страницы объекта
   (модель/видео/картинка) реально не готов, чтобы страница открывалась
   уже целиком, а не "на глазах" у пользователя. --- */
.page-loading-overlay{position:absolute; inset:0; z-index:20; background:#000;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .25s ease;}
.page-loading-overlay.hidden{opacity:0; pointer-events:none;}

/* ================= ВИДЕО ================= */
#screen-video{background:#000;}
.intro-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.intro-fade{position:absolute; inset:0; background:#000; opacity:0; pointer-events:none;
  transition:opacity .4s ease;}
#videoCanvas.fading-out .intro-fade{opacity:1;}
.intro-skip{position:absolute; right:22px; bottom:22px;}

/* ================= КАРТА (макет из Figma, экран 1280×720) ================= */
.map-mount{flex:1; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden;}
.map-stage{position:relative; overflow:hidden; background:var(--hero-bg); border-radius:6px;}
.map-scrim{position:absolute; inset:0; background:rgba(8,6,4,0.72); opacity:0;
  pointer-events:none; transition:opacity .38s ease; z-index:1;}
.map-stage.selecting .map-scrim{opacity:1;}
.map-stage.selecting .hero-word,
.map-stage.selecting .hero-eyebrow,
.map-stage.selecting .hero-btn-authors,
.map-stage.selecting .hero-btn-restart{opacity:.35; pointer-events:none; transition:opacity .3s ease;}
.hotspots-layer{position:absolute; inset:0; z-index:2;}

/* --- заголовок: 2 больших слова (Stalinist One) + 2 эйбрау-подписи
   (Geologica) — позиция/размер шрифта считаются в JS (js/screens/map.js
   → relayout()) и проставляются как обычные px через style.left/top/
   fontSize, единым коэффициентом масштаба для всей карты. Тексту
   намеренно выставлен pointer-events:none — он рисуется НАД картинками
   (z-index выше), но клик должен "проваливаться" сквозь буквы к
   картинке под ними, если она там есть. --- */
.hero-word{position:absolute; margin:0; z-index:3; white-space:nowrap; pointer-events:none;
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:1.1; color:var(--hero-title-color);
  transition:opacity .3s ease;}
.hero-eyebrow{position:absolute; z-index:3; pointer-events:none; font-family:var(--font-ui); font-weight:300;
  line-height:1.1; letter-spacing:.01em;
  color:var(--hero-eyebrow-color); transition:opacity .3s ease;}

/* --- кнопки-пилюли (Авторы / Заставка) — 4 состояния из Figma:
   обычное / неактивное (:disabled) / наведение (:hover) / нажатие (:active).
   Позиция/размер/шрифт — тоже через JS relayout(), см. выше. --- */
.pill-btn{position:absolute; z-index:2; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  background:var(--hero-line-20); border:2px solid var(--hero-text); border-radius:100px;
  font-family:var(--font-ui); font-weight:300;
  letter-spacing:.01em; text-transform:uppercase; color:var(--hero-text); cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;}
.pill-btn:hover{border-color:var(--accent-red); color:var(--accent-red);}
.pill-btn:active{background:var(--accent-red); border-color:var(--accent-red); color:var(--hero-bg);}
.pill-btn:disabled{border-color:var(--hero-line-50); color:var(--hero-line-50); cursor:default;}

/* --- объекты (пантера / человек / ковёр) — картинки с прозрачным фоном,
   позиция/размер/поворот 1:1 из Figma (heroLayout в content.js) --- */
.hero-object{position:absolute; transform-origin:center center; cursor:pointer;
  opacity:0; transition:opacity .3s ease;}
.hero-object.loaded{opacity:1;}
.hero-object-img{width:100%; height:100%; display:block; pointer-events:none;
  animation:objectBreathe 3s ease-in-out infinite;}
@keyframes objectBreathe{
  0%,100%{filter:drop-shadow(0 0 4px rgba(223,30,41,.35));}
  50%{filter:drop-shadow(0 0 11px rgba(223,30,41,.65));}
}
.map-stage.selecting .hero-object:not(.selected){opacity:0;}
.hero-object.selected .hero-object-img{
  animation:none;
  filter:drop-shadow(0 0 7px rgba(240,238,238,0.45)) drop-shadow(0 0 14px rgba(240,238,238,.25));}
.hero-object-missing{outline:1px dashed rgba(255,255,255,0.25); background:rgba(255,255,255,0.04);}

/* --- подсказка "сюда можно тыкать" (пульсирующая ладошка) — только
   на ещё не открытых объектах, см. js/screens/map.js. Обёртка держит
   позицию+компенсацию поворота объекта (задаётся через JS, статично).
   Перекраска в белый (.tap-hand) и анимация пульсации (.tap-hand-pulse)
   намеренно на РАЗНЫХ элементах — если и то, и другое на одном элементе,
   в некоторых браузерах цветное эмодзи начинает мигать между белым и
   чёрным каждый кадр анимации (баг перерасчёта фильтра при анимации
   transform на том же узле). --- */
.tap-hand-wrap{position:absolute; z-index:5; pointer-events:none;}
.tap-hand-pulse{animation:tapPulse 1.5s ease-in-out infinite;}
.tap-hand{font-size:2.5rem; line-height:1;
  filter:brightness(0) invert(1) drop-shadow(0 3px 8px rgba(0,0,0,0.7));}
@keyframes tapPulse{
  0%,100%{transform:scale(1) translateY(0); opacity:.8;}
  50%{transform:scale(1.2) translateY(-4px); opacity:1;}
}

/* --- метка объекта: круглая кнопка (запасной вариант, если у объекта
   нет heroLayout из Figma) --- */
.hotspot{position:absolute; width:112px; height:112px; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:opacity .3s ease;}
/* Все дочерние элементы метки — чисто декоративные и не должны сами
   становиться "верхним" элементом в точке клика (это важно для
   способа определения клика через document.elementsFromPoint в map.js —
   иначе клик по подписи/кольцу не засчитывался бы). */
.hotspot > *{pointer-events:none;}
.map-stage.selecting .hotspot:not(.selected){opacity:0;}
.hotspot .ring{position:absolute; inset:0; border-radius:50%; border:1px solid var(--gold);
  opacity:.55; animation:pulse 3.2s ease-in-out infinite;}
.hotspot .ring2{position:absolute; inset:14px; border-radius:50%; border:1px solid var(--gold-bright);
  opacity:.35;}
.hotspot .glyph{position:relative; width:64px; height:64px; border-radius:50%;
  background:rgba(240,238,238,0.2); border:2px solid var(--hero-text);
  box-shadow:0 6px 18px rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--hero-text);
  transition:transform .3s cubic-bezier(.3,.7,.4,1.4);}
.hotspot.selected .glyph{transform:scale(1.12); border-color:var(--accent-red);
  background:var(--accent-red); color:var(--hero-bg);
  box-shadow:0 6px 24px rgba(0,0,0,0.6);}
.hotspot .label{position:absolute; top:78px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--font-ui); font-size:1.25rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--parchment); text-shadow:0 2px 6px rgba(0,0,0,0.8);}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.55;} 50%{transform:scale(1.12); opacity:.15;}}

/* shared hint toast */
.hint-toast{position:absolute; left:50%; top:26px; transform:translateX(-50%) translateY(6px);
  background:rgba(0,0,0,0.85); border:1px solid var(--line); border-radius:24px;
  padding:11px 22px; font-size:1.5rem; color:var(--parchment); text-align:center;
  box-shadow:var(--shadow); opacity:0; transition:opacity .5s ease, transform .5s ease; pointer-events:none;
  z-index:3;}
.hint-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ================= ОБЪЕКТ ================= */
/* ---------- заголовок страницы (объект/авторы) ----------
   Из гайда Figma: 40px Stalinist One — "заголовок для остальных
   экранов" (в отличие от 80px на главной). В спецификации цвет был
   #0E0606 (тёмный) — это цвет ФОНА карты, на чёрном фоне такой
   заголовок был бы не виден, поэтому взял тот же светлый тон, что и
   у заголовка на главной странице (rgba(243,232,227,.8)). */
.page-title{margin:0 0 18px; font-family:var(--font-display); font-weight:400;
  font-size:2.3rem; text-transform:uppercase; color:rgba(243,232,227,0.8);
  flex:0 0 auto; transition:opacity .25s ease;}
.page-title.fading{opacity:0;}
.obj-body{flex:1; display:flex; flex-direction:column; padding:52px 18px 76px; min-height:0;
  overflow-y:auto; position:relative;}
.obj-standard{flex:1; display:flex; flex-direction:column; min-height:0; gap:14px;}
.obj-custom{flex:1; min-height:0;}
.obj-custom.hidden{display:none;}

/* --- 3D stage --- */
.stage-3d{position:relative; flex:1 1 auto; min-height:340px; border-radius:0; overflow:hidden;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  perspective:900px;
  opacity:0; transform:scale(.93); transition:opacity .42s ease, transform .42s cubic-bezier(.2,.8,.3,1);}
.stage-3d.revealed{opacity:1; transform:scale(1);}
.stage-3d canvas{width:100%!important; height:100%!important; display:block;}

/* --- сетка из нескольких моделей на одном экране (напр. «Скифский
   звериный стиль» — 3 модели рядом, каждая со своей независимой
   анимацией появления и своим таймером простоя) --- */
.stage-3d.multi-mode{opacity:1; transform:none; display:flex; gap:8px; padding:0; position:relative;}
.stage-3d-cell{position:relative; z-index:2; flex:1; min-width:0; height:100%; border-radius:0; overflow:hidden;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.9); transition:opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);}
.stage-3d-cell.revealed{opacity:1; transform:scale(1);}
.stage-3d-cell .asset-missing-note{font-size:9px; padding:3px 6px;}

/* --- индикатор загрузки модели/картинки при первом (ленивом) открытии --- */
.stage-spinner{position:absolute; top:50%; left:50%; width:34px; height:34px;
  margin:-17px 0 0 -17px; border-radius:50%; border:2px solid rgba(255,255,255,0.12);
  border-top-color:var(--gold); animation:spin .8s linear infinite; z-index:3;}
@keyframes spin{to{transform:rotate(360deg);}}
.model-card{position:relative; width:150px; height:190px; transform-style:preserve-3d; will-change:transform;}
.model-face{position:absolute; inset:0; border-radius:10px; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  border:1px solid var(--gold); box-shadow:0 10px 30px rgba(0,0,0,0.55);}
.model-face .icon{font-size:4.6rem;}
.model-face .tag{font-family:var(--font-ui); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text); opacity:.75;}
.model-face.front{background:linear-gradient(160deg, rgba(240,238,238,0.35), rgba(203,193,189,0.15));}
.model-face.back{background:linear-gradient(160deg, rgba(203,193,189,0.25), rgba(240,238,238,0.1)); transform:rotateY(180deg);}
.stage-hint-icon{position:absolute; top:10px; right:12px; font-size:1.15rem; color:var(--text-dim);
  font-family:var(--font-ui); letter-spacing:.08em; z-index:2;}

/* --- 2D stage (carpet) --- */
.stage-2d{position:relative; flex:1 1 auto; min-height:340px; border-radius:0; overflow:hidden;
  background:transparent;
  opacity:0; transform:scale(.93); transition:opacity .42s ease, transform .42s cubic-bezier(.2,.8,.3,1);}
.stage-2d.revealed{opacity:1; transform:scale(1);}
.canvas2d-wrap{position:absolute; inset:0; overflow:hidden; touch-action:none;}
.canvas2d-pan{position:absolute; inset:0; transform-origin:center center; will-change:transform;}
.canvas2d-img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  object-position:right center;
  pointer-events:none; transition:opacity .25s ease;}
.canvas2d-img.fading{opacity:0;}
.canvas2d-wrap.no-image .canvas2d-img{display:none;}
.canvas2d-wrap.no-image::before{content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(240,238,238,0.08) 0 18px, rgba(240,238,238,0.14) 18px 36px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.25) 0 10px, transparent 10px 20px);
  background-blend-mode:multiply;}
.canvas2d-wrap.no-image::after{content:""; position:absolute; inset:12%; border:6px double var(--gold);
  opacity:.6;}

/* --- метка повреждённого участка ковра («дырка») --- */
.hole-marker{position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3;
  transition:opacity .35s ease;}
.hole-marker.hidden{opacity:0; pointer-events:none;}
/* --- missing-asset badge (both stages) --- */
.asset-missing-note{position:absolute; left:12px; bottom:12px; z-index:4;
  font-family:var(--font-ui); font-size:10.5px; letter-spacing:.05em;
  color:var(--parchment); background:rgba(120,58,38,0.85); border:1px solid var(--danger);
  border-radius:3px; padding:5px 9px; max-width:calc(100% - 24px);}
.asset-missing-note.hidden{display:none;}

/* --- text pagination --- */
.text-panel{flex:1; min-height:0; display:flex; flex-direction:column; padding-top:12px;}
.text-slider{flex:1; min-height:0; display:flex; align-items:center; gap:10px;}
.text-arrow{flex:0 0 auto; box-sizing:border-box; width:44px; height:44px; border-radius:100px;
  display:flex; align-items:center; justify-content:center;
  background:var(--hero-line-20); border:2px solid var(--hero-text); color:var(--hero-text);
  font-family:var(--font-ui); font-size:1.3rem; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;}
.text-arrow:hover:not(:disabled){border-color:var(--accent-red); color:var(--accent-red);}
.text-arrow:active:not(:disabled){background:var(--accent-red); border-color:var(--accent-red); color:var(--hero-bg);}
.text-arrow:disabled{border-color:var(--hero-line-50); color:var(--hero-line-50); cursor:default;}
.text-content{flex:1; min-height:0; overflow-y:auto; padding:2px 4px; touch-action:pan-y;
  transition:opacity .22s ease; align-self:stretch;}
.text-content.fading{opacity:0;}
.text-content h3{font-family:var(--font-display); font-weight:400; font-size:2.3rem;
  text-transform:uppercase; color:rgba(243,232,227,0.8); line-height:1.1; margin:0 0 10px;}
.text-content h3:empty{display:none;}
.text-content p{font-size:1.25rem; line-height:1.5; color:var(--text); margin:0; font-weight:300;
  white-space:pre-line;}
.txt-location{margin-top:6px !important; font-size:1rem !important; letter-spacing:.04em;
  color:var(--text-dim); opacity:.55; font-style:italic;}
.txt-location.hidden{display:none;}

/* ================= АВТОРЫ ================= */
.authors-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:30px; padding:20px 30px; text-align:center; overflow-y:auto;}
.authors-text{max-width:680px; line-height:1.6; color:var(--text); font-size:1.4rem; margin:0;
  font-weight:300; letter-spacing:.02em;}

.authors-team{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;
  align-items:flex-start; gap:44px;}
.author-card{display:flex; flex-direction:column; align-items:center; gap:8px; width:150px;}
.qr-box{width:140px; height:140px; padding:0;
  background:transparent; display:flex; align-items:center; justify-content:center;}
.qr-img{width:100%; height:100%; object-fit:contain;}
.qr-box.no-image .qr-img{display:none;}
.qr-box.no-image{background:rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.15); border-radius:6px;}
.qr-box.no-image::before{content:"QR"; font-family:var(--font-ui); font-size:12px;
  letter-spacing:.15em; color:var(--text-dim);}
.author-name{font-size:1.4rem; color:var(--parchment); margin-top:2px; font-weight:400;}
.author-role{font-family:var(--font-ui); font-size:1.1rem; letter-spacing:.1em;
  color:var(--text-dim); text-transform:uppercase;}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-thumb{background:var(--bronze); border-radius:3px;}

/* ================= ОСОБЫЕ РАСКЛАДКИ ОБЪЕКТОВ ================= */

/* Переиспользуемый текстовый блок с пагинацией (см. js/utils/textBlock.js) —
   стрелки/точки видны только если у блока больше одной страницы. */
.mini-text-block{display:flex; flex-direction:column; height:100%; min-height:0;}
.mini-text-block.arrows-below{gap:10px;}
.mini-text-block.arrows-below .text-content{flex:1; min-height:0;}
.text-arrows-row{display:flex; justify-content:center; gap:20px; flex:0 0 auto;}
/* Стрелки ковра — выровнены по той же Y, что и кнопка «Меню».
   ВАЖНО: анкор для position:absolute — .obj-body (растянут на весь
   экран), поэтому здесь намеренно НЕТ своего position:relative —
   иначе привязка сломается и уедет на локальные координаты колонки. */
.carpet-text-aligned{padding-bottom:64px;}
.carpet-text-aligned .text-arrows-row{position:absolute; left:5%; right:60.6%; bottom:20px;}

/* --- «Ковёр»: точная сетка колонок из макета Figma (в процентах от
   1280px-канвы, пересчитано из пикселей — см. пояснение в чате).
   Зазор между текстом и картинкой сокращён (было 13%) в пользу самой
   области картинки (было 31%) — при приближении/панорамировании теперь
   больше места для этого. Картинка при этом прижата к ПРАВОМУ краю
   своей области (см. object2d.js → containRect + CSS object-position),
   поэтому в состоянии покоя её видимое положение не меняется — просто
   область вокруг нее стала шире слева. --- */
.carpet-split{display:grid; height:100%;
  grid-template-columns: 5% 50% 5% 39% 11%;}
.carpet-split .carpet-split-text{grid-column:2; min-height:0;
  display:flex; flex-direction:column;}
.carpet-split .carpet-split-stage{grid-column:4; position:relative; min-width:0;
  max-height:none; min-height:0; height:100%;}
.carpet-split .text-content{display:flex; flex-direction:column;}
/* Заголовок страницы для ковра начинается там же, где текст (5% от
   ширины, а не от общего отступа .obj-body) — используем :has(), чтобы
   не трогать заголовок на остальных страницах (там другие координаты). */
.obj-body:has(.carpet-split) .page-title{margin-left:calc(5% - 18px);}

/* --- «Человек»: сцена (видео/модель) + кнопка-переключатель слева,
   карусель одежды + независимый текст справа --- */
.human-split{display:flex; height:100%; gap:14px;}
.human-split-stage-col{flex:0 0 51%; display:flex; flex-direction:column; gap:14px; min-height:0;
  padding-bottom:64px;}
.human-split .human-split-stage{flex:1; position:relative; min-width:0; min-height:0;}
/* Кнопка позиционируется от .obj-body (там position:relative, а сам
   он растянут на весь экран) — это та же система координат, что и у
   кнопки «Меню», поэтому bottom:20px здесь даёт ТОЧНО ту же высоту. */
.human-toggle-btn{position:absolute; left:18px; bottom:20px; width:auto;}
.human-video-stage{display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.93); transition:opacity .42s ease, transform .42s cubic-bezier(.2,.8,.3,1);}
.human-video-stage.revealed{opacity:1; transform:scale(1);}
.human-video{max-width:100%; max-height:100%; width:auto; height:100%;
  aspect-ratio:9/16; object-fit:cover; display:block; border-radius:4px;}
.human-split-right{flex:1 1 49%; display:flex; flex-direction:column; min-height:0; gap:16px; padding-bottom:64px;}
/* Стрелки текста «о находке» — выровнены по той же Y, что и «Меню» и
   остальные стрелки на других страницах (тот же анкор — .obj-body,
   растянутый на весь экран, поэтому здесь тоже намеренно нет своего
   position:relative). */
.human-text-aligned .text-arrows-row{position:absolute; left:51%; right:18px; bottom:20px;}
.human-carousel{flex:1 1 55%; position:relative; min-height:140px; border-radius:0; overflow:hidden;
  background:transparent;}
.human-about-text{flex:1 1 45%; min-height:0; padding-top:6px;}
.carousel-track{position:absolute; inset:0; display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1);
  touch-action:pan-y;}
.carousel-slide{flex:0 0 100%; position:relative; display:flex; align-items:center; justify-content:center;}
.carousel-slide img{max-width:94%; max-height:88%; object-fit:contain; pointer-events:none;}
.carousel-slide.no-image img{display:none;}
.carousel-dots{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2;}
.carousel-dots .dot{width:6px; height:6px; border-radius:50%; transform:none;
  background:rgba(255,255,255,0.15); border:none; cursor:pointer;}
.carousel-dots .dot.active{background:var(--gold);}

/* --- «Скифский звериный стиль»: 3 фигурки листаются одной парой
   стрелок — текст слева (на всю высоту), модель справа сверху,
   стрелки под моделью справа (как в макете) --- */
.beast-carousel{display:grid; height:100%; gap:14px;
  grid-template-columns:50% 1fr;
  grid-template-rows:1fr;
  padding-bottom:64px;}
.beast-carousel-text{grid-column:1; grid-row:1; min-height:0; overflow-y:auto;}
.beast-carousel-text h3{font-family:var(--font-display); font-weight:400; font-size:2.3rem;
  text-transform:uppercase; color:rgba(243,232,227,0.8); line-height:1.1; margin:0 0 10px;}
.beast-carousel-text h3:empty{display:none;}
.beast-carousel-text p{font-size:1.25rem; line-height:1.5; color:var(--text); margin:0; font-weight:300;
  white-space:pre-line;}
.beast-carousel-stage-wrap{grid-column:2; grid-row:1; position:relative; min-width:0; min-height:0;}
.beast-carousel-stage{position:absolute; inset:0; min-width:0; min-height:0; max-height:none;}
.beast-carousel-arrows{position:absolute; left:52%; right:18px; bottom:20px; display:flex; justify-content:center; gap:16px;}