/* =============================================================
   OMAR ABUELHANA — Design System
   Two personas, one artist. Choose a theme with a class on <html> or <body>:
     .theme-oud       → authentic / oriental / black & gold
     .theme-composer  → contemporary / blueprint / blue & yellow
     (default = homepage, mixed)
   ============================================================= */

/* ---------- WEBFONTS ----------
   VT323 — Omar explicitly asked for this. A pixel/terminal font from Google Fonts.
   Cinzel — Trajan-inspired Roman capitals, gives the "ancient Egyptian"/monumental feel.
   EB Garamond — elegant old-style serif for oud-world body text.
   IBM Plex Mono — technical / blueprint callouts on composer side.
   Space Grotesk — modern geometric sans, composer body text.
   Substitutions flagged in README.md § FONTS.
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@400;600&display=swap');

/* =============================================================
   ROOT TOKENS — available everywhere
   ============================================================= */
:root {
  /* ---- OUD PALETTE (black & gold, warm, oriental) ---- */
  --oud-black:        #0B0807;   /* near-black with warm undertone */
  --oud-ink:          #1A110D;   /* card background */
  --oud-charcoal:     #2B1E16;   /* elevated */
  --oud-gold:         #D4A849;   /* primary gold — warm, not neon */
  --oud-gold-bright:  #F2C65C;   /* highlight gold */
  --oud-gold-deep:    #8A6A2A;   /* recessed gold, engraved text */
  --oud-gold-leaf:    #E8C77E;   /* soft gold text on black */
  --oud-parchment:    #F5E9D0;   /* warm off-white */
  --oud-ember:        #B3541E;   /* stage-light accent, rare */
  --oud-sand:         #A88A5C;   /* muted neutral */

  /* ---- COMPOSER PALETTE (blueprint, technical, yellow+blue) ---- */
  --cmp-blueprint:    #1F1A18;   /* deep blueprint brown — primary */
  --cmp-blueprint-2:  #152A7A;   /* blueprint mid */
  --cmp-ink:          #020617;   /* near-black ink */
  --cmp-paper:        #EDEAE0;   /* warm off-white "drafting paper" from Relativity poster */
  --cmp-paper-cool:   #E8EEF2;   /* cool drafting paper */
  --cmp-yellow:       #F2D23B;   /* bright hazard/highlighter yellow from Solo for Piano */
  --cmp-yellow-deep:  #C9A613;
  --cmp-blue:         #2238D1;   /* bold ultramarine from Relativity */
  --cmp-blue-electric:#3A5BFF;   /* interactive / link */
  --cmp-silver:       #B8BEC5;   /* "mechanical silver" for body text on dark */
  --cmp-silver-dim:   #848A92;   /* secondary text */
  --cmp-grid:         rgba(58, 91, 255, 0.18); /* blueprint grid lines */
  --cmp-grid-strong:  rgba(58, 91, 255, 0.35);

  /* ---- HOMEPAGE BRIDGE PALETTE (keeps both worlds) ---- */

  /* ---- TYPE FAMILIES ---- */
  --font-cinzel:       'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-garamond:     'EB Garamond', 'Garamond', 'Times New Roman', serif;
  --font-vt323:        'VT323', 'Courier New', ui-monospace, monospace;
  --font-plex-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --font-grotesk:      'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* ---- TYPE SCALE (generous, for artist-portfolio feel) ---- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  17px;
  --fs-md:    20px;
  --fs-lg:    28px;
  /* top of the scale is fluid: caps match the old fixed sizes, so desktop
     is unchanged while phones get proportionally smaller display type */
  --fs-xl:    clamp(32px, 5vw, 40px);
  --fs-2xl:   clamp(44px, 8vw, 64px);
  --fs-3xl:   clamp(52px, 10vw, 96px);
  --fs-4xl:   clamp(72px, 14vw, 144px);

  /* ---- SPACING (4px base, up to epic for hero) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 192px;

  /* ---- RADII ----
     Oud uses sharp or slight — feels archival. Composer uses mostly 0 (drafting) but small for chips. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 9999px;

  /* ---- SHADOWS ----
     Oud: deep warm drop-shadow (candle/stage). Composer: flat + hairline + glow. */
  --shadow-oud-soft:   0 10px 30px rgba(0,0,0,0.55);
  --shadow-oud-deep:   0 24px 60px rgba(0,0,0,0.75), 0 2px 0 rgba(212,168,73,0.15);
  --shadow-oud-inset:  inset 0 0 0 1px rgba(212,168,73,0.25);
  --shadow-cmp-hairline: inset 0 0 0 1px var(--cmp-grid-strong);
  --shadow-cmp-glow:   0 0 0 1px var(--cmp-yellow), 0 0 24px rgba(242,210,59,0.4);

  /* ---- MOTION ---- */
  --ease-standard: cubic-bezier(.2,.7,.3,1);
  --ease-enter:    cubic-bezier(.16,1,.3,1);
  --ease-exit:     cubic-bezier(.7,0,.84,0);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
}

/* =============================================================
   THEME: OUD (black & gold, elegant, monumental)
   ============================================================= */
