/* =====================================================================
   qm-motion-aiwf.css — bespoke spatial motion, template group "aiwf"
   Pages: /ai-workflow/ (main#content.aw-main) and /ip-design/ (#ip-board).
   Pairs with qm-motion-aiwf.js. Additive only; no-op elsewhere because
   every rule needs html.qa-aiwf, which the script sets only on those pages
   after core has set html.qm-motion-ready. If JS fails, nothing is hidden.

   Motion uses the individual `translate` / `scale` / `rotate` properties
   (not `transform`), so it composes with the page CSS, which pins
   `transform: none !important` on several of these elements.
   ===================================================================== */
:root {
  --qa-ease: var(--qm-ease, cubic-bezier(.2, .8, .2, 1));
  --qa-t1: var(--qm-dur-m, .6s);
  --qa-t2: var(--qm-dur-l, .9s);
  --qa-t3: var(--qm-dur-xl, 1.2s);
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- reveal states ---------- */
  html.qm-motion-ready.qa-aiwf :is(#ip-board, #content):not(#qa0) .qa-rv {
    transition:
      opacity var(--qa-t2) var(--qa-ease) var(--qa-d, 0ms),
      translate var(--qa-t3) var(--qa-ease) var(--qa-d, 0ms),
      scale var(--qa-t3) var(--qa-ease) var(--qa-d, 0ms),
      rotate var(--qa-t3) var(--qa-ease) var(--qa-d, 0ms) !important;
    will-change: opacity, translate, scale;
  }
  html.qm-motion-ready.qa-aiwf :is(#ip-board, #content):not(#qa0) .qa-rv:not(.qa-in) { opacity: 0 !important; }
  html.qm-motion-ready.qa-aiwf :is(#ip-board, #content):not(#qa0) .qa-rv-rise:not(.qa-in)  { translate: 0 36px; }
  html.qm-motion-ready.qa-aiwf :is(#ip-board, #content):not(#qa0) .qa-rv-hero:not(.qa-in)  { translate: 0 28px; scale: .97; }
  html.qm-motion-ready.qa-aiwf :is(#ip-board, #content):not(#qa0) .qa-rv-depth:not(.qa-in) { translate: 0 64px; scale: .92; }
  html.qm-motion-ready.qa-aiwf :is(#ip-board, #content):not(#qa0) .qa-rv-tilt:not(.qa-in)  { translate: 0 90px; scale: .96; rotate: x 16deg; }
  html.qm-motion-ready.qa-aiwf :is(#ip-board, #content):not(#qa0) .qa-rv-tilt { transform-origin: 50% 100%; }
  html.qm-motion-ready.qa-aiwf :is(#ip-board, #content):not(#qa0) .qa-rv.qa-now { transition: none !important; }

  /* 3D stage for tilted card rows (perspective does not affect layout) */
  html.qm-motion-ready.qa-aiwf .qa-persp { perspective: 1400px; perspective-origin: 50% 30%; }

  /* lighter on small screens: shorter travel, no 3D rotation */
  html.qm-motion-ready.qa-aiwf.qa-aiwf-sm :is(#ip-board, #content):not(#qa0) .qa-rv-rise:not(.qa-in)  { translate: 0 20px; }
  html.qm-motion-ready.qa-aiwf.qa-aiwf-sm :is(#ip-board, #content):not(#qa0) .qa-rv-depth:not(.qa-in) { translate: 0 32px; scale: .97; }
  html.qm-motion-ready.qa-aiwf.qa-aiwf-sm :is(#ip-board, #content):not(#qa0) .qa-rv-tilt:not(.qa-in)  { translate: 0 40px; scale: .98; rotate: none; }

  /* pointer tilt (fine pointers only; set inline by JS) */
  html.qm-motion-ready.qa-aiwf .qa-tilt { transition: transform var(--qa-t1) var(--qa-ease); will-change: transform; }
  html.qm-motion-ready.qa-aiwf .qa-tilt.qa-tilting { transition: transform .2s linear; }

  /* number count-up: fixed box so digits never shift the line */
  html.qm-motion-ready.qa-aiwf .qa-num { display: inline-block; font-variant-numeric: tabular-nums; }

  /* =====================  AI WORKFLOW  ===================== */

  /* hero: the photo moves onto its own depth layer (JS copies the section's
     background-image onto it) so it can drift and push forward on its own */
  html.qm-motion-ready.qa-aiwf body .aw-hero.qa-aw-hero:not(#qa1):not(#qa2):not(#qa3) { background-image: none !important; }
  html.qm-motion-ready.qa-aiwf .aw-hero > .qa-aw-depth {
    position: absolute; inset: -4% 0; z-index: 0; pointer-events: none;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    will-change: transform, translate;
    animation: qa-aw-depth-in 1.8s var(--qa-ease) both;
  }
  html.qm-motion-ready.qa-aiwf .aw-hero > .aw-wrap { will-change: translate, scale, opacity; }
  @keyframes qa-aw-depth-in { from { scale: 1.16; opacity: 0; } to { scale: 1; opacity: 1; } }

  /* flow: a rail draws across the five nodes as you scroll; nodes light as it passes */
  html.qm-motion-ready.qa-aiwf .aw-flow > .qa-flow-rail {
    position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; pointer-events: none;
    background: #171a20; transform: scaleX(0); transform-origin: 0 50%; will-change: transform, opacity;
    transition: opacity var(--qa-t2) var(--qa-ease);
  }
  /* once drawn, the rail fades so the page's own black/grey "AI node" rules read again */
  html.qm-motion-ready.qa-aiwf .aw-flow > .qa-flow-rail.qa-done { opacity: 0; }
  html.qm-motion-ready.qa-aiwf .aw-flow.qa-flow > li {
    transition: opacity var(--qa-t2) var(--qa-ease), translate var(--qa-t2) var(--qa-ease);
  }
  html.qm-motion-ready.qa-aiwf .aw-flow.qa-flow > li:not(.qa-lit) { opacity: .32; translate: 0 10px; }

  /* case cards: image floats inside its frame */
  html.qm-motion-ready.qa-aiwf .aw-card figure img.qa-px { scale: 1.1; will-change: translate; }

  /* closing bands (both pages): point-cloud sphere that rises out of the band
     and over the content above it; dots above the band edge switch to faint ink (see JS) */
  html.qm-motion-ready.qa-aiwf .qa-has-orb { position: relative; }
  html.qm-motion-ready.qa-aiwf .qa-has-orb > :not(.qa-orb) { position: relative; z-index: 1; }
  html.qm-motion-ready.qa-aiwf .qa-has-orb > .qa-orb {
    position: absolute; z-index: 0; pointer-events: none;
    width: min(40vw, 540px); height: auto; aspect-ratio: 1;
    right: max(8px, calc((100vw - 1200px) / 2)); top: auto; bottom: 12%;
    will-change: translate, scale, opacity;
    opacity: 0; transition: opacity var(--qa-t3) var(--qa-ease);
  }
  html.qm-motion-ready.qa-aiwf .qa-has-orb > .qa-orb.qa-on { opacity: 1; }
  html.qm-motion-ready.qa-aiwf .qa-has-orb > .qa-orb.qa-orb-front { z-index: 2; width: min(26vw, 340px); }
  html.qm-motion-ready.qa-aiwf.qa-aiwf-sm .qa-has-orb > .qa-orb.qa-orb-front { width: 180px; }
  html.qm-motion-ready.qa-aiwf.qa-aiwf-sm .qa-has-orb > .qa-orb { width: 200px; right: 0; bottom: 40%; }

  /* =====================  IP DESIGN  ===================== */

  /* hero: character arrives from depth, then pushes toward the viewer on scroll */
  html.qm-motion-ready.qa-aiwf #ip-board .ipx-hero .ipx-banner.qa-ip-in { animation: qa-ip-banner-in 1.6s var(--qa-ease) both; }
  html.qm-motion-ready.qa-aiwf #ip-board .ipx-hero .ipx-banner img { will-change: translate, scale; }
  html.qm-motion-ready.qa-aiwf #ip-board .ipx-hero :is(.ipx-hero-copy, .ipx-hero-footer) { will-change: translate, opacity; }
  @keyframes qa-ip-banner-in { from { opacity: 0; scale: 1.08; translate: 4% 0; } to { opacity: 1; scale: 1; translate: 0 0; } }

  /* five frames: fanned deck that spreads into the row as you scroll */
  html.qm-motion-ready.qa-aiwf #ip-board .ipx-frame-list.qa-deck > li { will-change: translate, scale, rotate; transform-origin: 50% 80%; }

  /* key-visual rail: cover-flow depth around the centre slide */
  html.qm-motion-ready.qa-aiwf #ip-board .ipx-rail.qa-flowrail > .ipx-rail-item { will-change: scale, opacity; transform-origin: 50% 50%; }

  /* spotlight / CTA: scale toward the viewer as they settle */
  html.qm-motion-ready.qa-aiwf #ip-board :is(.ipx-spot-media, .ipx-cta-grid).qa-scrub { will-change: scale, translate; transform-origin: 50% 60%; }
}

@media print {
  html.qa-aiwf :is(#ip-board, #content):not(#qa0) .qa-rv { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; }
  html.qa-aiwf .qa-orb { display: none; }
}