/* Эфир — под шапкой сайта: карточка плеера и карточка о разделе, рядом.

   Раньше «Эфир» был полосой на всю ширину НАД шапкой — плеер, волна,
   приглашение, а навигация третьей строкой под всем этим. Владелец
   сайта увидел в этом главную проблему макета: шапка — это навигация,
   ей место первой (см. landing.html), а всё, что было в «Эфире», стало
   двумя карточками рядом под ней — компактно, без полос на весь экран.

   Палитра взята из landing.css целиком — золото бренда и синева ночи.
   Карточки — тот же `.panel`, что у остальных виджетов главной (матрица,
   бацзы), чтобы «Эфир» не читался вторым, чужим языком дизайна. */

section.ether {
  position: relative;
  padding: 26px 0;
  /* Раньше «Эфир» стоял НАД шапкой, и z-index:60 держал его над звёздным
     фоном канваса — выше собственной липкой шапки (.hdr, z-index:40) ему
     быть незачем не было, шапка шла ниже в разметке. Теперь «Эфир» идёт
     ПОСЛЕ шапки, и старый z-index:60 перекрывал липкую шапку при скролле —
     она визуально пряталась за уезжающим вверх «Эфиром». Ставим ниже
     шапки, но выше обычного контента. */
  z-index: 10;
  overflow: hidden;
  border-bottom: 1px solid rgba(227, 192, 138, .14);
}

/* Небо под всей секцией: тёплое свечение слева, где стоит кнопка play,
   и глубокая синева справа. Свет идёт от источника звука — это и
   объединяет части, и подсказывает, откуда здесь музыка. */
.ether-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 180% at 6% 0%, rgba(227, 192, 138, .13) 0%, transparent 52%),
    radial-gradient(90% 140% at 88% 100%, rgba(110, 139, 255, .12) 0%, transparent 58%),
    linear-gradient(180deg, #080C18 0%, #05070F 100%);
}

.ether-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.ether-card {
  min-width: 0;
  background: var(--panel, rgba(140, 160, 220, .055));
  border: 1px solid var(--brd, rgba(170, 190, 255, .13));
  border-radius: 18px;
  padding: 16px 20px 18px;
}

@media (max-width: 860px) {
  .ether-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Плеер внутри карточки теряет собственный фон и границу: у карточки уже
   есть своя рамка, вторая рамка внутри первой выглядела бы клеткой в
   клетке. */
.ether .plr {
  background: transparent;
  border-bottom: 0;
  z-index: auto;
}
.ether .plr-wrap { padding-left: 0; padding-right: 0; }

/* Плеер уже умеет переноситься в компактную раскладку — но только на
   телефонных ширинах экрана (player.css, @media max-width:760px),
   потому что раньше он всегда был полосой на весь экран. Теперь у него
   родной контейнер — половина wrap, часто уже, чем те самые 760px, — и
   ждать медиа-запрос по ширине ЭКРАНА, а не карточки, нельзя: на
   1400-пиксельном мониторе ряд из восьми элементов не влезет в
   уполовиненную колонку и обрежется. Поэтому переносим строку всегда,
   без привязки к ширине экрана — независимо от того, десктоп это или
   телефон. */
.ether .plr-wrap { flex-wrap: wrap; gap: 10px; padding-bottom: 10px; }
.ether .plr-mid { order: 5; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 6px; }
.ether .plr-title { flex-direction: row; align-items: baseline; gap: 8px; }
.ether .plr-kicker { display: none; }
.ether .plr-seek { width: 100%; }

.ether .plr-playlist {
  border-radius: 14px;
  border: 1px solid var(--brd, rgba(170, 190, 255, .13));
  border-top: 1px solid var(--brd, rgba(170, 190, 255, .13));
  background: rgba(6, 9, 18, .96);
  margin-bottom: 4px;
}
.ether .plr-playlist .wrap { padding: 0 6px; }

/* ---------- волна ----------
   Заменяет разделительную линию и делает то, чего линия не может:
   показывает, идёт ли звук. Пока музыка играет, волна плывёт; на паузе
   останавливается и почти выпрямляется. */
.ether-wave {
  height: 22px;
  margin: 0;
  overflow: hidden;
  opacity: .55;
  /* На паузе волна приплюснута, но не выпрямлена: даже неподвижной она
     должна читаться как звуковая дорожка, иначе это просто линия и её
     незачем было заводить. */
  transform: scaleY(.5);
  transform-origin: center;
  transition: opacity .45s ease, transform .55s ease;
}
.ether-wave svg {
  display: block;
  width: 200%;               /* две волны подряд: шов уезжает за край */
  height: 100%;
  animation: ether-drift 11s linear infinite;
  animation-play-state: paused;
}
.ether-wave path {
  fill: none;
  stroke-width: 1.2;
  /* Толщина не должна расти вместе с растяжением по ширине: без этого
     линия на широком экране превращается в жирную полосу. */
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.ether-w1 { stroke: rgba(227, 192, 138, .75); }
.ether-w2 { stroke: rgba(110, 139, 255, .38); }

/* Класс ставит скрипт плеера, когда звук идёт. */
.ether.sounding .ether-wave {
  opacity: 1;
  transform: scaleY(1);
}
.ether.sounding .ether-wave svg { animation-play-state: running; }

@keyframes ether-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- приглашение ----------
   Раньше это была отдельная колонка на всю ширину (заголовок + абзац
   слева, кнопка справа, выровненная по низу текста) — компоновка думала
   о себе как о втором лендинге, а не о строке под плеером. Теперь одна
   строка: подпись, короткая мысль, кнопка, сноска — всё на одной высоте,
   без отдельного «текстового блока». На узких экранах строка сама
   переносится по flex-wrap, а не превращается обратно в колонку. */
.ether-invite {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 10px 0;
}

.ether-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold, #E3C08A);
}
/* Точка перед подписью пульсирует в такт эфиру — тот же приём, что у
   индикаторов прямого эфира, и здесь он честен: наверху действительно
   что-то звучит. */
.ether-eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold, #E3C08A);
  box-shadow: 0 0 8px var(--gold, #E3C08A);
}
.ether.sounding .ether-eyebrow::before { animation: ether-pulse 1.8s ease-in-out infinite; }

@keyframes ether-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}

