/* ==========================================================================
   Milner Luxury Motion Layer — shared include (spec item 10)
   Scroll-reveal, hover-lift, animated counters, smooth anchor scroll.
   Progressive enhancement: default state is fully visible/static so that
   no-JS / no-support users, and prefers-reduced-motion users, always get
   instant static content. ALL motion lives inside the no-preference guard.
   ========================================================================== */

/* Fallback / reduced-motion baseline: nothing hidden, nothing animated. */
.m-reveal,
.m-lift,
.m-count {
  opacity: 1;
  transform: none;
}

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

  /* Smooth in-page anchor scrolling (sub-nav links, e.g. .city-hero-nav-strip) */
  html {
    scroll-behavior: smooth;
  }

  /* Scroll-reveal: section wrappers fade + rise on first intersection */
  .m-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 500ms cubic-bezier(.2, .7, .2, 1),
                transform 500ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--m-delay, 0ms);
  }
  .m-reveal.m-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Cards / stat blocks: same reveal treatment (staggered via --m-delay,
     set by milner-motion.js based on sibling order), then a fast hover-lift
     once revealed. */
  .m-lift,
  .m-count {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 500ms cubic-bezier(.2, .7, .2, 1),
                transform 500ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--m-delay, 0ms);
  }
  .m-lift.m-in,
  .m-count.m-in {
    opacity: 1;
    transform: translateY(0);
    /* swap to the fast hover-focused transition once the reveal is done */
    transition: transform 150ms cubic-bezier(.2, .7, .2, 1),
                box-shadow 150ms cubic-bezier(.2, .7, .2, 1);
  }
  .m-lift.m-in:hover,
  .m-lift.m-in:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -18px rgba(10, 37, 64, 0.35),
                0 8px 20px -8px rgba(10, 37, 64, 0.22);
  }
}