/* -----------------------------------------------------------------
   penguin-prints.css
   A pair of penguin footprints waddles across the screen every so
   often (spawned by /js/misc/penguin-prints.js). Purely decorative:
   the overlay is fixed, transparent and pointer-events:none, so it
   never blocks clicks, scrolling or text selection.
   ----------------------------------------------------------------- */

#penguin-prints {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;          /* above page content, below modals/menus (z 1000+) */
}

.penguin-print {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: auto;
  opacity: 0;
  will-change: opacity;
  animation: penguin-print-life var(--pp-life, 6s) ease-out forwards;
}

.penguin-print svg {
  display: block;
  width: 100%;
  height: auto;
}

.penguin-print path {
  fill: #33475b;       /* soft slate — reads on light and photo backgrounds */
}

/* Fade in like a fresh print, linger, then melt away. */
@keyframes penguin-print-life {
  0%   { opacity: 0; }
  6%   { opacity: 0.4; }
  55%  { opacity: 0.4; }
  100% { opacity: 0; }
}

/* No decoration for users who've switched animations off. */
@media (prefers-reduced-motion: reduce) {
  #penguin-prints { display: none; }
}