/* PXNET control-plane motion layer.
   Loaded after style.css so it can decorate the existing dark console without
   changing layout primitives. Every entrance animation uses `backwards` so
   hover transforms still work once the animation has finished. */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.46, .64, 1);
}

@keyframes ambient-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7vw, -3vw, 0) scale(1.08); }
}
@keyframes ambient-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  50% { transform: translate3d(-5vw, 4vw, 0) scale(0.96); }
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(26px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes login-line {
  0%, 100% { opacity: .55; background-position: 0% 50%; }
  50% { opacity: 1; background-position: 100% 50%; }
}
@keyframes brand-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes rise-soft {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px) scale(.994); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kpi-in {
  from { opacity: 0; transform: translateY(11px) scale(.986); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chart-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nav-pop {
  from { opacity: .35; transform: translateX(-3px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes title-swap {
  from { opacity: .15; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sidebar-in {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes topbar-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, .35); }
  60% { box-shadow: 0 0 0 6px rgba(45, 212, 191, 0); }
}
@keyframes badge-rise {
  from { opacity: 0; transform: translateY(5px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@keyframes modal-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; }
}
@keyframes modal-spring {
  from { opacity: 0; transform: translateY(20px) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes drawer-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes drawer-spring {
  from { opacity: 0; transform: translateX(44px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes result-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes event-in {
  from { opacity: 0; transform: translateX(-12px); background: rgba(45, 212, 191, .09); }
  to { opacity: 1; transform: translateX(0); background: transparent; }
}
@keyframes row-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tab-pop {
  from { transform: scale(.94); opacity: .6; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes border-orbit {
  from { background-position: 0% 50%; }
  to { background-position: 220% 50%; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes soft-pulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.08); }
}

/* ---------- ambient depth ---------- */

.ambient::before,
.ambient::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 70vw;
  height: 70vw;
  min-width: 620px;
  min-height: 620px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(68px);
}
.ambient::before {
  left: -26vw;
  top: -34vw;
  background: radial-gradient(circle, rgba(96, 165, 250, .16), transparent 64%);
  animation: ambient-a 28s ease-in-out infinite;
}
.ambient::after {
  right: -30vw;
  bottom: -40vw;
  background: radial-gradient(circle, rgba(45, 212, 191, .15), transparent 66%);
  animation: ambient-b 34s ease-in-out -11s infinite;
}
.app, .login-wrap { z-index: 1; }

/* ---------- login ---------- */

.login-card {
  animation: card-rise .82s var(--ease-out) both;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 40px 110px -45px rgba(0, 0, 0, .95),
    0 0 80px -40px rgba(45, 212, 191, .35);
}
.login-card::before {
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, .8), rgba(96, 165, 250, .55), transparent);
  background-size: 220% 100%;
  animation: login-line 5s ease-in-out infinite;
}
.brand-mark {
  background-size: 220% 220%;
  animation: brand-flow 8s ease-in-out infinite;
  box-shadow: 0 12px 32px -13px rgba(45, 212, 191, .9), 0 0 22px -8px rgba(96, 165, 250, .45);
}
.login-badge { animation: badge-rise .7s var(--ease-out) .18s backwards; }
.login-card h1 { animation: rise-soft .7s var(--ease-out) .08s backwards; }
.login-sub { animation: rise-soft .7s var(--ease-out) .13s backwards; }
.login-card label:nth-of-type(1) { animation: rise-soft .65s var(--ease-out) .18s backwards; }
.login-card label:nth-of-type(2) { animation: rise-soft .65s var(--ease-out) .23s backwards; }
.login-card .primary { animation: rise-soft .65s var(--ease-out) .28s backwards; }
.login-foot { animation: rise-soft .7s var(--ease-out) .34s backwards; }

/* ---------- shell ---------- */

.app:not(.hidden) .sidebar { animation: sidebar-in .58s var(--ease-out) both; }
.app:not(.hidden) .topbar { animation: topbar-in .55s var(--ease-out) .04s both; }
.title-block { transition: opacity .2s; }
.title-block.is-switching { animation: title-swap .42s var(--ease-out); }
.title-block h2 { letter-spacing: -.03em; }

.nav-button {
  position: relative;
  overflow: hidden;
  transition: color .18s, background .22s, border-color .22s, transform .24s var(--ease-out);
}
.nav-button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--blue));
  box-shadow: 0 0 12px rgba(94, 234, 212, .6);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .26s var(--ease-out);
}
.nav-button.active::before { transform: scaleY(1); }
.nav-button.active { animation: nav-pop .3s var(--ease-out); }
.nav-button:hover { transform: translateX(2px); }
.nav-button svg { transition: transform .24s var(--ease-spring), color .2s, opacity .2s; }
.nav-button:hover svg { transform: scale(1.08); }
.nav-button.active svg { transform: scale(1.04); }
.nav-button:active { transform: translateX(1px) scale(.99); }

.sidebar-foot { transition: border-color .3s; }
.sidebar-foot:hover { border-color: rgba(94, 234, 212, .16); }
.avatar { transition: transform .26s var(--ease-spring), background .2s; }
.user-chip:hover .avatar { transform: scale(1.06) rotate(-2deg); background: rgba(45, 212, 191, .14); }

.status-pill .dot,
.live-chip .dot,
.live-toggle .dot { animation: dot-pulse 2.4s ease-in-out infinite; }
.live-toggle:not(.on) .dot,
.live-chip.paused .dot,
.status-pill.paused .dot,
.status-pill.bad .dot { animation: none; }
.status-pill { transition: background .3s, border-color .3s, color .3s; }
.live-toggle.on { box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .08), 0 10px 26px -22px rgba(45, 212, 191, .45); }

.icon-button {
  position: relative;
  transition: color .18s, border-color .2s, background .2s, transform .22s var(--ease-out);
}
.icon-button:hover { transform: translateY(-1px); }
.icon-button:active { transform: scale(.94); }
.icon-button svg { transition: transform .25s var(--ease-spring); }
.icon-button:hover svg { transform: scale(1.06); }
.icon-button.spinning svg { animation: spin .8s linear infinite; }

.primary { position: relative; overflow: hidden; transition: filter .16s, transform .2s var(--ease-out), box-shadow .25s; }
.primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  left: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: translateX(-180%) skewX(-18deg);
  transition: transform .7s ease;
  pointer-events: none;
}
.primary:hover::after { transform: translateX(360%) skewX(-18deg); }
.primary:hover { box-shadow: 0 16px 34px -15px rgba(45, 212, 191, .9), inset 0 1px 0 rgba(255, 255, 255, .4); }
.ghost { transition: border-color .2s, color .2s, background .2s, transform .2s var(--ease-out); }
.ghost:hover { transform: translateY(-1px); }
.ghost:active { transform: translateY(0) scale(.98); }

.range-switch button { transition: background .22s, color .2s, box-shadow .22s, transform .18s; }
.range-switch button.active { animation: tab-pop .26s var(--ease-out); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px -14px rgba(94, 234, 212, .6); }
.range-switch button:hover { color: #d9fff7; }

/* ---------- page entrance ---------- */

.overview-toolbar { animation: rise-soft .5s var(--ease-out) .02s backwards; }
.page:not(.hidden) .panel { animation: panel-in .52s var(--ease-out) backwards; }
.page:not(.hidden) .panel-grid > .panel:nth-child(1) { animation-delay: .04s; }
.page:not(.hidden) .panel-grid > .panel:nth-child(2) { animation-delay: .1s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(1) { animation-delay: .06s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(2) { animation-delay: .1s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(3) { animation-delay: .14s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(4) { animation-delay: .18s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(5) { animation-delay: .22s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(6) { animation-delay: .26s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(7) { animation-delay: .3s; }

/* ---------- KPI cards ---------- */

.page:not(.hidden) .kpi { animation: kpi-in .48s var(--ease-out) backwards; }
.page:not(.hidden) .kpi:nth-child(1) { animation-delay: .06s; }
.page:not(.hidden) .kpi:nth-child(2) { animation-delay: .09s; }
.page:not(.hidden) .kpi:nth-child(3) { animation-delay: .12s; }
.page:not(.hidden) .kpi:nth-child(4) { animation-delay: .15s; }
.page:not(.hidden) .kpi:nth-child(5) { animation-delay: .18s; }
.page:not(.hidden) .kpi:nth-child(6) { animation-delay: .21s; }

.kpi {
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s;
}
.kpi::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, .72), rgba(96, 165, 250, .55), transparent);
  opacity: .35;
  transform: scaleX(.35);
  transition: transform .45s var(--ease-out), opacity .35s;
}
.kpi:hover {
  transform: translateY(-3px);
  border-color: rgba(94, 234, 212, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 26px 54px -32px rgba(0, 0, 0, .9),
    0 0 34px -22px rgba(45, 212, 191, .55);
}
.kpi:hover::before { transform: scaleX(1); opacity: 1; }
.kpi-value { transition: color .3s, text-shadow .3s; }
.kpi:hover .kpi-value { text-shadow: 0 0 24px rgba(94, 234, 212, .18); }
.spark .line { filter: drop-shadow(0 0 4px rgba(94, 234, 212, .32)); }
.spark .area { opacity: .95; transition: opacity .3s; }
.kpi:hover .spark .area { opacity: 1; }
.kpi-delta { transition: color .2s; }

/* ---------- panels / chart surfaces ---------- */

.panel {
  position: relative;
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s;
}
.panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(100deg, transparent 6%, rgba(94, 234, 212, .7) 32%, rgba(96, 165, 250, .6) 55%, transparent 88%);
  background-size: 220% 100%;
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: left;
  pointer-events: none;
  transition: opacity .35s, transform .45s var(--ease-out);
}
.panel:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 234, 212, .2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 30px 70px -38px rgba(0, 0, 0, .9),
    0 0 48px -36px rgba(45, 212, 191, .5);
}
.panel:hover::before { opacity: 1; transform: scaleX(1); animation: border-orbit 6s linear infinite; }
.panel-head { position: relative; z-index: 1; }
.panel-head h3 { transition: color .25s; }
.panel:hover .panel-head h3 { color: #f0fffb; }
.panel-chip, .live-chip, .alert-chip { transition: border-color .25s, background .25s, color .25s, transform .25s var(--ease-out); }
.panel:hover .panel-chip { border-color: rgba(148, 163, 184, .24); }
.alert-chip:not(.hidden) { animation: badge-rise .4s var(--ease-spring) both; }
.live-chip { animation: badge-rise .55s var(--ease-out) .1s backwards; }

.page:not(.hidden) .panel.viz .chart { animation: chart-reveal .7s var(--ease-out) .12s backwards; }
.page:not(.hidden) .viz-grid > .panel:nth-child(2) .chart { animation-delay: .16s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(3) .chart { animation-delay: .2s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(4) .chart { animation-delay: .24s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(5) .chart { animation-delay: .28s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(6) .chart { animation-delay: .32s; }
.page:not(.hidden) .viz-grid > .panel:nth-child(7) .chart { animation-delay: .36s; }

.chart-lg, .chart-md, .chart-sm, .chart-map, .chart-topo {
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .18));
}
.chart-donut { filter: drop-shadow(0 0 22px rgba(45, 212, 191, .06)); }
.chart-legend span { transition: opacity .2s, color .2s, transform .2s; }
.chart-legend span:hover { transform: translateY(-1px); }
.chart-legend span.off { opacity: .3; }

.uplot canvas { transition: filter .3s; }
.panel:hover .uplot canvas { filter: saturate(1.08); }

.ranking { position: relative; z-index: 1; }
.rank-row { transition: background .2s, transform .22s var(--ease-out), box-shadow .25s; }
.rank-row:hover { transform: translateX(3px); box-shadow: -2px 0 0 rgba(94, 234, 212, .55); }
.rank-status { animation: dot-pulse 2.8s ease-in-out infinite; }
.rank-spark path { filter: drop-shadow(0 0 3px rgba(94, 234, 212, .2)); }

.capacity-regions { position: relative; z-index: 1; }
.rank-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-spark-slot { flex: 0 0 auto; }
@media (min-width: 1180px) and (max-height: 960px) {
  .viz-grid > .panel:nth-child(4) .rank-row { grid-template-columns: minmax(0, 1fr) auto; }
  .viz-grid > .panel:nth-child(4) .rank-spark-slot { display: none; }
}
.rank-row.rank-enter { animation: row-in .42s var(--ease-out) both; }
.rank-row.rank-enter .rank-bar > span { animation: bar-reveal .7s var(--ease-out) both; }
.rank-bar { position: relative; overflow: hidden; }
.rank-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(96, 165, 250, .55));
  transition: width .8s var(--ease-out);
  position: relative;
}
.rank-bar > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: shimmer-bar 3.2s ease-in-out infinite;
}
.capacity-row.capacity-enter { animation: row-in .42s var(--ease-out) both; }
.capacity-row.capacity-enter .capacity-bar > span { animation: bar-reveal .7s var(--ease-out) both; }
@keyframes bar-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.capacity-enter .capacity-bar > span { transform-origin: left; }
.capacity-bar, .quota-bar, .region-bar, .mini-bar, .rank-bar { position: relative; overflow: hidden; }
.capacity-bar span, .quota-bar span, .region-bar span, .mini-bar span, .rank-bar span {
  transition: width .8s var(--ease-out), background .3s;
  position: relative;
}
.capacity-bar span::after, .quota-bar span::after, .region-bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: shimmer-bar 2.8s ease-in-out infinite;
}
@keyframes shimmer-bar {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

/* ---------- tables & events ---------- */

.page:not(.hidden) .table-wrap { animation: rise-soft .45s var(--ease-out) .08s backwards; }
.page:not(.hidden) tbody tr { animation: row-in .34s var(--ease-out) backwards; }
.page:not(.hidden) tbody tr:nth-child(2) { animation-delay: .035s; }
.page:not(.hidden) tbody tr:nth-child(3) { animation-delay: .07s; }
.page:not(.hidden) tbody tr:nth-child(4) { animation-delay: .105s; }
.page:not(.hidden) tbody tr:nth-child(5) { animation-delay: .14s; }
.page:not(.hidden) tbody tr:nth-child(6) { animation-delay: .175s; }
.page:not(.hidden) tbody tr:nth-child(7) { animation-delay: .21s; }
tbody tr td { transition: background .18s, color .18s; }
tbody tr:hover td { background: rgba(94, 234, 212, .028); }
tbody tr:hover td:first-child { color: #d9fff7; }
.badge { transition: transform .22s var(--ease-spring), background .2s, border-color .2s; }
tbody tr:hover .badge { transform: translateY(-1px); }
.badge.ok::before { animation: dot-pulse 2.5s ease-in-out infinite; }
.tag { transition: border-color .2s, background .2s, transform .2s; }
tbody tr:hover .tag { border-color: rgba(94, 234, 212, .22); background: rgba(45, 212, 191, .05); }
.event { transition: background .22s; }
.event:hover { background: rgba(94, 234, 212, .035); }
.event.event-new { animation: event-in .55s var(--ease-out) both; }
.rollout-row { transition: background .2s, transform .2s; }
.rollout-row:hover { background: rgba(94, 234, 212, .035); transform: translateX(2px); }
.result:not(.hidden) { animation: result-in .45s var(--ease-spring) both; }
.key-row code { text-shadow: 0 0 18px rgba(94, 234, 212, .18); }

/* ---------- overlays ---------- */

.modal:not(.hidden) { animation: modal-backdrop-in .25s ease both; }
.modal:not(.hidden) .modal-card { animation: modal-spring .42s var(--ease-spring) both; }
.drawer:not(.hidden) .drawer-backdrop { animation: drawer-backdrop-in .28s ease both; }
.drawer:not(.hidden) .drawer-card { animation: drawer-spring .42s var(--ease-spring) both; }
.drawer-head { animation: rise-soft .4s var(--ease-out) .08s backwards; }
.drawer-kpi { transition: transform .22s var(--ease-out), border-color .22s, background .22s; }
.drawer-kpi:hover { transform: translateY(-2px); border-color: rgba(94, 234, 212, .2); background: rgba(45, 212, 191, .035); }
.toast { position: fixed; overflow: hidden; }
.toast:not(.hidden) { animation: toast-in .38s var(--ease-spring) both; }
.toast::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  transform-origin: left;
  animation: toast-timer 3.2s linear both;
}
.toast.error::after { background: linear-gradient(90deg, var(--danger), #f97316); }

/* ---------- modal / drawer backdrop depth ---------- */

.modal { background: rgba(4, 8, 14, .72); }
.drawer-backdrop { background: rgba(4, 8, 14, .62); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ambient::before,
  .ambient::after,
  .spark .line,
  .rank-status,
  .status-pill .dot,
  .live-chip .dot,
  .live-toggle .dot,
  .badge.ok::before,
  .capacity-bar span::after,
  .quota-bar span::after,
  .region-bar span::after {
    animation: none !important;
  }
}