/* Star cursor, after gusevdigital's elastic cursor: it stands in for the
     pointer, trails the mouse a little, stretches in the direction of travel
     and squeezes as it speeds up. The system pointer is hidden, so there is
     only ever one star.
     Only on devices with a real mouse; touch screens keep their normal behaviour. */
  .star-cursor {
    --size: 22px;
    position: fixed;
    top: calc(var(--size) / -2);
    left: calc(var(--size) / -2);
    width: var(--size);
    height: var(--size);
    pointer-events: none;
    z-index: 2147483000;
    opacity: 0;
    transition: opacity .25s;
    will-change: transform;
  }
  .star-cursor svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 1px rgba(60, 40, 0, .35)) drop-shadow(0 0 4px rgba(255, 236, 170, .85)) drop-shadow(0 0 10px rgba(255, 220, 140, .4));
    animation: star-twinkle 2.6s ease-in-out infinite;
  }
  @keyframes star-twinkle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(.86); }
  }
  /* A click gives the star a small squish; holding squeezes it further, and
     letting go of a long press flexes it bigger before it springs back. */
  .star-cursor svg { transition: scale .45s cubic-bezier(.3, 1.9, .5, 1); }
  .star-cursor.press svg { scale: .7; transition: scale .6s cubic-bezier(.15, .85, .3, 1); }
  .star-cursor.pop svg { scale: 1.35; transition: scale .14s ease-out; }
  @media (hover: hover) and (pointer: fine) {
    html, body, body * { cursor: none !important; }
    .star-cursor.on { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .star-cursor svg { animation: none; transition: none; }
  }