/**
 * Scenario catalog cards — hover tied to .scenario-card--page (not href shape).
 * Add that class in markup when the card has a scenario page link.
 */

.scenario-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--nf-ink);
  background: #fff;
  border-color: var(--nf-divider);
  box-shadow: 0 12px 34px rgba(23, 21, 38, .055);
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.scenario-card.priority {
  color: var(--nf-ink);
  background: #fff;
  border-color: var(--nf-divider);
  box-shadow: 0 12px 34px rgba(23, 21, 38, .055);
}

.scenario-card.priority p {
  color: var(--nf-muted);
}

.scenario-card.priority .card-link i {
  color: #fff;
  background: var(--nf-violet-dark);
}

.scenario-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 52%, rgba(108, 92, 231, .72) 0%, rgba(94, 78, 215, .42) 27%, rgba(46, 169, 240, .12) 49%, transparent 74%);
  opacity: 0;
  transform: scale(.82);
  transition: opacity 240ms ease, transform 320ms ease;
  pointer-events: none;
}

.scenario-card--page {
  cursor: pointer;
}

.scenario-card--page:is(:hover, :focus-within) {
  color: #fff;
  background: var(--nf-ink);
  border-color: var(--nf-ink);
  box-shadow: 0 20px 50px rgba(23, 21, 38, .19);
}

.scenario-card--page:is(:hover, :focus-within)::before {
  opacity: 1;
  transform: scale(1);
}

.scenario-card p,
.scenario-card .card-link i {
  transition: color 240ms ease, background-color 240ms ease, transform 240ms ease;
}

.scenario-card--page:is(:hover, :focus-within) p {
  color: var(--nf-muted-dark);
}

.scenario-card--page:is(:hover, :focus-within) .card-link i {
  color: var(--nf-ink);
  background: var(--nf-point);
  transform: translateX(2px);
}

.scenario-card .card-link:focus-visible {
  outline: 3px solid rgba(108, 92, 231, .35);
  outline-offset: 5px;
  border-radius: 5px;
}

.scenario-card--page .card-link:focus-visible {
  outline-color: var(--nf-point);
}

@media (prefers-reduced-motion: reduce) {
  .scenario-card,
  .scenario-card::before,
  .scenario-card p,
  .scenario-card .card-link i {
    transition: none;
  }
}