.nav-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform: scale(1);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1.5rem 2rem rgba(15, 23, 42, 0.18);
  transition: transform 0.3s ease, background 0.35s ease, border-color 0.3s ease,
    box-shadow 0.35s ease;
  color: inherit;
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
.nav-card .card-body {
  background: transparent;
}
.nav-card:hover,
.nav-card:focus-visible {
  transform: scale(1.04);
  color: #fff !important;
  border-color: transparent;
  background-image: linear-gradient(135deg, var(--primary), var(--primary-b)),
    linear-gradient(0deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
  background-size: 200% 200%;
  animation: gradientLoop 3s ease infinite;
  box-shadow: 0 1.5rem 2.75rem rgba(15, 23, 42, 0.25);
}
.nav-card__image {
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
  object-fit: cover;
  width: 100%;
  display: block;
}

body.dark-mode .nav-card {
  background: rgba(11, 14, 24, 0.78);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1.5rem 2.25rem rgba(0, 0, 0, 0.65);
  color: #f5f5f5;
}
body.dark-mode .nav-card:hover,
body.dark-mode .nav-card:focus-visible {
  background-image: linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 80%, transparent),
      color-mix(in srgb, var(--primary-b) 90%, transparent)
    ),
    linear-gradient(0deg, rgba(15, 15, 25, 0.2), rgba(15, 15, 25, 0.35));
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.75);
}

@keyframes gradientLoop {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.nav-card:hover .text-primary,
.nav-card:hover h3,
.nav-card:hover p {
  color: #ffffff !important;
}
.nav-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4),
    0 0 0 6px rgba(71, 171, 252, 0.4);
}
body.dark-mode .nav-card:focus-visible {
  box-shadow: 0 0 0 2px rgba(15, 15, 25, 0.9),
    0 0 0 6px rgba(102, 178, 255, 0.35);
}

.nav-card .card-body h3,
.nav-card .card-body p {
  transition: color 0.3s ease;
}

.nav-card .card-body i {
  transition: transform 0.3s ease, color 0.3s ease;
}
.nav-card:hover i {
  transform: scale(1.2);
  color: #000 !important;
}

.hero-waves {
  position: relative;
  width: 100%;
  height: clamp(140px, 22vh, 260px);
  overflow: hidden;
  background: radial-gradient(
      120% 80% at 50% -20%,
      color-mix(in srgb, var(--primary) 22%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 12%, transparent),
      transparent 70%
    );
}
.hero-waves::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-waves canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

body.dark-mode .hero-waves {
  background: radial-gradient(
      120% 80% at 50% -20%,
      color-mix(in srgb, var(--primary) 30%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 18%, transparent),
      transparent 70%
    );
}
.welcome-hover-preview {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--welcome-preview-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease, filter 0.3s ease;
  filter: blur(24px) saturate(115%) brightness(1.1) contrast(1.05);
}

.welcome-hover-preview.is-visible {
  opacity: 0.25;
}

body.dark-mode .welcome-hover-preview {
  filter: blur(24px) saturate(115%) brightness(0.25) contrast(1.2);
}

body.dark-mode .welcome-hover-preview.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-waves {
    height: 160px;
  }
  #heroWaves {
    display: none;
  }
  .hero-waves {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary) 22%, transparent),
        transparent 70%
      ),
      repeating-linear-gradient(
        0deg,
        color-mix(in srgb, var(--primary) 24%, transparent) 0 2px,
        transparent 2px 6px
      );
  }
}