/* --------------------------------------------------
   RETRO MICHAEL JACKSON TRIBUTE - DESIGN SYSTEM & LAYOUT
-------------------------------------------------- */

/* 1. ROOT VARIABLES & THEMES */
:root {
  /* Default Theme (Off The Wall / Synthwave Vibe) */
  --bg-primary: #0d0b14;
  --bg-surface: #171426;
  --bg-surface-glow: rgba(23, 20, 38, 0.8);
  --accent-color: #00e5ff; /* Billie Jean Cyan */
  --accent-glow: rgba(0, 229, 255, 0.4);
  --secondary-color: #ffbe0b; /* Metallic Gold */
  --secondary-glow: rgba(255, 190, 11, 0.3);
  --crimson-red: #e62645; /* Thriller Red */
  
  --text-primary: #ffffff;
  --text-secondary: #a9a6b8;
  --text-muted: #5e5a75;
  
  --font-display: 'Syncopate', sans-serif;
  --font-heading: 'Archivo Black', sans-serif;
  --font-mono: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --transition-fast: 0.2s ease;
  --transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  --header-height: 80px;
}

/* --- ERA OVERRIDES --- */
body[data-era="offthewall"] {
  --bg-primary: #0a050d;
  --bg-surface: #1a0c24;
  --accent-color: #ffbe0b; /* Gold */
  --accent-glow: rgba(255, 190, 11, 0.5);
  --secondary-color: #9d4edd; /* Disco Purple */
  --secondary-glow: rgba(157, 78, 221, 0.3);
}

body[data-era="thriller"] {
  --bg-primary: #0c0205;
  --bg-surface: #1f050b;
  --accent-color: #e62645; /* Crimson Red */
  --accent-glow: rgba(230, 38, 69, 0.5);
  --secondary-color: #ffffff;
  --secondary-glow: rgba(255, 255, 255, 0.3);
}

body[data-era="bad"] {
  --bg-primary: #050505;
  --bg-surface: #121212;
  --accent-color: #cbd5e1; /* Metallic Silver */
  --accent-glow: rgba(203, 213, 225, 0.4);
  --secondary-color: #e21d1d; /* Red highlights */
  --secondary-glow: rgba(226, 29, 29, 0.4);
}

body[data-era="dangerous"] {
  --bg-primary: #070e17;
  --bg-surface: #0f1d2d;
  --accent-color: #cca43b; /* Rich Royal Gold */
  --accent-glow: rgba(204, 164, 59, 0.5);
  --secondary-color: #2ec4b6; /* Emerald Teal */
  --secondary-glow: rgba(46, 196, 182, 0.3);
}

/* 2. BASE STYLING & SCROLLBAR */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  transition: background-color var(--transition-slow);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-surface);
  border: 2px solid var(--bg-primary);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* Ambient glow background overlay */
.ambient-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background: 
    radial-gradient(circle at 10% 20%, var(--accent-glow) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, var(--secondary-glow) 0%, transparent 45%);
  transition: background var(--transition-slow);
  filter: blur(80px);
  opacity: 0.7;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input {
  font-family: inherit;
}

/* 3. REUSABLE COMPONENTS (GLASS PANELS, BUTTONS, HEADINGS) */
.glass-panel {
  background: var(--bg-surface-glow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  padding: 2.5rem;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.glass-panel:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5), 0 0 15px var(--accent-glow);
}

/* Section Spacing */
.section-padding {
  padding: 8rem 2rem;
  max-width: 1300px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 4.5rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: 2px;
  color: var(--text-primary);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--accent-color);
  box-shadow: 0 0 10px var(--accent-color);
  transition: background var(--transition-fast);
}

.section-subtitle {
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1rem 2.2rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background-color: var(--accent-color);
  color: var(--bg-primary);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 2px solid var(--text-muted);
}

.btn-secondary:hover {
  border-color: var(--accent-color);
  box-shadow: 0 0 12px var(--accent-glow);
  transform: translateY(-2px);
}

.btn-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: 0.75s;
}

.btn-glow:hover::before {
  left: 150%;
}

