@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --glass: rgba(255, 255, 255, 0.07);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Hero */
.hero-bg {
  background: linear-gradient(135deg, #0a0a0a, #1a1a1a, #0a0a0a);
  background-size: 400% 400%;
  animation: gradientShift 30s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glass */
.glass {
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-4px);
}
.glass::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  animation: shine 7s linear infinite;
}
@keyframes shine {
  0% { transform: translateX(-150%) skewX(-20deg); }
  20% { transform: translateX(250%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

/* Blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  background: white;
  opacity: 0.08;
  animation: float 28s infinite ease-in-out;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(60px, -80px) rotate(10deg); }
}

/* Logo & Images */
.logo { height: 52px; filter: brightness(1.1); }
.cover-img, .artist-img { transition: transform 0.6s ease; }
.glass:hover .cover-img,
.glass:hover .artist-img { transform: scale(1.08); }

/* Social icons */
.social-icons a {
  font-size: 2.5rem;
  color: #ffffff;
  transition: all 0.3s ease;
}
.social-icons a:hover {
  transform: scale(1.25) translateY(-3px);
  filter: brightness(1.4);
}

/* Horizontal Track (dla projektów i artystów) */
.horizontal-track {
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.horizontal-track:active { cursor: grabbing; }
.horizontal-track::-webkit-scrollbar { display: none; }