/* fx.css — styles for the interactive/3D enhancement layer (loaded after
   site.css). Everything here is additive and degrades to the base design when
   the .fx-on / .heavy-webgl classes are absent or prefers-reduced-motion is on. */

/* ── site-wide ambient node field ───────────────────────────────────── */
/* Fixed behind all content; body's --bg-base stays the solid base, transparent
   sections let the faint constellation show through, panels/cards cover it. */
.ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.ambient-fx{ width:100%; height:100%; display:block; opacity:0; transition:opacity 1.2s var(--ease-out); }
html.ambient-on .ambient-fx{ opacity:1; }
@media(prefers-reduced-motion: reduce){ .ambient{ display:none; } }

/* ── blueprint crosshair cursor ─────────────────────────────────────── */
/* Only hide the native cursor for capable, fine-pointer, non-reduced users. */
html.fx-on.fine-pointer:not(.reduced){ cursor:none; }
html.fx-on.fine-pointer:not(.reduced) a,
html.fx-on.fine-pointer:not(.reduced) button,
html.fx-on.fine-pointer:not(.reduced) [role="button"],
html.fx-on.fine-pointer:not(.reduced) input,
html.fx-on.fine-pointer:not(.reduced) textarea{ cursor:none; }

.cursor-root{
  position:fixed; left:0; top:0; z-index:9999; pointer-events:none;
  width:0; height:0; will-change:transform;
  mix-blend-mode:difference;
}
.cursor-dot{
  position:absolute; left:0; top:0; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--accent-bright);
}
.cursor-ring{
  position:absolute; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid var(--accent); border-radius:2px;
  transition:width .18s var(--ease-out), height .18s var(--ease-out),
             margin .18s var(--ease-out), opacity .18s var(--ease-out),
             border-color .18s var(--ease-out);
}
/* crosshair ticks on the ring */
.cursor-ring::before,.cursor-ring::after{
  content:""; position:absolute; background:var(--accent);
}
.cursor-ring::before{left:50%; top:-4px; width:1px; height:4px; transform:translateX(-50%)}
.cursor-ring::after{left:-4px; top:50%; width:4px; height:1px; transform:translateY(-50%)}
.cursor-root.is-hot .cursor-ring{
  width:54px; height:54px; margin:-27px 0 0 -27px; border-color:var(--accent-bright);
}
.cursor-root.is-down .cursor-ring{ width:26px; height:26px; margin:-13px 0 0 -13px; }

/* magnetic targets get GPU-friendly transform */
[data-magnetic]{ will-change:transform; }

/* ── chip section ───────────────────────────────────────────────────── */
.chip-sec{position:relative}
.chip-stage{position:relative; width:100%; aspect-ratio:16/10; max-height:78vh;
  margin-top:var(--sp-6); border:1px solid var(--line-1); background:
  radial-gradient(120% 90% at 50% 30%, var(--bg-raised), var(--bg-base) 70%);
  overflow:hidden}
.chip-canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.chip-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:none}
.chip-labels{position:absolute; inset:0; pointer-events:none}
.chip-label{
  position:absolute; transform:translate(-50%,-50%); pointer-events:auto;
  font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.06em;
  color:var(--fg-0); background:color-mix(in srgb, var(--bg-overlay) 80%, transparent);
  border:1px solid var(--accent-line); padding:4px 7px; white-space:nowrap;
  opacity:0; transition:opacity .3s var(--ease-out); backdrop-filter:blur(3px);
}
.chip-label .cl-t{color:var(--accent)}
.chip-label .cl-d{color:var(--fg-2); margin-left:6px}
.chip-label::before{content:""; position:absolute; left:-1px; top:-1px; width:5px; height:5px;
  border-top:1px solid var(--accent); border-left:1px solid var(--accent)}
.chip-stage.is-live .chip-label{opacity:1}

/* Fallback: no heavy webgl OR reduced motion → show the static poster, hide canvas. */
html:not(.heavy-webgl) .chip-canvas,
html.reduced .chip-canvas{ display:none }
html:not(.heavy-webgl) .chip-poster,
html.reduced .chip-poster{ display:block }
html:not(.heavy-webgl) .chip-labels,
html.reduced .chip-labels{ display:none }

/* ── pointer-reactive cards (spotlight + tilt) ──────────────────────── */
html.fine-pointer .trait{ transition:transform .25s var(--ease-out), border-color var(--dur) var(--ease-out); transform-style:preserve-3d; }
html.fine-pointer .trait::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:0; transition:opacity .3s var(--ease-out); border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
}
html.fine-pointer .trait.is-spot::after{ opacity:1 }
html.fine-pointer .trait.is-spot{ border-color:var(--accent-line) }
/* keep card content above the glow */
.trait > *{ position:relative; z-index:1 }