/* 4. RETRO HEADER & NAVIGATION */
.retro-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 100;
  background: rgba(13, 11, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1300px;
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 2px;
  font-weight: 700;
}

.logo-accent {
  color: var(--accent-color);
  text-shadow: 0 0 10px var(--accent-glow);
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--transition-fast);
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-color);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-color);
  transition: width var(--transition-fast);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.glove-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  padding: 0.4rem 1.2rem;
}

.header-glove {
  width: 28px;
  height: 28px;
  object-fit: contain;
  animation: gloveFloat 3s ease-in-out infinite alternate;
}

.score-indicator {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--secondary-color);
  letter-spacing: 1px;
}

/* 5. HERO SECTION */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 2rem) 2rem 4rem;
  max-width: 1300px;
  margin: 0 auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.retro-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--secondary-color);
  border: 1px solid rgba(255, 190, 11, 0.2);
  background: rgba(255, 190, 11, 0.04);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  letter-spacing: 1.5px;
  margin-bottom: 2rem;
  font-weight: 700;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-color);
  box-shadow: 0 0 10px var(--accent-color);
  animation: pulseDot 1.5s infinite alternate;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 8vw, 6.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 2rem;
  letter-spacing: -2px;
}

.stroke-text {
  -webkit-text-stroke: 2px var(--accent-color);
  color: transparent;
  filter: drop-shadow(0 0 12px var(--accent-glow));
  transition: -webkit-text-stroke var(--transition-slow);
}

.hero-description {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 580px;
  margin-bottom: 3rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Hero Poster Frame */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.poster-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.neon-border-glow {
  position: absolute;
  inset: 0;
  border: 3px solid var(--accent-color);
  border-radius: 20px;
  pointer-events: none;
  z-index: 5;
  box-shadow: inset 0 0 20px var(--accent-glow), 0 0 20px var(--accent-glow);
  transition: border var(--transition-slow), box-shadow var(--transition-slow);
}

.poster-inner {
  width: 100%;
  height: 100%;
  background: var(--bg-surface);
}

.poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 35, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 4px, 6px 100%;
  z-index: 2;
  pointer-events: none;
}

/* 6. TURNTABLE & AUDIO PLAYER */
.player-card {
  max-width: 1000px;
  margin: 0 auto;
}

.player-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

/* physical turntable design */
.turntable-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.turntable {
  position: relative;
  width: 320px;
  height: 320px;
  background: #1d1c25;
  border-radius: 24px;
  box-shadow: 
    inset 0 4px 10px rgba(255, 255, 255, 0.05),
    0 15px 35px rgba(0, 0, 0, 0.5),
    0 0 0 4px #2b2938;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.platter {
  position: absolute;
  width: 270px;
  height: 270px;
  background: radial-gradient(circle, #2d2b3b 0%, #15141d 80%);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.vinyl-record-wrap {
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8);
  cursor: grab;
  transform: rotate(0deg);
}

.vinyl-record-wrap.spinning {
  animation: vinylSpin 3s linear infinite;
}

.vinyl-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.vinyl-center-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: #1d1c25;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 3;
}

