/* The raccoon says hi, and opens big (raccoon.js). After Figma "Roblox folio preso" 2721:47974: Boyrun words over a
   light curved line, here smaller and in the site's colours (the words in --mute, the line in --line). Sizes are in the
   scene's art pixels (--s, raccoon.js), so the callout grows with the scene. */

/* The callout's corner is where the line meets the words; the line runs down and right from it to the raccoon. */
.raccoon-hi {
  --raccoon-hi-stroke: 2.5;
  position: absolute;
  z-index: 7;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.raccoon-hi.on {
  visibility: visible;
}

.raccoon-hi-line {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--reach-x) * var(--s) * 1px);
  height: calc(var(--reach-y) * var(--s) * 1px);
  overflow: visible;
}

/* In the line's own units, art pixels: the box scales evenly with the scene. */
.raccoon-hi-line path {
  fill: none;
  stroke: var(--line);
  stroke-width: var(--raccoon-hi-stroke);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Centred over the line's top, --gap art pixels above it. translate centres it; raccoon.js moves it on transform. */
.raccoon-hi-words {
  position: absolute;
  left: 0;
  top: calc(var(--gap) * var(--s) * -1px);
  translate: -50% -100%;
  color: var(--mute);
  font: 400 calc(var(--raccoon-hi-size) * var(--s) * 1px) / 1 'Boyrun', cursive;
  letter-spacing: -0.005em;
  white-space: nowrap;
  opacity: 0;
  transform-origin: 50% 100%;
}

/* The keyboard's way in, over the raccoon. Clicks go through it to the page, which finds the raccoon's pixels. */
.raccoon-button {
  position: absolute;
  z-index: 7;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  pointer-events: none;
}

.raccoon-button:focus-visible {
  outline: 1px solid var(--mute);
  outline-offset: 4px;
}

/* Over the raccoon, the pointing hand, as over anything else that opens (the dot cursor hops instead, cursor.js). */
html.raccoon-hover:not(.dot-cursor-on),
html.raccoon-hover:not(.dot-cursor-on) * {
  cursor: pointer !important;
}

/* Over the big raccoon's paint, the pointing hand: a click boops it (raccoon.js). */
html:not(.dot-cursor-on) .raccoon-zoom.on-art,
html:not(.dot-cursor-on) .raccoon-zoom.on-art * {
  cursor: pointer !important;
}

/* The big raccoon: no card round it, just the art, in the middle of the room left of the Tune panel, every art pixel a
   square of whole screen pixels. */
.raccoon-zoom-box {
  position: fixed;
  inset: 0 var(--zoom-right, 0px) 0 0;
  margin: auto;
  -webkit-user-select: none;
  user-select: none;
}

.raccoon-zoom-art {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}