/* About Template Motion System
 * Bespoke spatial motion for about-us/** pages
 * Only active on pages in scope, gated by html.qm-motion-ready
 * Respects prefers-reduced-motion, no layout shift, 60fps (transform/opacity only)
 */

/* Guard: only apply to about pages with motion ready class */
html:not(.qm-motion-ready) .qm-about-section,
html:not(.qm-motion-ready) .qac-section,
html:not(.qm-motion-ready) .qac-overview-hero {
  /* no-op if JS hasn't set qm-motion-ready */
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  .qm-motion-hero,
  .qm-motion-intro,
  .qm-motion-section,
  .qm-motion-card,
  .qm-motion-parallax {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
 * HERO: Depth staging with parallax
 * ============================================ */
html.qm-motion-ready .qac-overview-hero {
  perspective: 1200px;
  position: relative;
  overflow: hidden;
}

html.qm-motion-ready .qac-overview-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,0.15));
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: qm-depth-overlay 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

html.qm-motion-ready .qac-overview-hero > * {
  z-index: 2;
}

/* Hero image gets parallax push-away effect */
html.qm-motion-ready .qac-overview-hero img {
  opacity: 0;
  transform: translateZ(0) scale(1.08);
  animation: qm-hero-image-in 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  will-change: transform, opacity;
}

/* Hero text appears with stagger */
html.qm-motion-ready .qac-overview-hero h1,
html.qm-motion-ready .qac-overview-hero h2 {
  opacity: 0;
  transform: translateY(20px);
  animation: qm-hero-text-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
}

html.qm-motion-ready .qac-overview-hero > div:last-child {
  opacity: 0;
  transform: translateY(20px);
  animation: qm-hero-text-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

/* ============================================
 * INTRO: Entrance with depth
 * ============================================ */
html.qm-motion-ready #qm-about-intro {
  position: relative;
}

html.qm-motion-ready #qm-about-intro h2,
html.qm-motion-ready #qm-about-intro > div > * {
  opacity: 0;
  transform: translateY(40px);
  animation: qm-section-text-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

html.qm-motion-ready #qm-about-intro h2 {
  animation-delay: 0.1s;
}

html.qm-motion-ready #qm-about-intro > div > :nth-child(2) {
  animation-delay: 0.25s;
}

html.qm-motion-ready #qm-about-intro > div > :nth-child(3) {
  animation-delay: 0.4s;
}

html.qm-motion-ready #qm-about-intro > div > :nth-child(n+4) {
  animation-delay: 0.55s;
}

/* ============================================
 * CONTENT SECTIONS: Sticky scrollytelling
 * ============================================ */
html.qm-motion-ready .qac-section {
  position: relative;
}

/* Section reveal on scroll */
html.qm-motion-ready .qac-section > * {
  opacity: 0;
  transform: translateY(30px);
  animation: qm-section-scroll-reveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Header gets priority reveal */
html.qm-motion-ready .qac-section-head {
  animation: qm-section-scroll-reveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(30px);
}

/* Section content items stagger */
html.qm-motion-ready .qac-section > div:nth-child(2) > * {
  opacity: 0;
  transform: translateY(20px);
}

html.qm-motion-ready .qac-section > div:nth-child(2) > :nth-child(1) {
  animation: qm-section-scroll-reveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
}

html.qm-motion-ready .qac-section > div:nth-child(2) > :nth-child(n+2) {
  animation: qm-section-scroll-reveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
}

/* ============================================
 * CAPABILITY PROOF: Card stacks with parallax
 * ============================================ */
html.qm-motion-ready #qa-capability-proof {
  position: relative;
}

html.qm-motion-ready #qa-capability-proof > div {
  opacity: 0;
  animation: qm-section-scroll-reveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Cards get parallax depth */
html.qm-motion-ready #qa-capability-proof [class*="card"],
html.qm-motion-ready #qa-capability-proof .wp-block-column {
  opacity: 0;
  transform: translateY(40px) translateZ(0);
  animation: qm-card-enter 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  will-change: transform, opacity;
}

html.qm-motion-ready #qa-capability-proof .wp-block-column:nth-child(1) {
  animation-delay: 0.1s;
}

html.qm-motion-ready #qa-capability-proof .wp-block-column:nth-child(2) {
  animation-delay: 0.2s;
}

html.qm-motion-ready #qa-capability-proof .wp-block-column:nth-child(n+3) {
  animation-delay: 0.3s;
}

/* ============================================
 * MOBILE: Lighter animations <768px
 * ============================================ */
@media (max-width: 767px) {
  /* Scale down parallax on mobile */
  html.qm-motion-ready .qac-overview-hero img {
    animation: qm-hero-image-in-mobile 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  /* Reduce stagger delays on mobile */
  html.qm-motion-ready #qm-about-intro > div > :nth-child(2) {
    animation-delay: 0.1s;
  }

  html.qm-motion-ready #qm-about-intro > div > :nth-child(3) {
    animation-delay: 0.15s;
  }

  html.qm-motion-ready #qm-about-intro > div > :nth-child(n+4) {
    animation-delay: 0.2s;
  }

  /* Simpler card enter on mobile */
  html.qm-motion-ready #qa-capability-proof .wp-block-column {
    animation: qm-card-enter-mobile 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0;
  }
}

/* ============================================
 * KEYFRAME ANIMATIONS
 * ============================================ */

/* Hero image: scale and opacity entrance */
@keyframes qm-hero-image-in {
  0% {
    opacity: 0;
    transform: scale(1.12) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

@keyframes qm-hero-image-in-mobile {
  0% {
    opacity: 0;
    transform: scale(1.08) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

/* Hero depth overlay */
@keyframes qm-depth-overlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Hero text entrance */
@keyframes qm-hero-text-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section text entrance */
@keyframes qm-section-text-in {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section scroll reveal (used by intersection observer in JS) */
@keyframes qm-section-scroll-reveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card entrance with stagger */
@keyframes qm-card-enter {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes qm-card-enter-mobile {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}