/* ──────────────────────────────────────────────────────────────────────────
   Secret Character — shared PAGE HEADER system.
   SINGLE SOURCE OF TRUTH for the big glitch page title + description across
   /music, /studio, /labs (same approach as sc-nav.css). Do not redefine these
   inline per page — that's what caused header drift (different sizes/weights,
   one page left-aligned, one with a redundant eyebrow, inconsistent entrances).

   Markup contract (identical on every page):
     <header class="sc-header">
       <h1 class="sc-title" data-text="MUSIC">MUSIC</h1>
       <p class="sc-desc">One descriptive line.</p>
     </header>

   Pages must define :root tokens (--text/--text-dim/--accent/--accent-hot/--cyan)
   and load Inter + this file:  <link rel="stylesheet" href="/assets/sc-page.css">
   ────────────────────────────────────────────────────────────────────────── */

.sc-header {
  text-align: center;
  padding: 40px 0 36px;
  position: relative;
  z-index: 1;
}

/* Big glitch wordmark — present IMMEDIATELY (the life comes from the glitch
   loop, not a fade-in). Short single word only; long text never gets glitch. */
.sc-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(40px, 8vw, 80px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 auto;
  position: relative;
  display: inline-block;
  animation: sc-glitch-anchor 6s steps(1) infinite;
}
.sc-title::before, .sc-title::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.sc-title::before { color: var(--accent-hot); mix-blend-mode: screen; transform: translate(-3px, 0); opacity: 0.7;  animation: sc-glitch-1 4s infinite linear alternate; }
.sc-title::after  { color: var(--cyan);       mix-blend-mode: screen; transform: translate(3px, 0);  opacity: 0.65; animation: sc-glitch-2 4s infinite linear alternate; }

/* One descriptive line — fades up just after load (the only entrance motion). */
.sc-desc {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 54ch;
  margin: 18px auto 0;
  opacity: 0;
  animation: sc-fadeup 0.7s ease forwards 0.3s;
}
.sc-desc em { font-style: normal; color: var(--accent); }

@keyframes sc-fadeup {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sc-glitch-1 {
  0%,100% { transform: translate(-3px, 0); }
  20%     { transform: translate(-5px, 1px); }
  40%     { transform: translate(-2px, -1px); }
  60%     { transform: translate(-6px, 1px); }
  80%     { transform: translate(-3px, 0); }
}
@keyframes sc-glitch-2 {
  0%,100% { transform: translate(3px, 0); }
  20%     { transform: translate(5px, -1px); }
  40%     { transform: translate(2px, 1px); }
  60%     { transform: translate(6px, -1px); }
  80%     { transform: translate(3px, 0); }
}
@keyframes sc-glitch-anchor {
  0%,92%,100% { transform: translate(0, 0); }
  93% { transform: translate(-1px, 1px); }
  94% { transform: translate(1px, -1px); }
  95% { transform: translate(-1px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-title, .sc-title::before, .sc-title::after { animation: none; }
  .sc-title::before, .sc-title::after { opacity: 0; }
  .sc-desc { animation: none; opacity: 1; }
}

@media (max-width: 640px) {
  .sc-header { padding: 28px 0 28px; }
}