/* Homepage spatial layer. Geometry and content remain in the original flow;
   everything here is gated by html.qm-motion-ready + data-qm-home-motion="active". */
html.qm-motion-ready body.qm-home-spatial {
  --qmh-ease: cubic-bezier(.2, .7, .2, 1);
  --qmh-dur: 1s;
}

/* Scroll-written surfaces must not interpolate between frames. */
body.qm-home-spatial :is(.qmh-stage-link, [data-qm-home-depth]) {
  transition: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero film: trails the scroll inside the stage clip and recedes into the dark stage. */
  html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] .qmh-stage-link {
    transform-origin: 50% 0;
    transform: translate3d(0, var(--qmh-film-y, 0px), 0) scale(var(--qmh-film-scale, 1));
    opacity: var(--qmh-film-opacity, 1);
    will-change: transform, opacity;
  }

  /* Hero copy: one plane pushing toward the viewer. Individual properties compose with
     any transform the existing reveal layer applies. */
  html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] [data-qm-home-copy] {
    transform-origin: var(--qmh-origin, 50% 50%);
    translate: 0 var(--qmh-copy-y, 0px);
    scale: var(--qmh-copy-scale, 1);
  }
  html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] [data-qm-home-copy][style*="--qmh-copy-opacity"] {
    opacity: var(--qmh-copy-opacity, 1) !important;
    transition: none !important;
  }

  /* Section frames rise out of depth and settle at scale 1. Individual transform properties,
     because existing page CSS pins some of these frames to transform:none !important. */
  html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] [data-qm-home-depth] {
    transform-origin: 50% 100%;
    translate: 0 var(--qmh-depth-y, 0px) var(--qmh-depth-z, 0px);
    rotate: x var(--qmh-depth-rx, 0deg);
    scale: var(--qmh-depth-scale, 1);
    backface-visibility: hidden;
  }
  html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] [data-qm-home-stage] { perspective: 1600px; }
  html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] [data-qm-home-depth="project"] { transform-origin: 50% 80%; }
  html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] [data-qm-home-depth="system"] { transform-origin: 100% 60%; }

  @media (max-width: 767px) {
    html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] [data-qm-home-stage] { perspective: none; }
    html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] .qmh-stage-link {
      transform: none;
      opacity: 1;
    }
    html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] :is([data-qm-home-copy], [data-qm-home-depth]) {
      rotate: none;
      translate: none;
      scale: none;
    }
  }

  @media (min-width: 1024px) and (min-height: 650px) {
    html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] #home-explore .ql-explore-intro {
      align-self: start;
      transform: translate3d(0, var(--qmh-story-y, 0px), 0);
      transition: none !important;
    }
  }

  @media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] #home-brand-anchor .qa-home-arrow,
    html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] #home-explore .ql-explore-arrow {
      transition: transform .8s var(--qmh-ease);
    }
    html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] #home-brand-anchor .qa-home-step:is(:hover, :focus-visible) .qa-home-arrow,
    html.qm-motion-ready body.qm-home-spatial[data-qm-home-motion="active"] #home-explore .ql-text-links > a:is(:hover, :focus-visible) .ql-explore-arrow {
      transform: translate3d(4px, -4px, 0);
    }
  }
}

@media print {
  body.qm-home-spatial :is(.qmh-stage-link, [data-qm-home-depth], [data-qm-home-copy]) {
    transform: none !important; translate: none !important; scale: none !important; rotate: none !important; opacity: 1 !important;
  }
}

/* Pause control: small icon-only button in the hero's bottom-left corner (aria-label kept). */
.qmh { position: relative; }
body .hm-hero-tools .hm-motion-toggle { position: absolute !important; left: 24px; bottom: 24px; margin: 0 !important; z-index: 5; transform: none !important; translate: none !important; scale: none !important; }
.hm-motion-toggle { width: 32px; height: 32px; padding: 0 !important; border-radius: 50%; display: inline-grid; place-items: center;
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18) !important; color: rgba(255,255,255,.7) !important;
  font-size: 0 !important; line-height: 0; opacity: .6; transition: opacity .3s cubic-bezier(.2,.7,.2,1); box-shadow: none !important; }
.hm-motion-toggle:hover, .hm-motion-toggle:focus-visible { opacity: 1; }
.hm-motion-toggle svg { width: 10px; height: 10px; }
.hm-motion-toggle > :not(svg) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }