/* MacTrove flying-toasters screensaver.
   Sprites in /themes/custom/platinum/images/screensaver/ — toasters-strip.png
   is a 256×64 sprite sheet with 4 frames of the flap cycle. */

.mactrove-screensaver {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #404040;              /* matches the After Dark flat gray */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 900ms ease, visibility 900ms ease;
  overflow: hidden;
}
.mactrove-screensaver.is-active {
  opacity: 1;
  visibility: visible;
}

.mactrove-screensaver__sky {
  position: absolute;
  inset: 0;
}

/* Flyer shared layout — the toaster gets its sprite-sheet background
   and a steps() animation; toast uses a single static image. */
.mactrove-flyer {
  position: absolute;
  right: -80px;
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation-name: mactrove-fly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Fly animation: configured entirely via custom properties so JS can
   set ``--fly-dur`` / ``--fly-delay`` per element without clobbering
   the flap animation that runs concurrently. */
.mactrove-flyer {
  animation-name: mactrove-fly;
  animation-duration: var(--fly-dur, 14s);
  animation-delay: var(--fly-delay, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.mactrove-flyer--toaster {
  background-image: url("../images/screensaver/toasters-strip.png");
  background-size: 256px 64px;     /* 4 frames × 64px */
  background-repeat: no-repeat;
  background-position: 0 0;
  /* Fly + flap layered. Flap uses an explicit 5-keyframe animation
     with ``step-end`` timing so each frame holds for its full quarter
     and the loop returns to frame 0 cleanly — no ``steps()`` function,
     no past-the-end blank frame, no browser quirks. */
  animation:
    mactrove-fly var(--fly-dur, 14s) var(--fly-delay, 0s) linear infinite,
    mactrove-flap 0.36s step-end var(--flap-delay, 0s) infinite;
}

.mactrove-flyer--toast {
  background: url("../images/screensaver/toast.png") no-repeat center / contain;
}

@keyframes mactrove-fly {
  /* Right-to-left with a downward drift — original After Dark direction.
     Distance is (viewport + sprite) so sprites leave cleanly before looping. */
  0%   { transform: translate3d(0, 0, 0) scale(var(--fly-scale, 1)); }
  100% { transform: translate3d(calc(-100vw - 160px), 60vh, 0) scale(var(--fly-scale, 1)); }
}

@keyframes mactrove-flap {
  /* 4 frames at 25% intervals, ``step-end`` timing holds each value
     until the next keyframe. 100% restates frame 0 so the loop
     transition is seamless. */
  0%   { background-position:    0px 0; }  /* frame 0 */
  25%  { background-position:  -64px 0; }  /* frame 1 */
  50%  { background-position: -128px 0; }  /* frame 2 */
  75%  { background-position: -192px 0; }  /* frame 3 */
  100% { background-position:    0px 0; }  /* frame 0 — seamless loop */
}

@media (prefers-reduced-motion: reduce) {
  .mactrove-flyer { animation: none; }
}