/* ---------------------------------------------------------------------------
 * Homepage custom styling.
 *
 * Adapted from a community config, but rewritten for the slate/dark theme and
 * deliberately WITHOUT that config's per-tab CSS grid rules. Those were built
 * on `:has([aria-selected][id="HOME-tab"]) .services-group:nth-child(-n+4)`,
 * i.e. hard-coded to their exact group count and order -- dropping them in here
 * would scramble this layout. Everything below is layout-agnostic: it styles
 * cards, tabs and the footer, and never positions groups.
 * ------------------------------------------------------------------------- */

:root {
  --hp-border: rgba(148, 163, 184, 0.18);   /* slate-400 @ 18% */
  --hp-radius: 0.5rem;
  --hp-border-width: 1px;
  --hp-transition: 220ms;
  --hp-anim: 4s;

  /* Slate/cyan sweep, matching the dashboard's colour scheme rather than the
     crimson gradient the original used. */
  --hp-gradient: linear-gradient(90deg, #38bdf8, #6366f1, #38bdf8);
}

/* --- Service cards: animated gradient border that fades in on hover -------- */

.service-card {
  position: relative;
  border-radius: var(--hp-radius);
  border: var(--hp-border-width) solid var(--hp-border);
  transition: border-color var(--hp-transition) ease;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--hp-border-width));
  border-radius: var(--hp-radius);
  background: var(--hp-gradient);
  background-size: 200% 100%;
  animation: hp-wave var(--hp-anim) linear infinite;
  opacity: 0;
  transition: opacity var(--hp-transition) ease;
  z-index: -2;
  pointer-events: none;
}

.service-card:hover {
  border-color: transparent;
}

.service-card:hover::before {
  opacity: 1;
}

@keyframes hp-wave {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .service-card::before { animation: none; }
}

/* --- Tab bar -------------------------------------------------------------- */

button[id$="-tab"] {
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  padding: 0.2rem 0.75rem;
  margin: 0 0.15rem;
  transition: border-color var(--hp-transition) ease,
              background-color var(--hp-transition) ease;
}

button[id$="-tab"]:hover {
  border-color: rgba(56, 189, 248, 0.55);   /* sky-400 */
  background-color: rgba(148, 163, 184, 0.08);
}

/* --- Chrome --------------------------------------------------------------- */

#footer {
  display: none;
}