/* Virtuoso Music motion upgrade. Overlay: load after site.css.
   Rules: transform and opacity only; one entrance curve, one movement curve;
   reduced motion gets a gentle fade; content stays visible without JS.
   Note: .btn transform/active left to existing site (magnetic --mx/--my/--sc). */
:root {
  --vm-out: cubic-bezier(0.23, 1, 0.32, 1);
  --vm-inout: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. Scroll reveals (JS adds .vmx to <html> and [data-vmx] to targets) */
  .vmx [data-vmx] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 500ms var(--vm-out), transform 500ms var(--vm-out);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .vmx [data-vmx].in {
    opacity: 1;
    transform: none;
  }

  /* 2. Buttons: shadow only; transform owned by existing site styles */
  .btn {
    transition: box-shadow 200ms var(--vm-out),
      background-color 200ms var(--vm-out), color 200ms var(--vm-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover {
      box-shadow: 0 10px 22px -12px rgba(40, 10, 90, 0.5);
    }
  }

  /* 3. Press logos and partner marks */
  .wm {
    transition: transform 200ms var(--vm-out), opacity 200ms var(--vm-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .wm:hover { transform: translateY(-1px); }
  }

  /* 4. Hero: softer petal settle, no new animation names */
  .hero .petals {
    animation-timing-function: var(--vm-out);
    animation-duration: 900ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vmx [data-vmx] { opacity: 1; transform: none; transition: none; }
}

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }