* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: #030403;
    color: #d9d3c3;
    font-family: 'Manrope', 'Inter', Arial, sans-serif;
    overflow-x: hidden;
    font-size: 17px;
}
#cognitiveTrail { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
.header { width: 100%; border-bottom: 1px solid rgba(190,160,90,0.18); background: rgba(0,0,0,0.92); }
.header-inner { width: min(1200px, 92%); margin: 0 auto; padding: 24px 0; text-align: center; }
.logo-img { max-width: 340px; width: 72%; height: auto; display: block; margin: 0 auto; }
.chat-line { margin-top: 18px; font-size: 16px; letter-spacing: 0.18em; color: rgba(180,200,195,0.78); }
.cursor-blink { display: inline-block; width: 9px; height: 18px; background: #d8b866; margin-left: 6px; vertical-align: middle; animation: blink 1.1s step-end infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.hero-album { min-height: 460px; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; border-bottom: 1px solid rgba(190,160,90,0.12); }
.hero::before { content: ''; position: absolute; width: 720px; height: 720px; background: radial-gradient(circle, rgba(180,150,70,0.12) 0%, rgba(50,140,140,0.05) 35%, transparent 70%); filter: blur(30px); pointer-events: none; }
.hero-content { position: relative; z-index: 2; padding: 85px 22px; }
.hero-kicker { font-size: 13px; letter-spacing: 0.35em; color: rgba(140,190,185,0.7); margin-bottom: 24px; }
.hero-album h1 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(40px, 7.5vw, 84px); font-weight: 500; letter-spacing: 0.08em; color: #e0c274; }
.hero-album p { max-width: 680px; margin: 30px auto 44px; line-height: 1.85; color: rgba(220,220,210,0.72); font-size: 19px; }
.play-all { appearance: none; border: 1px solid rgba(215,180,95,0.55); background: rgba(10,10,8,0.65); color: #e2c36f; padding: 18px 42px; cursor: pointer; font-size: 14px; letter-spacing: 0.22em; transition: 0.3s ease; }
.play-all:hover { background: rgba(215,180,95,0.12); box-shadow: 0 0 25px rgba(210,175,90,0.12), inset 0 0 25px rgba(210,175,90,0.04); }
.tracks { width: min(1200px, 92%); margin: 0 auto; padding: 100px 0; }
.section-label { margin-bottom: 55px; }
.section-label h2 { margin: 0 0 12px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: 0.18em; font-size: 32px; color: #d8b866; }
.section-label p { margin: 0; color: rgba(220,220,210,0.6); font-size: 17px; line-height: 1.7; }
.track { display: grid; grid-template-columns: 340px 1fr; gap: 55px; padding: 50px 0; border-top: 1px solid rgba(180,150,90,0.13); }
.track-cover { aspect-ratio: 1 / 1; background: linear-gradient(135deg, rgba(190,160,80,0.12), rgba(20,50,55,0.35)); border: 1px solid rgba(190,160,90,0.22); overflow: hidden; position: relative; cursor: zoom-in; }
.track-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; }
.track:hover .track-cover img { transform: scale(1.04); }
.track-info { display: flex; flex-direction: column; justify-content: center; }
.track-number { color: rgba(120,180,180,0.6); font-size: 13px; letter-spacing: 0.2em; margin-bottom: 14px; }
.track-title { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(30px, 4vw, 48px); font-weight: 500; color: #ddd0a5; }
.track-style { margin-top: 14px; color: rgba(130,190,185,0.7); font-size: 14px; letter-spacing: 0.18em; }
.track-desc { margin-top: 20px; color: rgba(220,220,210,0.68); font-size: 18px; line-height: 1.75; }
.versions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.version-button { border: 1px solid rgba(180,160,100,0.24); background: transparent; color: rgba(225,220,205,0.72); padding: 14px 22px; cursor: pointer; font-size: 13px; letter-spacing: 0.14em; transition: 0.25s ease; }
.version-button:hover { border-color: rgba(215,180,100,0.7); color: #e0bf68; background: rgba(200,170,80,0.07); }
.download-button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; margin-left: 8px; border: 1px solid rgba(180,160,100,0.24); background: transparent; color: rgba(225,220,205,0.7); cursor: pointer; font-size: 18px; text-decoration: none; transition: 0.25s ease; }
.download-button:hover { border-color: rgba(215,180,100,0.7); color: #e0bf68; background: rgba(200,170,80,0.07); }
/* Плеер и попап — в общем файле /assets/player.css: они нужны и на главной. */
/* Lyrics as tiles */
.lyrics { width: min(1200px, 92%); margin: 0 auto; padding: 80px 0 120px; }
.lyrics h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: 0.18em; font-size: 32px; color: #d8b866; text-align: center; margin-bottom: 50px; }
.lyrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.lyric-block { border: 1px solid rgba(190,160,90,0.18); background: rgba(15,17,14,0.55); padding: 24px; min-height: 220px; }
.lyric-block h3 { margin: 0 0 18px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; color: #ddd0a5; letter-spacing: 0.12em; font-size: 24px; }
.lyric-block p { margin: 8px 0; color: rgba(220,220,210,0.72); font-size: 17px; line-height: 1.7; white-space: pre-line; }
@media (max-width: 800px) {
    .track { grid-template-columns: 1fr; gap: 30px; }
    .track-cover { max-width: 340px; }
    .hero-album p { font-size: 17px; }
    .lyrics-grid { grid-template-columns: 1fr; }
}

/* --- шапка альбома: диск, цитата, факты ------------------------------------
   Было: заголовок и абзац по центру. Стало: за заголовком медленно вращается
   обложка первой песни, под ним — цитата и строка-факты. Диск растворяется к
   краю маской, поэтому не выглядит вставленным кругом. */
.hero-album { position: relative; overflow: hidden; }
.hero-album .hero-content { position: relative; z-index: 2; }

.album-disc {
  position: absolute;
  top: 50%; left: 50%;
  width: min(620px, 84vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  /* Размытие и низкая непрозрачность: на обложке крупная надпись, и без этого
     она читается сквозь заголовок как вторая. Так диск — мягкое свечение. */
  opacity: 0.22;
  filter: blur(5px) saturate(1.1);
  -webkit-mask-image: radial-gradient(circle, #000 42%, rgba(0,0,0,0.55) 62%, transparent 82%);
  mask-image: radial-gradient(circle, #000 42%, rgba(0,0,0,0.55) 62%, transparent 82%);
  animation: disc-spin 120s linear infinite;
  pointer-events: none;
}
.album-disc img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes disc-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-album .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-album .hero-kicker::before,
.hero-album .hero-kicker::after {
  content: '';
  width: clamp(24px, 7vw, 76px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,158,82,0.45), transparent);
}

.hero-album .hero-quote {
  max-width: 760px;
  margin: 26px auto 16px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.5;
  color: var(--text);
}

.hero-album .hero-facts {
  margin: 24px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hero-album .hero-facts span { margin: 0 8px; color: rgba(197,158,82,0.4); }

.hero-album .hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .album-disc { animation: none; }
}
@media (max-width: 860px) {
  .album-disc { width: min(420px, 92vw); opacity: 0.22; }
}