/* ====================================================================
   HSD LIVE LAYER
   Shared motion and vitality system for the Helendale network site.
   Loaded after each page's own styles. Everything is namespaced hsd-
   and respects prefers-reduced-motion. District identity preserved:
   navy #1B3A6B, gold #C9A835, surface #f4f6fb.
   ==================================================================== */

/* ── 1. Drifting gold constellation inside every navy header ─────── */
.header { position: relative; overflow: hidden; }
.header::after {
  content: "";
  position: absolute;
  inset: -60px;
  background-image: radial-gradient(circle, rgba(201,168,53,.22) 1px, transparent 1.6px);
  background-size: 30px 30px;
  animation: hsdDrift 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.header > * { position: relative; z-index: 1; }
@keyframes hsdDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-30px, -30px, 0); }
}

/* ── 2. Status dots become radar beacons ──────────────────────────── */
.status-dot, .overall-dot { position: relative; }
.status-dot.online::after,
.overall-banner.ok .overall-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(30,158,85,.55);
  animation: hsdPing 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.status-dot.offline::after,
.overall-banner.down .overall-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(214,69,69,.55);
  animation: hsdPing 1.1s cubic-bezier(0, 0, .2, 1) infinite;
}
.overall-banner.warn .overall-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(217,147,13,.55);
  animation: hsdPing 1.5s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes hsdPing {
  0%   { transform: scale(.6); opacity: .9; }
  80%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Online and offline site status strips breathe gently */
.site-status.online { animation: hsdBreatheOk 3.2s ease-in-out infinite; }
.site-status.offline { animation: hsdBreatheBad 2.2s ease-in-out infinite; }
@keyframes hsdBreatheOk {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(30,158,85,0); }
  50%      { box-shadow: inset 0 0 18px 0 rgba(30,158,85,.12); }
}
@keyframes hsdBreatheBad {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(214,69,69,0); }
  50%      { box-shadow: inset 0 0 18px 0 rgba(214,69,69,.16); }
}

/* ── 3. Value change: gold flash sweep ────────────────────────────── */
.hsd-flash {
  animation: hsdFlash 1.1s ease-out;
  border-radius: 6px;
}
@keyframes hsdFlash {
  0%   { background-color: rgba(201,168,53,.45); box-shadow: 0 0 14px rgba(201,168,53,.55); }
  100% { background-color: transparent; box-shadow: none; }
}

/* ── 4. Card life: staggered entrance, hover lift, gold sheen ─────── */
.hsd-enter {
  opacity: 0;
  transform: translateY(14px);
  animation: hsdEnter .55s cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: var(--hsd-delay, 0ms);
}
@keyframes hsdEnter {
  to { opacity: 1; transform: translateY(0); }
}

.site-card, .card, .topo-card, .mini-stat-card, .path-card,
.team-stat, .stat-card, .topo-link-card, .hop-row, .hop {
  position: relative;
  overflow: hidden;
}
.site-card::before, .card::before, .topo-card::before,
.mini-stat-card::before, .path-card::before, .topo-link-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(201,168,53,.13) 45%, rgba(255,255,255,.35) 50%, rgba(201,168,53,.13) 55%, transparent 100%);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
}
.site-card:hover::before, .card:hover::before, .topo-card:hover::before,
.mini-stat-card:hover::before, .path-card:hover::before, .topo-link-card:hover::before {
  left: 130%;
}
.site-card:hover, .mini-stat-card:hover, .team-stat:hover, .stat-card:hover, .path-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(27,58,107,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hop rows glow gold on hover along the left rail */
.hop-row:hover, .hop:hover {
  border-left-color: #C9A835 !important;
  box-shadow: inset 4px 0 14px -6px rgba(201,168,53,.45);
  transition: box-shadow .25s ease;
}

/* ── 5. Section labels: gold rail shimmer ─────────────────────────── */
.ip-section {
  position: relative;
}
.ip-section::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #e9d27a, transparent);
  animation: hsdRail 3.2s ease-in-out infinite;
}
@keyframes hsdRail {
  0%, 100% { opacity: 0; transform: translateY(-30%); }
  50%      { opacity: 1; transform: translateY(30%); }
}

