/* NERVE — Glass mode (opt-in, non-destructive)
 * Activated by [data-nerve-glass="on"] on the app root.
 * Everything here is additive: with the attribute off, the canonical
 * Animal Studio × Linear surfaces render exactly as before.
 *
 * Idea: float the existing token-driven panels as frosted glass over a
 * slow-drifting aurora. Surfaces stay ~60% opaque + blurred so the dense
 * data underneath never loses legibility.
 */

/* ── 1. Ambient aurora backdrop ─────────────────────────────────────────── */
[data-nerve-glass="on"] {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 120% at 12% 0%,  var(--aur-a) 0%, transparent 42%),
    radial-gradient(120% 120% at 92% 8%,  var(--aur-b) 0%, transparent 46%),
    radial-gradient(140% 140% at 78% 100%, var(--aur-c) 0%, transparent 50%),
    var(--aur-base) !important;
}
[data-nerve-glass="on"]::before {
  content: "";
  position: fixed; inset: -20%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 30%, var(--aur-a) 0%, transparent 60%),
    radial-gradient(34% 40% at 80% 24%, var(--aur-b) 0%, transparent 62%),
    radial-gradient(46% 48% at 62% 86%, var(--aur-c) 0%, transparent 60%);
  filter: blur(28px) saturate(1.15);
  opacity: .9;
  animation: glassAurora 26s ease-in-out infinite alternate;
}
[data-nerve-glass="on"]::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--aur-grain) 1px, transparent 0);
  background-size: 4px 4px;
  opacity: .4; mix-blend-mode: overlay;
}

/* keep all real chrome above the aurora */
[data-nerve-glass="on"] > * { position: relative; z-index: 1; }

@keyframes glassAurora {
  0%   { transform: translate3d(0,0,0) scale(1);      }
  50%  { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1.03); }
}

/* aurora palettes */
[data-nerve-glass="on"][data-nerve-theme="light"] {
  --aur-base: #EEF0F4;
  --aur-a: rgba(238,60,38,.20);
  --aur-b: rgba(12,108,193,.18);
  --aur-c: rgba(255,176,60,.20);
  --aur-grain: rgba(13,13,13,.18);
  --glass-edge: rgba(255,255,255,.85);
  --glass-edge-soft: rgba(255,255,255,.5);
  --glass-sh: 0 8px 28px rgba(20,22,40,.12), 0 2px 8px rgba(20,22,40,.08);
  --glass-sh-hi: 0 16px 44px rgba(20,22,40,.18), 0 4px 12px rgba(20,22,40,.10);
}
[data-nerve-glass="on"][data-nerve-theme="dark"] {
  --aur-base: #07080C;
  --aur-a: rgba(238,60,38,.26);
  --aur-b: rgba(58,110,255,.24);
  --aur-c: rgba(120,70,220,.24);
  --aur-grain: rgba(255,255,255,.10);
  --glass-edge: rgba(255,255,255,.18);
  --glass-edge-soft: rgba(255,255,255,.08);
  --glass-sh: 0 8px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.4);
  --glass-sh-hi: 0 18px 48px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.45);
}

/* ── 2. Token retint → translucent surfaces ─────────────────────────────── */
[data-nerve-glass="on"][data-nerve-theme="light"] {
  --surface:   rgba(255,255,255,.60);
  --surface-2: rgba(255,255,255,.42);
  --bg-alt:    rgba(255,255,255,.30);
  --paper:     rgba(255,255,255,.66);
  --border:    rgba(255,255,255,.6);
  --border-2:  rgba(255,255,255,.7);
  --rail-bg:   rgba(16,16,20,.46);
}
[data-nerve-glass="on"][data-nerve-theme="dark"] {
  --surface:   rgba(26,29,42,.52);
  --surface-2: rgba(40,44,62,.5);
  --bg-alt:    rgba(16,18,28,.4);
  --paper:     rgba(28,31,44,.58);
  --border:    rgba(255,255,255,.1);
  --border-2:  rgba(255,255,255,.16);
  --rail-bg:   rgba(7,8,14,.5);
}

/* the per-page .nerve wrappers paint var(--bg) solid — clear it so aurora shows */
[data-nerve-glass="on"] .nerve,
[data-nerve-glass="on"] main { background: transparent !important; }

/* ── 3. Frost the surfaces ──────────────────────────────────────────────── */
[data-nerve-glass="on"] .card,
[data-nerve-glass="on"] .card-strong,
[data-nerve-glass="on"] .panel {
  border-radius: 12px;
  border: 1px solid var(--glass-edge-soft);
  background: var(--surface);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--glass-sh);
  background-clip: padding-box;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
/* glass edge highlight */
[data-nerve-glass="on"] .card,
[data-nerve-glass="on"] .panel { position: relative; }
[data-nerve-glass="on"] .card::after,
[data-nerve-glass="on"] .panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border-top: 1px solid var(--glass-edge);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 38%);
  mask-image: linear-gradient(to bottom, #000 0, transparent 38%);
  opacity: .8;
}

/* hover lift for interactive cards */
[data-nerve-glass="on"] .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-sh-hi);
  border-color: var(--glass-edge);
}

/* buttons, tags, chips → frosted */
[data-nerve-glass="on"] .btn {
  border-radius: 9px;
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
}
[data-nerve-glass="on"] .btn--primary,
[data-nerve-glass="on"] .btn--dark { backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-nerve-glass="on"] .tag,
[data-nerve-glass="on"] .kbd-chip {
  border-radius: 7px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ── 4. Frost the persistent chrome (rail / top nav / cmdk) ─────────────── */
[data-nerve-glass="on"] aside,
[data-nerve-glass="on"] header,
[data-nerve-glass="on"] nav[role="navigation"] {
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border-right-color: var(--glass-edge-soft) !important;
}
[data-nerve-glass="on"] aside { box-shadow: var(--glass-sh); }

/* skeletons translucent so loading state still feels like glass */
[data-nerve-glass="on"] .skel {
  border-radius: 12px;
  background: var(--surface-2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ── 5. Entrance motion ─────────────────────────────────────────────────── */
/* Entrance "settle": glass focuses in. Deliberately animates only transform +
 * blur — never opacity to 0 — so a throttled/backgrounded tab that holds the
 * start frame shows a slightly-soft card, never a blank one. */
@media (prefers-reduced-motion: no-preference) {
  [data-nerve-glass="on"] .card,
  [data-nerve-glass="on"] .panel {
    animation: glassRise .55s cubic-bezier(.2,.7,.2,1) both;
  }
  /* gentle stagger across a KPI/grid row */
  [data-nerve-glass="on"] .card:nth-child(1) { animation-delay: .02s; }
  [data-nerve-glass="on"] .card:nth-child(2) { animation-delay: .06s; }
  [data-nerve-glass="on"] .card:nth-child(3) { animation-delay: .10s; }
  [data-nerve-glass="on"] .card:nth-child(4) { animation-delay: .14s; }
  [data-nerve-glass="on"] .card:nth-child(5) { animation-delay: .18s; }
}
@keyframes glassRise {
  from { transform: translateY(10px) scale(.994); }
  to   { transform: translateY(0) scale(1); }
}

/* reduced motion: hold aurora still */
@media (prefers-reduced-motion: reduce) {
  [data-nerve-glass="on"]::before { animation: none; }
}