/* Общие размеры для всех экранов, в пикселях макета */
:root {
  --side: 72; /* отступ от края экрана */
  --title-size: 330; /* кегль заголовков */
  --text-size: 29.25; /* кегль наборного текста (как имена в подвале) */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Tektur', sans-serif;
  background-color: #050505;
  color: #fff;
}

/* ---------- Hero ---------- */

.hero {
  container-type: inline-size;
  overflow: hidden;
  background-color: #050505;
}

/* Первый экран масштабируется по ширине окна целиком, как в макете
   1440×940: заголовок и планеты в одной пропорции, --u — пиксель макета */
.hero__stage {
  --u: calc(100cqw / 1440);
  --uw: var(--u);
  position: relative;
  width: 100%;
  height: calc(940 * var(--u));
}

/* Композиция планет (с ней работает физика) */
.hero__space {
  position: absolute;
  inset: 0;
}

.hero__title {
  position: absolute;
  top: calc(12.5 * var(--uw));
}

/* Заголовок выровнен по центру экрана */
.hero__title {
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: calc(var(--title-size) * var(--uw));
  font-weight: 800;
  font-variation-settings: 'wdth' 100;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #fff;
}

/* Заголовок лежит поверх шаров и инвертирует их цвета там,
   где они пересекаются: на чёрном фоне буквы остаются белыми */
.hero__title {
  z-index: 2;
  mix-blend-mode: difference;
}

.hero__orbit {
  position: absolute;
  top: calc(386.1 * var(--u));
  left: calc(559.71 * var(--u));
  width: calc(428 * var(--u));
  height: auto;
}

/* ---------- Planets ---------- */

.planet {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
}

.planet img {
  position: absolute;
  display: block;
  max-width: none;
}

.planet--zebra {
  top: calc(336.5 * var(--u));
  left: calc(50.5 * var(--u));
  width: calc(340 * var(--u));
  height: calc(340 * var(--u));
  background-color: #a3f3fa;
}

.planet--zebra img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.planet--cream,
.planet--green,
.planet--orange {
  background-color: #fff;
}

.planet--cream {
  top: calc(360 * var(--u));
  left: calc(430 * var(--u));
  width: calc(200 * var(--u));
  height: calc(200 * var(--u));
}

.planet--cream img {
  top: -19.53%;
  left: -27.47%;
  width: 139.3%;
}

.planet--green {
  top: calc(305 * var(--u));
  left: calc(1040 * var(--u));
  width: calc(290 * var(--u));
  height: calc(290 * var(--u));
}

.planet--green img {
  top: -17.01%;
  left: -17.84%;
  width: 134.3%;
}

.planet--orange {
  top: calc(564 * var(--u));
  left: calc(600.5 * var(--u));
  width: calc(296 * var(--u));
  height: calc(296 * var(--u));
}

.planet--orange img {
  top: -22.24%;
  left: -31.3%;
  width: 152.7%;
}

.planet--stripes {
  top: calc(680 * var(--u));
  left: calc(964 * var(--u));
  width: calc(132 * var(--u));
  height: calc(132 * var(--u));
  background-image: repeating-linear-gradient(
    90deg,
    #3d4bff 0 7.5%,
    #b9bccb 7.5% 13.75%
  );
}

.planet--target {
  top: calc(653 * var(--u));
  left: calc(1213 * var(--u));
  width: calc(154 * var(--u));
  height: calc(154 * var(--u));
  background-image: repeating-radial-gradient(
    circle,
    #ff5a1f 0 calc(13.2 * var(--u)),
    #ffe100 calc(13.2 * var(--u)) calc(26.4 * var(--u))
  );
}

.planet--dot {
  top: calc(590 * var(--u));
  left: calc(1040 * var(--u));
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  background-image: radial-gradient(
    circle,
    #ff4fd8 calc(11.77 * var(--u)),
    #ffe100 calc(12.13 * var(--u))
  );
}

/* ---------- Stars ---------- */

