/* ==========================================================================
   Recycle Pay — animations.css
   Keyframes and scroll/entrance motion. All motion is switched off for
   visitors who prefer reduced motion (see base.css).
   ========================================================================== */

/* ---------- Keyframes ---------- */

/* Background icons drifting up the page (.fl, layout.css) */
@keyframes floatup {
  to {
    transform: translateY(-118vh) rotate(220deg);
  }
}

/* Endless left scroll for content written twice: ticker and waves */
@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

/* Leaves drifting off the clean-street card (.drift-leaf, sections.css) */
@keyframes leafy {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate(60px, -70px) rotate(160deg);
    opacity: 0;
  }
}

/* Slow up-and-down of the donation figure (sections.css) */
@keyframes breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Hero text rising in on page load (see Entrances below) */
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

/* ---------- Entrances ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Elements tagged .rv by js/reveal.js fade up when scrolled into view */
  .js .rv {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .rv.in {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.6s ease,
      transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 0.3s ease;
  }

  /* Banner copy rises in on load */
  .banner-copy > * {
    animation: pop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .banner-copy > :nth-child(2) {
    animation-delay: 0.12s;
  }
  .banner-copy > :nth-child(3) {
    animation-delay: 0.24s;
  }
  .banner-copy > :nth-child(4) {
    animation-delay: 0.36s;
  }
}