/* =========================================================
   Learning System Signal Lab — homepage interactive centerpiece
   Pairs with signal-lab.js. Layout mostly inline in index.html;
   this file holds state-driven visuals, keyframes, and responsive.
   ========================================================= */

.sl-wrap * , .sl-wrap *::before, .sl-wrap *::after { box-sizing: border-box; }

@keyframes sl-breathe { 0%,100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.14); } }
@keyframes sl-ring     { 0% { transform:scale(.6); opacity:.75; } 100% { transform:scale(2.6); opacity:0; } }
@keyframes sl-fadeflow  { 0% { stroke-dashoffset: 240; } 100% { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sl-wrap .sl-pulse, .sl-wrap .sl-ring, .sl-wrap [class*="sl-anim"] { animation: none !important; }
}

/* ---- panels ---- */
.sl-panel { position:relative; border-radius:22px; overflow:hidden; }
.sl-panel-event {
  background: linear-gradient(165deg,#0c1420 0%, #101c2c 100%);
  border: 1px solid rgba(148,163,184,.14);
}
.sl-panel-system {
  background: linear-gradient(165deg,#07111f 0%, #0c1f35 62%, #0a1d3a 100%);
  border: 1px solid rgba(110,231,216,.16);
}

/* ---- signal spine + condition nodes (system panel) ---- */
#sl-sys-svg .sl-sysnode circle, #sl-sys-svg .sl-sysnode text { transition: fill .4s ease, opacity .4s ease, transform .4s ease; }
#sl-sys-svg .sl-dash-flow { stroke-dasharray: 6 6; }
#sl-sys-svg[data-retrieval="on"] .sl-dash-flow,
#sl-sys-svg[data-spaced="on"] .sl-dash-flow { animation: sl-fadeflow 3.6s linear infinite; }

/* ---- pulses ---- */
.sl-pulse { animation: sl-breathe 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sl-ring  { animation: sl-ring 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }

/* ---- control rail: instrument console ---- */
.sl-bus::before {
  content: ""; position:absolute; top:0; left:20px; right:20px; height:2px; opacity:.5;
  background: linear-gradient(90deg,transparent,#16b8d9,#6ee7d8,#f4c95d,transparent);
}

.sl-strip {
  all: unset; box-sizing: border-box; cursor: pointer;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding: 14px 6px; border-right: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; transition: background .2s ease;
}
.sl-strip-last { border-right: 0; }
.sl-strip:hover, .sl-strip:focus-visible { background: rgba(255,255,255,.05); }
.sl-strip:focus-visible { outline: 2px solid #6ee7d8; outline-offset: -2px; }

.sl-strip-icon { width:30px; height:30px; border-radius:9px; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; font-size:14px; }

.sl-toggle-track { width:34px; height:19px; border-radius:999px; background: rgba(255,255,255,.14); position:relative; transition: background .2s ease; flex:none; }
.sl-toggle-thumb { position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#94a3b8; transition: transform .2s ease, background .2s ease; }
.sl-strip[aria-checked="true"] .sl-toggle-track { background: rgba(110,231,216,.32); }
.sl-strip[aria-checked="true"] .sl-toggle-thumb { transform: translateX(15px); background: #6ee7d8; }

.sl-strip strong { font-size:11.5px; font-weight:800; color:#fff; text-align:center; line-height:1.25; }
.sl-strip span:not(.sl-toggle-track):not(.sl-toggle-thumb):not(.sl-strip-icon) { font-size:10.5px; color:rgba(226,242,247,.45); text-align:center; }

/* ---- index meter ---- */
.sl-index-meter { width:100%; height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; margin-top:14px; }
.sl-index-fill { height:100%; border-radius:999px; background: linear-gradient(90deg,#16b8d9,#6ee7d8); width: 12%; transition: width .5s cubic-bezier(.22,.8,.3,1); }

/* ---- responsive ---- */
@media (max-width: 980px) {
  [data-r="sl-viz"] { grid-template-columns: 1fr !important; }
  .sl-bus { grid-template-columns: repeat(4,1fr) !important; }
  .sl-strip:nth-child(4) { border-right: 0 !important; }
}
@media (max-width: 640px) {
  .sl-bus { grid-template-columns: repeat(2,1fr) !important; }
  .sl-strip:nth-child(2n) { border-right: 0 !important; }
}