/* ============================================================
 * Maachu Labs — Tweak variants
 * Three expressive axes:
 *   .signal-{cobalt|solar|terminal|mono}   accent system
 *   .voice-{editorial|bracketed|caps}      italic-em treatment
 *   .pulse-{calm|active|hyper}             motion density
 * ============================================================ */

/* ──────────────────────────────────────────────
 * SIGNAL — reskin the accent system
 * ────────────────────────────────────────────── */

/* Cobalt is the default — defined in styles.css. */

body.signal-solar {
  --blue:        oklch(0.74 0.18 45);
  --blue-bright: oklch(0.82 0.18 60);
  --violet:      oklch(0.70 0.22 22);
  --teal:        oklch(0.82 0.14 78);
  --line:        oklch(0.48 0.05 50 / 0.40);
  --line-soft:   oklch(0.48 0.05 50 / 0.18);
  --bg:          oklch(0.10 0.020 40);
  --bg-2:        oklch(0.12 0.024 40);
  --surface:     oklch(0.13 0.024 40);
  --surface-2:   oklch(0.16 0.030 40);
}
body.signal-solar ::selection { background: oklch(0.74 0.18 45 / 0.40); }
body.signal-solar .hero-flashlight {
  background: radial-gradient(360px circle at var(--mx) var(--my),
    oklch(0.72 0.18 50 / 0.26),
    oklch(0.62 0.18 25 / 0.12) 35%,
    transparent 65%);
}
body.signal-solar .hero-grid {
  background-image:
    linear-gradient(to right, oklch(0.65 0.12 50 / 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.65 0.12 50 / 0.35) 1px, transparent 1px);
}
body.signal-solar .cta::before {
  background: radial-gradient(ellipse 70% 50% at 50% 50%, oklch(0.50 0.18 45 / 0.30), transparent 70%);
}

body.signal-terminal {
  --blue:        oklch(0.82 0.20 145);
  --blue-bright: oklch(0.88 0.22 140);
  --violet:      oklch(0.84 0.18 95);
  --teal:        oklch(0.82 0.14 165);
  --line:        oklch(0.45 0.06 145 / 0.40);
  --line-soft:   oklch(0.45 0.06 145 / 0.18);
  --bg:          oklch(0.08 0.018 150);
  --bg-2:        oklch(0.10 0.022 150);
  --surface:     oklch(0.11 0.022 150);
  --surface-2:   oklch(0.14 0.026 150);
}
body.signal-terminal ::selection { background: oklch(0.82 0.20 145 / 0.35); color: #001a07; }
body.signal-terminal .hero-flashlight {
  background: radial-gradient(360px circle at var(--mx) var(--my),
    oklch(0.78 0.20 145 / 0.18),
    oklch(0.78 0.16 95 / 0.08) 35%,
    transparent 65%);
}
body.signal-terminal .hero-grid {
  background-image:
    linear-gradient(to right, oklch(0.65 0.12 145 / 0.30) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.65 0.12 145 / 0.30) 1px, transparent 1px);
}
body.signal-terminal .cta::before {
  background: radial-gradient(ellipse 70% 50% at 50% 50%, oklch(0.45 0.18 145 / 0.30), transparent 70%);
}
/* terminal aesthetic: tighter mono, slight scanline cast on bento + chat */
body.signal-terminal .chat,
body.signal-terminal .audit-panel,
body.signal-terminal .audit-report,
body.signal-terminal .suggester {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    oklch(0.85 0.22 145 / 0.02) 2px,
    oklch(0.85 0.22 145 / 0.02) 3px);
}

