/* Nova UX — Sovereign CSS
   Anchor Positioning · @property · interpolate-size · style queries
   @starting-style · wide-gamut color · variable color fonts
*/

/* ── @property typed custom properties ──────────────────────────────────────── */
@property --orb-intensity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.8;
}
@property --orb-hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 260;
}
@property --orb-pulse {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --nova-glow-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --nova-progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --nova-rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ── Wide-gamut color tokens ─────────────────────────────────────────────────── */
:root {
  --nova-bg:        oklch(8% 0.02 260);
  --nova-surface:   oklch(14% 0.03 260);
  --nova-surface-2: oklch(18% 0.04 260);
  --nova-border:    oklch(28% 0.05 260 / 0.4);
  --nova-text:      oklch(92% 0.01 260);
  --nova-muted:     oklch(60% 0.02 260);
  --nova-accent:    oklch(70% 0.25 260);
  --nova-accent-2:  oklch(75% 0.22 300);
  --nova-danger:    oklch(60% 0.22 30);
  --nova-success:   oklch(70% 0.2 140);
  --nova-p3-accent: color(display-p3 0.2 0.4 1.0);
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

@media (color-gamut: p3) {
  :root {
    --nova-accent: color(display-p3 0.18 0.38 1);
    --nova-success: color(display-p3 0.1 0.85 0.4);
    --nova-danger: color(display-p3 1 0.2 0.1);
  }
}

/* ── interpolate-size — animate height: auto ─────────────────────────────────── */
.nova-expand {
  height: 0;
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
  opacity: 0;
}
.nova-expand[open],
.nova-expand:popover-open {
  height: auto;
  opacity: 1;
}

/* ── @starting-style — entry animations ─────────────────────────────────────── */
.nova-card {
  background: var(--nova-surface);
  border: 1px solid var(--nova-border);
  border-radius: 16px;
  padding: 20px;
  transition:
    opacity 0.3s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s;
  transition-behavior: allow-discrete;
}
@starting-style {
  .nova-card { opacity: 0; transform: translateY(12px) scale(0.96); }
}

/* ── Native popover attribute ────────────────────────────────────────────────── */
[popover] {
  background: var(--nova-surface);
  border: 1px solid var(--nova-border);
  border-radius: 12px;
  padding: 16px;
  color: var(--nova-text);
  box-shadow: 0 24px 64px oklch(0% 0 0 / 0.6);
  transition: opacity 0.2s, display 0.2s, overlay 0.2s;
  transition-behavior: allow-discrete;
  opacity: 1;
}
[popover]:not(:popover-open) { opacity: 0; }
@starting-style {
  [popover]:popover-open { opacity: 0; transform: scale(0.95) translateY(-8px); }
}
[popover]::backdrop {
  background: oklch(0% 0 0 / 0.5);
  backdrop-filter: blur(4px);
  transition: opacity 0.2s, display 0.2s, overlay 0.2s;
  transition-behavior: allow-discrete;
}
@starting-style { [popover]::backdrop { opacity: 0; } }

/* ── CSS Anchor Positioning — zero-JS tooltips ───────────────────────────────── */
.nova-anchor {
  anchor-name: --nova-anchor;
}
.nova-tooltip {
  position: absolute;
  position-anchor: --nova-anchor;
  top: calc(anchor(bottom) + 8px);
  left: anchor(center);
  translate: -50% 0;
  background: var(--nova-surface-2);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--nova-text);
  white-space: nowrap;
  pointer-events: none;
}

/* ── Style queries ───────────────────────────────────────────────────────────── */
.nova-engineer {
  --state: ready;
  transition: background 0.3s, border-color 0.3s;
}
@container style(--state: active) {
  .nova-engineer { background: oklch(20% 0.06 260); border-color: var(--nova-accent); }
}
@container style(--state: error) {
  .nova-engineer { background: oklch(16% 0.08 30); border-color: var(--nova-danger); }
}
@container style(--state: complete) {
  .nova-engineer { background: oklch(16% 0.06 140); border-color: var(--nova-success); }
}

/* ── Nova Orb — Houdini paint + fallback ─────────────────────────────────────── */
.nova-orb {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: paint(nova-orb);
  /* Fallback: */
  background-color: var(--nova-accent);
  transition:
    --orb-intensity 0.6s,
    --orb-hue 1.2s,
    --orb-pulse 0.3s,
    width 0.5s,
    height 0.5s;
  animation: orb-breathe 3s ease-in-out infinite;
}
@keyframes orb-breathe {
  0%, 100% { --orb-pulse: 0; }
  50% { --orb-pulse: 1; }
}

/* Orb states via biosensor */
.nova-orb[data-stress="high"]   { --orb-hue: 20; --orb-intensity: 0.95; }
.nova-orb[data-stress="medium"] { --orb-hue: 50; --orb-intensity: 0.85; }
.nova-orb[data-stress="low"]    { --orb-hue: 160; --orb-intensity: 0.75; }

/* ── Noise overlay via Houdini ───────────────────────────────────────────────── */
.nova-noise {
  --noise-opacity: 0.04;
  background-image: paint(nova-noise);
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* ── Speculation Rules inline tag ────────────────────────────────────────────── */
/* Applied via JS — see nova-sw.js */

/* ── Variable color fonts ────────────────────────────────────────────────────── */
@font-face {
  font-family: "Nova";
  src: url("/static/nova-ux/nova-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-palette-values --nova-dark {
  font-family: "Nova";
  base-palette: 0;
  override-colors: 0 oklch(70% 0.25 260), 1 oklch(90% 0.01 260);
}

/* ── Transition polish ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { background: var(--nova-bg); color: var(--nova-text); font-family: system-ui, -apple-system, sans-serif; }

.nova-btn {
  appearance: none;
  border: 1px solid var(--nova-border);
  background: var(--nova-surface);
  color: var(--nova-text);
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  transition-behavior: allow-discrete;
}
.nova-btn:hover { background: var(--nova-surface-2); border-color: var(--nova-accent); }
.nova-btn:active { transform: scale(0.97); }

@starting-style {
  .nova-btn { opacity: 0; }
}