/* =============================================================
   Site-wide palette themes. Each page already defines :root with
   --bg / --ink / --amber / --rose / --leaf. We override those via
   html[data-theme="<name>"] selectors so the entire site re-skins
   from a single attribute swap. Higher specificity than :root, so
   load order doesn't matter.

   Slate is the default — identical to the existing :root values.
   Picking any other theme swaps the whole vibe:
     • Noir     — midnight steel blue, grading-suite quiet
     • Graphite — editorial monochrome w/ a muted terracotta accent
     • Ember    — glowing coals + a slow firelight flicker overlay
     • Neonoir  — rainy LA, muted neon
   ============================================================= */

/* SLATE — the current site palette (also the default with no attr) */
html[data-theme="slate"] {
  --bg: #12100c; --bg-2: #1a1612; --bg-3: #221c16;
  --line: #2e2620; --line-2: #2e2620;
  --ink: #f1e6cd; --ink-2: #c7b893; --ink-3: #8a7a5e; --ink-4: #5d4f3a;
  --amber: #f5b042; --rose: #e8589a; --leaf: #8caf3a;
}

/* NOIR — neutral charcoal with a steel-blue primary and a vivid warm
   complement. Bg desaturated toward true gunmetal (less marine, more
   "graded midnight"); ink lifted for stronger contrast against the bg;
   rose pushed from quiet rust to a coral that genuinely pops as the
   complementary color. */
html[data-theme="noir"] {
  --bg: #0a0b0d; --bg-2: #14161a; --bg-3: #1c1f25;
  --line: #2a2e36; --line-2: #1e2128;
  --ink: #f0f3f8; --ink-2: #b4bbc8; --ink-3: #7d8593; --ink-4: #4d5460;
  --amber: #6a9dc7;  /* steel blue — primary */
  --rose:  #ff8a52;  /* vivid coral — pops as the warm complement */
  --leaf:  #8995a3;  /* slate neutral */
}

/* GRAPHITE — editorial monochrome. Neutral charcoal greys + a single
   muted terracotta accent (toned down from the previous loud red so it
   reads "considered editorial" instead of "stop sign"). */
html[data-theme="graphite"] {
  --bg: #131313; --bg-2: #1c1c1c; --bg-3: #262626;
  --line: #353535; --line-2: #292929;
  --ink: #e8e8e8; --ink-2: #b0b0b0; --ink-3: #808080; --ink-4: #525252;
  --amber: #c75c46;  /* muted terracotta — quieter than razor red */
  --rose:  #c75c46;
  --leaf:  #808080;
}

/* EMBER — real fire, glowing coals. Saturated ember orange + deep
   coal red on charred near-black with a warm red undertone. Copper
   tertiary instead of yellow — closer to actual burning wood. */
html[data-theme="ember"] {
  --bg: #0a0503; --bg-2: #14080a; --bg-3: #1f0e10;
  --line: #3a1d18; --line-2: #28140e;
  --ink: #f5dcc4; --ink-2: #c89880; --ink-3: #87604a; --ink-4: #4f3528;
  --amber: #ff4818;  /* hot ember orange — saturated, real fire */
  --rose:  #c41818;  /* deep coal red */
  --leaf:  #d97a2e;  /* copper glow — replaces the fire-yellow */
}

/* EMBER FLICKER — a faint warm radial gradient pinned to the viewport
   that softly breathes opacity at firelight cadence (~7s loop, prime-ish
   number multipliers stop the rhythm from feeling metronome-y). Two
   layers at different speeds + offsets give the flame an irregular,
   organic pulse rather than a clean sine. mix-blend-mode: screen so it
   ADDS warmth to whatever's under it instead of dimming the content. */
html[data-theme="ember"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 80% 60% at 18% 100%, rgba(255, 96, 36, 0.08),  transparent 65%),
    radial-gradient(ellipse 90% 55% at 82% 102%, rgba(255, 132, 48, 0.06), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(196, 24, 24, 0.05),  transparent 75%);
  animation: emberFlicker 7.3s ease-in-out infinite;
}
@keyframes emberFlicker {
  0%   { opacity: 0.65; transform: translateY(0)    scaleY(1); }
  12%  { opacity: 0.95; transform: translateY(-2px) scaleY(1.02); }
  27%  { opacity: 0.55; transform: translateY(1px)  scaleY(0.99); }
  41%  { opacity: 0.85; transform: translateY(-1px) scaleY(1.015); }
  58%  { opacity: 0.7;  transform: translateY(2px)  scaleY(0.98); }
  73%  { opacity: 1;    transform: translateY(-3px) scaleY(1.03); }
  88%  { opacity: 0.6;  transform: translateY(0)    scaleY(1); }
  100% { opacity: 0.65; transform: translateY(0)    scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="ember"] body::after { animation: none; opacity: 0.7; transform: none; }
}

/* NEONOIR — rainy LA at 3am, neon through fog. Muted dusty pink and
   steel-cyan, dialed back from "billboard" to "wet sidewalk reflection".
   Closer to Drive (2011) than vaporwave. */
