/* Mascot v2: animated WebP (hair streaming in hyperspace) via <picture>; static image when prefers-reduced-motion. */
.mascot-stage { width: min(100%, 260px); margin: 3.5rem auto 0; }
.mascot-pic { display: block; width: 100%; }
.mascot { display: block; width: 100%; height: auto; border-radius: 50%; cursor: pointer;
  filter: drop-shadow(0 14px 30px rgba(37, 99, 235, 0.28)); transform-origin: 50% 70%; }
.mascot:focus-visible { outline: 3px solid #60a5fa; outline-offset: 4px; }
.mascot.wave { animation: m2-bob 0.9s ease-in-out 2; }
.mascot.nod { animation: m2-tilt 0.7s ease-in-out 2; }
@keyframes m2-bob { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px) rotate(-2deg); } 70% { transform: translateY(1px) rotate(1deg); } }
@keyframes m2-tilt { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(3deg); } 70% { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .mascot.wave, .mascot.nod { animation: none !important; } }