/* ═══════════════════════════════════════════════════════════
   OPPRESSO — BRUTAL MAXIMAL CHAOS
   Brutalist structure · Gen Z collage · kinetic high energy
   Loaded after styles.css / pages.css — goes hard on purpose
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #0a0010;
  --bg-deep: #050008;
  --bg-elevated: #14001c;
  --text: #fff5ff;
  --text-muted: #d8c4e8;
  --text-dim: #9a7aad;
  --crimson: #ff2d55;
  --crimson-deep: #c4002b;
  --amber: #ffe600;
  --acid: #b8ff00;
  --cyan: #00f0ff;
  --magenta: #ff00e5;
  --violet: #8b5cff;
  --chrome: #0d0014;
  --chrome-elevated: #1a0026;
  --chrome-footer: #08000c;
  --chrome-border: rgba(255, 255, 255, 0.22);
  --chrome-border-soft: rgba(255, 255, 255, 0.12);
  --chrome-surface: #12001a;
  --chrome-highlight: rgba(255, 0, 229, 0.08);
  --glass-border: #fff;
  --glass-border-soft: rgba(255, 255, 255, 0.25);
  --border: rgba(255, 255, 255, 0.2);
  --border-soft: rgba(255, 255, 255, 0.12);
  --glow-crimson: 0 0 40px rgba(255, 45, 85, 0.55);
  --glow-amber: 0 0 36px rgba(255, 230, 0, 0.35);
  --brutal-shadow: 6px 6px 0 #000;
  --brutal-shadow-lg: 10px 10px 0 #000;
  --brutal-shadow-hot: 5px 5px 0 var(--crimson);
  --brutal-shadow-acid: 5px 5px 0 var(--acid);
  --brutal-shadow-cyan: 5px 5px 0 var(--cyan);
  --font-display: "Bebas Neue", "Impact", "Arial Black", sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --header-h: 76px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.68, -0.4, 0.32, 1.4);
}

/* ─── Global kinetic base ─── */
html {
  scroll-behavior: smooth;
}

body {
  background:
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 18px,
      rgba(255, 0, 229, 0.03) 18px,
      rgba(255, 0, 229, 0.03) 19px
    ),
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(255, 45, 85, 0.35), transparent 55%),
    radial-gradient(ellipse 60% 45% at 100% 20%, rgba(0, 240, 255, 0.22), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(184, 255, 0, 0.12), transparent 55%),
    linear-gradient(160deg, #120018 0%, #050008 40%, #0a0014 100%);
  background-attachment: fixed;
  color: var(--text);
  overflow-x: clip;
  cursor: default;
}

/* Interactive UI always clickable — never blocked by décor */
a,
button,
input,
select,
textarea,
label,
.btn,
.stream-cell,
.platform-tile,
.album-card,
.lyrics-card,
.filter-btn,
.az-btn,
.nav a,
.menu-toggle,
.logo,
.catalog-search,
.catalog-sort,
.catalog-clear,
.catalog-reset,
.standout-list a,
.track-link,
.back-top,
.footer a,
.cd-case-face,
.header,
.header * {
  pointer-events: auto !important;
  cursor: pointer;
}

input,
select,
textarea {
  cursor: text;
}

select {
  cursor: pointer;
}

::selection {
  background: var(--acid);
  color: #000;
}

/* Hard reset soft radii — brutal edges */
.btn,
.stream-cell,
.platform-tile,
.album-card,
.lyrics-card,
.catalog-control-inner,
.catalog-search,
.catalog-sort,
.filter-btn,
.az-btn,
.header,
.footer,
.cd-case-face,
.cover-frame,
.logo-mark,
.menu-toggle,
.nav-cta,
.modal,
.play-on-site,
.embed-frame-bar,
.embed-wrap,
.page-embed,
.embed-open,
.release-hero,
.song-hero {
  border-radius: 0 !important;
}

/* Spotify frame — brutal green slab matching chaos */
.play-on-site {
  border: 4px solid #000 !important;
  box-shadow: 8px 8px 0 #1db954 !important;
  background:
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 10px,
      rgba(29, 185, 84, 0.06) 10px,
      rgba(29, 185, 84, 0.06) 20px
    ),
    #0a120e !important;
}

.embed-frame-bar {
  border: 3px solid #000 !important;
  border-bottom: none !important;
  background: #000 !important;
  box-shadow: none !important;
  color: #1db954 !important;
}

.embed-open {
  border: 2px solid #1db954 !important;
  color: #1db954 !important;
  background: transparent !important;
}

.embed-open:hover {
  background: #1db954 !important;
  color: #000 !important;
}

