/* Site-wide motion (loaded on every public page, with js/motion.js).
   - The hero's heading, text and buttons rise in on load (CSS only, so nothing flashes).
   - Sections and cards further down fade and rise in as they scroll into view, one after
     another (motion.js adds .mo-rv to what starts below the fold, then .mo-in).
   - A thin orange bar under the header shows how far down the page you are.
   - Orange buttons get a light sweep on hover and press in on click.
   Everything is off when the device asks for reduced motion, and printing shows it all. */

.mo-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001;
  background: linear-gradient(90deg, #FF6B00, #FF8C42);
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @keyframes mo-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .hero h1, .cat-hero h1, .partner-hero h1, .page-hero h1 { animation: mo-rise 700ms cubic-bezier(.2,.8,.2,1) both; }
  .hero p, .cat-hero p, .partner-hero p, .page-hero p { animation: mo-rise 700ms cubic-bezier(.2,.8,.2,1) 120ms both; }
  .hero .btn, .cat-hero .btn, .partner-hero .btn, .hero .hero-buttons, .partner-hero .hero-buttons { animation: mo-rise 700ms cubic-bezier(.2,.8,.2,1) 240ms both; }

  .mo-rv { opacity: 0; transform: translateY(26px); transition: opacity 650ms ease-out, transform 650ms cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; }
  .mo-rv.mo-in { opacity: 1; transform: none; }

  header { transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
  header.scrolled { background-color: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); }

  /* The sweep is a background layer over the button's own colour, so the button's size
     and alignment (e.g. Partner With Us in the header) are untouched. */
  .btn.primary {
    background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
    background-size: 250% 100%; background-repeat: no-repeat; background-position: 130% 0;
    transition: background-position 700ms ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .btn.primary:hover { background-position: -30% 0; }
  .btn:active { transform: scale(0.97); }
}

@media print { .mo-rv { opacity: 1 !important; transform: none !important; } .mo-progress { display: none; } }