/* Motion layer for the franchise-brand template (see assets/motion.js).
   Entrance "from" states only apply under .js-motion, which motion.js adds after it has run. */

/* Hero intro: the inline head snippet adds .ms-intro so the masked headline/sub/CTAs start lowered;
   motion.js removes it ~60ms after start and the existing .a-mask / .a-rise transitions play. */
.ms-intro .a-hero .a-mask > * { transform: translateY(105%); }
.ms-intro .a-hero .a-rise { opacity: 0; transform: translateY(26px); }

/* Scroll-scrubbed hero media */
.js-motion #hero .a-hero img { will-change: transform; transform-origin: 46% 42%; }
.js-motion #hero .a-hero__in, .js-motion #hero .a-cue { will-change: transform, opacity; }

/* Reveal / Stagger (framer-motion whileInView, ease [0.2, 0.7, 0.2, 1]) */
.js-motion .ms-rv {
  opacity: 0;
  transform: translateY(var(--ms-y, 24px));
  transition: opacity var(--ms-dur, .8s) cubic-bezier(.2, .7, .2, 1) var(--ms-delay, 0s),
              transform var(--ms-dur, .8s) cubic-bezier(.2, .7, .2, 1) var(--ms-delay, 0s);
}
.js-motion .ms-rv.is-in { opacity: 1; transform: none; }

/* Header: transparent over the hero, solid once the page scrolls (original toggled at 10px) */
.js-motion header.ms-scrolled.ms-scrolled {
  background-color: color-mix(in oklab, var(--color-bg-950, #060d18) 85%, transparent);
  box-shadow: 0 8px 30px -18px #0009;
  border-bottom: 1px solid var(--t-line, rgba(255, 210, 196, .15));
}
.js-motion header { transition: background-color .3s, box-shadow .3s, border-color .3s; }

/* Mobile drawer drops in (framer: opacity 0, y -8 -> 0) */
@keyframes ms-drawer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.js-motion #bf-drawer:not([hidden]) { animation: ms-drawer .25s cubic-bezier(.2, .7, .2, 1) both; }

/* Finder: the list glides to the chosen studio and the chosen pin lifts (stands in for the map fly-to) */
.js-motion .bf-pin path, .js-motion .bf-pin circle { transform-box: fill-box; transform-origin: 50% 100%; transition: fill .2s, transform .35s cubic-bezier(.22, 1, .36, 1); }
.js-motion .bf-pin.is-on path { transform: scale(1.35); }
.js-motion .bf-pin circle { transform-origin: 50% 50%; }
.js-motion .bf-pin.is-on circle { transform: translateY(-5.6px) scale(1.35); }

@media (prefers-reduced-motion: reduce) {
  .ms-intro .a-hero .a-mask > *, .ms-intro .a-hero .a-rise { opacity: 1; transform: none; }
  .js-motion .ms-rv { opacity: 1; transform: none; transition: none; }
  .js-motion #bf-drawer:not([hidden]) { animation: none; }
}