.play-on-site .embed-wrap,
.page-embed {
  border: 3px solid #000 !important;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6) !important;
}

/* ─── Layer contract: décor under content, never steals clicks ─── */
.bg-stage,
.bg-stage * {
  pointer-events: none !important;
}

.site {
  position: relative;
  z-index: 2;
  isolation: isolate;
}

.header {
  z-index: 200 !important;
}

.page-main,
main,
.footer,
.hero-copy,
.hero-actions,
.section .container,
.page-inner,
.catalog-control,
.catalog-results,
.album-grid,
.stream-grid,
.lyrics-stack,
.standout-block,
.standout-list,
.release-hero,
.song-hero,
.play-on-site {
  position: relative;
  z-index: 3;
}

/* ─── Chaos stage (behind everything interactive) ─── */
.bg-stage {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 1;
  pointer-events: none !important;
  overflow: hidden !important;
}

.bg-grid {
  display: block !important;
  opacity: 0.45 !important;
  background-image:
    linear-gradient(rgba(255, 0, 229, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  mask-image: none !important;
  animation: grid-drift 20s linear infinite;
}

.bg-spotlight {
  display: block !important;
  background:
    radial-gradient(ellipse 50% 40% at 30% 0%, rgba(255, 45, 85, 0.4), transparent 70%),
    radial-gradient(ellipse 40% 35% at 80% 10%, rgba(184, 255, 0, 0.2), transparent 65%) !important;
  animation: spotlight-pulse 6s ease-in-out infinite alternate;
}

.bg-glow,
.bg-glow--1,
.bg-glow--2,
.bg-glow--3 {
  display: block !important;
  filter: blur(70px) !important;
  opacity: 0.65 !important;
  animation: orb-float 12s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}

.bg-glow--1 {
  background: radial-gradient(circle, rgba(255, 45, 85, 0.7), transparent 70%) !important;
  top: -10% !important;
  left: 20% !important;
}

.bg-glow--2 {
  background: radial-gradient(circle, rgba(0, 240, 255, 0.5), transparent 70%) !important;
  bottom: 10% !important;
  right: -5% !important;
  animation-duration: 15s !important;
}

.bg-glow--3 {
  background: radial-gradient(circle, rgba(184, 255, 0, 0.4), transparent 70%) !important;
  top: 50% !important;
  left: -8% !important;
  animation-duration: 18s !important;
}

.bg-aurora {
  display: block !important;
  opacity: 0.55 !important;
  filter: blur(50px) saturate(1.8) !important;
  animation: aurora-spin 24s linear infinite !important;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(255, 45, 85, 0.2),
    transparent,
    rgba(0, 240, 255, 0.18),
    transparent,
    rgba(255, 230, 0, 0.15),
    transparent
  ) !important;
}

.bg-grain {
  display: block !important;
  opacity: 0.12 !important;
  mix-blend-mode: overlay;
  animation: grain-shift 0.4s steps(2) infinite;
}

.bg-vignette {
  display: block !important;
  opacity: 0.7 !important;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, transparent 20%, rgba(0, 0, 0, 0.75) 100%) !important;
}

