/* Site-wide motion polish. Transform/opacity only; everything is off for prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  /* page enter / leave */
  @keyframes mpPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  body { animation: mpPageIn .55s cubic-bezier(.2,.7,.2,1) backwards; }
  html.mp-leaving body { opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease; }

  /* hero: depth from pointer position (uses individual transform props so existing float animation keeps working) */
  .hero-window { translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 9px); transition: translate .5s cubic-bezier(.2,.7,.2,1); }
  .hero-image-wrap { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -7px); transition: translate .6s cubic-bezier(.2,.7,.2,1); }
  .hero-visual-glow { translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 16px); transition: translate .8s cubic-bezier(.2,.7,.2,1); }

  /* header navigation: sliding underline */
  .nav-links a { position: relative; }
  .nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; transform: translateX(-50%); transition: width .3s cubic-bezier(.2,.7,.2,1); }
  .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: calc(100% - 28px); }

  /* in-page anchors glide */
  html { scroll-behavior: smooth; }

  /* section titles settle in */
  .mo-title.mo { transform: translateY(18px); }
}