/* Dark Flow Futures — Mission Control motion layer.
   Transform/opacity-first motion only; no data polling or execution behavior. */

@keyframes dfFuturesAmbient{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1);opacity:.32}
  50%{transform:translate3d(1.2%,.5%,0) scale(1.035);opacity:.42}
  100%{transform:translate3d(.2%,1.2%,0) scale(1.015);opacity:.35}
}
@keyframes dfFuturesPageEnter{
  0%{opacity:0;transform:translateY(9px) scale(.995);filter:blur(3px)}
  60%{opacity:1}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes dfFuturesPanelReveal{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes dfFuturesHealthyPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(63,199,139,0)}
  48%{box-shadow:0 0 0 3px rgba(63,199,139,.055)}
}
@keyframes dfFuturesWarningPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.10)}
}
@keyframes dfFuturesCriticalPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.14)}
}
@keyframes dfFuturesSweep{
  0%{transform:translateX(-150%) rotate(22deg);opacity:0}
  15%{opacity:.45}
  100%{transform:translateX(620%) rotate(22deg);opacity:0}
}
@keyframes dfFuturesLoadingLine{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}
@keyframes dfFuturesFlowArrow{
  0%,100%{opacity:.42;transform:translateX(0)}
  50%{opacity:.9;transform:translateX(2px)}
}
@keyframes dfFuturesBarGlow{
  0%,100%{filter:brightness(1);opacity:.92}
  50%{filter:brightness(1.12);opacity:1}
}

main::before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:72px 0 0 var(--df-sidebar);
  pointer-events:none;
  opacity:.38;
  background:
    radial-gradient(circle at 16% 18%,rgba(79,140,255,.11),transparent 24rem),
    radial-gradient(circle at 84% 72%,rgba(47,194,219,.065),transparent 27rem),
    radial-gradient(circle at 58% 42%,rgba(153,111,255,.035),transparent 22rem);
  will-change:transform,opacity;
  animation:dfFuturesAmbient 18s ease-in-out infinite alternate;
}

.tab.active{
  animation:dfFuturesPageEnter .48s cubic-bezier(.2,.72,.24,1) both;
  transform-origin:50% 0;
}

/* Stagger major cards only; keep dense rows immediate. */
.tab.active>.grid,
.tab.active>.panel,
#dashboard.tab.active>#dashboardStats{
  animation:dfFuturesPanelReveal .46s cubic-bezier(.2,.72,.24,1) both;
}
.tab.active>.panel{animation-delay:.045s}

/* Premium button response + restrained light sweep. */
button,.primary,.secondary,.danger,.logout-button{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transform:translateZ(0);
  transition:
    transform .17s cubic-bezier(.2,.75,.25,1),
    box-shadow .22s ease,
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease,
    filter .2s ease;
}
button::after,.primary::after,.secondary::after,.danger::after,.logout-button::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-130%;
  left:-48%;
  width:30%;
  height:360%;
  pointer-events:none;
  opacity:0;
  transform:rotate(22deg) translateX(-160%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
}
button:hover:not(:disabled),.primary:hover:not(:disabled),.secondary:hover:not(:disabled),.danger:hover:not(:disabled),.logout-button:hover:not(:disabled){
  transform:translateY(-2px) scale(1.008);
  box-shadow:0 10px 25px rgba(0,0,0,.22),0 0 18px rgba(101,146,232,.055);
  filter:brightness(1.06);
}
button:hover:not(:disabled)::after,.primary:hover:not(:disabled)::after,.secondary:hover:not(:disabled)::after,.danger:hover:not(:disabled)::after,.logout-button:hover:not(:disabled)::after{
  animation:dfFuturesSweep .62s cubic-bezier(.2,.8,.2,1) both;
}
button:active:not(:disabled),.primary:active:not(:disabled),.secondary:active:not(:disabled),.danger:active:not(:disabled),.logout-button:active:not(:disabled){
  transform:translateY(0) scale(.972);
  transition-duration:.06s;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.26),0 2px 7px rgba(0,0,0,.15);
}
button:disabled{transform:none!important;filter:saturate(.6);box-shadow:none!important}