html[data-theme="neonoir"] {
  --bg: #0a0814; --bg-2: #11101e; --bg-3: #1a1828;
  --line: #2a2842; --line-2: #1d1c32;
  --ink: #e2dfee; --ink-2: #a8a3c0; --ink-3: #75708e; --ink-4: #47435f;
  --amber: #d957a8;  /* dusty rose-mauve — soft neon */
  --rose:  #5fa8c4;  /* muted steel-cyan, not electric */
  --leaf:  #d4a25c;  /* muted warm amber */
}

/* =============================================================
   Always-green "Available Now" status indicator. Locked across all
   themes so it always reads as a live/active signal (the bottom-left
   nav status + the hero "Accepting Work" badge on home).
   ============================================================= */
.nav-bottom .status { color: #22c55e !important; }
.nav-bottom .dot    { background: #22c55e !important; }
.hero-bar .badge-status     { color: #22c55e !important; background: rgba(34,197,94,0.12) !important; border-color: rgba(34,197,94,0.45) !important; }
.hero-bar .badge-status .d  { background: #22c55e !important; }

/* =============================================================
   Theme switcher UI — injected by theme.js into .nav and pinned
   at the bottom of the left nav. Each palette is a labeled row
   (color disc + name) so the user can read what they're picking
   instead of guessing from tiny gradient dots.
   ============================================================= */
.theme-switcher {
  margin-top: auto;
  padding: 14px 14px 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.theme-switcher .ts-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ink-4);
  font-family: 'SF Mono', Menlo, monospace;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2px;
}
.theme-switcher .ts-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-switcher .ts-sw {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background .15s, border-color .15s;
}
.theme-switcher .ts-sw .ts-dot {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.22);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.45);
  transition: transform .15s, box-shadow .15s;
}
.theme-switcher .ts-sw:hover .ts-dot { transform: scale(1.12) rotate(-4deg); }
.theme-switcher .ts-sw .ts-text {
  font-size: 11px;
  color: var(--ink-2);
  font-family: 'SF Mono', Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
}
.theme-switcher .ts-sw:hover { background: rgba(255,255,255,0.04); }
.theme-switcher .ts-sw:hover .ts-text { color: var(--ink); }
.theme-switcher .ts-sw.active { background: rgba(255,255,255,0.06); border-color: var(--amber); }
.theme-switcher .ts-sw.active .ts-text { color: var(--amber); }
.theme-switcher .ts-sw.active .ts-dot { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(245,176,66,0.18); }
/* Each dot shows a split-gradient preview of its palette so users can
   compare looks at a glance — left half = primary accent, right = complement */
.theme-switcher .ts-sw[data-theme="slate"]    .ts-dot { background: linear-gradient(135deg, #f5b042 0%, #f5b042 50%, #e8589a 50%, #e8589a 100%); }
.theme-switcher .ts-sw[data-theme="noir"]     .ts-dot { background: linear-gradient(135deg, #6a9dc7 0%, #6a9dc7 50%, #ff8a52 50%, #ff8a52 100%); }
.theme-switcher .ts-sw[data-theme="graphite"] .ts-dot { background: linear-gradient(135deg, #c75c46 0%, #c75c46 50%, #808080 50%, #808080 100%); }
.theme-switcher .ts-sw[data-theme="ember"]    .ts-dot { background: linear-gradient(135deg, #ff4818 0%, #ff4818 50%, #c41818 50%, #c41818 100%); }
.theme-switcher .ts-sw[data-theme="neonoir"]  .ts-dot { background: linear-gradient(135deg, #d957a8 0%, #d957a8 50%, #5fa8c4 50%, #5fa8c4 100%); }

/* =============================================================
   MOBILE (touch) CRASH MITIGATION
   These long pages paint a full-screen fixed SVG grain overlay (feTurbulence)
   blended over the whole document, plus several backdrop-blur panels. On a tall
   page that compositing exceeds mobile Safari's memory and the tab crashes
   ("a problem repeatedly occurred"). The effects are purely decorative, so we
   strip them on touch devices.

   Keyed on `pointer: coarse` (not a max-width breakpoint) on purpose: the pages
   pin viewport `width=1280`, so width-based media queries never fire on phones.
   pointer:coarse matches touchscreens (phone/tablet) regardless of that width,
   and never matches a desktop mouse — so desktop is completely untouched.
   ============================================================= */
@media (pointer: coarse) {
  /* The expensive full-screen grain / noise pseudo-element overlays */
  body::before,
  .poster::before,
  .poster::after { display: none !important; }

  /* The ember theme's animated, blended full-screen firelight overlay */
  html[data-theme="ember"] body::after {
    animation: none !important;
    mix-blend-mode: normal !important;
    opacity: 0.25 !important;
  }

  /* Neutralize every blend mode and backdrop blur (incl. pseudo-elements) —
     these force whole-page recomposition that mobile Safari can't afford. */
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mix-blend-mode: normal !important;
  }
}