.pixel-hover-title {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Early Gameboy', var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.88;
  color: var(--color-heading-neon);
  opacity: 0;
  transform: translateY(0.38em);
  clip-path: inset(100% 0 0 0);
  animation: pixel-title-entry 560ms cubic-bezier(0.33, 1, 0.68, 1) 1180ms both;
}

.pixel-hover-title__text,
.pixel-hover-title__canvas {
  display: block;
  width: 100%;
}

.pixel-hover-title__text {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  line-height: inherit;
  color: inherit;
  transform: translateY(110%);
}

.pixel-hover-title__canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pixel-hover-title--webgl-ready .pixel-hover-title__text {
  opacity: 0;
}

.pixel-hover-title--decoding .pixel-hover-title__text,
.pixel-hover-title--decoded .pixel-hover-title__text {
  transform: translateY(0);
}

@keyframes pixel-title-entry {
  0% {
    opacity: 0;
    transform: translateY(0.38em);
    clip-path: inset(100% 0 0 0);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-hover-title {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}