/* Tone-arm Pivot, Arm, Weight */
.tonearm-assembly {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 120px;
  height: 240px;
  z-index: 10;
  pointer-events: none;
  transform-origin: 90px 40px;
  transform: rotate(0deg); /* 0deg is parked, ~22deg is on outer record */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* JS state when active */
.tonearm-assembly.active {
  transform: rotate(20deg);
}
.tonearm-assembly.playing {
  animation: tonearmMicroMove 10s linear infinite alternate;
  transform: rotate(23deg);
}

.tonearm-pivot {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #e2e8f0 30%, #475569 90%);
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

.tonearm-arm {
  position: absolute;
  top: 38px;
  right: 26px;
  width: 10px;
  height: 180px;
  background: linear-gradient(90deg, #94a3b8, #cbd5e1, #64748b);
  border-radius: 4px;
  transform-origin: top center;
  transform: rotate(-10deg);
}

.tonearm-weight {
  position: absolute;
  top: 0px;
  right: 20px;
  width: 22px;
  height: 25px;
  background: #334155;
  border-radius: 4px;
}

.tonearm-cartridge {
  position: absolute;
  bottom: 12px;
  left: 6px;
  width: 16px;
  height: 32px;
  background: #0f172a;
  border-radius: 2px;
  transform: rotate(18deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.playback-status {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: var(--accent-color);
  text-shadow: 0 0 5px var(--accent-glow);
  text-transform: uppercase;
}

/* Player controller UI */
.player-controls {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.track-info {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 1.2rem;
}

.track-title {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.track-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Live simulated EQ bars */
.visualizer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 55px;
  gap: 4px;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.vis-bar {
  flex: 1;
  height: 6px;
  background-color: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-glow);
  border-radius: 10px 10px 0 0;
  transition: height 0.05s ease, background-color var(--transition-slow);
}

/* Seekbar Custom */
.seekbar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}

.time-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  width: 35px;
}

.seekbar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}

.seekbar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-glow);
  border-radius: 10px;
  transition: width 0.1s linear;
}

.seekbar-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: left 0.1s linear;
}

/* Buttons */
.control-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.ctrl-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255,255,255,0.05);
  transition: all var(--transition-fast);
}

.ctrl-btn:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: scale(1.05);
}

.btn-play {
  width: 60px;
  height: 60px;
  background: var(--accent-color);
  color: var(--bg-primary);
  box-shadow: 0 4px 15px var(--accent-glow);
  border: none;
}

.btn-play:hover {
  color: var(--bg-primary);
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.4);
  transform: scale(1.08);
}

.hidden {
  display: none !important;
}

/* Playlist tracks */
.track-playlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.playlist-item {
  display: flex;
  align-items: center;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all var(--transition-fast);
}

.playlist-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(3px);
}

.playlist-item.active {
  background: rgba(0, 229, 255, 0.05);
  border-color: var(--accent-color);
}
body[data-era="offthewall"] .playlist-item.active { background: rgba(255, 190, 11, 0.05); }
body[data-era="thriller"] .playlist-item.active { background: rgba(230, 38, 69, 0.05); }
body[data-era="bad"] .playlist-item.active { background: rgba(203, 213, 225, 0.05); }
body[data-era="dangerous"] .playlist-item.active { background: rgba(204, 164, 59, 0.05); }

.play-indicator {
  font-size: 0.75rem;
  margin-right: 12px;
  color: transparent;
  transition: color var(--transition-fast);
}

.playlist-item.active .play-indicator {
  color: var(--accent-color);
  animation: pulseDot 1s infinite alternate;
}

.playlist-name {
  font-size: 0.9rem;
  font-weight: 500;
  flex: 1;
}

.playlist-duration {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.audio-tip {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* 7. INTERACTIVE DANCE FLOOR */
.dancefloor-grid-container {
  max-width: 900px;
  margin: 0 auto;
}

.dance-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.bpm-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.bpm-selector input[type="range"] {
  accent-color: var(--accent-color);
  width: 120px;
  cursor: pointer;
}

.dance-floor-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #09080e;
  border: 4px solid #1c1a26;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
  padding: 1rem;
}

.dance-grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}

.dance-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

/* Individual Tiles */
.dance-tile {
  aspect-ratio: 1.6 / 1;
  background: #14131d;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.02);
  transition: background-color 0.1s ease, box-shadow 0.1s ease, transform var(--transition-fast);
}

.dance-tile:hover {
  transform: scale(1.02);
  background: rgba(255, 255, 255, 0.05);
}

/* Lighted tiles states */
.dance-tile.active-beat {
  background: rgba(0, 229, 255, 0.1);
  border-color: rgba(0, 229, 255, 0.3);
}

.dance-tile.playback-sweep {
  border-color: #ffffff;
  filter: brightness(1.3);
}

/* The actual neon colors based on coordinates */
.dance-tile.lit {
  box-shadow: inset 0 0 10px rgba(255,255,255,0.5);
}

