/* =========================================================
   motion.css — Engine motion primitive library
   ---------------------------------------------------------
   Layer: ENGINE (shared primer, sibling of style.css)
   Companion files:
     - style.css            : engine tokens (--motion-*) + base .reveal
     - motion-presets.json : region × industry × block params (SINGLE SOURCE)
     - docs/MOTION-SYSTEM.md : subsystem contract
   Distilled from: React Bits (taxonomy), Motionsites (block→motion
     mapping), ThreeUI (industry shader motifs), Refero Styles (DESIGN
     paradigm). We TAKE the classification / mapping / vocabulary, never
     the React/Tailwind components — everything here is hand-written
     CSS re-implemented under our tokens. Zero external dependency.

   HARD CONVENTION (inherited from style.css):
     Animate ONLY `translate` / `scale` / `opacity` / `clip-path` /
     `filter`. NEVER `transform` — the engine uses the independent
     `translate`/`scale` properties on purpose so motion NEVER fights a
     skin's hover `transform` (card lift, image zoom, etc.).

   Reduced motion: style.css already kills all animation/transition
     under (prefers-reduced-motion: reduce). This file adds no exception.
   ========================================================= */

/* ---------- Engine tokens (mirror of style.css; safe to override per region) ----------
   These default to style.css :root values; region presets in §R override them
   via [data-motion=".."] on <html> or any block. */
:root {
  --reveal-dist: 14px;        /* vertical travel for rise/slide variants */
  --reveal-x: 18px;           /* horizontal travel for slide-x variants */
  --reveal-scale: 0.96;       /* start scale for zoom variant */
  --reveal-blur: 8px;         /* start blur for blur variant */
}

/* =========================================================
   L1 — Micro-interactions (hover / focus). No JS required.
   ========================================================= */

/* Card / panel lift on hover (uses `translate`, not transform) */
.hover-lift {
  transition: translate var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
  will-change: translate;
}
.hover-lift:hover,
.hover-lift:focus-within {
  translate: 0 -4px;
  box-shadow: var(--shadow-lift, 0 10px 26px rgba(14,36,56,.14));
}

/* Image zoom inside a fixed overflow:hidden frame (product cards, galleries) */
.hover-zoom { overflow: hidden; }
.hover-zoom > img,
.hover-zoom > .media > img {
  transition: scale var(--motion-base) var(--ease-out);
  will-change: scale;
}
.hover-zoom:hover > img,
.hover-zoom:hover > .media > img,
.hover-zoom:focus-within > img,
.hover-zoom:focus-within > .media > img { scale: 1.04; }

/* CTA arrow nudge — pair with a child `.arrow` / `::after` arrow glyph */
.hover-arrow { display: inline-flex; align-items: center; gap: .4em; }
.hover-arrow .arrow,
.hover-arrow::after {
  transition: translate var(--motion-fast) var(--ease-out);
}
.hover-arrow:hover .arrow,
.hover-arrow:focus-visible .arrow,
.hover-arrow:hover::after,
.hover-arrow:focus-visible::after { translate: 4px 0; }

/* =========================================================
   L2 — Scroll-reveal variants.
   The engine (script.js) adds `.reveal` at runtime and toggles
   `.is-visible` via IntersectionObserver. Markup (generator /
   DESIGN) opts a block into a variant by adding the modifier
   class below (e.g. <section class="section reveal--slide-l">).
   Base `.reveal` (rise) lives in style.css; these extend it.
   ========================================================= */

/* fade-only — subtle, for already-light blocks */
.reveal.reveal--fade { translate: none; }
.reveal.reveal--fade { opacity: 0; }
.reveal.reveal--fade.is-visible { opacity: 1; }

/* slide from left / right — left/right alternating layouts */
.reveal--slide-l { opacity: 0; translate: calc(-1 * var(--reveal-x)) 0; }
.reveal--slide-r { opacity: 0; translate: var(--reveal-x) 0; }
.reveal--slide-l.is-visible,
.reveal--slide-r.is-visible { opacity: 1; translate: none; }

/* zoom-in — product imagery, hero secondary elements */
.reveal--zoom { opacity: 0; scale: var(--reveal-scale); }
.reveal--zoom.is-visible { opacity: 1; scale: 1; }

