/* A tiny paper plane that drifts across the page on a slow loop.
   Uses mask-image so it picks up the current palette's accent color. */
.whimsy {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  pointer-events: none;
  z-index: 3;
  background: var(--p1);
  -webkit-mask: url("/assets/svg/whimsy-paper-plane.svg") no-repeat center / contain;
          mask: url("/assets/svg/whimsy-paper-plane.svg") no-repeat center / contain;
  opacity: .85;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
  transition: background-color var(--fade) var(--ease);
  animation: whimsy-drift 38s linear infinite;
}

@keyframes whimsy-drift {
  0% {
    transform: translate(-10vw, 18vh) rotate(-6deg);
  }
  20% {
    transform: translate(28vw, 8vh)  rotate(8deg);
  }
  45% {
    transform: translate(64vw, 26vh) rotate(-4deg);
  }
  65% {
    transform: translate(82vw, 56vh) rotate(12deg);
  }
  85% {
    transform: translate(40vw, 78vh) rotate(-10deg);
  }
  100% {
    transform: translate(-12vw, 92vh) rotate(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whimsy { display: none; }
}
@media (max-width: 720px) {
  /* Keep it out of the way on small screens. */
  .whimsy { display: none; }
}