.dance-tile.lit-row-0 {
  background: #e62645 !important;
  box-shadow: 0 0 15px rgba(230, 38, 69, 0.8), inset 0 0 8px rgba(255,255,255,0.8);
}
.dance-tile.lit-row-1 {
  background: #00e5ff !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.8), inset 0 0 8px rgba(255,255,255,0.8);
}
.dance-tile.lit-row-2 {
  background: #ffbe0b !important;
  box-shadow: 0 0 15px rgba(255, 190, 11, 0.8), inset 0 0 8px rgba(255,255,255,0.8);
}
.dance-tile.lit-row-3 {
  background: #9d4edd !important;
  box-shadow: 0 0 15px rgba(157, 78, 221, 0.8), inset 0 0 8px rgba(255,255,255,0.8);
}

/* The Moonwalk Dancer Silhouette overlay */
.dancer-sprite {
  position: absolute;
  bottom: 15px;
  left: -80px; /* starts off-screen */
  width: 70px;
  height: 100px;
  z-index: 10;
  pointer-events: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: left 0.1s linear;
  opacity: 0;
}

.dancer-sprite.active {
  opacity: 1;
}

/* Vector representation of MJ dancer silhouette */
.dancer-sprite::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Cpath d='M50 20 L45 35 L40 40 L30 50 L35 70 L38 90 L30 130 L25 145 H40 L45 120 L55 120 L60 145 H75 L68 110 L62 90 L58 70 L65 50 L60 40 L55 35 Z' fill='%23ffffff'/%3E%3Cellipse cx='50' cy='15' rx='12' ry='7' fill='%23ffffff'/%3E%3Cpath d='M35 15 L65 15 L50 8 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center;
  filter: drop-shadow(0 0 8px #00e5ff) drop-shadow(0 0 15px #00e5ff);
  animation: dancerFloat 0.8s ease-in-out infinite alternate;
}

.dance-tip {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1.5rem;
}

/* 8. ERAS SECTION */
.eras-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.era-card {
  position: relative;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  padding: 2.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: all var(--transition-normal);
  z-index: 1;
}

.era-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-color);
  box-shadow: 0 15px 40px rgba(0,0,0,0.6), 0 0 15px var(--accent-glow);
}

.era-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: brightness(0.4) saturate(0.8);
  transition: transform var(--transition-normal), filter var(--transition-normal);
}

.era-card:hover .era-bg {
  transform: scale(1.08);
  filter: brightness(0.65) saturate(1.1);
}

/* Gradient background overlays */
.disco-bg {
  background: linear-gradient(135deg, rgba(255,190,11,0.2) 0%, rgba(13,11,20,0.9) 80%), radial-gradient(circle, #4a2168 0%, #0d0b14 100%);
}
.thriller-bg {
  background: linear-gradient(135deg, rgba(230,38,69,0.2) 0%, rgba(13,11,20,0.9) 80%), radial-gradient(circle, #5a0914 0%, #0d0b14 100%);
}
.bad-bg {
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(13,11,20,0.9) 80%), radial-gradient(circle, #222222 0%, #050505 100%);
}
.dangerous-bg {
  background: linear-gradient(135deg, rgba(204,164,59,0.15) 0%, rgba(13,11,20,0.9) 80%), radial-gradient(circle, #0e2742 0%, #070e17 100%);
}

.era-tagline {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-color);
  letter-spacing: 2px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.era-name {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.era-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1.8rem;
  line-height: 1.5;
}

.btn-era {
  padding: 0.6rem 1.2rem;
  font-size: 0.8rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ffffff;
  border-radius: 6px;
  font-family: var(--font-mono);
}

.era-card:hover .btn-era {
  background: var(--accent-color);
  color: var(--bg-primary);
  border-color: var(--accent-color);
  box-shadow: 0 4px 10px var(--accent-glow);
}

/* 9. SIGNATURE MOVES */
.moves-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
}

.move-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 520px;
}

.move-animation-wrapper {
  background: #0b0a10;
  border-radius: 10px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.03);
  position: relative;
}

