/* ============================================================
   moodalone.com — site shell
   Built on top of ../colors_and_type.css.
   Adds: theme switch (light = paper / dark = velvet), per-album
   pigment chrome, and scroll-driven section atmospheres.
   ============================================================ */
@import url("./colors_and_type.css");

/* --- Theme: LIGHT (paper) — the default --------------------------------- */
:root,
[data-theme="light"] {
  --bg:            var(--paper);
  --bg-recess:     var(--paper-soft);
  --bg-deep:       var(--paper-deep);
  --bg-inv:        var(--ink-velvet);   /* opposite atmosphere for accents */

  --fg:            var(--ink);
  --fg-soft:       var(--ink-charcoal);
  --fg-mute:       var(--silver-tarnish);
  --fg-faint:      var(--silver-deep);

  --rule-fg:       rgba(14,13,12,0.18);
  --rule-strong-fg:rgba(14,13,12,0.36);

  --grain-color:   rgba(14,13,12,0.045);
  --damask-color:  rgba(14,13,12,0.04);

  --metallic:      var(--brand-deep);
  --metallic-soft: var(--brand);

  /* Brand accent (resolved from base tokens) — usable directly in JSX.   */
  --accent:        var(--brand);
  --accent-deep:   var(--brand-deep);
  --accent-warm:   var(--brand-warm);
  --accent-veil:   var(--brand-veil);
}

/* --- Theme: DARK (velvet) ----------------------------------------------- */
[data-theme="dark"] {
  --bg:            var(--ink-velvet);
  --bg-recess:     var(--ink);
  --bg-deep:       var(--ink-soft);
  --bg-inv:        var(--paper);

  --fg:            var(--paper);
  --fg-soft:       var(--silver-bright);
  --fg-mute:       var(--silver);
  --fg-faint:      var(--silver-deep);

  --rule-fg:       rgba(216,210,196,0.22);
  --rule-strong-fg:rgba(216,210,196,0.46);

  --grain-color:   rgba(216,210,196,0.04);
  --damask-color:  rgba(216,210,196,0.035);

  --metallic:      var(--brand-warm);
  --metallic-soft: var(--brand);

  --accent:        var(--brand-warm);
  --accent-deep:   var(--brand);
  --accent-warm:   var(--brand-veil);
  --accent-veil:   var(--brand-deep);

  /* Flip the base-CSS semantic vars too. These are read by the universal
     h1/p/em/.label rules in ../colors_and_type.css — without these, every
     headline inherits --ink and goes invisible on velvet. */
  --fg-1: var(--paper);
  --fg-2: var(--silver-bright);
  --fg-3: var(--silver);
  --fg-4: var(--silver-deep);
  --rule:        rgba(216,210,196,0.22);
  --rule-strong: rgba(216,210,196,0.46);
  --bg-page:     var(--ink-velvet);
  --bg-recess-base: var(--ink);
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; padding: 0; min-height: 100vh; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  transition: background var(--dur-slow) var(--ease-curtain),
              color var(--dur-slow) var(--ease-curtain);
}

/* Grain — always on; color flips with theme. */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background-image:
    radial-gradient(var(--grain-color) 1px, transparent 1px),
    radial-gradient(var(--grain-color) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  opacity: 0.85;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: 0.5; }

/* Damask — for atmospheric blocks (hero, episode separators). */
.damask {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  var(--damask-color) 0 6px, transparent 6px 14px),
    repeating-linear-gradient(-45deg, var(--damask-color) 0 6px, transparent 6px 14px);
}

/* Page container */
.page {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
.prose { max-width: var(--max-prose); }

/* The button vocabulary (sharp rectangles) ------------------------------- */
.btn {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 0;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-paper),
              color var(--dur-base) var(--ease-paper),
              transform var(--dur-fast) var(--ease-paper),
              border-color var(--dur-base) var(--ease-paper);
}
.btn:active { transform: translateY(1px); }
.btn--fg { background: var(--fg); color: var(--bg); }
.btn--fg:hover { background: var(--fg-soft); }
.btn--bg { background: var(--bg); color: var(--fg); border: 1px solid var(--fg); }
.btn--bg:hover { background: var(--fg); color: var(--bg); }
.btn--outline {
  background: transparent; color: var(--fg);
  border: 1px solid var(--rule-strong-fg);
}
.btn--outline:hover { border-color: var(--fg); }
.btn--ghost {
  background: transparent; color: var(--fg-mute); padding: 12px 0;
}
.btn--ghost:hover { color: var(--fg); }

