@property --ai-urgent-end {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --ai-attention-end {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --ai-standard-end {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

:root {
  --graphic-ease: cubic-bezier(.2, .78, .2, 1);
}

section[data-view].is-active .grid > .card {
  animation: graphicCardIn .56s var(--graphic-ease) backwards;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

section[data-view].is-active .grid > .card:hover,
.source-kpi:hover,
.source-tech-card:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 178, 255, .25);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .035);
}

section[data-view].is-active .grid > .card:nth-child(2),
.source-kpi:nth-child(2) { animation-delay: 45ms; }
section[data-view].is-active .grid > .card:nth-child(3),
.source-kpi:nth-child(3) { animation-delay: 90ms; }
section[data-view].is-active .grid > .card:nth-child(4),
.source-kpi:nth-child(4) { animation-delay: 135ms; }
section[data-view].is-active .grid > .card:nth-child(5),
.source-kpi:nth-child(5) { animation-delay: 180ms; }
section[data-view].is-active .grid > .card:nth-child(6) { animation-delay: 225ms; }
section[data-view].is-active .grid > .card:nth-child(7) { animation-delay: 270ms; }
section[data-view].is-active .grid > .card:nth-child(8) { animation-delay: 315ms; }

.metric {
  animation: graphicMetricIn .68s var(--graphic-ease) backwards;
  transform-origin: left center;
}

.ai-signal-donut {
  animation: graphicDonutIn .72s var(--graphic-ease) backwards;
  transition:
    --ai-urgent-end .82s var(--graphic-ease),
    --ai-attention-end .82s var(--graphic-ease),
    --ai-standard-end .82s var(--graphic-ease),
    filter .25s ease,
    transform .25s ease;
  will-change: transform, filter;
}

.ai-signal-donut:hover {
  transform: translateY(-3px) rotate(1deg);
  filter: brightness(1.08) saturate(1.05);
}

.ai-signal-donut,
.source-asset-ring,
.opportunity-probability {
  cursor: pointer;
}

.ai-signal-donut.has-graphic-loaded,
.source-asset-ring.has-graphic-loaded {
  animation: none;
}

.ai-signal-donut.is-graphic-loading {
  animation: graphicCircuitLoading 1.08s cubic-bezier(.55, .05, .2, 1);
}

.ai-signal-donut.is-graphic-loading .ai-signal-donut-core {
  animation: graphicCircuitCounterLoading 1.08s cubic-bezier(.55, .05, .2, 1);
}

.ai-signal-donut-core strong {
  animation: graphicMetricIn .72s .16s var(--graphic-ease) backwards;
}

.ai-signal-legend li,
.top-actions-priority-legend li {
  animation: graphicRowIn .44s var(--graphic-ease) backwards;
}

.ai-signal-legend li:nth-child(2),
.top-actions-priority-legend li:nth-child(2) { animation-delay: 55ms; }
.ai-signal-legend li:nth-child(3),
.top-actions-priority-legend li:nth-child(3) { animation-delay: 110ms; }
.ai-signal-legend li:nth-child(4),
.top-actions-priority-legend li:nth-child(4) { animation-delay: 165ms; }

.top-action-row {
  animation: graphicRowIn .5s var(--graphic-ease) backwards;
  transition: background .2s ease, transform .2s ease;
}

.top-action-row:hover {
  transform: translateX(4px);
  background: linear-gradient(90deg, rgba(125, 178, 255, .055), transparent 72%);
}

.top-action-row:nth-child(2) { animation-delay: 55ms; }
.top-action-row:nth-child(3) { animation-delay: 110ms; }
.top-action-row:nth-child(4) { animation-delay: 165ms; }
.top-action-row:nth-child(5) { animation-delay: 220ms; }

.source-kpi {
  animation: graphicCardIn .5s var(--graphic-ease) backwards;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.source-tech-card {
  animation: graphicCardIn .56s var(--graphic-ease) backwards;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.source-chart-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: graphicLineIn 1s var(--graphic-ease) forwards;
}

.source-chart-area {
  animation: graphicAreaIn .78s .22s ease backwards;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.source-chart-dot {
  animation: graphicDotIn .38s .66s var(--graphic-ease) backwards;
  transform-box: fill-box;
  transform-origin: center;
}

.source-asset-ring {
  animation: graphicRingIn .72s var(--graphic-ease) backwards;
  transition: filter .22s ease, transform .22s ease;
}

.source-asset-ring:nth-child(2) { animation-delay: 90ms; }
.source-asset-ring:hover { transform: translateY(-2px) scale(1.025); filter: brightness(1.08); }

.source-asset-ring.is-graphic-loading {
  animation: graphicCircuitLoading 1.08s cubic-bezier(.55, .05, .2, 1);
}

.source-asset-ring.is-graphic-loading > div {
  animation: graphicCircuitCounterLoading 1.08s cubic-bezier(.55, .05, .2, 1);
}

.source-bar-track i {
  animation: graphicBarIn .78s var(--graphic-ease) backwards;
  transform-origin: left center;
}

.dispatch-progress span.is-current {
  animation: graphicProgressIn .5s var(--graphic-ease) backwards;
}

.dispatch-progress span.is-done {
  animation: graphicProgressDone .5s var(--graphic-ease) backwards;
}

.opportunity-probability {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 116px;
  min-height: 28px;
  padding: 0 10px 0 28px;
  overflow: hidden;
  border-color: rgba(37, 225, 177, .42);
  background: rgba(37, 225, 177, .055);
  color: #7fffd9;
  box-shadow: inset 0 0 0 1px rgba(37, 225, 177, .035), 0 0 18px rgba(37, 225, 177, .06);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.opportunity-probability:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 225, 177, .72);
  box-shadow: inset 0 0 0 1px rgba(37, 225, 177, .09), 0 0 22px rgba(37, 225, 177, .16);
}

.opportunity-probability-fill {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: var(--opportunity-progress, 0%);
  overflow: hidden;
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(24, 195, 146, .2), rgba(37, 225, 177, .46));
  box-shadow: 0 0 16px rgba(37, 225, 177, .2);
  animation: none;
}

.opportunity-probability.is-graphic-loading .opportunity-probability-fill {
  animation: opportunityFill .92s var(--graphic-ease) backwards;
}

.opportunity-probability-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .24) 48%, transparent 70%);
  transform: translateX(-130%);
  animation: none;
}

