/* ============================================================================
   Siphrix console — polish layer
   Restrained, control-room motion on top of console.css: staggered panel
   entrances, row/card micro-interactions, a faint top-bar aurora, refined
   segments + focus. Loads last so it can refine without rewriting.
   ============================================================================ */

/* ---- Panel entrance (auto-plays on every route render) ------------------- */
.app-view > .panel {
  animation: panel-in .5s cubic-bezier(.22,.61,.36,1) both;
}
.app-view > .panel:nth-child(1) { animation-delay: .02s; }
.app-view > .panel:nth-child(2) { animation-delay: .09s; }
.app-view > .panel:nth-child(3) { animation-delay: .16s; }
.app-view > .panel:nth-child(4) { animation-delay: .23s; }
.app-view > .panel:nth-child(n+5) { animation-delay: .28s; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Panel hover: a whisper of lift + a teal hairline. */
.panel { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.panel:hover {
  border-color: color-mix(in srgb, var(--teal) 26%, var(--line));
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.8);
}

/* ---- Top bar: faint moving aurora so the shell feels alive --------------- */
.app-top { position: relative; overflow: hidden; }
.app-top::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(420px 80px at 12% -40%, rgba(43,212,189,.12), transparent 70%),
    radial-gradient(360px 80px at 88% -40%, rgba(43,212,189,.07), transparent 70%);
  opacity: .9;
  animation: top-aurora 14s ease-in-out infinite alternate;
}
@keyframes top-aurora { from { transform: translateX(-3%); } to { transform: translateX(3%); } }

/* ---- Nav: icon nudge on hover, smoother active pill --------------------- */
.side-link { position: relative; }
.side-link svg { transition: transform .2s ease, opacity .2s ease; }
.side-link:hover svg { transform: translateX(2px); opacity: 1; }
.side-link.active::before { transition: height .25s var(--spring, ease); }

/* ---- Connection / list rows: hover highlight + slide --------------------- */
.plat-row { transition: background .18s ease, padding-left .18s ease; }
.panel-body.flush .plat-row:hover {
  background: rgba(43,212,189,.05);
}
.plat-row .plat-ic { transition: transform .2s ease, color .2s ease; }
.plat-row:hover .plat-ic { transform: scale(1.08); color: var(--teal); }

/* ---- KPI cards: a slow diagonal sheen ----------------------------------- */
.kpi-card { position: relative; overflow: hidden; }
.kpi-card::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
  transform: skewX(-18deg); animation: kpi-sheen 7s ease-in-out infinite;
}
@keyframes kpi-sheen { 0%,70% { left: -60%; } 100% { left: 130%; } }
.kpi-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); }

/* ---- Segments (Off/Basic/Strict): springy press ------------------------- */
.seg button { transition: background .2s ease, color .2s ease, transform .12s ease; }
.seg button:active { transform: scale(.94); }
.seg button.on { box-shadow: 0 6px 18px -8px var(--allow-glow); }

/* ---- Primary buttons: lift + glow on hover ------------------------------ */
.btn-primary { transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -10px var(--allow-glow); }
.btn-primary:active { transform: translateY(0) scale(.99); }

/* ---- Verdict / result reveal -------------------------------------------- */
.demo-result, .dr-verdict { animation: result-in .4s var(--ease-out, ease) both; }
@keyframes result-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.dr-glyph .ico { animation: glyph-pop .45s var(--spring, cubic-bezier(.34,1.56,.64,1)) both; }
@keyframes glyph-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- Inputs: calmer, branded focus -------------------------------------- */
.inp:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--teal) 55%, var(--line)) !important;
  box-shadow: 0 0 0 3px rgba(43,212,189,.12);
}

/* ---- Alert inbox severity dots feel ------------------------------------- */
.badge.block, .badge.abort, .badge.allow { transition: transform .2s ease; }
.plat-row:hover .badge { transform: scale(1.04); }

/* ---- Sidebar brand: gentle logo sheen on hover -------------------------- */
.app-side .brand .mark--img img { transition: transform .35s var(--spring, ease); }
.app-side .brand:hover .mark--img img { transform: rotate(-4deg) scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .app-view > .panel, .demo-result, .dr-verdict, .dr-glyph .ico { animation: none; }
  .app-top::after, .kpi-card::after { animation: none; }
}