/**
 * news-dispersal.css
 * Particle dispersal aesthetics and entrance animations for the news feed.
 */

/* ─── Severity palette ──────────────────────────────────────────────────── */
:root {
  --nd-critical:   213, 61,  47;
  --nd-high:       223, 101, 26;
  --nd-elevated:   192, 164, 45;
  --nd-moderate:   31,  142, 144;
  --nd-particle-size: 3px;
  --nd-transition: 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Particle canvas overlay per card ─────────────────────────────────── */
.news-alert-card {
  position: relative;
  overflow: hidden;
}

.news-card-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}

.news-alert-card:hover .news-card-particles {
  opacity: 1;
}

.news-card-particles .np {
  position: absolute;
  border-radius: 50%;
  width: var(--nd-particle-size);
  height: var(--nd-particle-size);
  animation: nd-float var(--dur, 3.2s) var(--delay, 0s) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes nd-float {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0.6; }
  50%  { transform: translate(var(--tx, 8px), var(--ty, -12px)) scale(1.4); opacity: 0.9; }
  100% { transform: translate(var(--tx2, -6px), var(--ty2, 8px)) scale(0.7); opacity: 0.3; }
}

/* severity-specific particle colours */
.news-alert-card[data-severity="critical"]  .np { background: rgba(var(--nd-critical),  0.72); box-shadow: 0 0 6px rgba(var(--nd-critical),  0.4); }
.news-alert-card[data-severity="high"]      .np { background: rgba(var(--nd-high),       0.72); box-shadow: 0 0 6px rgba(var(--nd-high),       0.4); }
.news-alert-card[data-severity="elevated"]  .np { background: rgba(var(--nd-elevated),   0.72); box-shadow: 0 0 6px rgba(var(--nd-elevated),   0.4); }
.news-alert-card[data-severity="moderate"]  .np { background: rgba(var(--nd-moderate),   0.72); box-shadow: 0 0 6px rgba(var(--nd-moderate),   0.4); }

/* card content sits above particle layer */
.news-alert-card > *:not(.news-card-particles) {
  position: relative;
  z-index: 1;
}

/* ─── Scroll-dispersal entrance animation ───────────────────────────────── */
.news-alert-card {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition:
    opacity     var(--nd-transition),
    transform   var(--nd-transition),
    background  200ms ease,
    border-color 200ms ease,
    box-shadow  200ms ease;
}

.news-alert-card.nd-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* stagger via --nd-index set inline */
.news-alert-card { transition-delay: calc(var(--nd-index, 0) * 55ms); }

/* ─── Wave-in for newly arrived cards ───────────────────────────────────── */
@keyframes nd-wave-in {
  0%   { opacity: 0; transform: translateY(-16px) scale(0.97); }
  60%  { opacity: 1; transform: translateY(2px)   scale(1.01); }
  100% { opacity: 1; transform: translateY(0)     scale(1);    }
}

.news-alert-card.nd-wave-in {
  animation: nd-wave-in 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ─── Update flash ──────────────────────────────────────────────────────── */
@keyframes nd-update-flash {
  0%   { background: rgba(255,255,255,0.16); }
  100% { background: var(--news-panel); }
}

.news-alert-card.nd-updated {
  animation: nd-update-flash 900ms ease forwards;
}

/* ─── Reduced-motion safety ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .news-card-particles,
  .news-alert-card { transition: none !important; animation: none !important; }
  .news-alert-card { opacity: 1; transform: none; }
}