/* Mobile entrances have one driver: mobile-motion.js writes these four
   properties from scroll progress. No CSS timeline competes for the same
   transform, and content is visible whenever the controller is unavailable. */
@media (max-width: 767px) {
  /* Settle legacy wrappers and their masked children. Only registered actors
     move; the changing problem answer and horizontal carousel stay independent. */
  :where(
    .hero-content,
    .hero-rating,
    .hero-rating p,
    .hero-title-line > span,
    .hero-content > p,
    .hero-actions,
    .hero-actions > a,
    .key-content,
    .key-dup-visual,
    .key-dup-visual-frame,
    .key-dup-line > span,
    .key-dup-note,
    .key-dup-steps,
    .key-dup-steps > li,
    .key-dup-steps b,
    .key-dup-steps strong,
    .key-dup-steps small,
    .key-dup-cta-row,
    .key-dup-cta,
    .key-dup-place,
    .problem-nav-head,
    .problem-nav-head .m-mask > span,
    .problem-questions,
    .problem-list > li,
    .departments-head,
    .departments-head .m-mask > span,
    .departments-head p,
    .department-tile,
    .department-tile-media img,
    .departments-blueprint,
    .departments-contact,
    .departments-call,
    .departments-whatsapp,
    .shelf-head,
    .shelf-head .m-mask > span,
    .shelf-track,
    .shelf-item,
    .shelf-footer,
    .shelf-all,
    .shelf-plus,
    .hm-intro,
    .hm-intro h2 .m-mask > span,
    .hm-media-frame,
    .hm-media-frame img,
    .hm-proofs,
    .hm-proofs > li,
    .hm-actions,
    .hm-actions > a,
    .reviews-head,
    .reviews-head .m-mask > span,
    .reviews-head > p,
    .reviews-summary,
    .reviews-carousel,
    .reviews-carousel-head,
    .review-card,
    .local-v2-visual,
    .local-v2-photo,
    .local-v2-info,
    .local-v2-info-row,
    .local-v2-content,
    .local-v2-eyebrow,
    .local-v2-content h2,
    .local-v2-lead,
    .local-v2-divider,
    .local-v2-actions,
    .local-v2-actions > a,
    .local-v2-bottom-card,
    .site-footer .footer-grid,
    .site-footer .footer-grid > *,
    .site-footer .footer-bottom
  ) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .hm-media-frame { clip-path: none !important; }

  /* Static lines are part of the layout, not another entrance timeline. */
  :where(.key-dup-steps > li)::before,
  :where(.key-dup-steps > li)::after,
  :where(.hm-proofs > li)::after {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Set before the first paint, then replaced synchronously by the controller.
     The fallback in the page head releases this if the script cannot start.

     The hero is the first thing the page paints, so its prepared state is
     never empty: it starts nearly opaque and travels a few pixels. Whatever
     happens to the controller - slow bundle, exception, script blocked - the
     reader is looking at readable copy, not at a blank blue rectangle. No
     scale is applied here, so the title never changes size while it settles. */
  html.mobile-motion-pending .hero-rating {
    opacity: .92 !important;
    transform: translate3d(0, 8px, 0) !important;
    animation: none !important;
    transition: none !important;
  }

  html.mobile-motion-pending .hero-title-line > span {
    opacity: .94 !important;
    transform: translate3d(0, 10px, 0) !important;
    animation: none !important;
    transition: none !important;
  }

  html.mobile-motion-pending .hero-content > p {
    opacity: .94 !important;
    transform: translate3d(0, 8px, 0) !important;
    animation: none !important;
    transition: none !important;
  }

  html.mobile-motion-pending .hero-actions > a {
    opacity: .96 !important;
    transform: translate3d(0, 8px, 0) !important;
    animation: none !important;
    transition: none !important;
  }

  html.mobile-motion-ready [data-mobile-motion] {
    opacity: var(--mobile-opacity, 1) !important;
    transform: translate3d(var(--mobile-x, 0px), var(--mobile-y, 0px), 0)
      scale(var(--mobile-scale, 1)) !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  html.mobile-motion-ready [data-mobile-motion].is-mobile-moving {
    will-change: transform, opacity !important;
  }

  /* A completed entrance hands press feedback back to its interactive actor. */
  html.mobile-motion-ready :where(
    .hero-cta,
    .hero-ghost-cta,
    .key-dup-cta,
    .department-tile,
    .department-card,
    .hm-actions > a,
    .local-v2-actions > a
  )[data-mobile-motion]:where(:not(.is-mobile-moving):active) {
    transform: scale(.985) !important;
  }

  /* These preferences must win even when a scroll update has written values. */
  html.mobile-motion-ready body:is(
    .aw-access-stop-motion,
    .aw-access-seizure-profile,
    .aw-access-cognitive-profile,
    .aw-access-adhd-profile
  ) [data-mobile-motion],
  html.mobile-motion-pending body:is(
    .aw-access-stop-motion,
    .aw-access-seizure-profile,
    .aw-access-cognitive-profile,
    .aw-access-adhd-profile
  ) :is(.hero-rating, .hero-title-line > span, .hero-content > p, .hero-actions > a) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.mobile-motion-ready [data-mobile-motion],
  html.mobile-motion-ready [data-mobile-motion].is-mobile-moving,
  html.mobile-motion-ready [data-mobile-motion]:active,
  html.mobile-motion-pending :is(
    .hero-rating,
    .hero-title-line > span,
    .hero-content > p,
    .hero-actions > a
  ) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}