/* Add .warp-text-target to any text element that should receive the effect. */
.warp-text-target {
  /* A taller lens feels broader and smoother without changing page layout. */
  --warp-text-surface-height: 220px;

  -webkit-user-select: none;
  user-select: none;
}

.warp-text-target.warp-text {
  position: relative;
  isolation: isolate;
}

.warp-text-target.warp-text .warp-text__canvas {
  position: absolute;
  /* Extra drawing room prevents the warped letter edges from being clipped. */
  top: 50%;
  left: -0.22em;
  z-index: 1;
  width: calc(100% + 0.44em);
  height: max(var(--warp-text-surface-height), calc(100% + 0.84em));
  display: block;
  visibility: hidden;
  opacity: 0;
  background: transparent;
  image-rendering: auto;
  pointer-events: none;
  transform: translateY(-50%);
}

/* Reveal WebGL only after JavaScript has rendered its first valid text frame. */
.warp-text-target.warp-text--active .warp-text__canvas {
  visibility: visible;
  opacity: 1;
}

/* Keep the semantic heading in place while WebGL paints the visible copy. */
.warp-text-target.warp-text--active {
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.warp-text-target.warp-text--active > :not(.warp-text__canvas),
.warp-text-target.warp-text--active > :not(.warp-text__canvas) * {
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

@supports not (-webkit-text-fill-color: transparent) {
  .warp-text-target.warp-text--active,
  .warp-text-target.warp-text--active > :not(.warp-text__canvas),
  .warp-text-target.warp-text--active > :not(.warp-text__canvas) * {
    color: transparent !important;
  }
}

/* Mobile uses the original DOM text: no canvas, distortion, or selection lock. */
@media screen and (max-width: 700px), (pointer: coarse) {
  .warp-text-target {
    -webkit-user-select: auto;
    user-select: auto;
  }

  .warp-text-target.warp-text .warp-text__canvas {
    display: none;
  }

  .warp-text-target.warp-text--active,
  .warp-text-target.warp-text--active > :not(.warp-text__canvas),
  .warp-text-target.warp-text--active > :not(.warp-text__canvas) * {
    -webkit-text-fill-color: currentColor !important;
    text-shadow: revert !important;
  }
}

@media (forced-colors: active) {
  .warp-text-target.warp-text .warp-text__canvas {
    display: none;
  }

  .warp-text-target.warp-text--active,
  .warp-text-target.warp-text--active > :not(.warp-text__canvas),
  .warp-text-target.warp-text--active > :not(.warp-text__canvas) * {
    color: CanvasText !important;
    -webkit-text-fill-color: currentColor !important;
  }
}