/* qm-motion-services.css — spatial motion for service / industry / landing pages ("services" group).
   Additive layer on top of qm-motion.css tokens. Nothing is hidden unless qm-motion-services.js has set
   html.qms-on (only after core sets html.qm-motion-ready) AND tagged the element. Transform/opacity only. */

/* ---------- Depth reveal ---------- */
html.qm-motion-ready.qms-on .qms-r {
  opacity: 0;
  transform: perspective(var(--qm-persp, 1400px)) translate3d(0, var(--qms-y, 28px), var(--qms-z, 0px)) rotateX(var(--qms-rx, 0deg));
  transform-origin: 50% 100%;
  transition: none;
}
html.qm-motion-ready.qms-on .qms-r.qms-in {
  opacity: 1;
  transform: perspective(var(--qm-persp, 1400px)) translate3d(0, 0, 0) rotateX(0deg);
  transition:
    opacity var(--qm-dur-l, .9s) var(--qm-ease, cubic-bezier(.2, .8, .2, 1)) var(--qms-d, 0ms),
    transform var(--qm-dur-xl, 1.2s) var(--qm-spring, cubic-bezier(.16, 1, .3, 1)) var(--qms-d, 0ms),
    filter var(--qm-dur-l, .9s) var(--qm-ease, cubic-bezier(.2, .8, .2, 1)) var(--qms-d, 0ms);
}
/* Cards rise from behind the page plane toward the viewer. */
html.qm-motion-ready.qms-on .qms-r--card { --qms-y: 64px; --qms-z: -140px; --qms-rx: 10deg; }
html.qm-motion-ready.qms-on .qms-r--text { --qms-y: 24px; }
/* Hero headline: slightly longer rise (no blur). */
html.qm-motion-ready.qms-on .qms-r--hl { --qms-y: .45em; }
/* Elements that already own `transform`: opacity + independent translate only. */
html.qm-motion-ready.qms-on .qms-r--soft { transform: none; translate: 0 var(--qms-y, 24px); }
html.qm-motion-ready.qms-on .qms-r--soft.qms-in {
  transform: none;
  translate: 0 0;
  transition:
    opacity var(--qm-dur-l, .9s) var(--qm-ease, cubic-bezier(.2, .8, .2, 1)) var(--qms-d, 0ms),
    translate var(--qm-dur-xl, 1.2s) var(--qm-spring, cubic-bezier(.16, 1, .3, 1)) var(--qms-d, 0ms);
}

/* ---------- Scroll-linked layers (values written per frame by JS) ---------- */
.qms-clip { overflow: hidden; overflow: clip; }
html.qms-on .qms-hero-media,
html.qms-on .qms-stage-media { transform-origin: 50% 50%; backface-visibility: hidden; }
html.qms-on .qms-live { will-change: transform, opacity; }
html.qms-on .qms-tilt { transform-origin: 50% 100%; backface-visibility: hidden; }

/* ---------- Counters ---------- */
.qms-count { font-variant-numeric: tabular-nums; }

/* ---------- Safety ---------- */
html.qms-off .qms-r,
html.qm-motion-off .qms-r { opacity: 1 !important; transform: none !important; translate: none !important; filter: none !important; }
html.qm-motion-off .qms-hero-media,
html.qm-motion-off .qms-hero-copy,
html.qm-motion-off .qms-stage-media,
html.qm-motion-off .qms-tilt { transform: none !important; translate: none !important; scale: none !important; opacity: 1 !important; }

@media (max-width: 767px) {
  html.qm-motion-ready.qms-on .qms-r { --qms-z: 0px !important; --qms-rx: 0deg !important; --qms-y: 18px !important; }
  html.qm-motion-ready.qms-on .qms-r--hl { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.qm-motion-ready .qms-r,
  html .qms-hero-media,
  html .qms-hero-copy,
  html .qms-stage-media,
  html .qms-tilt { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; filter: none !important; transition: none !important; }
}

@media print {
  .qms-r, .qms-hero-media, .qms-hero-copy, .qms-stage-media, .qms-tilt { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; filter: none !important; }
}