/* Studio OS Handbook — brand skin for mkdocs-material.
   Ports the landing "seam scene" (deploy/landing/scene.css) as a fixed, animated
   backdrop, forces the Studio OS dark palette, and floats the content on a
   translucent panel so the moving background reads through without hurting text. */

:root {
  --so-bg: oklch(0.17 0.015 260);
  --so-card: oklch(0.21 0.018 260 / 0.86);
  --so-border: oklch(0.32 0.02 260);
  --so-text: oklch(0.93 0.01 250);
  --so-muted: oklch(0.68 0.02 250);
  --so-accent: oklch(0.74 0.11 162);
}

/* ── Brand palette over Material's tokens (dark, single scheme) ─────────── */
[data-md-color-scheme="slate"] {
  --md-hue: 260;
  --md-default-bg-color: transparent;                 /* let the scene show through */
  --md-default-fg-color: var(--so-text);
  --md-default-fg-color--light: var(--so-muted);
  --md-typeset-color: var(--so-text);
  --md-primary-fg-color: var(--so-accent);
  --md-accent-fg-color: var(--so-accent);
  --md-typeset-a-color: var(--so-accent);
}

/* ── The animated Studio OS scene, fixed behind everything ─────────────── */
body {
  background:
    radial-gradient(120% 90% at 12% -10%, oklch(0.46 0.08 250 / 0.32), transparent 46%),
    radial-gradient(120% 90% at 92% 4%, oklch(0.42 0.09 168 / 0.24), transparent 44%),
    var(--so-bg) !important;
}
/* Breathing glow pools */
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -3; pointer-events: none;
  background:
    radial-gradient(40% 36% at 22% 24%, oklch(0.48 0.09 168 / 0.42), transparent 64%),
    radial-gradient(44% 40% at 80% 26%, oklch(0.46 0.08 250 / 0.38), transparent 66%),
    radial-gradient(36% 34% at 60% 80%, oklch(0.46 0.09 190 / 0.32), transparent 62%);
  animation: so-bg-drift 30s ease-in-out infinite alternate; will-change: transform;
}
/* Faint studio grid */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 80%);
}

/* Animated seam field injected by overrides/main.html */
.so-seam-field {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  width: 100%; height: 100%; overflow: visible; opacity: 0.5;
}
.so-seam { transform-box: fill-box; transform-origin: center; will-change: transform; }
.so-seam-core { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.so-seam-glow { fill: none; stroke-width: 26; stroke-linecap: round; vector-effect: non-scaling-stroke;
                animation: so-glow-pulse 9s ease-in-out infinite alternate; }
.so-seam-a .so-seam-core { stroke: oklch(0.78 0.08 200 / 0.42); }
.so-seam-a .so-seam-glow { stroke: oklch(0.78 0.08 200 / 0.5); }
.so-seam-b .so-seam-core { stroke: oklch(0.74 0.11 162 / 0.42); }
.so-seam-b .so-seam-glow { stroke: oklch(0.74 0.11 162 / 0.5); animation-delay: -3s; }
.so-seam-c .so-seam-core { stroke: oklch(0.78 0.09 150 / 0.42); }
.so-seam-c .so-seam-glow { stroke: oklch(0.78 0.09 150 / 0.5); animation-delay: -6s; }
.so-seam-d .so-seam-core { stroke: oklch(0.74 0.08 250 / 0.42); }
.so-seam-d .so-seam-glow { stroke: oklch(0.74 0.08 250 / 0.5); animation-delay: -4.5s; }
.so-drift-a { animation: so-float-a 24s ease-in-out infinite alternate; }
.so-drift-b { animation: so-float-b 29s ease-in-out infinite alternate; }
.so-drift-c { animation: so-float-a 34s ease-in-out infinite alternate-reverse; }
.so-drift-d { animation: so-float-b 27s ease-in-out infinite alternate-reverse; }

@keyframes so-bg-drift {
  0%   { transform: translate3d(-2%, -1.5%, 0) scale(1.05) rotate(-0.6deg); }
  100% { transform: translate3d(2.5%, 2%, 0) scale(1.13) rotate(0.6deg); }
}
@keyframes so-glow-pulse { 0% { opacity: 0.4; } 100% { opacity: 0.9; } }
@keyframes so-float-a {
  0% { transform: translate3d(-16px,-13px,0) rotate(-0.3deg); }
  100% { transform: translate3d(28px,16px,0) rotate(0.34deg); }
}
@keyframes so-float-b {
  0% { transform: translate3d(20px,13px,0) rotate(0.22deg); }
  100% { transform: translate3d(-26px,-19px,0) rotate(-0.3deg); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, .so-seam-glow, .so-drift-a, .so-drift-b, .so-drift-c, .so-drift-d { animation: none; }
}

/* ── Keep chrome legible over the scene ────────────────────────────────── */
.md-header, .md-tabs { background-color: oklch(0.17 0.015 260 / 0.72); backdrop-filter: blur(8px); }

/* Search dropdown: --md-default-bg-color is transparent (so the scene shows
   through the page), but the results panel inherits it and page content bleeds
   through — give the whole search surface a solid, elevated background. */
.md-search__output {
  background-color: oklch(0.19 0.017 260);
  border: 1px solid var(--so-border);
  border-top: none;
  border-radius: 0 0 0.4rem 0.4rem;
  box-shadow: 0 24px 48px -18px oklch(0 0 0 / 0.75);
}
.md-search-result__meta {
  background-color: oklch(0.24 0.02 260);
  color: var(--so-muted);
}
.md-search-result__item { background-color: transparent; }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: oklch(0.24 0.02 260);
}

/* Float the readable content on a translucent Studio OS panel */
.md-main__inner { margin-top: 1.2rem; }
.md-content {
  background: var(--so-card);
  border: 1px solid var(--so-border);
  border-radius: 0.9rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 40px -12px oklch(0.6 0.12 190 / 0.22), 0 18px 34px -26px oklch(0 0 0 / 0.6);
  margin-bottom: 2rem;
}
.md-typeset { color: var(--so-text); }
.md-typeset h1, .md-typeset h2, .md-typeset h3 { color: oklch(0.96 0.01 250); }
.md-typeset table:not([class]) { background: oklch(0.19 0.017 260 / 0.6); }
.md-typeset table:not([class]) th { background: oklch(0.24 0.02 260 / 0.7); }
.md-sidebar { color: var(--so-muted); }

/* Code / fenced blocks a touch darker so they sit on the panel */
.md-typeset :not(pre) > code { background: oklch(0.26 0.02 260 / 0.6); }
.md-typeset pre > code { background: oklch(0.13 0.015 260 / 0.85); }

/* ── Agent avatars in the AI-team page ─────────────────────────────────── */
.agent-avatar {
  width: 60px; height: 60px; border-radius: 16px;
  margin: 0.2rem 1rem 0.6rem 0;
  box-shadow: 0 4px 10px -4px oklch(0 0 0 / 0.55);
}
.md-typeset h2 .agent-avatar { vertical-align: middle; margin-bottom: 0.2rem; }