.mascot-stage { --travel:clamp(12px, 2.5vw, 40px); position:fixed; inset:0; width:100%; height:100dvh; z-index:101; pointer-events:none; overflow:hidden; }
.mascot-traveler { position:absolute; left:var(--x,15%); top:var(--y,15%); width:var(--size,70px); height:var(--size,70px); margin-left:calc(var(--size,70px) / -2); margin-top:calc(var(--size,70px) / -2); animation-duration:var(--duration,40s); animation-delay:var(--delay,0s); animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.mascot-traveler img { display:block; width:100%; height:100%; object-fit:contain; transform:scaleX(var(--flip,1)); transform-origin:50% 85%; animation:mascot-step 1.8s ease-in-out infinite alternate; }
.mascot-drift { animation-name:mascot-drift; }
.mascot-swoop { animation-name:mascot-swoop; }
.mascot-bob { animation-name:mascot-bob; }
.mascot-glide { animation-name:mascot-glide; }
.mascot-traveler:nth-child(even) { animation-direction:reverse; }
.mascot-stage.is-paused .mascot-traveler, .mascot-stage.is-paused img { animation-play-state:paused; }
@keyframes mascot-drift { 0%,100% { transform:translate(calc(-1 * var(--travel)), -20px) rotate(-9deg); } 50% { transform:translate(var(--travel), 22px) rotate(9deg); } }
@keyframes mascot-swoop { 0%,100% { transform:translate(calc(-1 * var(--travel)), 24px) rotate(-12deg); } 35% { transform:translate(var(--travel), -28px) rotate(12deg); } 70% { transform:translate(0,-40px) rotate(-5deg); } }
@keyframes mascot-bob { 0%,100% { transform:translateY(26px) rotate(-6deg); } 50% { transform:translateY(-32px) rotate(8deg); } }
@keyframes mascot-glide { 0%,100% { transform:translate(calc(-1 * var(--travel)),12px) rotate(-8deg); } 50% { transform:translate(var(--travel),-24px) rotate(8deg); } }
@keyframes mascot-step { from { rotate:-2deg; } to { rotate:2deg; } }
@media (max-width:600px) {
  .mascot-traveler { width:calc(var(--size) * .48); height:calc(var(--size) * .48); margin-left:calc(var(--size) * -.24); margin-top:calc(var(--size) * -.24); }
  .mascot-traveler:nth-child(5) { left:8%; }
  .mascot-traveler:nth-child(6) { left:92%; }
  .mascot-traveler:nth-child(9) { left:10%; }
  .mascot-traveler:nth-child(10) { left:90%; }
}
@media (prefers-reduced-motion:reduce), (max-height:440px) { .mascot-stage { display:none; } }
@media print { .mascot-stage { display:none; } }