/* ── 6. LIVE chip injected into each header ───────────────────────── */
.hsd-live-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(201,168,53,.45);
  border-radius: 22px;
  padding: .42rem .95rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #fff;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.hsd-live-chip .hsd-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1e9e55;
  box-shadow: 0 0 8px rgba(30,158,85,.8);
  position: relative;
}
.hsd-live-chip .hsd-live-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(30,158,85,.6);
  animation: hsdPing 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.hsd-live-chip .hsd-live-label { color: #e9d27a; }
.hsd-live-chip .hsd-live-clock {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.85);
  font-variant-numeric: tabular-nums;
}
.hsd-live-chip.hsd-chip-flash {
  animation: hsdChipFlash .9s ease-out;
}
@keyframes hsdChipFlash {
  0%   { border-color: #C9A835; box-shadow: 0 0 16px rgba(201,168,53,.7); }
  100% { border-color: rgba(201,168,53,.45); box-shadow: none; }
}

/* ── 7. Uptime meters under percentage values ─────────────────────── */
.hsd-meter {
  height: 4px;
  border-radius: 3px;
  background: rgba(27,58,107,.12);
  margin-top: .35rem;
  overflow: hidden;
}
.hsd-meter-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #1e9e55, #35c274);
  width: 0%;
  transition: width .9s cubic-bezier(.2, .7, .3, 1);
  position: relative;
}
.hsd-meter-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%);
  animation: hsdMeterSheen 2.6s ease-in-out infinite;
}
@keyframes hsdMeterSheen {
  to { transform: translateX(100%); }
}
.hsd-meter-fill.warn { background: linear-gradient(90deg, #d9930d, #edb540); }
.hsd-meter-fill.bad  { background: linear-gradient(90deg, #d64545, #ef7b7b); }

/* ── 8. Latency sparklines ────────────────────────────────────────── */
.hsd-spark {
  display: block;
  margin-top: .3rem;
  width: 92px;
  height: 20px;
  opacity: .95;
}

/* ── 9. Topology: traveling packet on active arrows ──────────────── */
.hop-arrow.active, .arrow.active {
  position: relative;
}
.hop-arrow.active::after, .arrow.active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #C9A835;
  box-shadow: 0 0 10px rgba(201,168,53,.9), 0 0 4px rgba(255,255,255,.9);
  animation: hsdPacket 1.4s ease-in-out infinite;
}
@keyframes hsdPacket {
  0%   { transform: translateY(-4px) scale(.7); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(22px) scale(.7); opacity: 0; }
}

/* ── 10. Badges glow softly ───────────────────────────────────────── */
.badge.success { animation: hsdBadgeOk 3s ease-in-out infinite; }
.badge.danger  { animation: hsdBadgeBad 1.8s ease-in-out infinite; }
@keyframes hsdBadgeOk {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,158,85,0); }
  50%      { box-shadow: 0 0 10px 0 rgba(30,158,85,.35); }
}
@keyframes hsdBadgeBad {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,69,0); }
  50%      { box-shadow: 0 0 10px 0 rgba(214,69,69,.45); }
}

/* ── 11. Table rows: gold rail sweep on hover ─────────────────────── */
tbody tr { transition: box-shadow .2s ease; }
tbody tr:hover { box-shadow: inset 3px 0 0 0 #C9A835; }

/* ── 12. Reduced motion: calm everything ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .header::after,
  .status-dot.online::after, .status-dot.offline::after,
  .overall-dot::after,
  .site-status.online, .site-status.offline,
  .ip-section::after,
  .hsd-live-chip .hsd-live-dot::after,
  .hsd-meter-fill::after,
  .hop-arrow.active::after, .arrow.active::after,
  .badge.success, .badge.danger,
  .hsd-enter {
    animation: none !important;
  }
  .hsd-enter { opacity: 1; transform: none; }
  .site-card::before, .card::before, .topo-card::before,
  .mini-stat-card::before, .path-card::before, .topo-link-card::before {
    display: none;
  }
}