/* blur-in — premium / high-craft sections (gate: heavier paint) */
.reveal--blur { opacity: 0; filter: blur(var(--reveal-blur)); }
.reveal--blur.is-visible { opacity: 1; filter: blur(0); }

/* clip wipe — industry-motif reveals, before/after, hero bands */
.reveal--clip { opacity: 1; clip-path: inset(0 100% 0 0); }
.reveal--clip.is-visible { clip-path: inset(0 0 0 0); }
.reveal--clip {
  transition: clip-path var(--motion-reveal) var(--ease-out);
}

/* =========================================================
   L2b — State toggle (accordion / tabs / disclosure)
   Grid-rows 0fr→1fr is the modern jank-free height transition.
   ========================================================= */
.state-toggle__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-base) var(--ease-out);
}
.state-toggle__panel > * { overflow: hidden; min-height: 0; }
.state-toggle.is-open > .state-toggle__panel { grid-template-rows: 1fr; }

/* =========================================================
   L2c — Scroll-scrub (progressive; ignored where unsupported)
   Usage: <div class="scroll-progress"><i></i></div> pinned, or
   a section with style="animation-timeline: view()".
   ========================================================= */
@supports (animation-timeline: view()) {
  .scroll-scrub {
    animation: scrub-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  @keyframes scrub-fade {
    from { opacity: 0; translate: 0 var(--reveal-dist); }
    to   { opacity: 1; translate: none; }
  }
  .scroll-progress {
    transform: scaleX(0); transform-origin: 0 50%;
    animation: scrub-progress linear both;
    animation-timeline: scroll();
  }
  @keyframes scrub-progress { to { transform: scaleX(1); } }
}

/* =========================================================
   L3 — Industry motif hooks (ambient / hero).
   These are OPT-IN mount points. The actual shader/visual is a
   per-site SKIN decision (per style.css line 30: ambient L3 stays
   in skin), implemented from ThreeUI's PURE-SHADER (no three.js)
   motifs. motion-presets.json carries the region×industry → motif
   routing; the skin injects the real canvas/element. This block
   only reserves the namespace + a safe inert fallback.
   ========================================================= */
.motif-surface {
  position: relative;
  isolation: isolate;
}
.motif-surface > canvas,
.motif-surface > .motif-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
}
/* Inert until a skin opts in: no default paint, no layout shift. */

/* =========================================================
   §R — Region preset overrides
   COMPILED FROM motion-presets.json (single source of truth).
   Set [data-motion=".."] on <html> (whole site) or any block.
   Re-run the documented compile step when motion-presets.json
   changes — do NOT hand-edit these values in isolation.
   ========================================================= */
/* Germany (DE): restrained, precise, short, no overshoot — DIN-like */
[data-motion="de"] {
  --motion-reveal: 380ms;
  --ease-out: cubic-bezier(.2,.6,.2,1);
  --stagger-step: 40ms;
  --reveal-dist: 10px;
  --reveal-x: 12px;
}
/* China (CN): balanced, slightly longer, moderate travel */
[data-motion="cn"] {
  --motion-reveal: 520ms;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --stagger-step: 70ms;
  --reveal-dist: 16px;
  --reveal-x: 18px;
}
/* Nordic (NE): calm, slow, generous whitespace, soft long ease */
[data-motion="ne"] {
  --motion-reveal: 700ms;
  --ease-soft: cubic-bezier(.37,0,.63,1);
  --stagger-step: 90ms;
  --reveal-dist: 20px;
  --reveal-x: 22px;
}
/* Middle East (ME): relationship-first, warmer, slight overshoot */
[data-motion="me"] {
  --motion-reveal: 620ms;
  --ease-out: cubic-bezier(.34,1.56,.64,1); /* gentle overshoot */
  --stagger-step: 80ms;
  --reveal-dist: 24px;
  --reveal-x: 28px;
}
/* North America (NA): direct CTA, brisk, social-proof-forward pacing */
[data-motion="na"] {
  --motion-reveal: 420ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --stagger-step: 55ms;
  --reveal-dist: 14px;
  --reveal-x: 16px;
}