/* Catalogue stamp — printer's mark */
.catstamp {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.catstamp__dot { width: 4px; height: 4px; background: currentColor; border-radius: 50%; opacity: 0.5; }

/* Reveal-on-scroll utility */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1100ms var(--ease-curtain),
              transform 1100ms var(--ease-curtain);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal--delay-1 { transition-delay: 120ms; }
.reveal--delay-2 { transition-delay: 240ms; }
.reveal--delay-3 { transition-delay: 360ms; }
.reveal--delay-4 { transition-delay: 480ms; }

/* Hairline rule */
.hr { height: 1px; background: var(--rule-fg); border: 0; margin: 0; }

/* Atmospheric per-episode pigment layer — sits behind content,
   crossfades on scroll. */
.atmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  transition: background var(--dur-curtain) var(--ease-curtain);
}

/* Sticky bottom-fixed SoundCloud rail */
.sc-rail {
  position: sticky; bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--rule-fg);
  padding: 12px 0;
  z-index: 30;
}

/* Episode anchor offset so sticky nav doesn't cover headings */
.anchor { scroll-margin-top: 96px; }

/* Hide scrollbar on inner horizontal scroller (used in store) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ============================================================
   MOBILE & TABLET ADJUSTMENTS
   Most React components also branch on useMediaQuery() to swap
   their grid templates at < 768px. The rules below cover global
   chrome — type scaling, padding, hover-to-tap, touch targets.
   ============================================================ */

@media (max-width: 1023px) {
  /* Tablet: tighten gutter slightly */
  :root { --gutter: clamp(20px, 3.5vw, 40px); }
}

@media (max-width: 767px) {
  /* Mobile: gutter relaxes again so type breathes against the edge */
  :root { --gutter: 20px; }

  /* Sections lose half their vertical drama on mobile */
  .section          { padding: var(--s-7) 0; }
  .section--tight   { padding: var(--s-6) 0; }
  .section--chapter { padding: var(--s-9) 0; }

  /* Catstamps wrap so they don't push off the edge */
  .catstamp { flex-wrap: wrap; row-gap: 6px; }

  /* The buttons in the system are sized for desktop pointer use; bump
     hit targets to the WCAG-friendly floor without changing their look. */
  .btn { padding: 16px 22px; min-height: 48px; }

  /* Anchor scroll-offset reduced because mobile nav is shorter */
  .anchor { scroll-margin-top: 72px; }

  /* The fixed chapter-rail on the right of Project should disappear at
     mobile widths — there's no longer room for it. */
  .chapter-rail-fixed { display: none !important; }

  /* Hide the page-level grain on mobile to save GPU on long scrolls */
  .grain { opacity: 0.5; }

  /* Long-form prose tightens slightly so 17px lines don't run too wide */
  .prose { max-width: 100%; }

  /* Reveal animation distance halves on mobile so the page doesn't
     feel laggy on cheap Android scrolls */
  .reveal { transform: translateY(14px); }
}

/* When hover is unsupported (touch devices), suppress brand hover gimmicks
   that depend on it (link underline pulse, button hover swaps). */
@media (hover: none) {
  a:hover { text-decoration-color: var(--rule-strong-fg); }
}

/* ============================================================
   BRAND THREAD — the warm-brown signature pulled from the
   artist portrait. Replaces the previous silver/gold ornaments.
   ============================================================ */

/* Selection — paper warms, dark velvet warms too.                         */
::selection { background: var(--brand-deep); color: var(--paper); }
[data-theme="dark"] ::selection { background: var(--brand-warm); color: var(--ink); }

/* Anchor underline picks up the warm brand color.                         */
[data-theme="light"] a {
  text-decoration-color: color-mix(in oklab, var(--brand-deep) 70%, transparent);
}
[data-theme="light"] a:hover { text-decoration-color: var(--brand-deep); }
[data-theme="dark"] a {
  text-decoration-color: color-mix(in oklab, var(--brand-warm) 70%, transparent);
}
[data-theme="dark"] a:hover { text-decoration-color: var(--brand-warm); }

/* The Mood Alone wordmark italic — used in catstamps, hero eyebrow.       */
.brand-mark {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brand-deep);
  letter-spacing: -0.005em;
}
[data-theme="dark"] .brand-mark { color: var(--brand-warm); }

/* Brand-stitched divider — a fine warm line with the brand at its centre. */
.brand-stitch {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--brand-deep);
}
[data-theme="dark"] .brand-stitch { color: var(--brand-warm); }
.brand-stitch::before,
.brand-stitch::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* ============================================================
   CHAPTER ATMOSPHERE — episode sections adopt their chapter
   accent without rewriting every component. Each section
   sets its own --chapter-* tokens via the .chapter-*  class
   from colors_and_type.css; we wire those into local accents.
   ============================================================ */

[data-episode-section] .catstamp__dot { background: var(--chapter-base); opacity: 0.85; }
[data-episode-section] .album-tagline { color: var(--chapter-base); }
[data-episode-section] .ep-rule { background: var(--chapter-base); opacity: 0.5; }

/* Subtle warm tint behind the artwork — a 1px frame in the chapter color. */
.album-frame {
  position: relative;
  isolation: isolate;
}
.album-frame::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid var(--chapter-base);
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
}