*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #070707;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  position: relative;
  color: #eaeaea;
}

/* Animated grain — heavier, restless */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 999;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grain 1.2s steps(6) infinite;
  mix-blend-mode: overlay;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 4%); }
  40%  { transform: translate(5%, -2%); }
  60%  { transform: translate(-2%, -5%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Scanlines */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* Drifting blobs — desktop only, bigger, hotter, with hue shift */
@media (min-width: 481px) {
  .blobs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    animation: hueDrift 30s linear infinite;
  }

  @keyframes hueDrift {
    0%, 100% { filter: hue-rotate(0deg); }
    50%      { filter: hue-rotate(35deg); }
  }

  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    will-change: transform;
  }

  .blob-1 {
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(140, 0, 80, 0.28), transparent 70%);
    top: -15%;
    left: -12%;
    animation: drift1 18s ease-in-out infinite;
  }

  .blob-2 {
    width: 720px;
    height: 720px;
    background: radial-gradient(circle, rgba(20, 30, 140, 0.22), transparent 70%);
    bottom: -20%;
    right: -12%;
    animation: drift2 22s ease-in-out infinite;
  }

  .blob-3 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(200, 40, 20, 0.18), transparent 70%);
    top: 45%;
    left: 55%;
    animation: drift3 16s ease-in-out infinite;
  }

  @keyframes drift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(120px, 140px) scale(1.15); }
  }

  @keyframes drift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(-140px, -100px) scale(1.1); }
  }

  @keyframes drift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(-90px, 70px) scale(1.2); }
    66%       { transform: translate(70px, -90px) scale(0.95); }
  }

  body {
    background: radial-gradient(ellipse 55% 55% at 50% 42%, #1a1414 0%, #070707 70%);
  }
}

/* Subtle vignette */
body > .vignette,
body::after {}

#particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 3;
  width: min(520px, 92vw);
  padding: 48px 0;
  animation: bootIn 1.1s cubic-bezier(.2,.7,.2,1) both;
}

.wordmark {
  font-family: 'Archivo Black', 'Helvetica Neue', sans-serif;
  font-size: clamp(56px, 12vw, 96px);
  letter-spacing: 0.06em;
  line-height: 0.9;
  color: #fff;
  text-align: center;
  margin: -8px 0 0;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}

.release {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}

.release iframe {
  display: block;
  width: 100%;
  background: #121212;
}

@keyframes bootIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Avatar */
.avatar {
  max-width: 60%;
  position: relative;
  animation: floatY 7s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.05);
  transition: filter 0.4s ease;
}

.avatar.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  border: 2px solid #2e2e2e;
}

.avatar.placeholder::after {
  content: '';
  width: 64px;
  height: 64px;
  background-color: #3a3a3a;
  border-radius: 50%;
}

/* Social links — desktop: icon only, horizontal */
.social-links {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
}

.social-link {
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-link svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.social-link .username {
  display: none;
}

.social-link:hover {
  transform: translateY(-3px);
}

.social-link[data-platform="spotify"]:hover   { color: #1DB954; }
.social-link[data-platform="instagram"]:hover { color: #E1306C; }
.social-link[data-platform="Youtube"]:hover   { color: #FF0000; }
.social-link[data-platform="tiktok"]:hover    { color: #69C9D0; }

/* Mobile: pill buttons with icon + username, stacked vertically */
@media (max-width: 480px) {
  .social-links {
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 0 32px;
  }

  .social-link {
    width: 100%;
    padding: 8px 20px 8px 6px;
    border-radius: 999px;
    border: 1px solid #2a2a2a;
    background-color: rgba(20,20,20,0.7);
    backdrop-filter: blur(6px);
    color: #ccc;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    overflow: visible;
    transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.15s ease;
  }

  .social-link:active {
    transform: scale(0.98);
  }

  .social-link .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #3a3a3a;
    margin: -9px 0 -9px -7px;
    transition: border-color 0.25s ease;
  }

  .social-link svg {
    width: 20px;
    height: 20px;
  }

  .social-link .username {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: inherit;
  }

  .social-link:hover {
    background-color: #1e1e1e;
    border-color: #555;
    transform: none;
    filter: none;
  }

  .social-link[data-platform="spotify"]:hover,
  .social-link[data-platform="spotify"]:hover  .icon { border-color: #1DB954; }
  .social-link[data-platform="instagram"]:hover,
  .social-link[data-platform="instagram"]:hover .icon { border-color: #E1306C; }
  .social-link[data-platform="Youtube"]:hover,
  .social-link[data-platform="Youtube"]:hover   .icon { border-color: #FF0000; }
  .social-link[data-platform="tiktok"]:hover,
  .social-link[data-platform="tiktok"]:hover    .icon { border-color: #69C9D0; }

  body::after { animation-duration: 2s; opacity: 0.07; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}