.theme-oud {
  --bg:          var(--oud-black);
  --bg-elev:     var(--oud-ink);
  --bg-elev-2:   var(--oud-charcoal);
  --fg:          var(--oud-parchment);
  --fg-muted:    var(--oud-gold-leaf);
  --fg-dim:      var(--oud-sand);
  --accent:      var(--oud-gold);
  --accent-hi:   var(--oud-gold-bright);
  --accent-lo:   var(--oud-gold-deep);
  --hairline:    rgba(212,168,73,0.28);
  --hairline-hi: rgba(212,168,73,0.55);

  --display-font: var(--font-cinzel);
  --body-font:    var(--font-garamond);
  --mono-font:    var(--font-plex-mono);

  background: var(--bg);
  color: var(--fg);
  font-family: var(--body-font);
}

/* =============================================================
   THEME: COMPOSER (silver/brown, mechanical)
   ============================================================= */
.theme-composer {
  --bg:          #0A1430;   /* Deep blueprint navy */
  --bg-elev:     #14203F;   /* Elevated navy panel */
  --bg-elev-2:   #1E2C50;   /* Lighter navy panel */
  --fg:          #C4C8CC;   /* Mechanical silver */
  --fg-bright:   #E8ECEF;   /* Bright silver/steel */
  --fg-muted:    #848A92;   /* Dim silver */
  --fg-dim:      #5E646C;   /* Dark steel */
  --accent:      #F2D23B;   /* Blueprint yellow (matches split-screen) */
  --accent-hi:   #F7E06A;   /* Bright yellow */
  --accent-lo:   #8A7A1E;   /* Deep yellow */
  --link:        #F7E06A;
  --hairline:    rgba(136, 168, 230, 0.18); /* Blueprint hairline */
  --hairline-hi: rgba(136, 168, 230, 0.38);
  --grid-line:   rgba(88, 120, 255, 0.12);

  --display-font: var(--font-vt323);
  --body-font:    var(--font-vt323); /* Retain VT323 for body too */
  --mono-font:    var(--font-plex-mono);

  background: var(--bg);
  color: var(--fg);
  font-family: var(--body-font);
}

/* Blueprint-paper variant for composer press/press kit */
.theme-composer.on-paper {
  --bg:      #E6E2DB;
  --bg-elev: #F2EFE9;
  --fg:      #2C2624;
  --fg-muted:#5E5855;
  --accent:  #8B6B43;
}


/* =============================================================
   SEMANTIC TYPOGRAPHY (uses theme's display/body/mono)
   ============================================================= */
h1, .h1 {
  font-family: var(--display-font);
  font-size: var(--fs-3xl);
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0;
}
h2, .h2 {
  font-family: var(--display-font);
  font-size: var(--fs-xl);
  line-height: 1.05;
  font-weight: 600;
  margin: 0;
}
h3, .h3 {
  font-family: var(--display-font);
  font-size: var(--fs-lg);
  line-height: 1.15;
  font-weight: 500;
  margin: 0;
}
h4, .h4 {
  font-family: var(--body-font);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0;
}
p, .p {
  font-family: var(--body-font);
  font-size: var(--fs-base);
  line-height: 1.55;
  margin: 0 0 1em 0;
}
.eyebrow {
  font-family: var(--mono-font);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
code, .code {
  font-family: var(--mono-font);
  font-size: 0.9em;
}

/* Oud-theme specific overrides — Cinzel feels right in ALL CAPS with wider spacing */
.theme-oud h1, .theme-oud h2, .theme-oud h3 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.theme-oud h1 { letter-spacing: 0.08em; }
.theme-oud .eyebrow { color: var(--accent-lo); }

/* Composer — VT323 is already pixel-capped, keep case as-is but uppercase headlines */
.theme-composer h1, .theme-composer h2 {
  color: var(--fg-bright);
  letter-spacing: 0.02em;
}
.theme-composer h1 { font-size: clamp(72px, 9vw, 160px); line-height: 0.9; }
.theme-composer .accent { color: var(--accent); }
.theme-composer .label  { font-family: var(--mono-font); text-transform: uppercase; letter-spacing: 0.15em; font-size: var(--fs-xs); color: var(--fg-muted); }

/* =============================================================
   ANIMATIONS & UTILITIES
   ============================================================= */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in-up {
  animation: fade-in-up var(--dur-slow) var(--ease-enter) both;
}

.animate-fade-in {
  animation: fade-in var(--dur-base) var(--ease-standard) both;
}

.hover-lift {
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-oud-deep);
}

.hover-glow {
  transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.hover-glow:hover {
  box-shadow: var(--shadow-cmp-glow);
  border-color: var(--cmp-yellow);
}

/* ---- Scroll reveal (wired up by scripts/fx.js) ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-enter), transform 700ms var(--ease-enter);
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-fx .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Composer terminal caret ---- */
@keyframes cmp-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cmp-caret { animation: cmp-caret-blink 1.06s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .cmp-caret { animation: none; }
}

@keyframes eq {
  0%, 100% { transform: scaleY(0.2); }
  50% { transform: scaleY(1); }
}

.eq-bar {
  width: 3px;
  background-color: var(--oud-black);
  animation: eq 0.8s ease-in-out infinite;
  transform-origin: bottom;
}
.eq-bar:nth-child(1) { animation-duration: 0.6s; }
.eq-bar:nth-child(2) { animation-duration: 0.9s; animation-delay: 0.2s; }
.eq-bar:nth-child(3) { animation-duration: 0.7s; animation-delay: 0.4s; }