Challenge 3: Respect Reduced Motion for a Functional Animation — Possible Solution
====================================================================

.notification-banner {
  transform: translateY(-100%);
  transition: transform 0.4s ease-out;
}

.notification-banner.visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .notification-banner {
    transition: none; /* remove the SLIDING motion... */
  }
  /* ...but .visible still applies transform: translateY(0) instantly,
     so the banner still actually appears — just without animating */
}

WHY THIS WORKS
--------------
- The core distinction this challenge tests is exactly the one the
  chapter draws: "remove the motion" is NOT the same as "remove the
  content." The reduced-motion media query only sets transition: none
  — it does NOT hide the .notification-banner.visible rule or prevent
  the banner from appearing at all. The banner still functionally shows
  up; it simply snaps into its final position instantly instead of
  sliding into view over 0.4 seconds.
- This directly satisfies the chapter's point that "respecting this
  preference means providing a reduced or eliminated-motion
  alternative for any significant animation — not just pure decoration,
  but often necessary functional transitions too." A sliding-in
  notification banner IS functional (the user needs to see and read it,
  unlike, say, a purely decorative parallax background) — so the fix
  here is specifically to eliminate the MOTION while preserving the
  actual functional outcome (the banner becoming visible), rather than
  either leaving the animation running unchanged or accidentally
  hiding the banner from reduced-motion users entirely.
- Using transition: none (rather than something like display: none or
  removing the .visible class logic) is the precise, minimal change
  needed — it disables ONLY the animated property transition, leaving
  every other piece of functionality (the class toggling logic that
  actually controls whether the banner shows or not) completely
  untouched.
- This mirrors the chapter's own carousel example structurally (the
  same @media (prefers-reduced-motion: reduce) block pattern), but
  applied more carefully here specifically BECAUSE this animation has a
  functional purpose (delivering a notification) rather than being pure
  decoration like a background carousel — the fix needed to preserve
  the banner's actual appearance, just without the sliding motion that
  could trigger a vestibular reaction.