:root{
  --bg:#070814;
  --card: rgba(10, 12, 26, .58);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --muted2: rgba(255,255,255,.45);

  --neon1:#7c3aed;
  --neon2:#22d3ee;
  --neon3:#fb7185;
  --shadow: 0 18px 70px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

/* background */
.bg{position:fixed;inset:0;z-index:-1}
.bg__image{
  position:absolute;inset:-10%;
  background: url("../img/universe.jpg") center/cover no-repeat;
  filter:saturate(1.15) contrast(1.05);
  transform:scale(1.02);
}
.bg__overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(1000px 600px at 20% 30%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(1000px 800px at 60% 80%, rgba(251,113,133,.18), transparent 60%),
    linear-gradient(180deg, rgba(3,4,10,.70) 0%, rgba(3,4,10,.88) 45%, rgba(3,4,10,.94) 100%);
  backdrop-filter: blur(6px);
}
.bg__stars{position:absolute;inset:0;opacity:.55;mix-blend-mode:screen}

/* header */
.header{
  max-width:1100px;
  margin:22px auto 0;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{
  width:44px;height:44px;border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(34,211,238,.9), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(124,58,237,.9), transparent 55%),
    rgba(255,255,255,.05);
  border:1px solid var(--stroke);
  box-shadow:0 0 22px rgba(34,211,238,.12), 0 0 22px rgba(124,58,237,.12);
}
.brand__name{font-weight:800;letter-spacing:.4px}
.brand__tag{color:var(--muted);font-size:13px;margin-top:2px}
.nav{display:flex;gap:12px}
.nav__link{
  color:var(--muted);text-decoration:none;
  padding:10px 12px;border-radius:12px;
  border:1px solid transparent;transition:.2s ease;
}
.nav__link:hover{color:var(--text);border-color:var(--stroke);background:rgba(255,255,255,.04)}

/* layout */
.wrap{max-width:1100px;margin:0 auto;padding:26px 18px 120px}
.hero{
  margin-top:18px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
  align-items:start;
}
@media (max-width:920px){ .hero{grid-template-columns:1fr} .nav{display:none} }

.hero__title{
  font-size:clamp(34px,4vw,54px);
  line-height:1.05;margin:0 0 14px;letter-spacing:-.5px;
}
.hero__titleGlow{
  display:inline-block;
  background:linear-gradient(90deg,var(--neon2),var(--neon1),var(--neon3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(34,211,238,.15));
}
.hero__subtitle{margin:0 0 14px;color:var(--muted);font-size:15px;max-width:62ch}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 18px}
.chip{
  font-size:12px;padding:8px 10px;border-radius:999px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.78);
}

.hero__cta{display:flex;gap:12px;align-items:center;margin:6px 0 10px}
.btn{
  border:1px solid var(--stroke);border-radius:16px;
  padding:12px 14px;cursor:pointer;
  background:rgba(255,255,255,.04);color:var(--text);
  display:inline-flex;align-items:center;gap:10px;transition:.2s ease;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}
.btn--primary{
  border-color:rgba(34,211,238,.22);
  background:
    radial-gradient(120px 60px at 20% 30%, rgba(34,211,238,.26), transparent 65%),
    radial-gradient(140px 60px at 80% 60%, rgba(124,58,237,.22), transparent 70%),
    rgba(255,255,255,.04);
  box-shadow:0 0 30px rgba(34,211,238,.10), 0 0 30px rgba(124,58,237,.10);
}
.btn--ghost{background:rgba(255,255,255,.03)}
.hint{color:var(--muted2);font-size:12px}

/* card */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:16px;
}
.card__header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(34,211,238,.22);
  font-size:12px;color:rgba(255,255,255,.80);
}
.dot{width:8px;height:8px;border-radius:999px;background:var(--neon3);box-shadow:0 0 14px rgba(251,113,133,.5)}
.quality{color:var(--muted2);font-size:12px}
.now__label{color:var(--muted2);font-size:12px;margin-top:14px}
.now__track{font-weight:800;font-size:18px;margin-top:6px}
.now__sub{color:var(--muted);font-size:13px;margin-top:4px}

/* sticky player */
.player{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 50;

  /* ВАЖНО: ширина как у основного контейнера страницы */
  width: min(1065px, calc(100% - 28px)); /* 980px — подгони под свой контейнер */
  box-sizing: border-box;

  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;

  padding: 12px;
  border-radius: 20px;

  border: 1px solid rgba(34,211,238,.18);
  background:
    radial-gradient(220px 80px at 20% 50%, rgba(34,211,238,.18), transparent 65%),
    radial-gradient(220px 80px at 80% 50%, rgba(124,58,237,.16), transparent 65%),
    rgba(8,10,20,.70);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}



.pbtn{
  width:44px;height:44px;border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  color:var(--text);cursor:pointer;transition:.2s ease;
}
.pbtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.player__left{display:flex;gap:10px}
.player__track{font-weight:800;font-size:13px}
.player__status{color:var(--muted2);font-size:12px;margin-top:2px}
.vol{width:160px;accent-color:var(--neon2)}

#nowCard {
  cursor: pointer;
}

#nowCard:active {
  transform: scale(0.995);
}

#nowCard:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

/* Now playing card = clickable */
.card.now{
  cursor: pointer;
  user-select: none;
}

.card.now:focus{
  outline: none;
}

