.interaction-glow {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      circle at var(--pointer-x, 50vw) var(--pointer-y, 50vh),
      rgba(200, 255, 42, 0.11),
      rgba(104, 221, 255, 0.045) 16%,
      transparent 34%
    );
  mix-blend-mode: screen;
  transition: opacity 360ms ease;
}

.interaction-ready.is-pointer-active .interaction-glow {
  opacity: 1;
}

.interaction-ready [data-tilt-target] {
  transform-style: preserve-3d;
  transition:
    transform 220ms ease,
    filter 220ms ease,
    box-shadow 220ms ease;
  will-change: transform;
}

.interaction-ready [data-tilt-target].is-tilting {
  filter: saturate(1.06) brightness(1.04);
  transition:
    transform 80ms ease-out,
    filter 140ms ease;
}

.interaction-ready .js-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  filter: blur(10px);
  transition:
    opacity 720ms ease,
    transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 720ms ease;
}

.interaction-ready .js-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.tap-pulse {
  animation: tap-pulse 420ms ease-out;
}

@keyframes tap-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 255, 42, 0);
  }

  36% {
    box-shadow: 0 0 0 4px rgba(200, 255, 42, 0.22);
  }

  100% {
    box-shadow: 0 0 0 18px rgba(200, 255, 42, 0);
  }
}

@media (max-width: 720px) {
  .interaction-glow {
    display: none;
  }

  .interaction-ready .js-reveal {
    transform: translate3d(0, 14px, 0);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interaction-glow {
    display: none;
  }

  .interaction-ready [data-tilt-target],
  .interaction-ready [data-tilt-target].is-tilting,
  .interaction-ready .js-reveal,
  .interaction-ready .js-reveal.is-visible {
    opacity: 1;
    transform: none !important;
    filter: none;
    transition: none;
  }

  .tap-pulse {
    animation: none;
  }
}