/* rhces-motion.css - RHCES motion layer, 2026-11-10. Pairs with rhces-motion.js.
   Motion only: no colours, fonts, sizes or spacing are set here (the progress
   bar reuses the theme accent token). Only transform and opacity are animated,
   so nothing moves the layout.
   Nothing is hidden by default: .rm-in is added by the script, only after the
   visitor's first scroll and only to blocks still below the screen, and is
   removed again once the block has faded in. */

/* 1. Scroll reveal (extends the site's own .reveal to blocks that had none) */
@media (prefers-reduced-motion: no-preference) {
  .rm-in {
    opacity: 0 !important;
    transform: translate3d(0, 14px, 0) !important;
    transition: none !important;
  }
  .rm-in.rm-on {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity .5s ease var(--rm-d, 0s),
                transform .5s cubic-bezier(.22, .61, .36, 1) var(--rm-d, 0s) !important;
  }
}

/* 2. Hover lift for the article cards, same 3px / .2s as the bundle cards */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #home-learn .hl-card,
  .learn-page .learn-card { transition: transform .2s ease, border-color .2s ease; }
  #home-learn .hl-card:hover,
  .learn-page .learn-card:hover { transform: translateY(-3px); }
}

/* 3. Reading progress on /learn articles (element is created by the script) */
.rm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 1001; pointer-events: none;
  background: var(--cad-accent, #0D6C87);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* 4. Reduced motion: switch off this layer and the older site effects too */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  /* the purchase window (payment steps, its busy spinner) is left alone */
  *:not(#purchaseModal):not(#purchaseModal *),
  *:not(#purchaseModal):not(#purchaseModal *)::before,
  *:not(#purchaseModal):not(#purchaseModal *)::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  /* no slide-in. The site's own script still shows each .reveal block when it
     comes on screen, now at once; without JavaScript the <noscript> rule shows them. */
  .reveal, .fade-up { transform: none !important; }
  .rm-in { opacity: 1 !important; transform: none !important; }
  /* script.js moves these with inline styles (cursor tilt and parallax) */
  .product-card, .training-card, .value-card, .hero-bg .shape {
    transform: none !important; translate: none !important;
  }
  .rm-progress { display: none !important; }
}

/* 5. Print: everything visible, no progress bar */
@media print {
  .reveal, .fade-up, .rm-in { opacity: 1 !important; transform: none !important; }
  .rm-progress { display: none !important; }
}