/* Floating notes — side gutters, smooth rise (fixed broken keyframe + opacity) */
.notes-layer {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.note {
  position: absolute !important;
  top: 0 !important;
  display: block !important;
  margin: 0;
  padding: 0;
  border: 0;
  background: none !important;
  line-height: 1;
  font-size: 1.25rem;
  font-weight: 900;
  font-family: var(--font-display), "Segoe UI Symbol", system-ui, sans-serif;
  color: var(--acid);
  text-shadow: 2px 2px 0 #000;
  filter: none !important;
  /* Do NOT set opacity !important — it kills keyframe fades */
  opacity: 0;
  pointer-events: none !important;
  user-select: none;
  will-change: transform, opacity;
  animation-name: float-note-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.note--amber {
  color: var(--amber);
  text-shadow: 2px 2px 0 #000, 0 0 8px rgba(255, 230, 0, 0.4);
}

.note--steel {
  color: var(--cyan);
  text-shadow: 2px 2px 0 #000, 0 0 8px rgba(0, 240, 255, 0.35);
}

.note--hot {
  color: var(--magenta);
  text-shadow: 2px 2px 0 #000, 0 0 8px rgba(255, 0, 229, 0.4);
}

/* ─── Marquee chaos strips — contained, no bleed over UI ─── */
.marquee-bar {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  background: var(--acid);
  color: #000;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.2vw, 1.45rem);
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.5rem 0;
  /* Mild skew only — no scale (scale caused horizontal overflow over buttons) */
  transform: none;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
  pointer-events: none; /* decorative strip — not interactive */
  contain: layout paint;
}

.marquee-bar--magenta {
  background: var(--magenta);
  color: #fff;
  margin-top: 0;
}

.marquee-bar--cyan {
  background: var(--cyan);
  color: #000;
}

.marquee-bar--crimson {
  background: var(--crimson);
  color: #fff;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-run 28s linear infinite;
  gap: 0;
}

.marquee-bar--reverse .marquee-track {
  animation-direction: reverse;
  animation-duration: 22s;
}

.marquee-track span {
  padding: 0 1.25rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.marquee-track span::after {
  content: "◆";
  font-size: 0.55em;
  opacity: 0.8;
}

/* ─── Header — thick brutal slab ─── */
.header {
  background: var(--chrome) !important;
  border-bottom: 4px solid #000 !important;
  box-shadow:
    0 0 0 2px var(--acid),
    0 12px 0 rgba(255, 45, 85, 0.25) !important;
  backdrop-filter: none !important;
}

.header.is-scrolled {
  background: #160022 !important;
  box-shadow:
    0 0 0 2px var(--cyan),
    0 14px 0 rgba(0, 240, 255, 0.2) !important;
}

.logo-text {
  letter-spacing: 0.14em !important;
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255, 45, 85, 0.5);
  animation: logo-jitter 4s steps(2) infinite;
}

.logo-text span {
  color: var(--acid) !important;
  letter-spacing: 0.2em !important;
  font-weight: 800 !important;
  animation: color-cycle 3s linear infinite;
}

.logo-mark {
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 var(--magenta) !important;
  background: var(--crimson) !important;
  transform: rotate(-4deg);
  transition: transform 0.2s var(--ease-snap) !important;
}

.logo:hover .logo-mark {
  transform: rotate(6deg) scale(1.08);
}

.nav a {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.1em !important;
  color: #fff !important;
  text-transform: uppercase;
  padding: 0.2rem 0.35rem;
  border: 2px solid transparent;
  transition: all 0.15s var(--ease-snap) !important;
}

.nav a:hover,
.nav a.is-active {
  background: var(--amber);
  color: #000 !important;
  border-color: #000;
  box-shadow: 3px 3px 0 #000;
  transform: rotate(-2deg) scale(1.05);
}

.nav-cta {
  background: var(--crimson) !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 var(--acid) !important;
  color: #fff !important;
  animation: cta-pulse 1.4s ease-in-out infinite;
  transform: rotate(1.5deg);
}

.nav-cta:hover {
  background: var(--acid) !important;
  color: #000 !important;
  box-shadow: 6px 6px 0 var(--magenta) !important;
  transform: rotate(-2deg) scale(1.06) !important;
}

.menu-toggle {
  border: 3px solid #000 !important;
  background: var(--cyan) !important;
  box-shadow: 4px 4px 0 #000 !important;
}

/* ─── Buttons — raw stamps ─── */
.btn {
  border: 3px solid #000 !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  font-size: 1.05rem !important;
  padding: 0.75rem 1.35rem !important;
  transition: transform 0.15s var(--ease-snap), box-shadow 0.15s, background 0.15s !important;
}

.btn:hover {
  transform: translate(-3px, -3px) rotate(-1deg) !important;
}

.btn:active {
  transform: translate(2px, 2px) !important;
  opacity: 1 !important;
}

.btn-primary {
  background: var(--crimson) !important;
  box-shadow: 5px 5px 0 #000 !important;
  color: #fff !important;
}

.btn-primary:hover {
  background: var(--magenta) !important;
  box-shadow: 8px 8px 0 var(--acid) !important;
}

.btn-ghost {
  background: var(--amber) !important;
  color: #000 !important;
  border-color: #000 !important;
  box-shadow: 5px 5px 0 var(--cyan) !important;
}

.btn-ghost:hover {
  background: var(--cyan) !important;
  box-shadow: 8px 8px 0 var(--magenta) !important;
}

/* ─── Type — max volume ─── */
.section-label {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  background: var(--acid);
  border: 2px solid #000;
  padding: 0.25rem 0.55rem !important;
  box-shadow: 3px 3px 0 #000;
  display: inline-block !important;
  transform: rotate(-2deg);
  margin-bottom: 0.75rem !important;
  animation: stamp-wiggle 3.5s ease-in-out infinite;
}

.section-title {
  font-size: clamp(2.4rem, 7vw, 4.2rem) !important;
  letter-spacing: 0.02em !important;
  line-height: 0.88 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-shadow:
    4px 4px 0 #000,
    -2px 0 0 var(--magenta),
    2px 0 0 var(--cyan) !important;
  margin-bottom: 0.65rem !important;
}

.section-lead {
  font-size: 1.05rem !important;
  color: var(--text-muted) !important;
  max-width: 36rem !important;
  border-left: 4px solid var(--crimson);
  padding-left: 0.85rem;
}

.page-h1,
.section-title--sm {
  text-transform: uppercase !important;
  text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 45, 85, 0.4) !important;
}

/* ─── Hero — glitch billboard ─── */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + 1.25rem) !important;
}

