/* Localized version of the original light Nexus dashboard animation.
   The lavender, blue and turquoise data palette intentionally stays intact. */
.site-page .dashboard-demo {
  --dash-ink: #11131a;
  --dash-muted: #7a8392;
  --dash-line: #e5e8ee;
  --dash-hover: #f5f6f8;
  --dash-purple: #5e50d3;
  --dash-lilac: #9687ff;
  --dash-blue: #529dff;
  --dash-turquoise: #13c8c9;
  --dash-aqua: #72e9ea;
  --dash-positive-bg: #eafaf8;
  --dash-negative: #ef567c;
  --dash-negative-bg: #fff0f4;
  --dash-cycle: 12s;
  background: #e8edf0;
}
.dashboard-demo__scene { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; font-family: 'Inter', sans-serif; text-align: left; }
.dashboard-demo__scene text { letter-spacing: -.025em; }
.dashboard-demo__camera { transform-origin: 0 0; }
.dashboard-demo--ready .dashboard-demo__camera { animation: dashboard-camera var(--dash-cycle) cubic-bezier(.4,0,.2,1) infinite; }
.dashboard-demo--ready .dashboard-demo__stat { animation: dashboard-stat var(--dash-cycle) ease-in-out infinite; }
.dashboard-demo--ready .dashboard-demo__stat--2 { animation-delay: .12s; }
.dashboard-demo--ready .dashboard-demo__stat--3 { animation-delay: .24s; }
.dashboard-demo--ready .dashboard-demo__stack { transform-box: fill-box; transform-origin: center bottom; animation: dashboard-stack var(--dash-cycle) cubic-bezier(.22,1,.36,1) infinite; }
.dashboard-demo--ready .dashboard-demo__stack--2 { animation-delay: .15s; }
.dashboard-demo--ready .dashboard-demo__stack--3 { animation-delay: .3s; }
.dashboard-demo--ready .dashboard-demo__ribbons { animation: dashboard-ribbons var(--dash-cycle) ease-in-out infinite; }
.dashboard-demo--ready .dashboard-demo__week-bar { transform-box: fill-box; transform-origin: center bottom; animation: dashboard-stack var(--dash-cycle) cubic-bezier(.22,1,.36,1) infinite; animation-delay: var(--bar-delay); }
.dashboard-demo--ready .dashboard-demo__donut { stroke-dasharray: 320; animation: dashboard-donut var(--dash-cycle) ease-in-out infinite; }
.dashboard-demo--ready .dashboard-demo__integration { animation: dashboard-integration var(--dash-cycle) ease-in-out infinite; }
.dashboard-demo--ready .dashboard-demo__integration--2 { animation-delay: .18s; }
.dashboard-demo--ready .dashboard-demo__integration--3 { animation-delay: .36s; }
.dashboard-demo--ready :is(.dashboard-demo__camera,.dashboard-demo__stat,.dashboard-demo__stack,.dashboard-demo__ribbons,.dashboard-demo__week-bar,.dashboard-demo__donut,.dashboard-demo__integration) { animation-play-state: paused; }
.dashboard-demo--running :is(.dashboard-demo__camera,.dashboard-demo__stat,.dashboard-demo__stack,.dashboard-demo__ribbons,.dashboard-demo__week-bar,.dashboard-demo__donut,.dashboard-demo__integration) { animation-play-state: running; }
.dashboard-demo__toggle { position: absolute; z-index: 4; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 12px; color: var(--dash-muted); background: rgba(255,255,255,.94); border: 1px solid var(--dash-line); border-radius: 20px; font: 11px 'Inter',sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(17,19,26,.06); }
.dashboard-demo__toggle[hidden] { display: none; }
.dashboard-demo__toggle:hover { color: var(--dash-purple); border-color: #d7d0f7; }
.dashboard-demo__toggle:focus-visible { outline: 2px solid var(--dash-purple); outline-offset: 3px; }
.dashboard-demo__toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-demo__toggle .dashboard-demo__play-icon { display: none; }
.dashboard-demo--paused .dashboard-demo__toggle .dashboard-demo__pause-icon { display: none; }
.dashboard-demo--paused .dashboard-demo__toggle .dashboard-demo__play-icon { display: block; }
@keyframes dashboard-camera {
  0%, 5%, 88%, 100% { transform: translate(0,0) scale(1); }
  18%, 35% { transform: translate(40px,40px) scale(1.3); }
  58%, 68% { transform: translate(-510px,-380px) scale(1.35); }
}
@keyframes dashboard-stat {
  0%, 5%, 28%, 100% { opacity: 1; }
  12% { opacity: .25; }
}
@keyframes dashboard-stack {
  0%, 5%, 32%, 100% { transform: scaleY(1); opacity: 1; }
  12% { transform: scaleY(.025); opacity: 0; }
}
@keyframes dashboard-ribbons {
  0%, 5%, 38%, 100% { opacity: 1; }
  12%, 22% { opacity: 0; }
}
@keyframes dashboard-donut {
  0%, 5%, 52%, 100% { stroke-dashoffset: 0; opacity: 1; }
  12%, 24% { stroke-dashoffset: 320; opacity: 0; }
}
@keyframes dashboard-integration {
  0%, 5%, 64%, 100% { opacity: 1; }
  12%, 42% { opacity: 0; }
}
@media (max-width: 767px) {
  .dashboard-demo__toggle { right: 8px; bottom: 8px; min-width: 44px; min-height: 44px; justify-content: center; padding: 10px; }
  .dashboard-demo__toggle span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-demo--ready :is(.dashboard-demo__camera,.dashboard-demo__stat,.dashboard-demo__stack,.dashboard-demo__ribbons,.dashboard-demo__week-bar,.dashboard-demo__donut,.dashboard-demo__integration) { animation: none; }
  .site-page .dashboard-demo::after { animation: none; }
}