.ether-lede {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted, #8590B4);
}

/* Тот же градиент, что у .btn-gold (landing.css) — вплотную под ним на
   странице стоит кнопка «Войти / Зарегистрироваться» того же оттенка, а
   раньше у .ether-btn был свой, чуть другой жёлтый. Две золотые кнопки
   разного золота на одном экране читаются как случайность, не как стиль. */
.ether-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #F0D3A4, #D9B076);
  color: #241A0C;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .005em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 12px 30px -14px rgba(227, 192, 138, .9),
              inset 0 1px 0 rgba(255, 246, 226, .6);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ether-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 34px -14px rgba(227, 192, 138, 1),
              inset 0 1px 0 rgba(255, 246, 226, .7);
}
.ether-btn:focus-visible { outline: 2px solid var(--gold, #E3C08A); outline-offset: 3px; }

.ether-hint {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted, #8590B4);
}

/* ---------- карточка «Об этом разделе» ---------- */
.ether-about-card { display: flex; flex-direction: column; }
.ether-about-lede {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted, #8590B4);
}
.ether-about-kicker {
  margin: 16px 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #8590B4);
  opacity: .8;
}
/* Список — зеркало плейлиста плеера (см. .plr-track в player.css), а не
   новый визуальный язык: тот же приём — кнопка на всю ширину строки,
   тот же способ подсветить название и подпись. Ограничение по высоте и
   свой скролл — треков может быть больше, чем поместится, а карточка
   не должна расти вслед за плейлистом и разъезжаться с карточкой плеера
   рядом (там высота задаётся содержимым плеера, а не списком). */
.ether-about-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}
.ether-about-track {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .16s;
}
.ether-about-track:hover { background: rgba(140, 160, 220, .10); }
.ether-about-track:focus-visible { outline: 2px solid var(--gold, #E3C08A); outline-offset: -2px; }
.ether-about-track b { font-weight: 600; color: var(--txt, #DCE4FA); }
.ether-about-track span { color: var(--muted, #8590B4); font-weight: 400; }

/* Кнопка и сноска — всегда отдельной строкой во всю ширину карточки, не
   по медиа-запросу: раньше приглашение было полосой на весь экран, и
   тесно им становилось только на телефоне. Теперь это всегда половина
   wrap — тесно тут при любой ширине экрана. */
.ether-btn { flex: 1 1 100%; order: 3; }
.ether-hint { flex: 1 1 100%; order: 4; text-align: center; }

/* Кому важна неподвижность — тому неподвижность. Волна остаётся, но
   перестаёт плыть: она и статичная показывает, что здесь про звук. */
@media (prefers-reduced-motion: reduce) {
  .ether-wave svg,
  .ether.sounding .ether-wave svg { animation: none; }
  .ether.sounding .ether-eyebrow::before { animation: none; }
  .ether-btn, .ether-wave { transition: none; }
}