.hero-badge {
  background: var(--magenta) !important;
  color: #fff !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 var(--acid) !important;
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.7rem !important;
  transform: rotate(-3deg);
  animation: badge-bounce 2s var(--ease-snap) infinite;
}

.hero-badge .dot {
  background: var(--acid) !important;
  box-shadow: 0 0 12px var(--acid) !important;
  animation: blink-hard 0.6s steps(2) infinite !important;
  width: 8px !important;
  height: 8px !important;
}

.hero-title {
  font-size: clamp(3rem, 10vw, 6.5rem) !important;
  line-height: 0.85 !important;
  text-transform: uppercase !important;
  animation: hero-title-slam 0.8s var(--ease-snap) both;
}

.hero-title .line {
  display: block;
  text-shadow:
    6px 6px 0 #000,
    -3px 0 0 var(--cyan),
    3px 0 0 var(--magenta);
}

.hero-title .accent {
  color: var(--acid) !important;
  -webkit-text-fill-color: var(--acid) !important;
  text-shadow:
    6px 6px 0 #000,
    0 0 30px rgba(184, 255, 0, 0.55),
    -3px 0 0 var(--crimson) !important;
  animation: accent-glitch 2.8s steps(1) infinite;
}

.hero-moniker {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.35em !important;
  color: var(--cyan) !important;
  text-shadow: 2px 2px 0 #000;
  transform: rotate(1deg);
  margin-bottom: 1rem !important;
}

.hero-tagline {
  font-size: 1.08rem !important;
  color: #f0e0ff !important;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--cyan);
  padding: 0.75rem 1rem;
  box-shadow: 5px 5px 0 var(--magenta);
  max-width: 30rem !important;
  transform: rotate(-0.5deg);
}

.cover-caption {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  background: var(--amber);
  border: 2px solid #000;
  display: inline-block !important;
  padding: 0.3rem 0.6rem;
  box-shadow: 3px 3px 0 #000;
  transform: rotate(2deg);
  margin-top: 0.85rem !important;
}