.opportunity-probability.is-graphic-loading .opportunity-probability-fill::after {
  animation: opportunityShimmer .9s .42s ease-out backwards;
}

.opportunity-live-dot {
  position: absolute;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25e1b1;
  box-shadow: 0 0 0 3px rgba(37, 225, 177, .1), 0 0 11px rgba(37, 225, 177, .7);
  animation: opportunityLivePulse 2.2s ease-in-out infinite;
}

.opportunity-probability strong {
  position: relative;
  z-index: 1;
  color: #c9ffef;
  font-variant-numeric: tabular-nums;
}

@keyframes graphicCardIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes graphicMetricIn {
  from { opacity: 0; transform: translateY(7px) scale(.94); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes graphicDonutIn {
  from { opacity: 0; transform: scale(.84) rotate(-14deg); filter: saturate(.7); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes graphicRowIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes graphicLineIn {
  to { stroke-dashoffset: 0; }
}

@keyframes graphicAreaIn {
  from { opacity: 0; transform: scaleY(.35); }
  to { opacity: 1; transform: none; }
}

@keyframes graphicDotIn {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes graphicRingIn {
  from { opacity: 0; transform: scale(.72) rotate(-24deg); }
  to { opacity: 1; transform: none; }
}

@keyframes graphicBarIn {
  from { opacity: .35; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes graphicProgressIn {
  from { opacity: .45; transform: scale(.7); box-shadow: 0 0 0 0 rgba(37, 225, 177, 0); }
  to { opacity: 1; transform: scale(1); box-shadow: 0 0 0 4px rgba(37, 225, 177, .05); }
}

@keyframes graphicProgressDone {
  from { opacity: .55; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes graphicCircuitLoading {
  from { filter: brightness(1.18) saturate(1.08); transform: rotate(-360deg); }
  72% { filter: brightness(1.12) saturate(1.06); }
  to { filter: none; transform: rotate(0); }
}

@keyframes graphicCircuitCounterLoading {
  from { transform: rotate(360deg); }
  to { transform: rotate(0); }
}

@keyframes opportunityFill {
  from { opacity: .4; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes opportunityShimmer {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

@keyframes opportunityLivePulse {
  0%, 100% { opacity: .72; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  section[data-view].is-active .grid > .card,
  .metric,
  .ai-signal-donut,
  .ai-signal-donut-core strong,
  .ai-signal-legend li,
  .top-actions-priority-legend li,
  .top-action-row,
  .source-kpi,
  .source-tech-card,
  .source-chart-line,
  .source-chart-area,
  .source-chart-dot,
  .source-asset-ring,
  .source-bar-track i,
  .dispatch-progress span,
  .ai-signal-donut.is-graphic-loading,
  .ai-signal-donut.is-graphic-loading .ai-signal-donut-core,
  .source-asset-ring.is-graphic-loading,
  .source-asset-ring.is-graphic-loading > div,
  .opportunity-probability,
  .opportunity-probability-fill,
  .opportunity-probability-fill::after,
  .opportunity-live-dot {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .opportunity-probability:hover {
    transform: none;
  }
}