/* Avatar dancers built in CSS */
.move-demo {
  position: relative;
  width: 100px;
  height: 150px;
}

.avatar-hat {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 60px;
  height: 12px;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
  z-index: 5;
}

.avatar-hat::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 12px;
  width: 36px;
  height: 18px;
  background: #ffffff;
  border-radius: 6px 6px 0 0;
}

.avatar-body {
  position: absolute;
  top: 38px;
  left: 35px;
  width: 30px;
  height: 55px;
  background: #111111;
  border: 2px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}

.avatar-leg {
  position: absolute;
  bottom: 0px;
  width: 8px;
  height: 60px;
  background: #111111;
  border: 2px solid #ffffff;
  border-radius: 4px;
}

.left-leg {
  left: 36px;
  transform-origin: top center;
}

.right-leg {
  left: 54px;
  transform-origin: top center;
}

/* CSS choreography loops */
/* Moonwalk logic: slide legs, slide canvas body */
.moonwalk-demo {
  animation: slideBody 3s infinite linear;
}

.moonwalk-demo .left-leg {
  animation: legSlideLeft 3s infinite linear;
}

.moonwalk-demo .right-leg {
  animation: legSlideRight 3s infinite linear;
}

/* Lean logic */
.lean-demo .avatar-body {
  transform-origin: bottom center;
  animation: leanBody 4s infinite ease-in-out;
}

.lean-demo .avatar-hat {
  transform-origin: 30px 45px;
  animation: leanHat 4s infinite ease-in-out;
}

/* Spin logic */
.avatar-body.spinning {
  animation: spinBody 2s infinite linear;
}
.avatar-hat.spinning {
  transform-origin: 30px 45px;
  animation: spinBody 2s infinite linear;
}

.move-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.move-title {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--accent-color);
  text-transform: uppercase;
}

.move-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.move-steps {
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.move-steps li {
  line-height: 1.4;
}

/* 10. ARCADE TRIVIA CABINET */
.arcade-cabinet {
  max-width: 600px;
  margin: 0 auto;
  background: linear-gradient(180deg, #2a283b 0%, #151321 100%);
  border: 10px solid #232130;
  border-radius: 20px 20px 8px 8px;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.8),
    0 0 0 3px #181622;
  overflow: hidden;
}

.arcade-marquee {
  background: #09080f;
  padding: 1.5rem;
  border-bottom: 6px solid #232130;
  text-align: center;
}

.arcade-neon-glow {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: var(--secondary-color);
  text-shadow: 
    0 0 5px rgba(255,190,11,0.5),
    0 0 15px rgba(255,190,11,0.8);
  letter-spacing: 3px;
  font-weight: 700;
}

.arcade-screen-bezel {
  padding: 1.8rem;
  background: #111018;
}

.arcade-screen {
  background: #030308;
  height: 300px;
  border-radius: 8px;
  border: 2px solid #232130;
  box-shadow: inset 0 0 30px rgba(0,229,255,0.15);
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Simulated Scanline CRT effect */
.arcade-screen::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 20;
  background-size: 100% 3px, 3px 100%;
  pointer-events: none;
}

/* View panels inside screen */
.screen-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 5;
}

.pixel-text {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.title-glow {
  color: var(--accent-color);
  text-shadow: 0 0 10px var(--accent-glow);
}

.pixel-subtext {
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 320px;
  margin-bottom: 2rem;
  line-height: 1.4;
}

.pixel-comment {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--secondary-color);
  margin-bottom: 1.5rem;
}

.arcade-btn {
  padding: 0.8rem 1.8rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: #000;
  background: var(--accent-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 0 #008fa7;
  transition: transform 0.1s ease;
}

.arcade-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #008fa7;
}

/* Quiz UI elements */
.quiz-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 0.5rem;
}

.quiz-question {
  font-size: 0.95rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 1.5rem;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.quiz-opt-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  padding: 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: left;
  transition: all var(--transition-fast);
}

.quiz-opt-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border-color: var(--accent-color);
}

.quiz-feedback {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 1.2rem;
  height: 20px;
  text-transform: uppercase;
}

