/* qm-motion-cases.css — spatial motion layer for case-study pages (/NNNN-2/).
 * Every rule is gated by html.qm-motion-ready.qmc-on (qmc-on is set by qm-motion-cases.js only
 * after the case template is detected), so this file is inert elsewhere and if JS fails.
 * transform/opacity only; no layout-affecting properties change. */
:root {
  --qmc-ease: var(--qm-ease, cubic-bezier(.2, .8, .2, 1));
  --qmc-d1: var(--qm-dur-m, .6s);
  --qmc-d2: var(--qm-dur-l, .9s);
  --qmc-d3: var(--qm-dur-xl, 1.2s);
}

/* ---------- hero: settle-in from depth, then recede under content ---------- */
html.qm-motion-ready.qmc-on .qmc-hero { overflow: clip; contain: paint; }
html.qm-motion-ready.qmc-on .qmc-hero-box {
  position: relative;
  transform-origin: 50% 40%;
  will-change: transform;
}
html.qm-motion-ready.qmc-on .qmc-hero-box img {
  transform: scale(1.08);
  opacity: 0;
  transition: transform var(--qmc-d3) var(--qmc-ease), opacity var(--qmc-d2) var(--qmc-ease);
}
html.qm-motion-ready.qmc-on .qmc-hero.qmc-in .qmc-hero-box img { transform: scale(1.02); opacity: 1; }
html.qm-motion-ready.qmc-on .qmc-hero-box::after,
html.qm-motion-ready.qmc-on .qmc-card-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--qmc-dim, 0);
  pointer-events: none;
}

/* ---------- intro: scroll-scrubbed reading highlight ---------- */
html.qm-motion-ready.qmc-on .qmc-scrub .qmc-g {
  opacity: .16;
  transition: opacity .35s linear;
}
html.qm-motion-ready.qmc-on .qmc-scrub .qmc-g.qmc-lit { opacity: 1; }

/* ---------- gallery: sticky card stack with depth recession ---------- */
html.qm-motion-ready.qmc-on .qmc-card { position: relative; }
html.qm-motion-ready.qmc-on .qmc-card.qmc-stick { position: sticky; top: var(--qmc-top, 0px); }
html.qm-motion-ready.qmc-on .qmc-card-box {
  position: relative;
  overflow: hidden;
  transform-origin: 50% 0%;
  will-change: transform;
  backface-visibility: hidden;
}
html.qm-motion-ready.qmc-on .qmc-card + .qmc-card .qmc-card-box {
  box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, .35);
}

/* ---------- concept: staggered rise ---------- */
html.qm-motion-ready.qmc-on .qmc-concept { position: relative; }
html.qm-motion-ready.qmc-on .qmc-kicker,
html.qm-motion-ready.qmc-on .qmc-rise,
html.qm-motion-ready.qmc-on .qmc-cta {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--qmc-d2) var(--qmc-ease), transform var(--qmc-d3) var(--qmc-ease);
  transition-delay: calc(var(--qmc-i, 0) * var(--qm-stagger, 70ms) * 1.3);
}
html.qm-motion-ready.qmc-on .qmc-kicker { transform: translate3d(-18px, 0, 0); }
html.qm-motion-ready.qmc-on .qmc-kicker.qmc-in,
html.qm-motion-ready.qmc-on .qmc-rise.qmc-in,
html.qm-motion-ready.qmc-on .qmc-cta.qmc-in { opacity: 1; transform: none; }


html.qm-motion-ready.qmc-on .qmc-magnet {
  transform: translate3d(var(--qmc-mx, 0px), var(--qmc-my, 0px), 0);
  transition: transform .45s var(--qmc-ease), background-color .3s, color .3s;
}

/* ---------- mobile-light: reveals only, no sticky/scrub/pointer ---------- */
html.qm-motion-ready.qmc-on.qmc-lite .qmc-card .qmc-card-box {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.97);
  transition: opacity var(--qmc-d1) var(--qmc-ease), transform var(--qmc-d2) var(--qmc-ease);
  will-change: auto;
}
html.qm-motion-ready.qmc-on.qmc-lite .qmc-card.qmc-in .qmc-card-box { opacity: 1; transform: none; }
html.qm-motion-ready.qmc-on.qmc-lite .qmc-hero-box { will-change: auto; }

/* ---------- safety ---------- */
@media (prefers-reduced-motion: reduce) {
  html.qm-motion-ready.qmc-on .qmc-hero-box,
  html.qm-motion-ready.qmc-on .qmc-hero-box img,
  html.qm-motion-ready.qmc-on .qmc-card-box,
  html.qm-motion-ready.qmc-on .qmc-kicker,
  html.qm-motion-ready.qmc-on .qmc-rise,
  html.qm-motion-ready.qmc-on .qmc-cta,
  html.qm-motion-ready.qmc-on .qmc-scrub .qmc-g {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.qm-motion-ready.qmc-on .qmc-card.qmc-stick { position: relative; }
  }
@media print {
  html.qmc-on .qmc-card.qmc-stick { position: relative; }
  html.qmc-on [class*="qmc-"] { opacity: 1 !important; transform: none !important; }
}

/* 20261023: intro paragraph sits in a full-bleed container; keep it inside the page gutter */
.elementor-heading-title.qmc-intro { box-sizing: border-box; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: clamp(24px, 5vw, 80px); padding-right: clamp(24px, 5vw, 80px); }