.star {
  position: absolute;
  width: calc(224 * var(--u));
  height: calc(224 * var(--u));
}

.star img {
  position: absolute;
  inset: 7.52% 9.34%;
  display: block;
  width: 81.32%;
  height: 84.96%;
}

.star--pink {
  top: calc(311 * var(--u));
  left: calc(774 * var(--u));
  transform: rotate(15deg);
}

.star--lime {
  top: calc(646 * var(--u));
  left: calc(280 * var(--u));
  transform: rotate(30deg);
}

/* ---------- Letters ---------- */

/* При наведении буква заливается узором одной из планет
   и немного увеличивается */
.letter {
  display: inline-block;
  color: #fff;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  transition:
    color 0.35s ease,
    transform 0.35s ease;
}

.letter:hover {
  /* Временно отключено: смена цвета на узор и увеличение буквы
  color: transparent;
  transform: scale(1.08) rotate(var(--tilt, 0deg));
  */
  transform: rotate(var(--tilt, 0deg));
}

/* Каждая буква наклоняется в свою сторону */
.letter:nth-child(1) {
  --tilt: -6deg;
}
.letter:nth-child(2) {
  --tilt: 5deg;
}
.letter:nth-child(3) {
  --tilt: -4deg;
}
.letter:nth-child(4) {
  --tilt: 6deg;
}
.letter:nth-child(5) {
  --tilt: -5deg;
}
.letter:nth-child(6) {
  --tilt: 4deg;
}
.letter:nth-child(7) {
  --tilt: -6deg;
}

.letter--cream {
  background-image: url('../images/planet-cream.png');
}

.letter--target {
  background-image: repeating-radial-gradient(
    circle,
    #ff5a1f 0 calc(30 * var(--u)),
    #ffe100 calc(30 * var(--u)) calc(60 * var(--u))
  );
}

.letter--green {
  background-image: url('../images/planet-green.png');
}

.letter--dots {
  background-color: #ff4fd8;
  background-image: radial-gradient(
    circle,
    #ffe100 calc(14 * var(--u)),
    transparent calc(15 * var(--u))
  );
  background-repeat: repeat;
  background-size: calc(48 * var(--u)) calc(48 * var(--u));
}

.letter--zebra {
  background-color: #a3f3fa;
  background-image: url('../images/planet-zebra.svg');
}

.letter--stripes {
  background-image: repeating-linear-gradient(
    90deg,
    #3d4bff 0 calc(18 * var(--u)),
    #b9bccb calc(18 * var(--u)) calc(33 * var(--u))
  );
}

/* ---------- Physics ---------- */

/* Смещение от толчков задаётся через margin, чтобы не мешать
   transform/translate/rotate, которые заняты позой и анимациями */
.planet,
.star {
  margin-top: calc(var(--py, 0) * var(--u));
  margin-left: calc(var(--px, 0) * var(--u));
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.planet img,
.star img {
  pointer-events: none;
}

/* ---------- Instrument (микшер, сигнальная цепь) ---------- */

/* Масштабируется по ширине окна, как остальные экраны (макет 1440px).
   Цвета каналов: «Планеты» — голубой зебры, «Звёзды» — розовый звезды */
.instrument {
  container-type: inline-size;
  background-color: #050505;
}

.instrument__inner {
  --u: calc(100cqw / 1440);
  --planets: #a4f4fa;
  --stars: #ff6ede;
  --master: #f7f7f5;
  --panel: #111;
  --muted: #9a9a9a;
  display: flex;
  flex-direction: column;
  gap: calc(72 * var(--u));
  padding: calc(120 * var(--u)) calc(var(--side) * var(--u)) calc(60 * var(--u));
  color: var(--master);
}

/* Подписи блоков — как подписи в подвале */
.instrument__label {
  margin: 0 0 calc(24 * var(--u));
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(13.5 * var(--u));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Микшер ---------- */

.mixer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16 * var(--u));
}

