/* Ripple click effect */
.interaction-ripple {
  position: relative;
  overflow: hidden;
}

.interaction-ripple::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  top: var(--interaction-ripple-y, 50%);
  left: var(--interaction-ripple-x, 50%);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

.interaction-ripple:active::after {
  animation: interaction-ripple-effect 0.5s ease-out;
}

@keyframes interaction-ripple-effect {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.prose {
  max-width: 72ch;
  color: var(--ui-muted);
  line-height: 1.75;
}

/* Homepage console atmosphere: intentionally limited to the marked hero. */
[data-cursor-glow] {
  position: relative;
  isolation: isolate;
  --cursor-glow-x: 50%;
  --cursor-glow-y: 50%;
}

[data-cursor-glow] > * {
  position: relative;
  z-index: 1;
}

[data-cursor-glow]::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    circle at var(--cursor-glow-x) var(--cursor-glow-y),
    rgba(94, 106, 210, 0.13),
    rgba(94, 106, 210, 0.045) 16rem,
    transparent 34rem
  );
  opacity: 0;
  transition: opacity 220ms ease;
}

[data-cursor-glow].is-cursor-glow-active::before {
  opacity: 1;
}

[data-border-glow] {
  position: relative;
  isolation: isolate;
  --border-glow-x: 50%;
  --border-glow-y: 50%;
}

[data-border-glow]::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    9rem 6rem at var(--border-glow-x) var(--border-glow-y),
    rgba(160, 170, 255, 1),
    rgba(94, 106, 210, 0.3) 38%,
    transparent 72%
  ) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 160ms ease;
}

[data-border-glow].is-border-glow-active::after,
[data-border-glow]:hover::after,
[data-border-glow]:focus-within::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-cursor-glow]::before,
  [data-border-glow]::after {
    transition: none;
  }
}