/* ============ AMBIENT BACKGROUND ============ */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(76, 30, 90, 0.25), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(30, 50, 110, 0.18), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(212, 162, 76, 0.08), transparent 50%);
  animation: ambient-drift 120s linear infinite;
  pointer-events: none;
}

@keyframes ambient-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-2%, 2%) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* ============ PARCHMENT GRAIN ============ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95   0 0 0 0 0.85   0 0 0 0 0.65  0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ============ GOLD PARTICLES (hero) ============ */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.particles .p {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--accent-gold);
  border-radius: 50%;
  opacity: 0;
  bottom: -10px;
  animation: drift 12s linear infinite;
  box-shadow: 0 0 4px rgba(212, 162, 76, 0.6);
}

.hero:hover .particles .p { animation-play-state: paused; }

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: var(--p-opacity, 0.3); }
  90%  { opacity: var(--p-opacity, 0.3); }
  100% { transform: translate(var(--p-dx, 40px), -100vh) scale(1); opacity: 0; }
}

/* ============ CUSTOM CURSOR ============ */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 1000;
  transform: translate(-50%, -50%);
  display: none;
}

@media (pointer: fine) {
  body.has-custom-cursor { cursor: none; }
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor input,
  body.has-custom-cursor [role="button"] { cursor: none; }
  body.has-custom-cursor .cursor-dot,
  body.has-custom-cursor .cursor-ring { display: block; }
}

.cursor-dot {
  width: 8px; height: 8px;
  background: var(--accent-gold);
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.cursor-ring {
  width: 24px; height: 24px;
  border: 1px solid var(--accent-gold);
  transition: width var(--duration-fast) var(--ease-emphasis),
              height var(--duration-fast) var(--ease-emphasis),
              opacity var(--duration-fast) var(--ease-standard);
  opacity: 0.4;
}

body.cursor-hover .cursor-ring {
  width: 36px;
  height: 36px;
  opacity: 0.8;
}
body.cursor-hover .cursor-dot {
  opacity: 0;
}

/* ============ INK BLOOM PAGE TRANSITION ============ */
.ink-bloom {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 0%, transparent 30%, var(--bg-primary) 80%);
  opacity: 0;
  animation: ink-bloom 350ms var(--ease-emphasis);
}
@keyframes ink-bloom {
  0%   { opacity: 0; transform: scale(1.4); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

/* Page fade in */
.page-enter {
  animation: page-rise 350ms var(--ease-emphasis);
}
@keyframes page-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ LOADING SPINNER ============ */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px;
}
.loader svg {
  width: 48px; height: 48px;
  color: var(--accent-gold);
  animation: spin 1.4s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============ EASTER EGG ============ */
.pickle-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}
.pickle-rain .pickle {
  position: absolute;
  top: -40px;
  font-size: 24px;
  animation: pickle-fall 4s linear forwards;
  opacity: 0.9;
  user-select: none;
}
@keyframes pickle-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}

/* ============ PREFERS REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .particles { display: none; }
  body.is-playing .np-art { animation: none !important; }
  .ink-bloom { display: none; }
  .album-card:hover { transform: none; }
  .playing-indicator span { animation: none; height: 60%; }
  .player-waveform path { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
  }
}

/* ============ TOAST / LIVE ANNOUNCE ============ */
.toast {
  position: fixed;
  bottom: calc(var(--player-bar-height) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-secondary);
  border: 1px solid var(--hairline-gold);
  color: var(--text-primary);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms, transform 250ms;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body:not(.has-player) .toast { bottom: 24px; }