.reveal {
  transform: translateY(18px);
  opacity: 0;
  transition: transform 650ms ease, opacity 650ms ease;
}

.reveal.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.glitch {
  text-shadow: 0 0 16px rgba(86, 215, 255, 0.24);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.glitch::before {
  color: var(--cyan);
  transform: translate(1px, 0);
}

.glitch::after {
  color: var(--rose);
  transform: translate(-1px, 0);
}

.glitch:hover::before,
.glitch:hover::after,
.footer-mark::before,
.footer-mark::after {
  animation: glitch-shift 1.8s infinite steps(2, end);
  opacity: 0.62;
}

.footer-mark {
  position: relative;
}

@keyframes glitch-shift {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }
  18% {
    clip-path: inset(12% 0 70% 0);
    transform: translate(1px, -1px);
  }
  34% {
    clip-path: inset(56% 0 24% 0);
    transform: translate(-1px, 1px);
  }
  52% {
    clip-path: inset(28% 0 48% 0);
    transform: translate(1px, 0);
  }
  64% {
    clip-path: inset(80% 0 4% 0);
    transform: translate(-1px, -1px);
  }
  76% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }
}

@keyframes music-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}