/* =========================================
   TINYROOMONLINE GLITTER CURSOR
   ========================================= */


/* only use custom cursor on computers with a mouse */
@media (pointer: fine) {

  body,
  body * {
    cursor: none !important;
  }


  /* MAIN CURSOR */

  #tinyroom-cursor {
    position: fixed;

    left: -100px;
    top: -100px;

    width: 32px;
    height: 32px;

    pointer-events: none;

    z-index: 9999999;

    transform: scale(1);

    transition:
      transform 0.12s ease,
      opacity 0.15s ease;

    filter:
      drop-shadow(0 0 4px rgba(255,255,255,0.95))
      drop-shadow(0 0 8px rgba(217,174,255,0.85));
  }


  /* BIG GLITTER STAR */

  #tinyroom-cursor::before {
    content: "✦";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
      translate(-50%, -50%)
      rotate(-12deg);

    color: #fff8ff;

    font-size: 27px;

    line-height: 1;

    text-shadow:
      0 0 3px #ffffff,
      0 0 7px #e9baff,
      0 0 12px #c782e5;
  }


  /* LITTLE HEART */

  #tinyroom-cursor::after {
    content: "♡";

    position: absolute;

    right: -3px;
    bottom: -3px;

    color: #efb8ff;

    font-size: 13px;

    text-shadow:
      0 0 4px white,
      0 0 7px #dd9df5;
  }


  /* WHEN HOVERING LINKS / BUTTONS */

  #tinyroom-cursor.hovering {
    transform:
      scale(1.28)
      rotate(8deg);
  }


  /* WHEN CLICKING */

  #tinyroom-cursor.clicking {
    transform:
      scale(0.72)
      rotate(-12deg);
  }


  #tinyroom-cursor.hidden {
    opacity: 0;
  }


  /* =========================================
     GLITTER TRAIL
     ========================================= */

  .tinyroom-sparkle {
    position: fixed;

    left: 0;
    top: 0;

    pointer-events: none;

    z-index: 9999998;

    color: #fff5ff;

    font-family: Georgia, serif;

    font-size: 13px;

    line-height: 1;

    text-shadow:
      0 0 3px #ffffff,
      0 0 7px #dfaeef,
      0 0 11px #b977d0;

    animation:
      tinyroom-sparkle-fade
      0.8s
      ease-out
      forwards;
  }


  .tinyroom-sparkle.big-sparkle {
    font-size: 18px;

    animation-duration: 0.95s;
  }


  @keyframes tinyroom-sparkle-fade {

    0% {
      opacity: 1;

      transform:
        translate(-50%, -50%)
        scale(1)
        rotate(0deg);
    }


    60% {
      opacity: 0.75;
    }


    100% {
      opacity: 0;

      transform:
        translate(
          calc(-50% + var(--sparkle-x)),
          calc(-50% + var(--sparkle-y))
        )
        scale(0.15)
        rotate(160deg);
    }

  }

}


/* respect reduced motion settings */

@media (prefers-reduced-motion: reduce) {

  .tinyroom-sparkle {
    animation-duration: 0.25s;
  }

}