/* ═══════════════════════════════════════════════════════════════════════════
   HELIX — Motion
   Functional animation only: each effect tells the operator something changed,
   arrived, is loading, or needs attention. Short (140–380 ms), ease-out.
   Everything is switched off for users who ask the OS for reduced motion.
   JS helpers that drive these live in frontend/src/utils/ui.ts.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes hx-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes hx-rise-in    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hx-slide-in-l { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes hx-slide-in-r { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes hx-pop-in     { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hx-pop-out    { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.97) translateY(4px); } }

/* A new item arrived: brief accent wash that fades away */
@keyframes hx-arrive-glow {
    0%   { box-shadow: inset 3px 0 0 var(--hx-active), 0 0 0 0 rgba(var(--hx-active-rgb), 0); background-color: rgba(var(--hx-active-rgb), 0.16); }
    60%  { box-shadow: inset 3px 0 0 var(--hx-active), 0 0 0 0 rgba(var(--hx-active-rgb), 0); background-color: rgba(var(--hx-active-rgb), 0.08); }
    100% { box-shadow: inset 0 0 0 transparent; background-color: transparent; }
}

/* A value changed in place: short highlight behind it */
@keyframes hx-flash {
    0%   { background-color: rgba(var(--hx-active-rgb), 0.32); box-shadow: 0 0 0 3px rgba(var(--hx-active-rgb), 0.18); }
    100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
}

/* Attention: expanding ring (map pins, live dots) */
@keyframes hx-pulse-ring {
    0%   { transform: scale(0.6); opacity: 0.75; }
    80%  { opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}
/* Calm emergency edge (SOS) — breathing, never shaking */
@keyframes hx-breathe-red {
    0%, 100% { box-shadow: 0 0 0 1px rgba(var(--hx-red-rgb), 0.55), 0 0 22px 2px rgba(var(--hx-red-rgb), 0.28), var(--hx-shadow-3); }
    50%      { box-shadow: 0 0 0 1px rgba(var(--hx-red-rgb), 0.9),  0 0 38px 8px rgba(var(--hx-red-rgb), 0.45), var(--hx-shadow-3); }
}
@keyframes hx-live-dot   { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Loading placeholders */
@keyframes hx-shimmer    { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Toast lifetime bar */
@keyframes hx-countdown  { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Sparkline draw-in (set stroke-dasharray/offset to the path length) */
@keyframes hx-draw       { to { stroke-dashoffset: 0; } }

/* ── Utility classes ─────────────────────────────────────────────────────────── */
.hx-anim-fade   { animation: hx-fade-in    var(--hx-t)      var(--hx-ease) both; }
.hx-anim-rise   { animation: hx-rise-in    var(--hx-t-slow) var(--hx-ease) both; }
.hx-anim-left   { animation: hx-slide-in-l var(--hx-t-slow) var(--hx-ease) both; }
.hx-anim-right  { animation: hx-slide-in-r var(--hx-t-slow) var(--hx-ease) both; }
.hx-anim-pop    { animation: hx-pop-in     var(--hx-t)      var(--hx-spring) both; }
.hx-anim-out    { animation: hx-pop-out    var(--hx-t-fast) var(--hx-ease) both; }
.hx-arrive      { animation: hx-slide-in-l var(--hx-t-slow) var(--hx-ease) both, hx-arrive-glow 2.4s var(--hx-ease) both; }
.hx-flash       { animation: hx-flash 1.1s var(--hx-ease) both; border-radius: var(--hx-r-sm); }

/* Staggered entrance: children get --i set by staggerIn() */
.hx-stagger > * { animation: hx-rise-in var(--hx-t-slow) var(--hx-ease) both; animation-delay: calc(var(--i, 0) * 28ms); }

/* Live indicator dot */
.hx-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hx-green);
           box-shadow: 0 0 0 3px rgba(var(--hx-green-rgb), 0.18); animation: hx-live-dot 2s ease-in-out infinite; }
.hx-live--off { background: var(--hx-faint); box-shadow: none; animation: none; }

/* Skeletons */
.hx-skel {
    display: block;
    border-radius: var(--hx-r-sm);
    background: linear-gradient(90deg,
        rgba(148, 163, 184, 0.07) 0%, rgba(148, 163, 184, 0.16) 40%, rgba(148, 163, 184, 0.07) 80%);
    background-size: 200% 100%;
    animation: hx-shimmer 1.4s linear infinite;
}
.hx-skel--line   { height: 0.75em; margin: 0.35em 0; }
.hx-skel--title  { height: 1.05em; width: 55%; margin: 0.2em 0 0.55em; }
.hx-skel--circle { border-radius: 50%; }
.hx-skel-row     { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--hx-hairline); }
.hx-skel-row > .hx-skel-col { flex: 1; min-width: 0; }
.hx-skel-fadeout { animation: hx-fade-in var(--hx-t) var(--hx-ease) reverse both; }

/* Content replacing a skeleton */
.hx-reveal { animation: hx-fade-in var(--hx-t) var(--hx-ease) both; }

/* Map pin pulse (Google Maps OverlayView element, see IncidentsPage) */
.hx-pin-pulse { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; }
.hx-pin-pulse::before, .hx-pin-pulse::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--pulse, var(--hx-red));
    animation: hx-pulse-ring 2s var(--hx-ease) infinite;
}
.hx-pin-pulse::after { animation-delay: 1s; }
.hx-pin-ripple { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; }
.hx-pin-ripple::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--hx-active-rgb), 0.55), transparent 70%);
    animation: hx-pulse-ring 1.2s var(--hx-ease) 2 both;
}

/* ── Reduced motion: keep state changes, drop the movement ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .hx-skel { background: rgba(148, 163, 184, 0.1); }
}