.card.now:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 4px;
}

/* hover + press feedback */
.card.now:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.card.now:active{
  transform: translateY(0px) scale(.995);
}

/* smooth animation */
.card.now{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* Keyboard hint: hidden by default, appears on hover */
.hint{
  font-size: 12px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  margin-top: 10px;
}

.hero:hover .hint,
.card.now:hover ~ .hint{
  opacity: .75;
  transform: translateY(0);
}

/* On touch devices show it (no hover) */
@media (hover: none){
  .hint{ opacity: .6; transform: none; }
}

.card.now { cursor: pointer; user-select: none; }
.card.now:active { transform: scale(.99); }

.is-playing .card.now{
  box-shadow: 0 0 0 1px rgba(124,58,237,.35), 0 18px 70px rgba(124,58,237,.25);
}

.card.now .levels span{
  opacity:.6;
  transform-origin: bottom;
  animation: eq 900ms ease-in-out infinite;
  animation-play-state: paused;
}
.is-playing .card.now .levels span{ animation-play-state: running; }

.card.now .levels span:nth-child(1){ animation-delay: 0ms; }
.card.now .levels span:nth-child(2){ animation-delay: 120ms; }
.card.now .levels span:nth-child(3){ animation-delay: 240ms; }
.card.now .levels span:nth-child(4){ animation-delay: 360ms; }
.card.now .levels span:nth-child(5){ animation-delay: 480ms; }

@keyframes eq{
  0%,100%{ transform: scaleY(.25); }
  50%{ transform: scaleY(1); }
}

/* === Now playing: LIVE equalizer (more organic) === */
.levels{
  display:flex;
  gap:7px;
  align-items:flex-end;
  height:46px;
  margin-top:14px;
  opacity:.95;
  filter: drop-shadow(0 0 10px rgba(123,58,237,.35));
}

.levels span{
  display:block;
  width:6px;
  height:20px;
  border-radius:4px;
  transform-origin: bottom;

  background: linear-gradient(180deg,
    rgba(255,255,255,.95) 0%,
    rgba(123,58,237,.85) 55%,
    rgba(34,211,238,.75) 100%
  );

  box-shadow:
    0 0 10px rgba(123,58,237,.25),
    0 0 18px rgba(34,211,238,.16);

  opacity:.65;

  /* idle */
  animation: none;
}

/* idle: almost flat */
html:not(.is-playing) .levels{
  opacity:.35;
}
html:not(.is-playing) .levels span{
  height:6px;
}

/* playing */
html.is-playing .levels{
  opacity:1;
}
html.is-playing .levels span{
  animation-name: dj_level, dj_jitter;
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, alternate;
  animation-play-state: running, running;
  opacity:.95;
}

/* Make each bar different (tempo + amplitude) */
html.is-playing .levels span:nth-child(1){  animation-duration: 520ms, 1800ms; transform: scaleY(.85); }
html.is-playing .levels span:nth-child(2){  animation-duration: 740ms, 1500ms; transform: scaleY(1.25); }
html.is-playing .levels span:nth-child(3){  animation-duration: 610ms, 2100ms; transform: scaleY(1.05); }
html.is-playing .levels span:nth-child(4){  animation-duration: 880ms, 1700ms; transform: scaleY(1.35); }
html.is-playing .levels span:nth-child(5){  animation-duration: 560ms, 2300ms; transform: scaleY(.95); }
html.is-playing .levels span:nth-child(6){  animation-duration: 790ms, 1600ms; transform: scaleY(1.45); }
html.is-playing .levels span:nth-child(7){  animation-duration: 640ms, 2000ms; transform: scaleY(1.10); }
html.is-playing .levels span:nth-child(8){  animation-duration: 920ms, 1400ms; transform: scaleY(1.55); }
html.is-playing .levels span:nth-child(9){  animation-duration: 600ms, 1900ms; transform: scaleY(1.00); }
html.is-playing .levels span:nth-child(10){ animation-duration: 860ms, 2200ms; transform: scaleY(1.30); }

/* Main motion (irregular peaks) */
@keyframes dj_level{
  0%   { height:8px;  opacity:.55; }
  10%  { height:14px; opacity:.8; }
  25%  { height:38px; opacity:1; }
  40%  { height:18px; opacity:.85; }
  55%  { height:44px; opacity:1; }
  70%  { height:22px; opacity:.9; }
  85%  { height:46px; opacity:1; }
  100% { height:10px; opacity:.6; }
}

/* Micro jitter so it doesn't look like a perfect loop */
@keyframes dj_jitter{
  0%   { filter: brightness(1); }
  25%  { filter: brightness(1.08); }
  50%  { filter: brightness(1); }
  75%  { filter: brightness(1.12); }
  100% { filter: brightness(1.02); }
}

/* bonus: pulse the whole card slightly while playing */
html.is-playing #nowCard{
  animation: cardPulse 1.35s ease-in-out infinite;
}

@keyframes cardPulse{
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce){
  html.is-playing .levels span,
  html.is-playing #nowCard{ animation: none !important; }
}

/* About links */
.about_links{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip--link{
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}

.chip--link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}

.chip--link:active{
  transform: translateY(0px) scale(.98);
}

.chip--link:focus-visible{
  outline: 2px solid rgba(124,58,237,.55);
  outline-offset: 3px;
  border-radius: 999px;
}

#about{ margin-top: 32px; }