/* CD case — stickered & loud */
.cd-case {
  perspective: 900px !important;
  filter: drop-shadow(10px 12px 0 #000) !important;
  padding-left: 0 !important;
  animation: case-float 5s ease-in-out infinite alternate;
}

.cd-case-face {
  transform: rotate(-2deg) !important;
  border: 4px solid #000 !important;
  box-shadow:
    8px 8px 0 var(--crimson),
    14px 14px 0 var(--cyan) !important;
  transition: transform 0.25s var(--ease-snap) !important;
}

.cd-case:hover .cd-case-face {
  transform: rotate(3deg) scale(1.04) !important;
  box-shadow:
    10px 10px 0 var(--acid),
    18px 18px 0 var(--magenta) !important;
}

.cd-spine {
  display: none !important;
}

.cd-plastic {
  opacity: 0.7 !important;
  mix-blend-mode: screen;
}

.cd-glare {
  animation: plastic-glare-chaos 2.5s linear infinite !important;
  opacity: 0.85 !important;
}

/* ─── Stream chips — sticker pills ─── */
.stream-grid {
  gap: 0.65rem !important;
  margin-top: 1.25rem !important;
}

.stream-cell {
  border: 3px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: 4px 4px 0 var(--crimson) !important;
  font-weight: 800 !important;
  transform: rotate(-1deg);
  transition: transform 0.15s var(--ease-snap), box-shadow 0.15s !important;
  padding: 0.55rem 0.95rem !important;
}

.stream-cell:nth-child(3n) {
  transform: rotate(1.5deg);
  box-shadow: 4px 4px 0 var(--cyan) !important;
  background: var(--amber) !important;
}

.stream-cell:nth-child(3n + 1) {
  box-shadow: 4px 4px 0 var(--acid) !important;
  background: #fff !important;
}

.stream-cell:nth-child(3n + 2) {
  box-shadow: 4px 4px 0 var(--magenta) !important;
  background: var(--cyan) !important;
}

.stream-cell strong {
  color: #000 !important;
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em !important;
}

.stream-cell:hover {
  transform: rotate(0deg) scale(1.08) translateY(-4px) !important;
  box-shadow: 7px 7px 0 #000 !important;
  background: var(--acid) !important;
  z-index: 3;
}

.stream-grid--dense .stream-cell {
  background: var(--chrome-surface) !important;
  color: #fff !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 var(--magenta) !important;
}

.stream-grid--dense .stream-cell strong {
  color: #fff !important;
}

.stream-grid--dense .stream-cell:hover {
  background: var(--crimson) !important;
}

/* ─── Album cards — collage tiles ─── */
.album-card {
  border: 4px solid #000 !important;
  background: #12001a !important;
  box-shadow: 8px 8px 0 var(--cyan) !important;
  transition: transform 0.2s var(--ease-snap), box-shadow 0.2s !important;
  transform: rotate(-0.5deg);
}

.album-card:nth-child(even) {
  transform: rotate(0.8deg);
  box-shadow: 8px 8px 0 var(--acid) !important;
}

.album-card:nth-child(3n) {
  box-shadow: 8px 8px 0 var(--magenta) !important;
}

.album-card:hover {
  transform: rotate(0deg) scale(1.04) translateY(-6px) !important;
  box-shadow: 12px 12px 0 var(--crimson) !important;
  background: #1e0030 !important;
  z-index: 2;
}

.album-card-body h4 {
  font-family: var(--font-display) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: #fff !important;
}

.album-card-body p {
  color: var(--acid) !important;
  font-weight: 700 !important;
}

.card-badge {
  border: 2px solid #000 !important;
  background: var(--amber) !important;
  color: #000 !important;
  font-weight: 900 !important;
  box-shadow: 2px 2px 0 #000 !important;
  border-radius: 0 !important;
}

/* ─── Standout list — zebra chaos ─── */
.standout-block {
  border-top: 4px solid #000 !important;
  margin-top: 3rem !important;
  padding-top: 2rem !important;
  position: relative;
}

.standout-list {
  border: 3px solid #000 !important;
  box-shadow: 8px 8px 0 var(--violet);
  background: #0a0012;
}

.standout-list li {
  border-bottom: 2px solid #000 !important;
}

.standout-list li:nth-child(odd) a {
  background: rgba(255, 45, 85, 0.12);
}

.standout-list li:nth-child(even) a {
  background: rgba(0, 240, 255, 0.1);
}

.standout-list a {
  padding: 1rem 0.85rem !important;
  transition: transform 0.15s var(--ease-snap), background 0.15s !important;
}

.standout-list a:hover {
  background: var(--acid) !important;
  transform: translateX(8px) skewX(-2deg);
}

.standout-list a:hover .standout-name,
.standout-list a:hover .standout-meta {
  color: #000 !important;
}

.standout-name {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
  text-transform: uppercase;
}

.standout-meta {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  color: var(--cyan) !important;
}

/* ─── About / stats ─── */
.stat {
  border: 3px solid #000 !important;
  background: var(--chrome-surface) !important;
  box-shadow: 5px 5px 0 var(--amber) !important;
  padding: 1rem !important;
  transform: rotate(-1deg);
}

.stat:nth-child(2) {
  transform: rotate(1.2deg);
  box-shadow: 5px 5px 0 var(--cyan) !important;
}

.stat:nth-child(3) {
  box-shadow: 5px 5px 0 var(--magenta) !important;
}

.stat strong {
  font-family: var(--font-display) !important;
  font-size: 2.4rem !important;
  color: var(--acid) !important;
  text-shadow: 3px 3px 0 #000;
}

.genre-tags span {
  border: 2px solid #000 !important;
  background: var(--magenta) !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #000 !important;
  font-weight: 800 !important;
  transform: rotate(-2deg);
  display: inline-block;
  margin: 0.2rem !important;
}

.genre-tags span:nth-child(even) {
  background: var(--cyan) !important;
  color: #000 !important;
  transform: rotate(2deg);
}

/* ─── Footer — concrete slab ─── */
.footer {
  background: #0a0010 !important;
  border-top: 6px solid #000 !important;
  box-shadow: 0 -8px 0 var(--crimson) !important;
}

.footer::before {
  height: 6px !important;
  background: repeating-linear-gradient(
    90deg,
    var(--acid) 0 40px,
    var(--crimson) 40px 80px,
    var(--cyan) 80px 120px,
    var(--magenta) 120px 160px,
    var(--amber) 160px 200px
  ) !important;
  animation: stripe-scroll 8s linear infinite;
}

.footer-brand-mark,
.footer-wordmark {
  text-shadow: 4px 4px 0 #000, 0 0 24px rgba(255, 45, 85, 0.5) !important;
  letter-spacing: 0.12em !important;
}

.footer-col-label {
  font-family: var(--font-mono) !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  background: var(--amber);
  display: inline-block !important;
  padding: 0.2rem 0.45rem !important;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
}

.footer a:hover {
  color: var(--acid) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-cta.btn {
  transform: rotate(-2deg);
}

/* ─── Catalog filters ─── */
.catalog-control {
  position: relative !important;
}

.catalog-control-inner {
  border: 4px solid #000 !important;
  background: #14001e !important;
  box-shadow: 8px 8px 0 var(--cyan) !important;
}

.catalog-control.has-active-filters .catalog-control-inner {
  box-shadow: 8px 8px 0 var(--acid) !important;
  border-color: var(--acid) !important;
}

.catalog-search {
  border: 3px solid #000 !important;
  background: #000 !important;
  color: var(--acid) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}

.catalog-search:focus {
  box-shadow: 4px 4px 0 var(--magenta) !important;
  border-color: var(--magenta) !important;
}

.filter-btn {
  border: 2px solid #000 !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.06em !important;
}

.filter-btn.is-active {
  background: var(--crimson) !important;
  box-shadow: 3px 3px 0 #000 !important;
  transform: rotate(-1deg);
}

.az-btn {
  border: 2px solid #000 !important;
  border-radius: 0 !important;
  font-weight: 900 !important;
}

.az-btn.is-active {
  background: var(--acid) !important;
  color: #000 !important;
  box-shadow: 2px 2px 0 #000 !important;
}

.catalog-sort {
  border: 3px solid #000 !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
}

/* ─── Lyrics stacked cards ─── */
.lyrics-card {
  border: 3px solid #000 !important;
  background: #100018 !important;
  box-shadow: 6px 6px 0 var(--magenta) !important;
  transform: rotate(-0.4deg);
  transition: transform 0.18s var(--ease-snap), box-shadow 0.18s !important;
}

.lyrics-stack-cards .lyrics-card:nth-child(even) {
  transform: rotate(0.5deg);
  box-shadow: 6px 6px 0 var(--cyan) !important;
}

.lyrics-card:hover {
  transform: rotate(0deg) scale(1.02) translateX(6px) !important;
  box-shadow: 10px 10px 0 var(--acid) !important;
  background: #1a0028 !important;
}

.lyrics-card-title {
  font-family: var(--font-display) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: #fff !important;
  font-size: 1.15rem !important;
}

.lyrics-card-meta {
  color: var(--cyan) !important;
  font-weight: 700 !important;
}

.lyrics-stack-meta h2 {
  font-family: var(--font-display) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  font-size: 1.35rem !important;
  text-shadow: 2px 2px 0 #000;
}

.lyrics-card-art {
  border: 2px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--amber);
}

/* ─── Release / song heroes ─── */
.release-hero,
.song-hero {
  border: 4px solid #000 !important;
  box-shadow: 10px 10px 0 var(--crimson) !important;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 12px,
      rgba(255, 0, 229, 0.05) 12px,
      rgba(255, 0, 229, 0.05) 24px
    ),
    #0e0016 !important;
  backdrop-filter: none !important;
}