.strip {
  --accent: var(--master);
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
  padding: calc(28 * var(--u));
  border-radius: calc(28 * var(--u));
  background: var(--panel);
}

.strip--planets { --accent: var(--planets); }
.strip--stars   { --accent: var(--stars); }

/* Выключенный (mute) канал бледнеет */
.strip :is(.strip__head, .strip__knobs, .meter, .fader) {
  transition: opacity 0.2s ease;
}

.strip.is-silent :is(.strip__head, .strip__knobs, .meter, .fader) {
  opacity: 0.35;
}

.strip__head {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
}

.strip__ball {
  flex: none;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
}

/* Шары — узоры фигур первого экрана */
.strip--planets .strip__ball {
  background: #a3f3fa url('../images/planet-zebra.svg') center / cover;
}

.strip--stars .strip__ball {
  border-radius: 0;
  background: url('../images/star-pink.png') center / contain no-repeat;
}

.strip__title {
  margin: 0;
  font-family: 'Russo One', sans-serif;
  font-size: calc(30 * var(--u));
  font-weight: 400;
  line-height: 1;
}

.strip__knobs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(24 * var(--u)) calc(8 * var(--u));
}

/* Индикатор, фейдер и кнопка прижаты к низу ленты */
.strip__mix {
  display: flex;
  gap: calc(16 * var(--u));
  height: calc(220 * var(--u));
  margin-top: auto;
}

