/* ng-synapse.css — AURORA-X living neural field (SYNAPSE layer)
 * ---------------------------------------------------------------------------
 * Owns exactly three elements, all created by ng-synapse.js:
 *   canvas#ng-synapse-canvas   the field itself      (z-index 1, same band as #brain3d)
 *   div#ng-synapse-scrim       column legibility scrim (z-index 1, above canvas)
 *   button#ng-synapse-toggle   WCAG 2.2.2 pause control (z-index 60)
 *
 * Nothing here selects any element owned by another module.
 * ------------------------------------------------------------------------- */

/* The field. DPR is pinned to 1 in JS; the softness below is a single
   GPU-composited CSS filter rather than a per-frame canvas blur. */
#ng-synapse-canvas{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:1;
  pointer-events:none;
  display:block;
  filter:blur(1.5px);
  opacity:0;
  transition:opacity 1200ms cubic-bezier(0,0,.2,1);
  will-change:opacity;
  contain:paint;
}
#ng-synapse-canvas.is-live{ opacity:1 }

/* The 3D brain owns the stage in those views — stand down. */
body[data-view=brain] #ng-synapse-canvas{ opacity:0 }
body[data-view=deck]  #ng-synapse-canvas.is-live{ opacity:.5 }

/* Legibility scrim behind the chat message column. Geometry is written by JS
   (left/width) from the live column rect; the feather is pure CSS. */
#ng-synapse-scrim{
  position:fixed;
  top:0; height:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity 600ms linear;
  background:linear-gradient(90deg,
    rgba(5,7,12,0)    0px,
    rgba(5,7,12,.55) 140px,
    rgba(5,7,12,.55) calc(100% - 140px),
    rgba(5,7,12,0)   100%);
  /* JS sizes this to the live message-text box; the mask feathers its top and
     bottom so the scrim has no visible edge where the messages end. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
}
#ng-synapse-scrim.is-live{ opacity:1 }

/* ---------------------------------------------------------------------------
   WCAG 2.2.2 (Level A): motion lasting >5s needs a visible, keyboard-operable
   pause control. prefers-reduced-motion does NOT satisfy it, so this button
   ships unconditionally whenever the field is live.
   ------------------------------------------------------------------------- */
#ng-synapse-toggle{
  position:fixed;
  left:8px; bottom:8px;
  z-index:60;
  width:24px; height:24px;
  display:none;                 /* JS flips to grid when the field mounts */
  place-items:center;
  padding:0; margin:0;
  border:1px solid rgba(var(--hero-rgb,0,229,255),.28);
  border-radius:50%;
  background:rgba(4,9,18,.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--t2,#7fa0b8);
  font:400 12px/1 var(--fm,ui-monospace,monospace);
  cursor:pointer;
  opacity:.35;
  transition:opacity 160ms cubic-bezier(.2,0,0,1),
             color   160ms cubic-bezier(.2,0,0,1),
             border-color 160ms cubic-bezier(.2,0,0,1);
}
#ng-synapse-toggle.is-mounted{ display:grid }
#ng-synapse-toggle:hover{ opacity:1; color:var(--x-cyan,#00e5ff);
  border-color:rgba(var(--hero-rgb,0,229,255),.6) }
#ng-synapse-toggle:focus-visible{
  opacity:1; outline:2px solid var(--x-cyan,#00e5ff); outline-offset:2px;
  color:var(--x-cyan,#00e5ff);
}
#ng-synapse-toggle[aria-pressed="true"]{ opacity:.85; color:var(--x-amber,#ffb02e);
  border-color:rgba(255,176,46,.5) }

/* Visually-hidden accessible name (the glyph alone is not a name). */
#ng-synapse-toggle .ngsyn-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Keep clear of the mobile bottom nav / composer. */
@media (max-width:1023px){
  #ng-synapse-toggle{ left:6px; bottom:auto; top:46px }
}

/* Reduced motion: the field freezes to a static frame in JS. The control stays
   visible and operable (it then acts as a resume), per 2.2.2. */
@media (prefers-reduced-motion:reduce){
  #ng-synapse-canvas{ transition:none }
  #ng-synapse-scrim { transition:none }
}