/* =============================================================================
   ECOSOUND · ANIMATIONS
   Subtle, centralized motion. Timings/eases come from tokens.css so the whole
   app's "feel" can be tuned in one place. Everything degrades gracefully under
   prefers-reduced-motion.
   ============================================================================= */

@keyframes ecs-fade-up {
  from { opacity: 0; transform: translateY(var(--ecs-enter-shift)); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* Scan line sweeping down the sample grid while an estimate runs */
@keyframes ecs-scan-down {
  0%   { transform: translateY(-120%); }
  100% { transform: translateY(520%); }
}

/* Pulsing halo on a live status dot */
@keyframes ecs-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(var(--ecs-accent-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--ecs-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--ecs-accent-rgb), 0); }
}

/* Bars rising from the baseline (activity chart) */
@keyframes ecs-bar-grow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Gentle spin for in-progress markers */
@keyframes ecs-spin {
  to { transform: rotate(360deg); }
}

/* Indeterminate meter: a chunk of fill slides inside overflow:hidden */
@keyframes ecs-adm-meter-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(280%); }
}

/* ---- Applied utilities -------------------------------------------------- */

/* Screen-enter animation — marked on every screen root, run only while js/app.js
   holds `.ecs-entering` on the app root, which it does for one navigation. It
   used to run on the class alone, which was right while every paint rebuilt the
   root it sits on and wrong the moment the node survived one: a tab, a filter or
   a checkbox blinked the whole screen out and slid it back in, and the page read
   as reloading on every click. Same fix, same reason, as
   .ecs-adm-body.is-entering. */
.ecs-entering .ecs-anim-enter {
  animation: ecs-fade-up var(--ecs-dur-base) var(--ecs-ease-out) both;
}

/* Slower enter for revealed result blocks */
.ecs-anim-reveal {
  animation: ecs-fade-up var(--ecs-dur-slow) var(--ecs-ease-out) both;
}

.ecs-anim-fade {
  animation: ecs-fade-in var(--ecs-dur-slow) var(--ecs-ease) both;
}

.ecs-scan-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--ecs-radius-md);
  pointer-events: none;
}
.ecs-scan-layer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26%;
  background: linear-gradient(
    180deg,
    rgba(var(--ecs-accent-rgb), 0),
    rgba(var(--ecs-accent-rgb), 0.55),
    rgba(var(--ecs-accent-rgb), 0)
  );
  animation: ecs-scan-down var(--ecs-dur-scan) ease-in-out infinite;
}

.ecs-pulse-dot {
  animation: ecs-pulse-dot var(--ecs-dur-pulse) infinite;
}

.ecs-spin {
  animation: ecs-spin 1s linear infinite;
}

@keyframes ecs-adm-wheel-spin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}

/* Bars animate up on first paint, staggered via inline --i in markup */
.ecs-bar {
  transform-origin: bottom;
  animation: ecs-bar-grow var(--ecs-dur-slow) var(--ecs-ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* Interactive lift on cards/rows marked interactive */
.ecs-lift {
  transition: transform var(--ecs-dur-fast) var(--ecs-ease),
              box-shadow var(--ecs-dur-fast) var(--ecs-ease),
              border-color var(--ecs-dur-fast) var(--ecs-ease),
              background var(--ecs-dur-fast) var(--ecs-ease);
}
.ecs-lift:hover {
  transform: translateY(-2px);
}

/* =============================================================================
   Respect the user's motion preference — kill non-essential motion.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ecs-anim-enter,
  .ecs-anim-reveal,
  .ecs-anim-fade { opacity: 1 !important; transform: none !important; }
  .ecs-lift:hover { transform: none; }
}