/*
 * ux.css — общие «прилизки» публичных экранов: заставка-интро, плавная смена темы,
 * плавная смена языка, мягкий уход на другую страницу. Подключается после styles.css,
 * поэтому переопределяет «transition: none» старой смены темы.
 */

/* ── Заставка при заходе/перезагрузке ─────────────────────────────────────── */
.intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  overflow: hidden;
  transition: opacity .5s ease, visibility .5s, transform .7s cubic-bezier(.2,.8,.3,1);
}
.intro__in { position: relative; display: grid; gap: 20px; justify-items: center; padding: 0 20px; text-align: center; }
.intro__mark {
  font-family: var(--display);
  font-size: clamp(31px, 8vw, 62px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  transform: skewX(-9deg);
  opacity: 0;
  filter: blur(8px);
  animation: introMark .8s cubic-bezier(.2,.8,.3,1) .06s forwards;
}
.intro__mark b { color: #ffbe3d; font-weight: 800; }
.intro__mark.is-split { opacity: 1; filter: none; animation: none; }
.intro__mark.is-split i {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(.42em);
  animation: introChar .42s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay: calc(var(--n, 0) * 42ms + 60ms);
}
.intro__bar {
  position: relative;
  width: min(260px, 62vw);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.intro__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #ff9f0a 35%, #fff 50%, #ff9f0a 65%, transparent);
  box-shadow: 0 0 12px rgba(255, 159, 10, .9), 0 0 32px rgba(255, 159, 10, .45);
  animation: introSweep 1.05s cubic-bezier(.55,.1,.45,.9) infinite;
}
.intro__note {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  opacity: 0;
  animation: introNote .6s ease .5s forwards;
}
.intro.is-out { opacity: 0; visibility: hidden; transform: scale(1.04); pointer-events: none; }

@keyframes introMark {
  from { opacity: 0; filter: blur(8px); transform: translateY(12px) scale(.96) skewX(-9deg); }
  to { opacity: 1; filter: blur(0); transform: skewX(-9deg); }
}
@keyframes introChar { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes introSweep { from { transform: translateX(-115%); } to { transform: translateX(255%); } }
@keyframes introNote { to { opacity: 1; } }

/* Пока заставка на экране, анимации страницы стоят на нулевом кадре: ux.js снимает is-boot
   в момент её ухода — и витрина/документ разъезжаются уже на глазах у зрителя. */
.is-boot *, .is-boot *::before, .is-boot *::after { animation-play-state: paused; }
.intro, .intro *, .intro *::before, .intro *::after { animation-play-state: running; }

/* ── Плавная смена темы ───────────────────────────────────────────────────── */
/* Стартовое правило styles.css глушит переходы на время переключения — здесь наоборот,
   цвета должны успеть доехать до нового значения, иначе тема «щёлкает». */
.theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after {
  transition: background-color .38s ease, border-color .38s ease, color .38s ease,
              fill .38s ease, stroke .38s ease, box-shadow .38s ease !important;
}
.theme-switch .sk-canvas, .theme-switch .online__bar span { transition: none !important; }

/* Круговая «протяжка» новой темы от кнопки (View Transitions в Chrome/Edge).
   Старый кадр остаётся целиком, новый вырезается кругом и разрастается поверх. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation-name: vtReveal; }
@keyframes vtReveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0%)); }
  to { clip-path: circle(var(--vt-r, 150%) at var(--vt-x, 50%) var(--vt-y, 0%)); }
}

/* ── Плавная смена языка ──────────────────────────────────────────────────── */
.lang { position: relative; isolation: isolate; }
.lang__b { min-width: 46px; }
.lang::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--sh-sm);
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.lang:has(.lang__b[data-lang="en"].is-on)::before { transform: translateX(100%); }
@supports selector(:has(*)) {
  .lang__b.is-on { background: none; box-shadow: none; }
}

/* ── Мягкий уход на другую страницу ───────────────────────────────────────── */
html.leaving body { opacity: .45; transition: opacity .2s ease; }

/* ── Онлайн без данных ────────────────────────────────────────────────────── */
.online.is-unknown .online__row b { color: var(--muted); font-weight: 600; }
.online.is-unknown .online__bar { background: repeating-linear-gradient(90deg, var(--surface-2) 0 6px, transparent 6px 12px); }

/* ── Открытое меню на страницах (бургер без скриптов витрины) ──────── */
.header .nav.is-open {
  display: flex;
  position: absolute;
  top: 78px;
  left: 16px;
  right: 16px;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  z-index: 90;
}
/* Ссылки витрины рассчитаны на горизонтальное меню: в выпадашке такие отступы выглядят дырами. */
.header .nav.is-open > a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 15px;
}
.header .nav.is-open > a:hover { background: var(--surface-2); }
.header .nav.is-open .nav__tools { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ── Прокрутка без полосы: модалка товара, оформление, корзина ───────────────
   Классы is-scroll-top/is-scroll-bottom навешивает ux.js, поэтому край темнеет
   только когда за кадром действительно остаётся содержимое. */
.modal__scroll, .drawer__body {
  --fade-top: 0px;
  --fade-bottom: 0px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
}
.modal__scroll.is-scroll-top, .drawer__body.is-scroll-top { --fade-top: 26px; }
.modal__scroll.is-scroll-bottom, .drawer__body.is-scroll-bottom { --fade-bottom: 26px; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .intro__mark, .intro__note { opacity: 1; filter: none; transform: skewX(-9deg); animation: none; }
  .intro__mark.is-split i { opacity: 1; filter: none; transform: none; animation: none; }
  .intro__bar i { animation: none; }
  .is-boot *, .is-boot *::before, .is-boot *::after { animation-play-state: running; }
  .lang::before { transition: none; }
  .theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.leaving body { opacity: 1; }
}