/* «Мой бит» — хиро на главной. Модель: чёрный фон, на нём светящиеся ЖГУТИКИ
   (WebGL2, features/strands.js) — разгораются по play, тлеют на паузе, чёрные до
   первого запуска. По центру — голый премиум-треугольник play/⏸ (без круга).
   Заголовка и иконки-волны нет (Артём). Подключён ДО responsive.css. */

.wavehero {
  position: relative;
  /* Единственный блок главной, по центру экрана (контейнер #home-scroll центрирует).
     Мобайл-база: полоса ПРЕЖНЕГО размера — жгутики нормируются по высоте холста,
     полноэкранный холст делал их слишком крупными (Артём). Десктоп заполняет зону
     целиком и бьётся под шапку (крупнее — Артёму зашло): оверрайд в responsive.css. */
  height: clamp(330px, 52vh, 440px);
  overflow: hidden;
  /* Прозрачный, НЕ сплошной var(--black): раньше опаковый чёрный прямоугольник
     пробивал тёмный квадрат в фоне #screen-home (шум + синий глоу), и на светлом
     окружении был виден шов холста. Жгутики светятся аддитивно поверх штатного
     фона страницы (тот же #000), а при падении WebGL хиро всё равно чёрный —
     это фон #screens/#screen-home. Квадрата больше нет. */
  background: transparent;
  animation: item-rise 0.5s var(--ease) both;
  /* Долгий тап открывает «Задать вайб» (wave-tune.js) — глушим нативную лупу/
     выделение iOS, чтобы удержание не поднимало текстовый loupe/контекст-меню. */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}

/* Холст жгутиков — на весь хиро, под кнопкой (z0), клики мимо. Радиальная маска:
   свечение живёт в центре (у кнопки), а к КРАЯМ — влево/вправо и вниз — мягко
   растворяется. Это чинит и десктопные «дубли по краям», и мобайл «впритык к краю»:
   концы затемнены, полоса читается как центрированный источник (apple-design §12). */
.wavehero__strands {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
  /* МОБАЙЛ (база): края темнее — концы «уходят в ничто» (Артём). Десктоп мягче — оверрайд в responsive.css. */
  -webkit-mask-image: radial-gradient(52% 58% at 50% 58%, #000 32%, transparent 100%);
          mask-image: radial-gradient(52% 58% at 50% 58%, #000 32%, transparent 100%);
}
/* reduced-motion: шейдер сам отдаёт статичный зажжённый кадр (strands.js). */

/* Кнопка play — ГОЛЫЙ треугольник по центру видимого чёрного (ниже линии шапки).
   Без круга/стекла (Артём): только знак + мягкая тень для читаемости на нитях
   (функциональный контраст, не неон). */
.wavehero__play {
  position: absolute; left: 50%; top: 50%;   /* центр видимой волны; высота стабильна (см. home.css) */
  transform: translate(-50%, -50%); z-index: 3;
  display: grid; place-items: center;
  width: 88px; height: 88px;            /* хит-таргет ≥44px с запасом */
  background: none; border: 0; padding: 0; color: #fff;
  transition: transform var(--dur-press) var(--ease), color var(--dur) var(--ease);
}
.wavehero__play .ic {
  width: 56px; height: 56px;
  transform: translateX(3px);           /* оптический центр треугольника */
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55));
}
.wavehero__play:active { transform: translate(-50%, -50%) scale(0.92); }
.wavehero__play:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 12px; }
/* Кнопка волны ВСЕГДА белая (play и ⏸) — цвет один, база выше (Артём). Раньше на
   детуре она горела акцентом (синим) — убрано; аффорданс «продолжить» несут сам
   треугольник play и тлеющие жгутики. Класс is-suspended оставлен (DOM-хук/API). */

@media (hover: hover) {
  .wavehero__play:hover .ic { filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.7)); }
}

/* Дизлайк волны — в плеере в кластере .nowplaying__actions слева от сердечка (зазор
   18px задаёт кластер, см. sheets.css). Виден только пока волна ведёт очередь; когда
   скрыт — лайк остаётся у правого края и не прыгает. Форма — .likebtn из controls.css. */
#player-dislike[hidden] { display: none; }

/* «Задать вайб» больше не пилюля в углу — открывается долгим тапом по волне
   (wave-tune.js: long-press на #wavehero → openTune). Иконки на хиро нет (Артём). */

/* Шторка «Задать вайб» */
.wavetune { display: flex; flex-direction: column; gap: 14px; padding: 4px var(--gutter) 0; min-height: 0; flex: 1; overflow-y: auto; scrollbar-width: none; }
.wavetune::-webkit-scrollbar { display: none; }
.wavetune__hint { font-size: 14px; color: var(--t2); line-height: 1.4; }
.wavetune__note { font-size: 12px; font-weight: 600; color: var(--t3); letter-spacing: 0.02em; padding: 4px 2px; }
.wavetune__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wavetune__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px 8px 14px; border-radius: var(--pill);
  font-size: 13px; font-weight: 600; color: var(--on-accent); background: var(--accent);
  transition: transform var(--dur-press) var(--ease);
}
.wavetune__chip:active { transform: scale(0.94); }
.wavetune__chip .ic { opacity: 0.8; }
/* Поле поиска в шторке — самодостаточное (базовый .searchbox на мобайле display:none
   и не стилит input): показываем на обоих вьюпортах, красим input под тёмный фон. */
.searchbox--tune { display: flex; width: 100%; height: 46px; cursor: text; }
.searchbox--tune input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--t1); font: inherit; font-size: 15px; font-weight: 500;
}
.searchbox--tune input::placeholder { color: var(--t3); }
.wavetune__list { display: flex; flex-direction: column; gap: 2px; }
.wavetune__foot { padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); }
.wavetune__go {
  width: 100%; padding: 15px; border-radius: var(--r-card);
  font-size: 16px; font-weight: 700; color: var(--on-accent); background: var(--accent);
  transition: transform var(--dur-press) var(--ease), opacity var(--dur) var(--ease);
}
.wavetune__go:active { transform: scale(0.98); }
.wavetune__go:disabled { opacity: 0.4; }