/* The reader penguin. A still picture underneath, a short silent clip on
   top that fades in once it is playing. */
.mascot-clip { position: relative; overflow: hidden; }
.mascot-clip img,
.mascot-clip video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mascot-clip video { opacity: 0; transition: opacity .35s ease; }
.mascot-clip.is-playing video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mascot-clip video { display: none; } }

/* Idle penguin in a sky circle: help pages and the 404 page */
.mascot-rail, .mascot-404 {
  border-radius: 50%;
  background: #EEF5FC;
  box-shadow: 0 0 0 6px rgba(94, 200, 255, .2), 0 14px 30px rgba(15, 60, 110, .14);
}
.mascot-rail { width: 116px; height: 116px; margin: 6px 0 34px 6px; }
.mascot-404 { width: 150px; height: 150px; margin: 0 auto 26px; }

/* The All clear! walk when someone joins the list or downloads */
.ocr-walk {
  position: fixed;
  z-index: 9999;
  left: 0;
  bottom: 8px;
  height: clamp(96px, 15vh, 140px);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-400px);
}
.ocr-walk.is-walking { opacity: 1; }
.ocr-walk img { display: block; height: 100%; width: auto; filter: drop-shadow(0 6px 10px rgba(15, 40, 80, .18)); }