/* ============================================================
   YAMADA_AI — главная на готовых кадрах интерфейса
   Кадр 2752x1536. В кадре прозрачные окна: две полосы, панель
   расписания и карточка артов. Под кадром лежит наш контент,
   сквозь окна он и виден. Всё в процентах от кадра.
   ============================================================ */

body[data-page="home"] { overflow: hidden; background: #15151a; }

.screen {
  position: fixed; inset: 0; overflow: hidden;
  display: grid; place-items: center;
  background: #15151a;
  --u: min(1vw, 1.791667vh);
}
/* Размытый фон по бокам — два слоя. Новый кадр кладётся в скрытый слой до
   начала свайпа (размытие рисуется, пока ждём декодирования), а во время
   свайпа меняется только прозрачность — это делает видеокарта, без перерисовки */
.screen::before, .screen::after {
  content: ""; position: absolute; inset: calc(var(--u) * -4);
  background-size: cover; background-position: center;
  filter: blur(calc(var(--u) * 1.8)) saturate(1.1) brightness(0.5);
  z-index: 0;
  will-change: opacity;
}
.screen::before { background-image: var(--pane-a, none); }
.screen::after {
  background-image: var(--pane-b, none);
  opacity: 0; transition: opacity 0.45s var(--out);
}
.screen.pane-b::after { opacity: 1; }
.screen > * { position: relative; z-index: 1; }

.stage {
  position: relative;
  width: calc(var(--u) * 100);
  aspect-ratio: 2752 / 1536;
  overflow: hidden;
  /* Russo One — аркадный шрифт главной; остальные страницы на своём --display */
  font-family: "Russo One", var(--display);
}
.page {
  position: absolute; inset: 0;
  opacity: 0; transform: translateX(100%);
}
.page.is-on { opacity: 1; transform: none; }
.page.is-anim { transition: transform 0.45s var(--out); }
/* Страницы заранее на своих слоях: иначе слой создаётся в момент старта
   свайпа и вся страница (кадр, плеер с наложением) перерисовывается на ходу */
.page { will-change: transform; }
.page[aria-hidden="true"] { pointer-events: none; }

.page__ui {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.under { position: absolute; inset: 0; z-index: 1; }
.purse, .orb, .tabs, .cta { position: absolute; z-index: 3; }

/* ---------- Полосы в прозрачных окнах ----------
   Габариты сняты по альфа-каналу кадра, поэтому это размеры самого
   окна, а не его bbox: у наклонённого прямоугольника они разные. */
.bar {
  position: absolute;
  overflow: hidden;
  background: var(--track, #333);
  transition: background-color 0.45s var(--out);
}
.bar--1 { left: 9.52%; top: 18.97%; width: 17.44%; height: 3.74%; transform: rotate(-4.7deg); }
.bar--2 { left: 9.63%; top: 29.30%; width: 17.26%; height: 3.70%; transform: rotate(-4.7deg); }
.bar__fill {
  display: block; height: 100%;
  background: var(--fill-1, #d31a2a);
  transition: width 0.7s var(--out), background-color 0.45s var(--out);
}
.bar__fill--2 { background: var(--fill-2, #1ad367); }
.bar__val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 400;
  font-size: calc(var(--u) * 0.8);
  font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 calc(var(--u) * 0.2) rgba(0, 0, 0, 0.9);
}

/* ---------- Плеер Spotify ----------
   Накрывает оба окна полос с запасом: они прозрачные, и щель по краю
   показала бы дырку в кадре. Наклон — как у самих полос. */
.spot {
  position: absolute; z-index: 3;
  left: 7.3%; top: 17.6%; width: 20%;
  /* Рамка доходит до низа второй полосы и закрывает её окно */
  height: 20%;
  transform: rotate(-4.7deg);
  border-radius: calc(var(--u) * 0.9);
  overflow: hidden;
  /* Внутрь плеера не дотянуться — это чужой документ. Что можно: обвести
     рамкой в тон темы и переключить его собственную светлую/тёмную схему. */
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.16) var(--fill-1, #d31a2a),
    0 calc(var(--u) * 0.4) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.45);
}
/* Рамка отдаётся плееру один в один, без `scale`: масштабирование iframe
   растягивает уже отрисованную картинку и мылит текст. Высоту держим равной
   родной высоте компактного плеера, иначе Spotify оставит низ пустым. */
/* Spotify переключает вид ступенькой: до 352px рисует компактную полосу и
   оставляет низ пустым, с 352px разворачивается в полный и заполняет кадр.
   Поэтому даём ему полные 352px, а лишнее обрезает рамка — так плеер тянется
   на любую высоту без пустоты и без масштабирования, от которого мылит. */
.spot iframe { width: 100%; height: 352px; border: 0; display: block; }

/* Тёмный слой поверх плеера в режиме screen: он осветляет только то, что
   близко к чёрному, то есть фон интерфейса. Белые надписи и кнопки остаются
   белыми, обложка — своей: светлое этим режимом почти не задевается.
   Фильтром так нельзя — он красит кадр целиком, вместе с обложкой. */
.spot::after {
  content: ""; position: absolute; inset: 0;
  background: var(--track, #310304);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ---------- Панель роликов ----------
   Прежде тут было расписание; теперь окно занимает превью целиком. */
.panel {
  position: absolute; display: block;
  left: 7.05%; top: 42.11%; width: 20.32%; height: 17.83%;
  transform: rotate(-4.89deg);
  overflow: hidden;
  background: var(--panel, #260508);
}
.panel__thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.5s var(--out), transform 0.4s var(--out);
}
.panel:hover .panel__thumb { transform: scale(1.04); }
.panel__thumb.is-out { opacity: 0; }

/* ---------- Карточка артов ---------- */
.event {
  position: absolute;
  left: 7.03%; top: 65.74%; width: 21.37%; height: 17.96%;
  transform: rotate(-4.84deg);
}
.event__frame {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--panel, #260508);
}
.event__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Арты вертикальные, в широком окне cover срезает верх и низ:
     смещаем кадр к лицам, иначе в карточке одни туловища */
  object-position: 50% 18%;
  opacity: 0; transition: opacity 0.8s var(--out), transform 0.4s var(--out);
}
.event__frame img.is-on { opacity: 1; }
/* Наведение — лёгкое приближение, как у превью роликов в панели выше */
.event:hover .event__frame img, .event:focus-visible .event__frame img { transform: scale(1.04); }

/* ---------- Счётчики валют ---------- */
/* Плашки сняты по цвету заливки в кадре: полоса высотой 3.59%, текст — по
   центру внутренней части, отступив от круглых краёв. Длинный текст ужимается
   скриптом через --fit, чтобы не вылезать за рамку. */
.purse {
  display: flex; align-items: center; justify-content: center; gap: 0.22em;
  height: 3.59%;
  white-space: nowrap;
  font-weight: 400; font-size: calc(var(--u) * 1.05 * var(--fit, 1));
  color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 calc(var(--u) * 0.08) calc(var(--u) * 0.2) rgba(0, 0, 0, 0.5);
}
/* Счётчики и цифры в них — тем же Russo One, что вкладки (шрифт берут от .stage) */
/* «тетокоинов» длиннее «артов»: шрифт мельче, иначе залезает под аватар справа */
/* Плашки наклонены, как весь интерфейс: верх и низ заливки по столбцам дают
   около −5°. Центр полосы у обеих на y 4.51%, по x — 73.9% и 86.45% */
.purse { transform: rotate(-5deg); }
/* Текст берёт почти всю плашку: по 0.25% с краёв под скругление */
.purse--art  { left: 70.25%; top: 2.715%; width: 7.3%; }  /* плашка x 70.0–77.8% */
.purse--clip { left: 82.8%;  top: 2.715%; width: 7.3%; }  /* плашка x 82.6–90.3% */
/* Плашка справа — вторая дверь в Tetoris, рядом с аватаркой-ссылкой */
a.purse--clip { text-decoration: none; border-radius: 99px; }
a.purse--clip:hover, a.purse--clip:focus-visible { animation: ping-pink 0.9s var(--out) infinite; }

/* Монетка нарисована в кадре; оранжевый диск найден по цвету:
   67.19% / 3.67%, 2.25% × 4.02%. Зона с запасом на белый ободок. */
.coin {
  position: absolute; z-index: 3;
  left: 66.5%; top: 2.45%; width: 3.6%; aspect-ratio: 1;
  border-radius: 50%;
  transform-origin: 50% 50%;
}
.coin:hover, .coin:focus-visible {
  animation: coin-flip 0.6s var(--out);
}
.coin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Аватар у счётчика клипов — вход в Tetoris. Голова найдена по розовому
   цвету в кадре: x 78.8–82.8%, y 1.1–8.5%. Зона — круг с запасом */
.tetoris-link {
  position: absolute; z-index: 3;
  left: 78.6%; top: 0.85%; width: 4.4%; aspect-ratio: 1;
  border-radius: 50%;
}
/* Розовый пинг под цвет аватара: кольцо расходится, пока курсор на иконке */
.tetoris-link:hover, .tetoris-link:focus-visible { animation: ping-pink 0.9s var(--out) infinite; }
@keyframes ping-pink {
  0%   { box-shadow: 0 0 0 0 rgba(255, 79, 154, 0.95); }
  100% { box-shadow: 0 0 0 calc(var(--u) * 1.4) rgba(255, 79, 154, 0); }
}
.tetoris-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Сама монета нарисована и крутиться не может — светится зона над ней */
@keyframes coin-flip {
  0%   { box-shadow: 0 0 0 0 rgba(255, 200, 60, 0.9); }
  100% { box-shadow: 0 0 0 calc(var(--u) * 1.2) rgba(255, 200, 60, 0); }
}

/* ---------- Круглые кнопки ---------- */
/* Центры кругов найдены по кадру: цветные пятна в правой колонке */
.orb { left: 91.8%; width: 6.6%; aspect-ratio: 1; border-radius: 50%; }
.orb--1 { top: 1.88%; }
.orb--2 { top: 14.02%; }
.orb--3 { top: 26.82%; }
/* Подпись раскрывается при наведении под нарисованной иконкой, внутри круга,
   с тем же наклоном, что и остальной интерфейс */
.orb span {
  /* Иконка нарисована правее центра круга, подпись идёт за ней.
     Наклон взят по самим иконкам, высота у каждой своя — рисунки разного
     размера, и общий отступ снизу сажает подписи на разной высоте. */
  position: absolute; left: 55%; bottom: 26%;
  transform: translateX(-50%) rotate(-9deg);
  max-width: 92%;
  padding: 0.06em 0.45em; border-radius: 99px;
  background: rgba(16, 12, 20, 0.82); color: #fff;
  font-weight: 800; font-size: calc(var(--u) * 0.65);
  line-height: 1.3; white-space: nowrap;
  opacity: 0; transition: opacity 0.18s var(--out);
}
.orb--2 span { bottom: 21%; }
.orb:hover span, .orb:focus-visible span { opacity: 1; }

/* ---------- Большая кнопка эфира ----------
   Нарисована в кадре, сверху ложится только кликабельная зона. */
.cta {
  position: absolute; z-index: 3;
  left: 78%; top: 54.3%; width: 22.65%; height: 30.78%;
  border-radius: 18%/22%;
}
/* Кнопка нарисована в кадре и сама прыгать не может. Кладём поверх копию
   кадра, обрезанную маской до одной кнопки: анимация двигает только её, а фон
   вокруг остаётся нарисованным и неподвижным — границы окна не видно.
   Маска снята с самих кадров (пересечение по всем темам) и сделана в размер
   кадра, поэтому mask-size: 100% совмещает её с картинкой без подгонки.
   Точка опоры внизу и масштаб только вверх — при любой фазе копия накрывает
   оригинал, иначе он выглянет из-под неё. */
.cta img {
  position: absolute;
  width: 441.5%; height: 324.9%;
  max-width: none; max-height: none;
  left: -344.4%; top: -176.4%;
  pointer-events: none;
}
.cta__hop {
  /* Размеры — в правиле выше. max-width: none там обязателен: общее правило для
     картинок ужимает вырезку до ширины окна, и в ней не та часть кадра */
  -webkit-mask: url(../img/cta-mask.png) 0 0 / 100% 100% no-repeat;
  mask: url(../img/cta-mask.png) 0 0 / 100% 100% no-repeat;
  /* Опора — низ-центр самой кнопки, а не всей картинки: картинка во весь кадр,
     и 50% 100% тянули кнопку вбок. Кнопка по замеру: x 79–99.65%, низ 84.07% */
  transform-origin: 89.3% 84.07%;
  will-change: transform;
  /* pointer-events: none (выше) обязателен: маска прячет картинку, но не
     попадание — копия ловила бы наведение по всей сцене */
}
.cta:hover .cta__hop, .cta:focus-visible .cta__hop { animation: cta-hop 0.6s var(--out); }

/* Небольшой прыжок вверх: присесть, подскочить, приземлиться с отдачей.
   translateY в % от высоты картинки (= кадра): 0.6% ≈ 2% высоты кнопки —
   нарисованная рука под копией выглядывает на пиксель-другой, не больше */
@keyframes cta-hop {
  0%   { transform: translateY(0) scale(1, 1); }
  18%  { transform: translateY(0) scale(1.05, 1); }
  45%  { transform: translateY(-0.6%) scale(1, 1.02); }
  68%  { transform: translateY(0) scale(1.06, 1); }
  84%  { transform: translateY(-0.12%) scale(1, 1.005); }
  100% { transform: translateY(0) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .cta:hover .cta__hop, .cta:focus-visible .cta__hop { animation: none; transform: scale(1.04); }
}
.cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Вкладки ---------- */
.tabs { left: 3.74%; top: 89.3%; width: 92.9%; height: 6.8%; }
.tab {
  position: absolute; top: 0; height: 100%;
  display: grid; place-items: center;
  /* У Russo One одно начертание — жирность задана самим шрифтом */
  font-weight: 400; font-size: calc(var(--u) * 1.85);
  /* Цвет неактивных вкладок у каждой темы свой (--tab-ink), выбран на _palette.html */
  color: var(--tab-ink, #141018);
}
.tab[aria-current="page"] { color: var(--tab-active-ink, #fff); }
/* Наведение: короткий вздрог, потом кнопка остаётся чуть приподнятой */
.tab {
  transform-origin: 50% 65%;
  transition: transform 0.18s var(--out);
}
/* forwards держит последний кадр: без него кнопка после вздрога
   проваливается обратно, хотя курсор ещё на ней */
.tab:hover, .tab:focus-visible { animation: tab-wobble 0.52s var(--out) forwards; }

@keyframes tab-wobble {
  0%   { transform: rotate(0deg) scale(1); }
  18%  { transform: rotate(-2.6deg) scale(1.07); }
  40%  { transform: rotate(2.1deg) scale(1.05); }
  62%  { transform: rotate(-1.3deg) scale(1.03); }
  82%  { transform: rotate(0.7deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .tab:hover, .tab:focus-visible { animation: none; transform: scale(1.03); }
}

.tab--1 { left: 0;     width: 19.9%; }
.tab--2 { left: 19.9%; width: 19.5%; }
.tab--3 { left: 39.4%; width: 22.6%; }
.tab--4 { left: 62%;   width: 20.1%; }
.tab--5 { left: 82.1%; width: 17.9%; }

/* ---------- Переключение тем ---------- */
.nav, .dots { position: fixed; z-index: 5; }
.nav {
  top: 50%; transform: translateY(-50%);
  width: clamp(34px, 3.4vw, 54px); aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20, 16, 24, 0.62); color: #fff;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.8),
    0 0 0 3px var(--theme-accent, rgba(255, 255, 255, 0.35));
  transition: background 0.18s var(--out), transform 0.18s var(--out);
}
.nav::before {
  content: ""; width: 30%; height: 30%;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}
.nav--prev { left: clamp(6px, 1.1vw, 22px); }
.nav--prev::before { transform: rotate(45deg) translate(8%, 8%); }
.nav--next { right: clamp(6px, 1.1vw, 22px); }
.nav--next::before { transform: rotate(-135deg) translate(8%, 8%); }
.nav:hover { background: var(--fill-1, #d31a2a); }

.dots {
  left: 50%; bottom: clamp(6px, 1.2vh, 16px); transform: translateX(-50%);
  display: flex; gap: 9px;
}
.dots button {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: rgba(20, 16, 24, 0.62);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.8),
    0 0 0 2px var(--theme-accent, rgba(255, 255, 255, 0.35));
  transition: background 0.2s var(--out), transform 0.2s var(--out);
}
.dots button[aria-selected="true"] {
  background: #fff;
  transform: scale(1.25);
}

/* ---------- Портретный экран ---------- */
.fallback { display: none; }

@media (orientation: portrait) and (max-width: 900px) {
  body[data-page="home"] { overflow: auto; }
  .screen { position: static; display: block; padding: 0 0 clamp(1.2rem, 5vw, 2rem); --u: 1vw; }
  .stage { width: 100%; }
  /* На узком экране подписи внутри кадра нечитаемы — остаются только
     подложки и заливки, текст дублируется кнопками ниже */
  .purse, .tabs, .orb, .cta, .dots, .bar__val, .coin, .tetoris-link { display: none; }
  .spot { display: none; }

  .nav { position: absolute; top: 22vh; width: 46px; }

  .fallback { display: grid; gap: 0.6rem; padding: 1.1rem clamp(0.9rem, 4vw, 1.4rem) 0; }
  .fallback a {
    display: grid; place-items: center;
    min-height: 52px; padding: 0.5rem 1rem;
    border-radius: 14px; text-decoration: none;
    font-family: var(--display); font-weight: 800; font-size: 1.05rem;
    color: #fff; background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  }
}
/* Цвета сняты пипеткой с самих кадров: полоса вкладок и полоса валюты.
   Яркость акцента подтянута — сырой тон у тёмных тем сливается с кадром.
   Неактивные вкладки нарисованы белыми, поэтому текст на них всегда тёмный. */
.page.theme-2 {
  --tab-active-ink: #ffffff;
  --tab-ink: #cc95e8;
  --fill-1: #a33ed5;
  --fill-2: #cc95e8;
  --track: #240e2f;
  --panel: #1a0a22;
}
.page.theme-berserk2 {
  --tab-active-ink: #ffffff;
  --tab-ink: #ffffff;
  --fill-1: #e00f12;
  --fill-2: #ee7b7d;
  --track: #310304;
  --panel: #240203;
}
.page.theme-cute {
  --tab-active-ink: #ffffff;
  --tab-ink: #fd6db5;
  --fill-1: #84712b;
  --fill-2: #bbb18a;
  --track: #1d1909;
  --panel: #151207;
}
.page.theme-got3 {
  --tab-active-ink: #ffffff;
  --tab-ink: #ffffff;
  --fill-1: #c7386f;
  --fill-2: #e092b0;
  --track: #2c0c18;
  --panel: #200912;
}
.page.theme-kuma {
  --tab-active-ink: #ffffff;
  --tab-ink: #fb3737;
  --fill-1: #db1b2c;
  --fill-2: #eb828b;
  --track: #30060a;
  --panel: #230407;
}
.page.theme-naruto {
  --tab-active-ink: #ffffff;
  --tab-ink: #ff2d46;
  --fill-1: #db1f32;
  --fill-2: #eb848e;
  --track: #30070b;
  --panel: #230508;
}
.page.theme-red2 {
  --tab-active-ink: #ffffff;
  --tab-ink: #999999;
  --fill-1: #db1f32;
  --fill-2: #eb848e;
  --track: #30070b;
  --panel: #230508;
}
.page.theme-teto-main-2 {
  --tab-active-ink: #ffffff;
  --tab-ink: #5b6cec;
  --fill-1: #b838b1;
  --fill-2: #d892d4;
  --track: #280c27;
  --panel: #1d091c;
}
.page.theme-maid3 {
  --tab-active-ink: #ffffff;
  --tab-ink: #ffffff;
  --fill-1: #db1b57;
  --fill-2: #eb82a3;
  --track: #300613;
  --panel: #23040e;
}
.page.theme-w {
  --tab-active-ink: #ffffff;
  --tab-ink: #f372b0;
  --fill-1: #006ae7;
  --fill-2: #73adf2;
  --track: #001733;
  --panel: #001125;
}
.page.theme-ww {
  --tab-active-ink: #ffffff;
  --tab-ink: #c7c7c7;
  --fill-1: #707070;
  --fill-2: #b0b0b0;
  --track: #191919;
  --panel: #121212;
}

/* ---------- Телефон: главная закрыта ----------
   Кадр интерфейса нарисован под широкий экран; на узком показываем заглушку
   и ссылки на разделы, которые на телефоне работают нормально */
.pc-only { display: none; }
@media (max-width: 900px), (orientation: portrait) {
  body[data-page="home"] { overflow: auto; background: var(--paper, #eff1fb); }
  .screen { position: static; display: block; background: none; padding: 1.2rem 1rem 2rem; }
  .screen::before, .screen::after, .stage, .nav, .dots { display: none; }
  .pc-only {
    display: grid; justify-items: center; gap: 0.6rem; text-align: center;
    padding: 2rem 1rem 1.4rem; color: var(--ink, #1d2154);
  }
  .pc-only__logo { width: 120px; height: auto; }
  .pc-only h1 { font-family: var(--display); font-size: 1.3rem; line-height: 1.25; }
  .pc-only p { font-size: 0.95rem; color: var(--ink-2, #5a5f94); max-width: 28rem; }
  /* Кнопки разделов были белыми под тёмный кадр — на светлой заглушке их не видно */
  .fallback a {
    color: var(--ink, #1d2154);
    background: var(--card, #fff);
    box-shadow: inset 0 0 0 1px var(--line, #dcdff5), var(--lift-2, 0 8px 22px -6px rgba(46, 52, 120, 0.16));
  }
  .fallback a:active { background: var(--blue-mist, #f0f2ff); }
}