.quiz-feedback.correct {
  color: #00ff66;
  text-shadow: 0 0 10px rgba(0,255,102,0.4);
}

.quiz-feedback.wrong {
  color: #ff3b30;
  text-shadow: 0 0 10px rgba(255,59,48,0.4);
}

/* Physical Arcade Controls bar */
.arcade-controls {
  background: #171524;
  border-top: 6px solid #232130;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 2rem;
}

.joystick-wrap {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.joystick-base {
  width: 44px;
  height: 44px;
  background: #111019;
  border-radius: 50%;
  border: 3px solid #2b283b;
  position: relative;
}

.joystick-shaft {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%) rotate(0deg);
  width: 8px;
  height: 25px;
  background: #cbd5e1;
  border-radius: 4px;
  transform-origin: bottom center;
  transition: transform 0.15s ease;
}

.joystick-ball {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: #ff3b30;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.arcade-buttons {
  display: flex;
  gap: 15px;
}

.arc-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.4);
  transition: transform 0.1s ease, box-shadow 0.1s;
}

.arc-action-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.red-btn {
  background: #ff3b30;
}
.yellow-btn {
  background: #ffbe0b;
  color: #000000;
}

/* 11. FOOTER SECTION */
.retro-footer {
  background: #09080e;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 4rem 2rem 2rem;
}

.footer-container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: flex-start;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 300px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links h4 {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

.footer-links a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--accent-color);
}

.footer-copyright {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-disclaimer {
  max-width: 400px;
  line-height: 1.4;
}

/* 12. ANIMATIONS */

@keyframes vinylSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes tonearmMicroMove {
  0% { transform: rotate(23deg); }
  100% { transform: rotate(24.5deg); }
}

@keyframes pulseDot {
  0% { opacity: 0.3; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.1); }
}

@keyframes gloveFloat {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-4px) rotate(5deg); }
}

@keyframes dancerFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

/* Choreography animations for signature moves */
@keyframes slideBody {
  0%, 100% { transform: translateX(25px); }
  50% { transform: translateX(-25px); }
}

@keyframes legSlideLeft {
  0%, 100% { transform: rotate(15deg); }
  50% { transform: rotate(-25deg); }
}

@keyframes legSlideRight {
  0%, 100% { transform: rotate(-25deg); }
  50% { transform: rotate(15deg); }
}

@keyframes leanBody {
  0%, 100% { transform: rotate(0deg); }
  35%, 65% { transform: rotate(40deg); }
}

@keyframes leanHat {
  0%, 100% { transform: rotate(0deg) translate(0px, 0px); }
  35%, 65% { transform: rotate(40deg) translate(18px, 6px); }
}

@keyframes spinBody {
  0% { transform: scaleX(1); }
  25% { transform: scaleX(0.01); }
  50% { transform: scaleX(-1); }
  75% { transform: scaleX(0.01); }
  100% { transform: scaleX(1); }
}

/* 13. RESPONSIVE DESIGN (PREVENT TEXT BLEEDING) */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .hero-content {
    align-items: center;
    text-align: center;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-visual {
    order: -1;
  }
  .poster-frame {
    max-width: 320px;
  }
  .player-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding: 5rem 1.5rem;
  }
  .retro-header {
    height: auto;
    padding: 1rem 0;
  }
  .header-container {
    flex-direction: column;
    gap: 1rem;
    height: auto;
  }
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
  }
  .hero-section {
    padding-top: calc(var(--header-height) + 6rem);
  }
  .footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .btn {
    width: 100%;
  }
  .turntable {
    width: 280px;
    height: 280px;
  }
  .platter {
    width: 240px;
    height: 240px;
  }
  .vinyl-record-wrap {
    width: 220px;
    height: 220px;
  }
  .tonearm-assembly {
    width: 100px;
    height: 200px;
    top: 10px;
    right: 10px;
    transform-origin: 80px 30px;
  }
  .quiz-options {
    grid-template-columns: 1fr;
  }
  .dance-row {
    gap: 6px;
  }
  .dance-tile {
    border-radius: 4px;
  }
}