@font-face {
  font-family: "Pixel Operator 8 Bold";
  src: url("fonts/PixelOperator8-Bold.ttf") format("truetype");
  font-display: block;
}

:root { --tile: 64px; }

/* the hidden cursor is !important so no child can resurrect it */
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; }

html, body {
  height: 100%;
  /* the tile grid is deliberately wider than the viewport, so both need it */
  overflow: hidden;
}

body {
  background: linear-gradient(
    135deg,
    #ff0000 0%,
    #ff8000 14%,
    #ffee00 28%,
    #00d92b 43%,
    #00c8ff 57%,
    #1400ff 72%,
    #8f00ff 86%,
    #ff0090 100%
  );
}

#tiles {
  position: fixed;
  inset: 0;
  display: grid;
  /* columns are declared by the script, which owns the count; rows follow */
  grid-auto-rows: var(--tile);
  place-items: center;
  pointer-events: none;
}

/* place-items on #tiles centers each glyph in its own track, so a sparkle
   needs no size of its own and no inner box to center anything in */
.sparkle {
  font-size: 34px;
  line-height: 1;
  user-select: none;
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(0.6); }
  50%      { transform: scale(1.25); }
}

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  font-family: "Pixel Operator 8 Bold", monospace;
  font-size: 2rem;
  line-height: 1;
  white-space: nowrap;
  color: #8f00ff;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 #000;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* parked: no pointer has moved yet, so sit in the middle of the page. the
   script reads this position back when it takes over, so the text glides out
   of the centre instead of flying in from the top left corner */
#cursor.parked {
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

/* mobile: no pointer to follow, so keep the text in the middle for good and
   break it onto one word per line. !important so a touch drag's pointermove
   can never hand the position over to the raf loop */
@media (hover: none) and (pointer: coarse) {
  #cursor {
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) !important;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    font-size: 3rem;
  }

  #cursor .word { display: block; }
}

/* visually removed, still in the accessibility tree */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}