/* ============================================================================
 * Nexo Seguridad — Premium Animations
 * ----------------------------------------------------------------------------
 * Motion is purposeful and earned. Each animation has a single, named job;
 * none are decorative. All durations and easings reference tokens.css so
 * timing stays consistent across the system.
 *
 * Rules:
 *   - prefers-reduced-motion: animations collapse to opacity fades or are
 *     fully disabled (see tokens.css global override).
 *   - Stagger animations stop at 8 children to keep page loads predictable.
 *   - Shimmer & pulse pause when the tab is backgrounded (handled in JS).
 * ========================================================================== */


/* ---------------------------------------------------------------------------
 * KEYFRAMES
 * ------------------------------------------------------------------------- */

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

@keyframes lj-kf-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes lj-kf-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes lj-kf-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1);    }
}

@keyframes lj-kf-shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position:  1000px 0; }
}

@keyframes lj-kf-pulse-subtle {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.6; }
}

@keyframes lj-kf-critical-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.50); }
  100% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);  }
}

@keyframes lj-kf-active-breathe {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(42, 107, 255, 0.35); }
  100% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(42, 107, 255, 0);  }
}

@keyframes lj-kf-count-up {
  /* Marker animation: JS hooks animationend to swap displayed numeric. */
  from { opacity: 0.6; }
  to   { opacity: 1;   }
}

@keyframes lj-kf-progress-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* ---------------------------------------------------------------------------
 * NAMED UTILITY CLASSES
 * ------------------------------------------------------------------------- */

/* Fade in — for modals, popovers, intersection-observer reveals */
.lj-fade-in {
  animation: lj-kf-fade-in var(--lj-dur-base, 220ms) var(--lj-ease-out-quart, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* Slide up — primary "row enters viewport" animation */
.lj-slide-up {
  animation: lj-kf-slide-up var(--lj-dur-base, 220ms) var(--lj-ease-out-quart, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* Slide down — for dropdowns, menus opening downward */
.lj-slide-down {
  animation: lj-kf-slide-down var(--lj-dur-base, 220ms) var(--lj-ease-out-quart, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* Scale in — command palette, modal enter */
.lj-scale-in {
  animation: lj-kf-scale-in var(--lj-dur-fast, 140ms) var(--lj-ease-out-quart, cubic-bezier(0.16, 1, 0.3, 1)) both;
  transform-origin: center top;
}

/* Shimmer — skeleton loaders */
.lj-shimmer {
  background: linear-gradient(
    90deg,
    var(--lj-color-surface-sunken) 0%,
    var(--lj-color-shimmer) 50%,
    var(--lj-color-surface-sunken) 100%
  );
  background-size: 1000px 100%;
  background-repeat: no-repeat;
  animation: lj-kf-shimmer 1600ms linear infinite;
}

/* Pulse subtle — "loading" / "live data" indicators */
.lj-pulse-subtle {
  animation: lj-kf-pulse-subtle 2000ms var(--lj-ease-in-out-quint, cubic-bezier(0.65, 0, 0.35, 1)) infinite;
}

/* Critical pulse — resurfaced finding indicator dot */
.lj-pulse-critical {
  border-radius: 9999px;
  background: var(--lj-color-sev-resurfaced, #FF3B30);
  animation: lj-kf-critical-pulse 1800ms var(--lj-ease-out-quart, cubic-bezier(0.16, 1, 0.3, 1)) infinite;
}
.lj-pulse-critical:hover { animation-play-state: paused; }

/* Active breathe — storyboard active node ("live work happening here") */
.lj-breathe {
  animation: lj-kf-active-breathe 1500ms var(--lj-ease-in-out-quint, cubic-bezier(0.65, 0, 0.35, 1)) infinite alternate;
  transform-origin: center;
}

/* Count up — apply to KPI number on first paint; JS handles value updates */
.lj-count-up {
  animation: lj-kf-count-up var(--lj-dur-deliberate, 800ms) var(--lj-ease-out-quart, cubic-bezier(0.16, 1, 0.3, 1)) both;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Progress fill — framework readiness bars */
.lj-progress-animated {
  transform-origin: left center;
  animation: lj-kf-progress-fill var(--lj-dur-slower, 640ms) var(--lj-ease-out-quart, cubic-bezier(0.16, 1, 0.3, 1)) both;
}


/* ---------------------------------------------------------------------------
 * STAGGER CHILDREN — table rows, finding cards, list reveals
 * Stops at 8 children to keep first-paint predictable (per rationale).
 * ------------------------------------------------------------------------- */

.lj-stagger-children > * {
  animation: lj-kf-slide-up var(--lj-dur-base, 220ms) var(--lj-ease-out-quart, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
.lj-stagger-children > *:nth-child(1) { animation-delay: 0ms;   }
.lj-stagger-children > *:nth-child(2) { animation-delay: 24ms;  }
.lj-stagger-children > *:nth-child(3) { animation-delay: 48ms;  }
.lj-stagger-children > *:nth-child(4) { animation-delay: 72ms;  }
.lj-stagger-children > *:nth-child(5) { animation-delay: 96ms;  }
.lj-stagger-children > *:nth-child(6) { animation-delay: 120ms; }
.lj-stagger-children > *:nth-child(7) { animation-delay: 144ms; }
.lj-stagger-children > *:nth-child(8) { animation-delay: 168ms; }
/* Children beyond 8 inherit the base animation with no delay (snap in). */


/* ---------------------------------------------------------------------------
 * REDUCED MOTION & TAB VISIBILITY
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lj-fade-in,
  .lj-slide-up,
  .lj-slide-down,
  .lj-scale-in,
  .lj-count-up,
  .lj-progress-animated,
  .lj-stagger-children > * {
    animation: lj-kf-fade-in 140ms linear both !important;
    transform: none !important;
  }
  .lj-shimmer,
  .lj-pulse-subtle,
  .lj-pulse-critical,
  .lj-breathe {
    animation: none !important;
    background: var(--lj-color-surface-sunken);
  }
}

/* Pause breathing/pulse when the tab is hidden (set by JS on visibilitychange) */
html[data-visibility="hidden"] .lj-breathe,
html[data-visibility="hidden"] .lj-pulse-critical,
html[data-visibility="hidden"] .lj-pulse-subtle,
html[data-visibility="hidden"] .lj-shimmer {
  animation-play-state: paused;
}