/* Navigation */
.nav{
  transition:transform .17s ease,background .2s ease,border-color .2s ease,color .2s ease,box-shadow .22s ease;
}
.nav::before{transition:transform .18s ease,border-color .2s ease,background .2s ease,color .2s ease,box-shadow .22s ease}
.nav:hover{transform:translateX(2px)}
.nav:hover::before{transform:scale(1.04)}
.nav.active::before{transform:scale(1.02)}

/* Panels/cards */
.card,.panel,.mc-status,.mc-top-stats>.mc-metric,.mc-account-card,.mc-panel,
.mc-flow-node,.mc-insight,.ej-health-panel,.ej-comparison-panel,.ej-errors-panel,.ej-cycle-panel{
  backface-visibility:hidden;
  transition:transform .23s cubic-bezier(.2,.72,.24,1),box-shadow .27s ease,border-color .22s ease,background-color .25s ease;
}
.card:hover,.mc-status:hover,.mc-top-stats>.mc-metric:hover,.mc-account-card:hover,.mc-panel:hover,
.mc-insight:hover{
  transform:translateY(-2px);
  border-color:rgba(101,146,232,.24)!important;
  box-shadow:var(--df-shadow-raised);
}
.panel:hover{border-color:rgba(148,163,184,.20)}

/* Inputs */
input,select,textarea{
  transition:border-color .18s ease,box-shadow .20s ease,background .2s ease,transform .17s ease;
}
input:hover,select:hover,textarea:hover{border-color:#34465d}
input:focus,select:focus,textarea:focus{
  transform:translateY(-1px);
  border-color:rgba(101,146,232,.60)!important;
  background:#0a1017;
  box-shadow:0 0 0 3px rgba(101,146,232,.09),0 10px 24px rgba(0,0,0,.16);
}

/* Table/row scan interaction */
tbody tr{transition:transform .16s ease,background .18s ease,box-shadow .18s ease}
tbody tr:hover{
  position:relative;
  z-index:1;
  transform:translateX(2px);
  box-shadow:inset 2px 0 0 rgba(101,146,232,.55);
}

/* Live-state motion is semantic and subtle. */
.mc-status.good,.mc-status.fresh,.mc-tag.good,.badge.active{
  animation:dfFuturesHealthyPulse 2.8s ease-in-out infinite;
}
.mc-status.warn,.mc-tag.warn{animation:dfFuturesWarningPulse 2.3s ease-in-out infinite}
.mc-status.bad,.mc-status.stale,.mc-tag.bad{animation:dfFuturesCriticalPulse 1.85s ease-in-out infinite}

.mc-flow-arrow{animation:dfFuturesFlowArrow 1.8s ease-in-out infinite}
.mc-bar i,.mc-progress-track i{animation:dfFuturesBarGlow 3.2s ease-in-out infinite}
.mc-line-chart path{transition:stroke .25s ease,filter .25s ease}

/* Loading/error telemetry line */
.mc-loading,.mc-error,.ej-empty,[class*="loading"],[class*="Loading"]{position:relative;overflow:hidden}
.mc-loading::after,.ej-empty::after,[class*="loading"]::after,[class*="Loading"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  opacity:.48;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(101,146,232,.85),rgba(65,191,212,.62),transparent);
  background-size:220% 100%;
  animation:dfFuturesLoadingLine 1.5s linear infinite;
}

/* SVG/data graphics */
svg{transition:filter .24s ease,opacity .24s ease}
.mc-panel:hover svg,.mc-account-card:hover svg{filter:drop-shadow(0 0 9px rgba(101,146,232,.10))}

/* Accessibility: respect OS reduced-motion preference. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  main::before{animation:none!important}
  button:hover,.nav:hover,.card:hover,.panel:hover,.mc-status:hover,.mc-account-card:hover,.mc-panel:hover,tbody tr:hover,input:focus,select:focus,textarea:focus{transform:none!important}
}

@media(max-width:900px){
  main::before{inset:0;opacity:.26}
  .nav:hover{transform:none}
  .card:hover,.mc-status:hover,.mc-account-card:hover,.mc-panel:hover{transform:none}
}