/* Register animatable gradient angle property */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --angle: 0deg;
  --border: 4px;
  --radius: 8px;
  --speed: 4s;
  --teal-1: #00b8a5;
  --teal-2: #21826D;
  --teal-3: #047388;
  --teal-4: #045a88;
}

/* Base card (keep your own sizing/padding as-is) */
.mission-card {
  position: relative;
  border-radius: var(--radius);
  background: var(--card-bg, #0b1114);
  z-index: 0;
  transition: transform 0.3s ease; /* zoom */
}

/* Zoom on hover */
.mission-card:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/* Gradient border ring (inactive by default) */
.mission-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--border);
  background: conic-gradient(
    from var(--angle),
    var(--teal-1),
    var(--teal-2),
    var(--teal-3),
    var(--teal-4),
    var(--teal-3),
    var(--teal-2),
    var(--teal-1)
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease; /* smoother fade */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-ma: xor;
  mask-composite: exclude;

  /* Always spin in the background */
  animation: spin-gradient var(--speed) linear infinite;
}

/* On hover, fade in (animation already running) */
.mission-card:hover::before {
  opacity: 1;
}

@keyframes spin-gradient {
  to { --angle: 360deg; }
}

/* Reduced motion: disable animation */
@media (prefers-reduced-motion: reduce) {
  .mission-card::before { animation: none; }
}

/* Fallback for browsers without mask-composite support */
@supports not (mask-composite: exclude) {
  .mission-card {
    border: var(--border) solid transparent;
    background:
      linear-gradient(var(--card-bg, #0b1114), var(--card-bg, #0b1114)) padding-box,
      linear-gradient(90deg, var(--teal-1), var(--teal-2), var(--teal-3), var(--teal-4)) border-box;
  }
  .mission-card::before { display: none; }
}

.mission-icon {
  width: 3rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-card {
  border-left-width: 4px;
  border-left-style: solid;
}


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

/* Smooth scrolling when linking to mission cards */
html {
  scroll-behavior: smooth;
}

.mission-category-card {
  height: 100%;
}