/* ==========================================================================
   JP Mechanical Services — motion.css  (craft-lead layer)
   Character: urgent condensed, intensity 5. Fast, decisive, nothing loops.
   All initial hidden/offset states are scoped under html.has-motion AND
   inside @media (prefers-reduced-motion: no-preference), so:
     - no JS / has-motion absent  -> fully static, all content visible
     - prefers-reduced-motion     -> fully static, all content visible
   Durations / easing / distance come from the --motion-* tokens in main.css.
   Animates transform and opacity only (zero layout shift).
   Reveal classes (.mo-reveal / .mo-fade / .is-in) are added by js/motion.js,
   which is the single source of truth for WHAT reveals — this keeps the hero
   headline, all phone numbers, and the emergency banner instant.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Rise-and-fade reveal (signature) --------------------------------- */
  html.has-motion .mo-reveal {
    opacity: 0;
    transform: translateY(var(--motion-distance));
    transition:
      opacity   var(--motion-duration-base) var(--motion-ease),
      transform var(--motion-duration-base) var(--motion-ease);
  }
  html.has-motion .mo-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* ---- Quiet opacity settle (hero photo band, no movement) -------------- */
  html.has-motion .mo-fade {
    opacity: 0;
    transition: opacity var(--motion-duration-base) var(--motion-ease);
  }
  html.has-motion .mo-fade.is-in {
    opacity: 1;
  }

  /* ---- One-time sticky call-bar nudge (mobile only; never loops) --------- */
  /* The bar is display:none at >=1024px in main.css, so this fires on
     mobile/tablet only — a single subtle scale pulse shortly after load. */
  html.has-motion .mobile-callbar {
    transform-origin: bottom center;
    animation: mo-callbar-nudge var(--motion-duration-slow) var(--motion-ease) 1200ms 1 both;
  }
  @keyframes mo-callbar-nudge {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.03); }
    100% { transform: scale(1); }
  }
}