/*
 * ERROR 404 SVG-Neon-Cursor
 * Klein wie ein normaler Mauszeiger
 * Glatte Vektorkanten
 * Ohne Schweif
 */

@media (pointer: fine) and (hover: hover) {
  html.error404-custom-cursor,
  html.error404-custom-cursor body,
  html.error404-custom-cursor body * {
    cursor: none !important;
  }

  .error404-cursor {
    --cursor-scale: 1;

    position: fixed;
    z-index: 2147483647;

    top: 0;
    left: 0;

    width: 18px;
    height: 25px;

    pointer-events: none;
    opacity: 0;

    transform:
      translate3d(
        var(--cursor-x, -100px),
        var(--cursor-y, -100px),
        0
      )
      scale(var(--cursor-scale));

    transform-origin: 1px 1px;

    transition:
      opacity 90ms ease,
      filter 140ms ease;

    will-change: transform;
    contain: layout style paint;
  }

  .error404-cursor.is-visible {
    opacity: 1;
  }

  .error404-cursor-svg {
    display: block;

    width: 18px;
    height: 25px;

    overflow: visible;

    filter:
      drop-shadow(0 0 1px rgba(0, 234, 255, 0.72))
      drop-shadow(0 0 1.5px rgba(255, 0, 204, 0.58));
  }

  .error404-cursor-outline {
    fill: #05070d;

    stroke:
      url("#error404CursorGradient");

    stroke-width: 1.35;

    stroke-linejoin: round;
    stroke-linecap: round;

    vector-effect: non-scaling-stroke;

    animation:
      error404-svg-glow 1.35s ease-in-out infinite alternate;
  }

  .error404-cursor-highlight {
    fill: none;

    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 0.35;

    stroke-linejoin: round;
    stroke-linecap: round;

    vector-effect: non-scaling-stroke;
  }

  /*
   * Minimal größer über Links und Buttons.
   */
  .error404-cursor.is-hovering {
    --cursor-scale: 1.05;

    filter:
      drop-shadow(0 0 1px rgba(0, 234, 255, 0.8))
      drop-shadow(0 0 2px rgba(255, 0, 204, 0.65));
  }

  .error404-cursor.is-clicking {
    --cursor-scale: 0.9;
  }

  /*
   * Kurzer Klickring direkt an der Spitze.
   */
  .error404-cursor-ring {
    position: absolute;

    top: -5px;
    left: -5px;

    width: 11px;
    height: 11px;

    border: 1px solid #00eaff;
    border-radius: 50%;

    opacity: 0;
    transform: scale(0.25);

    box-shadow:
      0 0 2px rgba(0, 234, 255, 0.8),
      0 0 4px rgba(255, 0, 204, 0.58);

    pointer-events: none;
  }

  .error404-cursor.is-clicking .error404-cursor-ring {
    animation:
      error404-svg-click 320ms ease-out;
  }

  @keyframes error404-svg-glow {
    from {
      filter:
        drop-shadow(0 0 0.4px rgba(0, 234, 255, 0.58))
        drop-shadow(0 0 0.7px rgba(255, 0, 204, 0.4));
    }

    to {
      filter:
        drop-shadow(0 0 0.8px rgba(0, 234, 255, 0.82))
        drop-shadow(0 0 1.2px rgba(255, 0, 204, 0.62));
    }
  }

  @keyframes error404-svg-click {
    0% {
      opacity: 0.9;
      transform: scale(0.25);
      border-color: #00eaff;
    }

    50% {
      opacity: 0.65;
      border-color: #a855f7;
    }

    100% {
      opacity: 0;
      transform: scale(1.8);
      border-color: #ff00cc;
    }
  }
}

@media (pointer: coarse), (hover: none) {
  .error404-cursor {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .error404-cursor-outline {
    animation: none !important;
  }

  .error404-cursor {
    transition: none !important;
  }
}