/*
  Pikita floater module — CSS for the drifting and peeking Pikita sprite.
*/

/* Decorative mascot layer floating through space behind content. */
.pikita-floater {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(120px, 16vw, 240px);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 8px 18px rgba(112, 207, 255, 0.25));
  /* JS sets a randomized offscreen-to-offscreen path every pass. */
  transform: translate3d(-200px, 22vh, 0) rotate(-8deg);
  /* Rotate around the true center of the sprite. */
  transform-origin: 50% 50%;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Rare event state: Pikita pops in front for a brief close-up peek. */
body.pikita-peek-active .pikita-floater {
  z-index: 12;
  opacity: 0.95;
  filter: drop-shadow(0 18px 26px rgba(148, 226, 255, 0.45));
}

@media (max-width: 640px) {
  .pikita-floater {
    width: clamp(88px, 26vw, 140px);
    opacity: 0.2;
  }
}