/* ============================================================
   DCMS Portal — 05 motion
   View transitions, theme wipe, shared keyframes, reduced motion.
   ============================================================ */

@layer motion {
  /* -- default route swap: quick crossfade + 6px rise ------------------- */
  ::view-transition-old(root) {
    animation: vt-fade-out var(--dur-quick) var(--ease-out) both;
  }

  ::view-transition-new(root) {
    animation: vt-fade-rise var(--dur-quick) var(--ease-out) both;
  }

  /* -- theme change: fast pure crossfade (no rise, no wipe) ------------- */
  html.theme-fade::view-transition-old(root) {
    animation: vt-fade-out var(--dur-fast) var(--ease-out) both;
  }

  html.theme-fade::view-transition-new(root) {
    animation: vt-fade-in var(--dur-fast) var(--ease-out) both;
  }
}

/* Keyframes live outside layer scoping concerns — one home for all. */
@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-fade-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-8px);
  }
  35% {
    transform: translateX(7px);
  }
  55% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(3px);
  }
  90% {
    transform: translateX(-1px);
  }
}

@keyframes shimmer {
  from {
    background-position: 160% 0, 0 0;
  }
  to {
    background-position: -60% 0, 0 0;
  }
}

@keyframes pulse-dot {
  0%, 100% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 3px transparent;
    opacity: 0.55;
  }
}

@keyframes dash-in {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes line-pulse {
  0%, 100% {
    stroke-opacity: 0.9;
  }
  50% {
    stroke-opacity: 0.35;
  }
}

/* ============================================================
   Reduced motion: kill everything, everywhere, at once.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  .graph-line,
  .graph-line-online {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}