html,
body {
  overflow-x: clip;
}

.motion-card {
  isolation: isolate;
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.motion-enabled .motion-card:not(.is-revealed) {
  opacity: 0.01;
  transform: translateY(18px);
  filter: blur(3px);
}

.motion-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: none;
}

.motion-neon {
  position: relative;
  isolation: isolate;
}

.motion-neon-line {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: linear-gradient(
      110deg,
      transparent 5%,
      #28d9ff 28%,
      #9f42ff 48%,
      transparent 68%
    )
    border-box;
  background-size: 260% 100%;
  pointer-events: none;
  opacity: 0.58;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: motionNeonRun 5.5s linear infinite;
}

@keyframes motionNeonRun {
  to {
    background-position: -260% 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .motion-card.is-revealed:hover,
  .motion-card.is-revealed:focus-within {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-card,
  .motion-enabled .motion-card:not(.is-revealed),
  .motion-card.is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .motion-neon-line {
    animation: none;
    background-position: 50% 0;
  }
}