/* ============================================================
   Home Server — futuristic overlay
   One authored moment: the boot scan on load.
   Supporting motion: card hover (affordance), live-status
   breathing (state), search focus glow (feedback).
   ============================================================ */

:root {
  --neon: 56 189 248;    /* sky-400 */
  --violet: 167 139 250; /* violet-400 */
}

/* ---------- Focal moment: one-shot boot scan ---------- */
@keyframes boot-scan {
  0%   { transform: translateY(-16vh); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(116vh); opacity: 0; }
}

body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 16vh;
  background: linear-gradient(180deg,
    transparent,
    rgb(var(--neon) / 0.12) 35%,
    rgb(var(--violet) / 0.16) 50%,
    rgb(var(--neon) / 0.12) 65%,
    transparent);
  pointer-events: none;
  z-index: 9999;
  animation: boot-scan 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

/* ---------- Header hairline: neon gradient rule ---------- */
#information-widgets {
  border-bottom-style: solid;
  border-image: linear-gradient(90deg,
    transparent 2%,
    rgb(var(--neon) / 0.55),
    rgb(var(--violet) / 0.55),
    transparent 98%) 1;
}

/* ---------- Service cards: crisp hover feedback ---------- */
.service-card {
  border: 1px solid rgb(var(--neon) / 0);
  transition:
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

.service-card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--neon) / 0.45);
  box-shadow:
    0 10px 28px -6px rgb(2 6 23 / 0.55),
    0 0 22px -6px rgb(var(--neon) / 0.4);
}

/* Icon pops with the card — depth cue */
.service-card .service-icon img,
.service-card .service-icon svg {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-icon img,
.service-card:hover .service-icon svg {
  transform: scale(1.08);
}

/* ---------- Live status: breathing "monitored" pulse ---------- */
@keyframes status-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.62; }
}
.service-container-stats svg,
.service-ping svg {
  animation: status-breathe 3.2s ease-in-out infinite;
}

/* ---------- Search: focus glow ---------- */
input[placeholder^="Search"]:focus {
  border-color: rgb(var(--neon) / 0.65) !important;
  box-shadow: 0 0 0 3px rgb(var(--neon) / 0.25) !important;
}

/* ---------- Keyboard focus, everywhere ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid rgb(var(--neon) / 0.8) !important;
  outline-offset: 2px;
}

/* ---------- Slim neon scrollbar ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--neon) / 0.4) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: rgb(var(--neon) / 0.35);
  border-radius: 8px;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; content: none; }
  .service-card,
  .service-card .service-icon img,
  .service-card .service-icon svg { transition: none; }
  .service-card:hover { transform: none; }
  .service-container-stats svg,
  .service-ping svg { animation: none; }
}