/* ─── Kinetic stamps — only over cover column, never over CTAs/copy ─── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.hero-copy,
.hero-actions,
.hero-copy .btn {
  position: relative;
  z-index: 5;
}

.hero-visual {
  position: relative;
  z-index: 4;
}

.chaos-stamp {
  position: absolute;
  z-index: 2; /* below copy/actions (z 5) */
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.6vw, 1.05rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 3px solid #000;
  padding: 0.3rem 0.55rem;
  background: var(--amber);
  color: #000;
  box-shadow: 4px 4px 0 #000;
  pointer-events: none !important;
  user-select: none;
  animation: stamp-spin 6s ease-in-out infinite alternate;
  /* Default: parked on the art side only (desktop) */
  left: auto;
  display: none; /* shown only when layout has room */
}

/* Wide layout: stamps hug the cover, stay clear of left copy + buttons */
@media (min-width: 960px) {
  .chaos-stamp {
    display: block;
  }

  .chaos-stamp--new {
    top: 8%;
    right: 0;
    left: auto;
    background: var(--crimson);
    color: #fff;
    transform: rotate(12deg);
  }

  .chaos-stamp--live {
    bottom: 6%;
    right: 12%;
    left: auto;
    background: var(--acid);
    transform: rotate(-8deg);
    animation-delay: 1s;
  }

  .chaos-stamp--fire {
    top: 52%;
    right: -0.5rem;
    left: auto;
    background: var(--cyan);
    transform: rotate(18deg);
    animation-delay: 0.5s;
  }
}

