/* G-Connect 0.8.0 (G-STUDIO) — Базилиса, лиса-проводник. Подключается на всех страницах.
   Один фиксированный холст (.guide) и облачко настоящим текстом (.guide__bubble), оба aria-hidden и без событий мыши.
   Главная: крупная лиса ведёт по сценам (guide-home); остальные страницы: малый гид в правом нижнем углу (guide-corner).
   Новых цветов нет: только переменные палитры темы. Насыщенные цвета — только у самой лисы (рисует basilisa3d.js).
   Анимируются только transform и opacity. */

:root {
  --gw: 320px;            /* базовый размер холста лисы (главная, ≥ 1200 px: масштабируется transform) */
  --gh: 400px;
}

/* Главная на узких экранах: лиса в правом нижнем углу. Мех тот же (качество high), меньше только холст. */
@media (max-width: 1199px) {
  :root { --gw: 176px; --gh: 220px; }
}

@media (max-width: 767px) {
  :root { --gw: 124px; --gh: 155px; }
}

/* Внутренние страницы: малый гид ~180 px на компьютере и планшете, ~120 px на телефоне. */
html.guide-corner { --gw: 180px; --gh: 225px; }

@media (max-width: 767px) {
  html.guide-corner { --gw: 120px; --gh: 150px; }
}

.guide {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;            /* выше рейки (40), ниже шапки (50) и мобильного меню (150) */
  width: var(--gw);
  height: var(--gh);
  pointer-events: none;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 400ms ease;
}

.guide.is-ready { opacity: 1; }

.guide .guide__stage { position: absolute; inset: 0; } /* сильнее, чем .b3d{position:relative} из basilisa3d.js */

.guide__stage .b3d-fallback,
.guide__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.guide__bubble {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 46;
  max-width: min(260px, calc(100vw - 32px));
  padding: 0.7rem 0.95rem;
  border: 1.5px solid var(--d-gold);
  border-radius: 16px;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 10px 26px rgb(38 35 31 / 16%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

.guide__bubble::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: var(--tx, 50%);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-right: 1.5px solid var(--d-gold);
  border-bottom: 1.5px solid var(--d-gold);
  border-bottom-right-radius: 4px;
  background: var(--paper);
  transform: rotate(45deg);
}

.guide__bubble.is-shown { opacity: 1; }

.guide__bubble:empty { display: none; }

@media (max-width: 767px) {
  .guide__bubble { font-size: 0.8rem; padding: 0.6rem 0.8rem; }
}

html.guide-off .guide,
html.guide-off .guide__bubble { display: none; }

/* Мобильное меню открыто: лиса и облачко не мешают. */
html.menu-open .guide,
html.menu-open .guide__bubble { opacity: 0; }

/* ---------- Кнопки «Скрыть Базилису» и «Пропустить анимацию» (на тёмном: первый экран главной и подвал) ---------- */
.guide-ctl { display: flex; flex-wrap: wrap; gap: 0.5rem; }

html:not(.has-js) .guide-ctl { display: none; }

.guide-ctl button {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgb(209 172 128 / 45%);
  border-radius: 999px;
  background: transparent;
  color: var(--d-muted);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.guide-ctl button:hover { color: var(--d-text); border-color: var(--d-gold); }

.guide-ctl button:focus-visible { outline: 3px solid var(--d-gold); outline-offset: 3px; color: var(--d-text); }

/* Подвал: кнопки рядом с копирайтом. */
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }

.site-footer__bottom .guide-ctl { margin-left: auto; }

@media (max-width: 599px) {
  .site-footer__bottom .guide-ctl { margin-left: 0; width: 100%; }
}

/* ---------- «Пропустить анимацию»: то же, что системное «уменьшить движение» ---------- */
html.motion-off { scroll-behavior: auto; }

html.motion-off *,
html.motion-off *::before,
html.motion-off *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
}

html.motion-off .reveal { opacity: 1 !important; transform: none !important; }