body.signal-mono {
  --blue:        oklch(0.86 0 0);
  --blue-bright: oklch(0.95 0 0);
  --violet:      oklch(0.75 0 0);
  --teal:        oklch(0.82 0 0);
  --line:        oklch(0.55 0 0 / 0.40);
  --line-soft:   oklch(0.55 0 0 / 0.18);
  --bg:          oklch(0.07 0 0);
  --bg-2:        oklch(0.09 0 0);
  --surface:     oklch(0.11 0 0);
  --surface-2:   oklch(0.15 0 0);
}
body.signal-mono ::selection { background: oklch(0.90 0 0 / 0.30); color: #fff; }
body.signal-mono .hero-flashlight {
  background: radial-gradient(360px circle at var(--mx) var(--my),
    oklch(0.95 0 0 / 0.10),
    oklch(0.95 0 0 / 0.04) 35%,
    transparent 65%);
  mix-blend-mode: screen;
}
body.signal-mono .hero-grid {
  background-image:
    linear-gradient(to right, oklch(0.70 0 0 / 0.30) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.70 0 0 / 0.30) 1px, transparent 1px);
}
body.signal-mono .cta::before {
  background: radial-gradient(ellipse 70% 50% at 50% 50%, oklch(0.35 0 0 / 0.50), transparent 70%);
}

/* All-signal: rewrite hardcoded oklch refs to use the accent vars so swaps cascade */
.signal-solar .hero h1 em,
.signal-terminal .hero h1 em,
.signal-mono .hero h1 em,
.signal-solar .cta h2 em,
.signal-terminal .cta h2 em,
.signal-mono .cta h2 em {
  background-image: linear-gradient(120deg, var(--blue-bright), var(--violet));
  background-size: 220% 100%;
}
.signal-solar .price.featured,
.signal-terminal .price.featured,
.signal-mono .price.featured {
  border-color: var(--blue);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--blue) 18%, oklch(0.18 0 0)),
    color-mix(in oklab, var(--blue)  8%, oklch(0.15 0 0)));
  box-shadow: 0 30px 80px -30px color-mix(in oklab, var(--blue) 55%, transparent);
}
.signal-solar .prob-back,
.signal-terminal .prob-back,
.signal-mono .prob-back {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--blue) 28%, oklch(0.20 0 0)),
    color-mix(in oklab, var(--violet) 22%, oklch(0.16 0 0)));
  border-color: var(--blue);
}
/* Hard-coded blue cues across the page → re-tint to the active signal */
.signal-solar :is(.suggester-head .dot, .report-status .dot, .chat-head .live .dot, .audit-steps .pip.active),
.signal-terminal :is(.suggester-head .dot, .report-status .dot, .chat-head .live .dot, .audit-steps .pip.active),
.signal-mono :is(.suggester-head .dot, .report-status .dot, .chat-head .live .dot, .audit-steps .pip.active) {
  background: var(--blue-bright);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--blue) 20%, transparent);
}

/* ──────────────────────────────────────────────
 * VOICE — italic em treatment
 * The page uses <em> inside headings & a few paragraphs as its key character
 * accent. Re-skin every one in lockstep.
 * ────────────────────────────────────────────── */

/* All <em> targets in the page */
.voice-bracketed :is(h1, h2, h3, h4) em,
.voice-bracketed .about-lede em,
.voice-bracketed .test p em {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.78em;
  text-transform: uppercase;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  color: var(--blue-bright) !important;
  padding: 0.06em 0.4em;
  border: 1px solid color-mix(in oklab, var(--blue) 45%, transparent);
  border-radius: 6px;
  vertical-align: 0.12em;
  background-color: color-mix(in oklab, var(--blue) 14%, transparent) !important;
}
.voice-bracketed .hero h1 em,
.voice-bracketed .cta h2 em {
  font-size: 0.55em;
  vertical-align: 0.32em;
}

.voice-caps :is(h1, h2, h3, h4) em,
.voice-caps .about-lede em,
.voice-caps .test p em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  color: var(--blue-bright) !important;
  font-size: 0.78em;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--blue) 55%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
.voice-caps .hero h1 em,
.voice-caps .cta h2 em {
  font-size: 0.55em;
  vertical-align: 0.22em;
  background: linear-gradient(120deg, var(--blue-bright), var(--violet)) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  text-decoration: none;
}

/* Editorial = default; no overrides */

/* ──────────────────────────────────────────────
 * PULSE — motion density
 * ────────────────────────────────────────────── */

