/* ===========================================
   Theme Extras
   Notebook (light) flourishes + the hidden
   dev-theme (right-click the logo 3x).
   Color tokens live in variables.css.
   =========================================== */

/* ---------- Notebook: ruled paper ---------- */
body.notebook-theme {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2rem - 1px),
    rgba(58, 90, 124, 0.08) calc(2rem - 1px),
    rgba(58, 90, 124, 0.08) 2rem
  );
}

body.notebook-theme::after {
  opacity: 0.035;
}

/* Ink-on-paper: headings tighten, chords go red pencil */
body.notebook-theme .track-header__title {
  font-weight: 900;
}

body.notebook-theme .chord-row .chord {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
}

body.notebook-theme .hero__vinyl {
  filter: sepia(0.2) contrast(0.95);
}

body.notebook-theme .nav {
  background: rgba(244, 237, 221, 0.92);
}

body.notebook-theme .nav--scrolled {
  background: rgba(244, 237, 221, 0.97);
  box-shadow: 0 1px 8px rgba(44, 37, 25, 0.08);
}

body.notebook-theme .liner-notes {
  box-shadow: 0 2px 12px rgba(44, 37, 25, 0.08);
}

/* ===========================================
   Mode swap: music ↔ plain
   Dev theme drops the album metaphor entirely.
   Elements tagged data-mode="music" exist only
   in the music design; data-mode="plain" only
   in dev mode.
   =========================================== */

body.dev-theme [data-mode="music"] { display: none !important; }
body:not(.dev-theme) [data-mode="plain"] { display: none !important; }

/* plain-mode adjustments */
body.dev-theme .transport,
body.dev-theme .waveform,
body.dev-theme .chord-row,
body.dev-theme .contact-card__caption {
  display: none !important;
}

body.dev-theme .rack-unit::before,
body.dev-theme .rack-unit::after {
  display: none;
}

/* the real-world sublabel becomes the section title */
body.dev-theme .track-header__real {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: normal;
  margin-top: 0;
}

/* the slogan reads as one plain sentence */
body.dev-theme .lyric-word {
  font-style: normal;
}

body.dev-theme .hero::before {
  display: none;
}

body.dev-theme {
  --wave-height: 0px;
}

/* plain hero code block (replaces the vinyl) */
.hero__code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--color-accent);
  overflow-x: auto;
}

.hero__code-cursor {
  animation: cursorBlink 1.1s steps(1) infinite;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

/* ---------- Mode sweep transition ---------- */
.mode-sweep {
  position: fixed;
  inset: 0;
  z-index: 9600;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 255, 0, 0.05) 0 2px, transparent 2px 4px),
    #000;
  animation: modeSweep 0.95s ease-in-out forwards;
}

.mode-sweep__text {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: #00ff00;
}

@keyframes modeSweep {
  0%       { clip-path: inset(0 0 100% 0); }
  38%, 62% { clip-path: inset(0 0 0 0); }
  100%     { clip-path: inset(100% 0 0 0); }
}

/* ---------- Developer Theme (deepest cut) ---------- */
body.dev-theme {
  --color-bg:         #000000;
  --color-surface:    #0a0a0a;
  --color-surface-2:  #111111;
  --color-border:     #1a3a1a;
  --color-text:       #00ff00;
  --color-text-muted: #00aa00;
  --color-accent:     #00ff00;
  --color-accent-hover: #33ff33;
  --color-accent-glow: rgba(0, 255, 0, 0.1);
  --color-vu-green:   #00ff00;
  --color-vu-red:     #33ff33;
  --color-tape:       #00aa00;
  background-image: none;
  font-family: var(--font-mono) !important;
}

body.dev-theme * {
  font-family: var(--font-mono) !important;
}