/*
 * Shared motion fallback for workspace banners.
 *
 * :where() intentionally keeps these selectors at zero specificity. A page
 * with bespoke motion (Manufacturing, Daily Reports, etc.) therefore keeps
 * its own animation, while otherwise-static banners receive the shared one.
 */
:where(
  #main-content section[class*="-hero"],
  #main-content header[class*="-hero"],
  #main-content .outcome-header
) {
  animation: workspace-banner-enter .58s cubic-bezier(.2,.8,.2,1) both;
}

:where(
  #main-content [class*="-hero-copy"],
  #main-content .opsdash-hero > div:first-child,
  #main-content .notification-page-hero > div:first-child
) {
  animation: workspace-banner-copy-enter .65s .05s cubic-bezier(.2,.8,.2,1) both;
}

:where(#main-content [class*="-hero-art"]) {
  animation: workspace-banner-art-enter .85s cubic-bezier(.2,.8,.2,1) both;
}

:where(
  #main-content [class*="-hero-art"] [class*="-orbit"],
  #main-content [class*="-hero-art"] [class*="-route"]
) {
  animation: workspace-banner-dash 10s linear infinite;
}

:where(#main-content [class*="-hero-art"] svg > g) {
  transform-box: fill-box;
  transform-origin: center;
  animation: workspace-banner-float 4.3s .4s ease-in-out infinite;
}

:where(#main-content [class*="-hero-art"] [class*="-spark"]) {
  transform-box: fill-box;
  transform-origin: center;
  animation: workspace-banner-spark 2.8s ease-in-out infinite;
}

@keyframes workspace-banner-enter {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
  to { opacity: 1; transform: none; }
}

@keyframes workspace-banner-copy-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes workspace-banner-art-enter {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes workspace-banner-dash {
  to { stroke-dashoffset: -160; }
}

@keyframes workspace-banner-float {
  50% { transform: translateY(-7px) rotate(.5deg); }
}

@keyframes workspace-banner-spark {
  50% { opacity: .5; transform: scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    #main-content section[class*="-hero"],
    #main-content header[class*="-hero"],
    #main-content .outcome-header,
    #main-content [class*="-hero-copy"],
    #main-content [class*="-hero-art"],
    #main-content [class*="-hero-art"] *
  ) {
    animation: none !important;
  }
}