/* Article motion: additive, template-guarded, gated by html.qm-motion-ready.
   Hero depth on scroll, content reveals on entry, image parallax, TOC current cue. */

html.qm-motion-ready [data-qm-articles] {
  --qmar-ease: cubic-bezier(.2, .7, .2, 1);
  --qmar-dur: 1s;
}

/* Supersede the legacy QAL template's older, independent reveal observer. */
html.qm-motion-ready.qal-js body.qm-al [data-qm-articles] .qal-body > :is(section, .qal-break, .qal-q, .qal-take, .qal-facts, .qal-act) {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Legacy QAL template body sections. */
  html.qm-motion-ready.qal-js body.qm-al [data-qm-articles] .qal-body > .qmar-wait {
    opacity: .4;
    translate: 0 40px;
    transition: opacity 1s var(--qmar-ease), translate 1s var(--qmar-ease);
  }
  html.qm-motion-ready.qal-js body.qm-al [data-qm-articles] .qal-body > .qmar-seen,
  html.qm-motion-ready.qal-js body.qm-al [data-qm-articles] .qal-body > .qmar-wait:focus-within {
    opacity: 1;
    translate: none;
  }

  /* Hero intro: layered entrance. */
  html.qm-motion-ready [data-qm-articles] .qmar-enter {
    animation: qmar-arrive var(--qmar-dur) var(--qmar-ease) both;
    animation-delay: var(--qmar-delay, 0s);
  }

  /* Content sections: rise from behind. */
  html.qm-motion-ready [data-qm-articles] .qmar-wait {
    opacity: .4;
    translate: 0 36px -30px;
    rotate: x 1.4deg;
    transition: opacity var(--qmar-dur) var(--qmar-ease),
      translate var(--qmar-dur) var(--qmar-ease),
      rotate var(--qmar-dur) var(--qmar-ease);
  }
  html.qm-motion-ready [data-qm-articles] .qmar-wait.qmar-seen,
  html.qm-motion-ready [data-qm-articles] .qmar-wait:focus-within {
    opacity: 1;
    translate: none;
    rotate: none;
  }
  html.qm-motion-ready [data-qm-articles] .qmar-emphasis.qmar-wait {
    translate: 0 44px -50px;
    rotate: x 1.8deg;
  }
  html.qm-motion-ready [data-qm-articles] .qmar-emphasis.qmar-seen {
    translate: none;
    rotate: none;
  }

  /* Hero copy depth (scroll-driven). */
  html.qm-motion-ready [data-qm-articles] .qmar-hero-copy {
    translate: 0 var(--qmar-hero-y, 0px);
    scale: var(--qmar-hero-scale, 1);
    transform-origin: center bottom;
  }

  /* Hero image parallax. */
  html.qm-motion-ready [data-qm-articles] .qmar-hero-image {
    transform: translate3d(0, var(--qmar-hero-image-y, 0px), 0) scale(1.08);
    animation: none;
  }

  /* Body images: frame parallax. */
  html.qm-motion-ready [data-qm-articles] .qmar-image-frame {
    overflow: hidden;
  }
  html.qm-motion-ready [data-qm-articles] .qmar-image {
    translate: 0 var(--qmar-y, 0px);
    scale: var(--qmar-scale, 1.06);
    transform-origin: center;
    animation: none;
  }

  /* TOC current indicator. */
  html.qm-motion-ready [data-qm-articles] .qmar-toc-link {
    transition: opacity .7s var(--qmar-ease), translate .7s var(--qmar-ease);
  }
  html.qm-motion-ready [data-qm-articles] .qmar-toc-link:not(.qmar-toc-current) {
    opacity: .65;
  }
  html.qm-motion-ready [data-qm-articles] .qmar-toc-current {
    opacity: 1;
    translate: 3px 0;
  }

  /* Card hover lift. */
  html.qm-motion-ready [data-qm-articles] .qmar-card {
    transition: transform .7s var(--qmar-ease), opacity 1s var(--qmar-ease);
  }
  @media (hover: hover) and (pointer: fine) {
    html.qm-motion-ready [data-qm-articles] .qmar-card:not(.qmar-wait):hover,
    html.qm-motion-ready [data-qm-articles] .qmar-card.qmar-seen:hover {
      transform: perspective(1400px) translate3d(0, -4px, 10px);
    }
  }

  @media (max-width: 767px) {
    html.qm-motion-ready [data-qm-articles] .qmar-wait,
    html.qm-motion-ready [data-qm-articles] .qmar-emphasis.qmar-wait,
    html.qm-motion-ready.qal-js body.qm-al [data-qm-articles] .qal-body > .qmar-wait {
      translate: 0 16px;
      rotate: none;
      transition-duration: .7s;
    }
    html.qm-motion-ready [data-qm-articles] .qmar-wait.qmar-seen,
    html.qm-motion-ready.qal-js body.qm-al [data-qm-articles] .qal-body > .qmar-wait.qmar-seen {
      translate: none;
      rotate: none;
    }
    html.qm-motion-ready [data-qm-articles] .qmar-image,
    html.qm-motion-ready [data-qm-articles] .qmar-hero-image {
      transform: none;
      translate: none;
      scale: none;
    }
    html.qm-motion-ready [data-qm-articles] .qmar-hero-copy {
      translate: none;
      scale: none;
    }
  }
}

@keyframes qmar-arrive {
  from { opacity: .6; translate: 0 28px; }
  to { opacity: 1; translate: none; }
}

/* Safety: content always visible without the ready gate or with reduced motion. */
html:not(.qm-motion-ready) [data-qm-articles] .qmar-wait,
html:not(.qm-motion-ready) [data-qm-articles] .qmar-enter,
html:not(.qm-motion-ready) [data-qm-articles] .qmar-image,
html:not(.qm-motion-ready) [data-qm-articles] .qmar-hero-image,
html:not(.qm-motion-ready) [data-qm-articles] .qmar-hero-copy {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  animation: none !important;
  transition: none !important;
}
html:not(.qm-motion-ready) [data-qm-articles] .qmar-toc-link {
  opacity: 1 !important;
  translate: none !important;
}

@media (prefers-reduced-motion: reduce), print {
  html.qm-motion-ready [data-qm-articles] .qmar-wait,
  html.qm-motion-ready [data-qm-articles] .qmar-enter,
  html.qm-motion-ready [data-qm-articles] .qmar-image,
  html.qm-motion-ready [data-qm-articles] .qmar-hero-image,
  html.qm-motion-ready [data-qm-articles] .qmar-hero-copy {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    animation: none !important;
    transition: none !important;
  }
  html.qm-motion-ready [data-qm-articles] .qmar-toc-link {
    opacity: 1 !important;
    translate: none !important;
  }
}