/*
 * OWNERTS — mobile motion language ("lift & settle").
 *
 * Pairs with public/ownerts-mobile-motion.js. Every rule here is scoped to the
 * touch/small-viewport media query, so desktop is byte-for-byte unaffected.
 *
 * Only `transform` and `opacity` are animated — both run on the compositor, so
 * a mid-range Android holds 60fps while scrolling. No filters, no box-shadow
 * transitions, no width/height, no background-position.
 */

@media (max-width: 900px), (hover: none) and (pointer: coarse) {

  /* ---------------------------------------------------------- resting state */

  /* Only ever hides once the script is running, so a JS failure can't leave a
     blank page. `.ovm-ready` is set synchronously by the script itself. */
  .ovm-ready [data-ovm] {
    opacity: 0;
    will-change: transform, opacity;
  }

  .ovm-ready [data-ovm="up"]    { transform: translate3d(0, 26px, 0); }
  .ovm-ready [data-ovm="left"]  { transform: translate3d(-24px, 0, 0); }
  .ovm-ready [data-ovm="right"] { transform: translate3d(24px, 0, 0); }
  .ovm-ready [data-ovm="scale"] { transform: scale(1.045); }
  .ovm-ready [data-ovm="pop"]   { transform: translate3d(0, 20px, 0) scale(.972); }

  /* Accent rules grow out of their leading edge instead of fading in — cheap
     (one scaleX) and reads as intentional craft rather than a generic fade. */
  .ovm-ready [data-ovm="line"] {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
  }

  /* ------------------------------------------------------------- played state */

  .ovm-ready [data-ovm].ovm-in {
    opacity: 1;
    transform: none;
    /* Slight overshoot in the curve gives the "settle" — a straight ease-out
       is what makes scroll reveals feel like a slideshow. */
    transition:
      opacity .55s cubic-bezier(.22, .9, .24, 1) var(--ovm-d, 0ms),
      transform .66s cubic-bezier(.18, .89, .32, 1.06) var(--ovm-d, 0ms);
    will-change: auto;
  }

  /* Anything already on screen at boot appears with no motion at all, so the
     LCP element is painted at its final position immediately. */
  .ovm-ready [data-ovm][data-ovm-instant] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* --------------------------------------------------- interaction feedback */

  /* Touch devices get no hover, so presses are the only feedback channel.
     A quick scale-down reads as physical and costs one composited frame. */
  .mp-button:active,
  .mp-button-primary:active,
  .oh-primary:active,
  .oh-secondary:active,
  .mp-contact-submit:active,
  .mp-header-cta:active,
  .mp-mobile-cta:active,
  .ots-arrow:active,
  .mp-card-button:active,
  .mp-industry-card:active {
    transform: scale(.972);
    transition: transform .12s cubic-bezier(.3, .8, .4, 1);
  }

  .mp-faq-toggle:active { transform: scale(.99); }

  /* Carousel dots deserve a real state change, not just a colour swap. */
  .ots-dot { transition: transform .3s cubic-bezier(.22,.9,.24,1), opacity .3s ease; }
  .ots-dot.is-active { transform: scale(1.35); }

  /* ------------------------------------------------------- paused decoration */

  /* Toggled by the script when a decorative animation scrolls out of view. */
  .ownerts-anim-paused,
  .ownerts-anim-paused * {
    animation-play-state: paused !important;
  }

  /* ----------------------------------------------------------- accessibility */

  @media (prefers-reduced-motion: reduce) {
    .ovm-ready [data-ovm],
    .ovm-ready [data-ovm].ovm-in {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }
}