/* HEPHforge kit: styles for node-grid-live, reveal and copy. Ported from gate-forge src/ui/brand-tokens.ts (LukeLit/gate-forge). Keep the two in step. */

#node-grid-live { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #node-grid-live { display: none; } }

html.reveal-on [data-reveal],
html.reveal-on [data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--ri, 0) * 70ms);
}
html.reveal-on [data-reveal].is-in,
html.reveal-on [data-stagger].is-in > * { opacity: 1; transform: none; }

.copyable { position: relative; }
pre.copyable { padding-right: 3rem; }
.copyable:not(pre) { padding-right: 2.4rem !important; }
.snip-copy {
  position: absolute; top: .45rem; right: .45rem;
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0;
  border-radius: 7px; border: 1px solid var(--line, var(--border)); cursor: pointer;
  background: var(--panel-2, var(--surface-raised)); color: var(--muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.copyable:not(pre) > .snip-copy { top: 50%; transform: translateY(-50%); width: 1.7rem; height: 1.7rem; }
.snip-copy:hover { color: var(--ink, var(--text)); border-color: var(--forge-accent-line, var(--border-strong)); }
.snip-copy.is-done { color: var(--forge-accent, var(--accent)); border-color: var(--forge-accent, var(--accent)); }
.snip-copy svg { width: .95rem; height: .95rem; display: block; }