.strip__side {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

.strip__db {
  margin: 0 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(14 * var(--u));
  white-space: nowrap;
}

.strip__btn {
  position: relative;
  isolation: isolate; /* узор ::before ложится под текст, но над фоном */
  overflow: hidden;
  height: calc(44 * var(--u));
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #1f1f1f;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(12 * var(--u));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.3s ease;
}

/* При наведении кнопка плавно заливается узором своего канала:
   градиент нельзя анимировать, поэтому узор — отдельный слой с opacity */
.strip__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.strip--planets .strip__btn::before {
  background: var(--planets) url('../images/planet-zebra.svg') center / cover;
}

.strip--stars .strip__btn::before {
  background: var(--stars)
    radial-gradient(circle, #ffe100 calc(4.5 * var(--u)), transparent calc(5 * var(--u)))
    0 0 / calc(16 * var(--u)) calc(16 * var(--u));
}

/* Надпись на узоре — в чёрной плашке, чтобы читалась поверх полос и точек */
.strip__btn span {
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.strip__btn:not([aria-pressed="true"]):hover span {
  background: #050505;
  color: var(--master);
}

.strip__btn:not([aria-pressed="true"]):hover::before {
  opacity: 1;
}

.strip__btn[aria-pressed="true"] {
  background: #ff5a1f;
  color: #050505;
}

/* ---------- Ручка ---------- */

.knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  min-width: 0;
  text-align: center;
}

.knob__dial {
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  border-radius: 50%;
  cursor: ns-resize;
  touch-action: none;
}

.knob__dial svg {
  display: block;
  width: 100%;
  height: 100%;
}

.knob__track,
.knob__arc {
  fill: none;
  stroke-width: 5;
}

.knob__track {
  stroke: #2a2a2a;
}

.knob__arc {
  stroke: var(--accent);
}

.knob__body {
  fill: #222;
}

.knob__pointer {
  stroke: var(--master);
  stroke-width: 3;
  stroke-linecap: round;
}

.knob__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(11.5 * var(--u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.knob__value {
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(13 * var(--u));
  white-space: nowrap;
}

/* ---------- Фейдер ---------- */
/* --p — положение 0…1, его задаёт scripts/mixer.js */

.fader {
  --p: 0;
  --thumb: calc(24 * var(--u));
  position: relative;
  flex: none;
  width: calc(52 * var(--u));
  border-radius: calc(8 * var(--u));
  cursor: ns-resize;
  touch-action: none;
}

.fader__track {
  position: absolute;
  top: calc(var(--thumb) / 2);
  bottom: calc(var(--thumb) / 2);
  left: 50%;
  width: calc(6 * var(--u));
  translate: -50% 0;
  border-radius: calc(3 * var(--u));
  background: #2a2a2a;
}

.fader__fill {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--p) * 100%);
  border-radius: inherit;
  background: var(--accent);
}

.fader__thumb {
  position: absolute;
  bottom: calc(var(--p) * (100% - var(--thumb)));
  left: 50%;
  width: calc(44 * var(--u));
  height: var(--thumb);
  translate: -50% 0;
  border-radius: calc(6 * var(--u));
  background: linear-gradient(#050505, #050505) center / 70% calc(2 * var(--u)) no-repeat,
    var(--master);
}

/* ---------- Индикатор уровня ---------- */
/* Высоту полосы задаёт scripts/mixer.js */

.meter {
  position: relative;
  flex: none;
  width: calc(12 * var(--u));
  overflow: hidden;
  border-radius: calc(6 * var(--u));
  background: #1f1f1f;
}

.meter__bar {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  background: linear-gradient(to top, var(--accent) 70%, #ff5a1f 100%);
}

.knob__dial:focus-visible,
.fader:focus-visible,
.strip__btn:focus-visible {
  outline: calc(2 * var(--u)) solid var(--accent);
  outline-offset: calc(4 * var(--u));
}

/* ---------- Схема сигнальной цепи ---------- */

.chain {
  margin: 0;
  overflow-x: auto; /* на узком экране схема прокручивается внутри себя */
}

.chain svg {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}

.chain text {
  font-family: 'JetBrains Mono', monospace;
  text-anchor: middle;
}

.chain__heading text,
.chain__legend text {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-anchor: start;
  fill: var(--muted);
}

.chain__title {
  font-size: 14px;
  fill: var(--master);
}

.chain__sub {
  font-size: 12px;
  fill: var(--muted);
}

.chain__box rect,
.chain__master rect {
  fill: var(--panel);
  stroke: #3a3a3a;
  stroke-width: 1.5;
}

.chain__voice .chain__title,
.chain__voice .chain__sub {
  fill: #050505;
}

.chain__voice--planets rect { fill: var(--planets); }
.chain__voice--stars rect   { fill: var(--stars); }

.chain__channel rect {
  fill: var(--panel);
  stroke-width: 2;
}

.chain__channel--planets rect { stroke: var(--planets); }
.chain__channel--stars rect   { stroke: var(--stars); }

.chain__wire,
.chain__wire path {
  fill: none;
  stroke: var(--master);
  stroke-width: 2;
}

.chain__send {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.chain__send--planets { stroke: var(--planets); }
.chain__send--stars   { stroke: var(--stars); }
.chain__send--legend  { stroke: var(--muted); }

.chain__arrow          { fill: var(--master); }
.chain__arrow--planets { fill: var(--planets); }
.chain__arrow--stars   { fill: var(--stars); }

/* На узком экране ленты встают друг под другом и крупнее */
@container (max-width: 760px) {
  .instrument__inner {
    --u: calc(100cqw / 560);
  }

  .mixer {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Choose (второй экран) ---------- */

/* Второй экран масштабируется по ширине окна: макет 1440×440 —
   лента кругов (320px) и по 60px сверху и снизу на волну и наведение */
.choose {
  container-type: inline-size;
  background-color: #050505;
}

.choose__stage {
  --u: calc(100cqw / 1440);
  --uw: var(--u);
  position: relative;
  width: 100%;
  height: calc(440 * var(--u));
  overflow: hidden;
}

.choose__circles {
  position: absolute;
  top: calc(60 * var(--u));
  /* Лента из 15 кругов: слева запас в один период (780px), который
     въезжает в кадр при движении, справа — запас на широкие окна */
  left: calc(-840 * var(--u));
  display: flex;
}

.circle {
  flex: none;
  width: calc(320 * var(--u));
  height: calc(320 * var(--u));
  border-radius: 50%;
}

/* При наведении круг немного увеличивается,
   оставаясь в своём слое — правый сосед по-прежнему поверх */
.circle {
  position: relative; /* все круги в одном слое — порядок по разметке */
  transition: transform 0.3s ease;
  cursor: pointer; /* клик включает музыку цвета (scripts/colorMusic.js) */
}

.circle:hover {
  transform: scale(1.08);
}

.circle + .circle {
  margin-left: calc(-60 * var(--u));
}

.circle--pink {
  background: url('../images/planet-orange.png') 59.4% 42.2% / 152.7% no-repeat;
}

.circle--cream {
  background: url('../images/planet-cream.png') center / cover;
}

.circle--lime {
  background: url('../images/pattern-lime.png') center / cover;
}

/* ---------- Footer ---------- */

/* Подвал из Claude Design (макет 1280px), пересчитан в пиксели
   макета 1440 и масштабируется по ширине окна, как второй экран */
.footer {
  container-type: inline-size;
  background-color: #050505;
}

.footer__inner {
  --u: calc(100cqw / 1440);
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* номер и подписи прижаты к низу подвала */
  height: calc(600 * var(--u));
  padding: calc(54 * var(--u)) calc(var(--side) * var(--u)) calc(45 * var(--u));
  color: #f7f7f5;
}

/* Номер группы выровнен по центру, как заголовки. Он чуть шире
   поля между отступами, поэтому блок расширен на 0.1em в обе стороны —
   иначе центрирование не сработает и номер прижмётся к левому краю */
.footer__group {
  position: relative;
}

.footer__number {
  margin: 0 -0.1em;
  text-align: center;
  font-size: calc(304 * var(--u));
  font-weight: 900;
  font-variation-settings: 'wdth' 100;
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* Буквы номера сохраняют цвет подвала */
.footer__number .letter {
  color: inherit;
  background-color: currentColor;
}

/* Шары поверх номера: при наведении пружинисто увеличиваются и поворачиваются */
.footer__ball {
  position: absolute;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.footer__ball--dots {
  top: -14%;
  left: 8%;
  width: calc(135 * var(--u));
  height: calc(135 * var(--u));
  background: #f9cfc9 radial-gradient(circle, #ff6000 36%, transparent 39%) 0
    0 / calc(22.5 * var(--u)) calc(22.5 * var(--u));
}

.footer__ball--stripes {
  bottom: -11%;
  left: 55%;
  width: calc(101 * var(--u));
  height: calc(101 * var(--u));
  background: repeating-linear-gradient(
    90deg,
    #3f4bff 0 calc(10.1 * var(--u)),
    #b9b9c9 calc(10.1 * var(--u)) calc(18 * var(--u))
  );
}

.footer__ball--lime {
  top: -26%;
  right: 6%;
  width: calc(169 * var(--u));
  height: calc(169 * var(--u));
  background: #c2f500 radial-gradient(circle, #ff5a1f 32%, transparent 35%) 0
    0 / calc(20.25 * var(--u)) calc(20.25 * var(--u));
}

.footer__ball--dots:hover,
.footer__ball--lime:hover {
  transform: scale(1.1) rotate(20deg);
}

.footer__ball--stripes:hover {
  transform: scale(1.1) rotate(-20deg);
}

/* Студент и куратор — серые подложки, как ленты микшера,
   в той же сетке из двух колонок */
.footer__people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16 * var(--u));
  margin-top: calc(64 * var(--u)); /* запас под парящий полосатый шар */
}

.footer__item {
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--u));
  padding: calc(28 * var(--u));
  border-radius: calc(28 * var(--u));
  background: #111;
}

.footer__label {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(13.5 * var(--u));
  letter-spacing: 0.12em;
  color: #9a9a9a;
}

.footer__value {
  margin: 0;
  font-family: 'Russo One', sans-serif;
  font-size: calc(var(--text-size) * var(--u));
  white-space: nowrap;
}