/* ─── Reveal = SLAM in ─── */
.reveal {
  opacity: 0;
  transform: translateY(40px) rotate(-2deg) scale(0.96);
  transition:
    opacity 0.55s var(--ease-snap),
    transform 0.55s var(--ease-snap) !important;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ─── Pointer kinetic (set by JS) — art only, not chips/buttons ─── */
.kinetic-tilt {
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
  will-change: transform;
  /* keep hit target stable */
  touch-action: manipulation;
}

/* Never tilt tiny controls */
.stream-cell.kinetic-tilt,
.btn.kinetic-tilt,
.nav a.kinetic-tilt {
  transform: none !important;
}

/* ─── Scroll progress bar ─── */
.chaos-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  z-index: 10000;
  background: linear-gradient(90deg, var(--crimson), var(--amber), var(--acid), var(--cyan), var(--magenta));
  background-size: 200% 100%;
  animation: progress-shine 2s linear infinite;
  box-shadow: 0 0 12px rgba(255, 45, 85, 0.6);
  pointer-events: none !important;
}

/* ─── Modal / misc ─── */
.modal {
  border: 4px solid #000 !important;
  box-shadow: 12px 12px 0 var(--acid) !important;
  background: #100018 !important;
}

.back-top {
  border: 3px solid #000 !important;
  background: var(--amber) !important;
  color: #000 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
  font-weight: 900 !important;
}

/* ─── Keyframes ─── */
@keyframes marquee-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes grid-drift {
  from { background-position: 0 0; }
  to { background-position: 48px 48px; }
}

@keyframes spotlight-pulse {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}

@keyframes orb-float {
  from { transform: translate(0, 0) scale(1); opacity: 0.5; }
  to { transform: translate(30px, -40px) scale(1.15); opacity: 0.85; }
}

@keyframes aurora-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-2%, 1%); }
  100% { transform: translate(1%, -1%); }
}

/* Smooth rise — no opacity !important on .note so these keys work */
@keyframes float-note-rise {
  0% {
    transform: translate3d(0, 105vh, 0) rotate(0deg) scale(0.85);
    opacity: 0;
  }
  6% {
    opacity: 0.85;
  }
  88% {
    opacity: 0.7;
  }
  100% {
    transform: translate3d(0, -12vh, 0) rotate(28deg) scale(1.15);
    opacity: 0;
  }
}

@keyframes logo-jitter {
  0%, 90%, 100% { transform: translate(0, 0); }
  92% { transform: translate(-2px, 1px); }
  94% { transform: translate(2px, -1px); }
  96% { transform: translate(-1px, -2px); }
}

@keyframes color-cycle {
  0% { color: var(--acid); }
  25% { color: var(--cyan); }
  50% { color: var(--amber); }
  75% { color: var(--magenta); }
  100% { color: var(--acid); }
}

@keyframes cta-pulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--acid); }
  50% { box-shadow: 4px 4px 0 var(--cyan), 0 0 24px rgba(255, 45, 85, 0.5); }
}

@keyframes badge-bounce {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50% { transform: rotate(-5deg) scale(1.06); }
}

@keyframes blink-hard {
  50% { opacity: 0.15; }
}

