html, body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M14 24 C 6 18, 2 12, 6 8 C 9 5, 12 6, 14 9 C 16 6, 19 5, 22 8 C 26 12, 22 18, 14 24 Z' fill='%23FF4FA3' stroke='%23ffffff' stroke-width='1.5'/></svg>") 4 4, auto;
}

a, button, summary, .stat-sheet {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M14 24 C 6 18, 2 12, 6 8 C 9 5, 12 6, 14 9 C 16 6, 19 5, 22 8 C 26 12, 22 18, 14 24 Z' fill='%23FF4FA3' stroke='%23FFE15C' stroke-width='2'/><circle cx='22' cy='6' r='2' fill='%23FFFFFF'/></svg>") 4 4, pointer;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40%      { opacity: 1; transform: scale(1.1) rotate(20deg); }
  60%      { opacity: 1; transform: scale(1) rotate(-10deg); }
}

@keyframes heart-spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes wordmark-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wordmark {
  animation: wordmark-fade-in var(--dur-slow) var(--ease-out) both;
}

.sparkle {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='g' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='40%25' stop-color='%23FFE15C'/><stop offset='100%25' stop-color='%23FF4FA3' stop-opacity='0'/></radialGradient></defs><path d='M16 1 L18 14 L31 16 L18 18 L16 31 L14 18 L1 16 L14 14 Z' fill='url(%23g)'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  animation: sparkle-twinkle 1.6s ease-in-out infinite;
}

/* 4 corner sparkles around the wordmark, staggered 0/0.4/0.8/1.2s */
.sparkle--tl { top: 0; left: 0;  animation-delay: 0s; }
.sparkle--tr { top: 0; right: 0; animation-delay: 0.4s; }
.sparkle--bl { bottom: 0; left: 0;  animation-delay: 0.8s; }
.sparkle--br { bottom: 0; right: 0; animation-delay: 1.2s; }

.blink {
  animation: blink 1.2s steps(2, jump-none) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- Reduced motion ---------- */
/*
   Kill all looping/large-motion animations for users who request reduced motion.
   - Marquee + sparkle infinite loops
   - heart-spin, wordmark fade-in, blink, polaroid shake
   - Konami sparkle storm (.sparkle-storm__bit) — alert can still fire from JS
   - Any rotation/translation transitions on hover (just remove transform on hover)
*/
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .marquee__track,
  .sparkle,
  .sparkle--tl,
  .sparkle--tr,
  .sparkle--bl,
  .sparkle--br,
  .blink,
  .wordmark,
  .stat-sheet__banner .heart,
  .sparkle-storm__bit,
  [class*="spin"],
  [class*="shimmer"],
  [class*="shake"] {
    animation: none !important;
  }

  /* Stop the marquee mid-flight and let the first items just sit visible */
  .marquee__track {
    transform: none !important;
    padding-left: 0 !important;
  }

  /* Hide the corner sparkles entirely (they only exist as twinklers) */
  .sparkle { display: none !important; }

  /* Hide the konami storm bits if reduced-motion users trip the easter egg */
  .sparkle-storm__bit { opacity: 0 !important; }

  /* Cancel hover-rotations that produce large positional motion */
  .stat-sheet:hover,
  .webring-entry:hover {
    transform: none !important;
  }

  /* Steady the wordmark — it animates a fade+translate on load */
  .wordmark {
    opacity: 1 !important;
    transform: none !important;
  }
}