/* CALM — pause the room */
body.pulse-calm .logo-track,
body.pulse-calm .viz-pulse circle,
body.pulse-calm .viz-flow line,
body.pulse-calm .suggester-head .dot,
body.pulse-calm .report-status .dot,
body.pulse-calm .chat-head .live .dot,
body.pulse-calm .hero-inner > div:first-child,
body.pulse-calm .suggester,
body.pulse-calm .hero h1 em,
body.pulse-calm .flow-edge.live,
body.pulse-calm .msg.ai .typing-cursor,
body.pulse-calm .thinking .bar,
body.pulse-calm .sugg-chip {
  animation-play-state: paused !important;
}
body.pulse-calm svg animate { display: none; }
body.pulse-calm .hero-flashlight { opacity: 0.45; }
body.pulse-calm .hero-grid { opacity: 0.6; }

/* ACTIVE = default */

/* HYPER — everything faster, accents glow + flicker */
body.pulse-hyper .logo-track          { animation-duration: 18s; }
body.pulse-hyper .suggester-head .dot,
body.pulse-hyper .report-status .dot,
body.pulse-hyper .chat-head .live .dot { animation-duration: 1.1s; }
body.pulse-hyper .viz-pulse circle    { animation-duration: 1.2s; }
body.pulse-hyper .viz-flow line       { animation-duration: 0.7s; }
body.pulse-hyper .hero h1 em          { animation-duration: 2.8s; }
body.pulse-hyper .hero-inner > div:first-child { animation-duration: 5s; }
body.pulse-hyper .suggester           { animation-duration: 7s; }
body.pulse-hyper .flow-edge.live      { animation-duration: 0.9s; }
body.pulse-hyper .hero-flashlight     { opacity: 1.4; }

body.pulse-hyper :is(h2.section-title, h3, h4) em {
  filter: drop-shadow(0 0 14px color-mix(in oklab, var(--blue) 70%, transparent));
  animation: emHyperFlicker 2.6s ease-in-out infinite;
}
body.pulse-hyper .hero h1 em {
  filter: drop-shadow(0 0 22px color-mix(in oklab, var(--violet) 70%, transparent));
}
@keyframes emHyperFlicker {
  0%, 100% { opacity: 1; }
  47%      { opacity: 0.78; }
  50%      { opacity: 1; }
  53%      { opacity: 0.85; }
}

/* Hyper pulse halos on the live dots */
body.pulse-hyper :is(.suggester-head .dot, .report-status .dot, .chat-head .live .dot) {
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--blue) 22%, transparent),
    0 0 18px color-mix(in oklab, var(--blue) 65%, transparent);
}

/* Hyper draws extra scan across cells on hover-state for tactility */
body.pulse-hyper .cell::before {
  content: '';
  position: absolute;
  left: -40%;
  top: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--blue) 14%, transparent),
    transparent);
  animation: cellScan 6s linear infinite;
  pointer-events: none;
  z-index: 1;
}
body.pulse-hyper .cell:nth-child(2)::before { animation-delay: -1.5s; }
body.pulse-hyper .cell:nth-child(3)::before { animation-delay: -3s; }
body.pulse-hyper .cell:nth-child(4)::before { animation-delay: -4.5s; }
body.pulse-hyper .cell:nth-child(5)::before { animation-delay: -0.7s; }
body.pulse-hyper .cell:nth-child(6)::before { animation-delay: -2.4s; }
body.pulse-hyper .cell:nth-child(7)::before { animation-delay: -3.8s; }
body.pulse-hyper .cell:nth-child(8)::before { animation-delay: -5.2s; }
@keyframes cellScan {
  0%   { transform: translateX(0); }
  100% { transform: translateX(600%); }
}

/* Calm — flatten the bento border-glow shimmer too */
body.pulse-calm .cell::after,
body.pulse-calm .suggester::after {
  background: linear-gradient(135deg,
    oklch(0.80 0.01 250 / 0.20),
    oklch(0.55 0.02 250 / 0.10) 60%,
    transparent 100%);
}