/* ---------- головна: обкладинка (зліва) + віджет плеєра (справа) ---------- */
.home {
  position: relative; min-height: 0;
  display: flex; justify-content: center; align-items: stretch;
  gap: clamp(24px, 3.4vw, 72px);
  margin: 0 var(--gutter);
}
.hero {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  flex: 0 1 auto; height: 100%;
  aspect-ratio: var(--hero-ratio, 1.41);
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0; transition: opacity .8s var(--ease);
}
.hero__img.is-ready { opacity: 1; }
/* обкладинка вибраного треку лежить поверх титульної й проявляється плавно */
.hero__img--track { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.hero.has-track .hero__img--track { opacity: 1; visibility: visible; transition-delay: 0s; cursor: zoom-in; }
.hero.has-track .hero__img:not(.hero__img--track) { opacity: 0; }

/* ---------- текст про трек поверх обкладинки (js/covertext.js) ----------
   Шар займає весь кадр обкладинки; розмір шрифту — від його ширини (cqw), тож текст масштабується разом із обкладинкою. */
.ctext {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  container: ctext / size;
  opacity: 0; transition: opacity .5s var(--ease);
}
.ctext[hidden] { display: none; }
.hero.has-track .ctext, .slide .ctext { opacity: 1; }
.ctext__box {
  --fs: 1.3;
  position: absolute; margin: 0;
  font-size: calc(var(--fs) * 1cqw); line-height: 1.32; letter-spacing: .005em;
  color: #1a5bb5; text-align: justify; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal;
  font-weight: 400;
  pointer-events: auto; user-select: text; -webkit-user-select: text; cursor: text;   /* справжній текст: можна виділити й скопіювати */
}
.ctext__box p { margin: 0 0 .55em; }
.ctext__box p:last-child { margin-bottom: 0; }
.ctext__box strong { font-weight: 700; }
.ctext__box .ctext__head { margin-bottom: .9em; }
/* зовсім мала обкладинка (віконце, вузьке вікно) — текст нерозбірливий, ховаємо */
@container ctext (max-width: 470px) { .ctext__box { display: none; } }