@keyframes hero-title-slam {
  0% { opacity: 0; transform: scale(1.3) rotate(-4deg); filter: blur(8px); }
  60% { opacity: 1; transform: scale(0.96) rotate(1deg); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

@keyframes accent-glitch {
  0%, 88%, 100% {
    transform: none;
    text-shadow:
      6px 6px 0 #000,
      0 0 30px rgba(184, 255, 0, 0.55),
      -3px 0 0 var(--crimson);
  }
  90% {
    transform: translate(-3px, 1px);
    text-shadow: 4px 0 var(--cyan), -4px 0 var(--magenta);
  }
  92% {
    transform: translate(3px, -1px);
    text-shadow: -3px 0 var(--acid), 3px 0 var(--crimson);
  }
  94% {
    transform: skewX(8deg);
  }
}

@keyframes case-float {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

@keyframes plastic-glare-chaos {
  0% { transform: translateX(-40%) rotate(5deg); opacity: 0.3; }
  50% { opacity: 0.95; }
  100% { transform: translateX(40%) rotate(5deg); opacity: 0.3; }
}

@keyframes stamp-wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(-4deg) scale(1.03); }
}

@keyframes stamp-spin {
  from { transform: rotate(-12deg) scale(1); }
  to { transform: rotate(14deg) scale(1.08); }
}

@keyframes stripe-scroll {
  from { background-position: 0 0; }
  to { background-position: 200px 0; }
}

@keyframes progress-shine {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}

/* ─── Reduced motion: keep look, kill thrash ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .marquee-track {
    animation: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Responsive — chaos scales down without covering UI
   ═══════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 960px) {
  .chaos-stamp {
    display: none !important;
  }

  .notes-layer {
    opacity: 0.85 !important;
  }

  .note {
    font-size: 1rem !important;
  }

  .hero-title {
    font-size: clamp(2.4rem, 11vw, 4rem) !important;
  }

  .section-title {
    font-size: clamp(2rem, 7vw, 3.2rem) !important;
  }

  .cd-case {
    filter: drop-shadow(6px 8px 0 #000) !important;
    animation: none !important;
  }

  .cd-case-face,
  .cd-case:hover .cd-case-face {
    transform: none !important;
  }

  .stream-cell,
  .stream-cell:nth-child(n) {
    transform: none !important;
  }

  .stream-cell:hover {
    transform: scale(1.04) !important;
  }

  .album-card,
  .album-card:nth-child(n) {
    transform: none !important;
  }

  .album-card:hover {
    transform: translateY(-4px) !important;
  }

  .lyrics-card,
  .lyrics-stack-cards .lyrics-card:nth-child(n) {
    transform: none !important;
  }

  .nav a:hover,
  .nav a.is-active {
    transform: none;
  }
}

/* Phone */
@media (max-width: 720px) {
  :root {
    --header-h: 64px;
  }

  body {
    background-attachment: scroll; /* iOS perf + less jank */
  }

  .marquee-bar {
    transform: none !important;
    font-size: 0.85rem;
    padding: 0.4rem 0;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  }

  .marquee-track {
    animation-duration: 36s !important;
  }

  .notes-layer {
    display: none !important; /* no floaters on small screens */
  }

  .bg-glow,
  .bg-glow--1,
  .bg-glow--2,
  .bg-glow--3,
  .bg-aurora {
    opacity: 0.35 !important;
    animation: none !important;
  }

  .bg-grid {
    opacity: 0.2 !important;
    animation: none !important;
  }

  .header {
    box-shadow: 0 0 0 2px var(--acid) !important;
  }

  .logo-text {
    animation: none !important;
  }

  .logo-text span {
    animation: none !important;
  }

  .nav-cta {
    animation: none !important;
    transform: none !important;
  }

  .hero {
    padding-top: calc(var(--header-h) + 0.75rem) !important;
  }

  .hero-badge {
    transform: none;
    animation: none !important;
    font-size: 0.65rem !important;
  }

  .hero-title {
    font-size: clamp(2.2rem, 12vw, 3.2rem) !important;
    animation: none !important;
  }

  .hero-title .accent {
    animation: none !important;
  }

  .hero-tagline {
    transform: none;
    font-size: 0.95rem !important;
    box-shadow: 3px 3px 0 var(--magenta);
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
    min-width: min(100%, 10rem);
    text-align: center;
  }

  .btn:hover,
  .btn-primary:hover,
  .btn-ghost:hover {
    transform: none !important;
  }

  .stream-grid {
    gap: 0.4rem !important;
  }

  .stream-cell {
    padding: 0.45rem 0.7rem !important;
    box-shadow: 3px 3px 0 #000 !important;
  }

  .stream-cell strong {
    font-size: 0.8rem !important;
  }

  .section-label {
    transform: none;
    animation: none !important;
  }

  .section-title {
    text-shadow: 3px 3px 0 #000, -1px 0 0 var(--magenta) !important;
  }

  .standout-list {
    box-shadow: 5px 5px 0 var(--violet);
  }

  .standout-list a:hover {
    transform: none;
  }

  .catalog-control-inner {
    box-shadow: 5px 5px 0 var(--cyan) !important;
  }

  .footer::before {
    animation: none !important;
  }

  .chaos-progress {
    height: 3px;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .container {
    width: min(100% - 1.25rem, var(--max));
  }

  .marquee-bar {
    font-size: 0.75rem;
  }

  .stream-cell {
    padding: 0.4rem 0.55rem !important;
  }

  .btn {
    font-size: 0.9rem !important;
    padding: 0.65rem 1rem !important;
  }
}

/* Large desktops */
@media (min-width: 1280px) {
  .note {
    font-size: 1.35rem;
  }
}

/* Touch devices: no hover-dependent transforms that leave UI offset */
@media (hover: none) {
  .stream-cell:hover,
  .album-card:hover,
  .lyrics-card:hover,
  .btn:hover,
  .nav a:hover {
    transform: none !important;
  }

  .kinetic-tilt {
    transform: none !important;
  }
}