/* ═══════════════════════════════════════════════════════════════════════════
   Prilixor — motion layer
   Loaded AFTER prilixor.css. Pairs with assets/js/motion.js.

   Two hard rules keep this additive rather than destructive:

   1. Reveals use the independent `translate` / `scale` properties plus
      @keyframes — never `transform` and never the `transition` shorthand.
      Tailwind's hover transforms (`hover:-translate-y-[3px]`) live in
      `transform`, so the two compose instead of clobbering each other, and
      the cards' `transition-[transform,box-shadow]` survives untouched.
   2. Nothing here animates a layout property, so the motion layer cannot
      introduce CLS. Only opacity, translate, scale and shadow move.

   prilixor.css already ships a global prefers-reduced-motion kill switch
   (`*{animation-duration:.001ms!important}`), so every animation below
   collapses to its end state for users who ask for that. motion.js
   additionally never adds the `mo` class in that case.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* durations */
  --mo-fast:.18s;
  --mo-normal:.42s;
  --mo-slow:.66s;
  /* easings — `smooth` for entrances, `sharp` for interaction feedback */
  --mo-ease:cubic-bezier(.22,1,.36,1);
  --mo-ease-sharp:cubic-bezier(.4,0,.2,1);
  /* travel */
  --mo-rise:18px;
  --mo-rise-sm:10px;
  --mo-shift:26px;
}

/* ── 1. Scroll reveals ─────────────────────────────────────────────────────
   `data-mo` is written by motion.js, never by the HTML. If the script fails
   to load or throws, no element ever carries the attribute and nothing is
   hidden — the page degrades to its current static self. */

html.mo [data-mo]{ opacity:0 }

html.mo [data-mo].mo-in{
  animation-duration:var(--mo-dur,var(--mo-slow));
  animation-timing-function:var(--mo-ease);
  animation-delay:var(--mo-delay,0ms);
  animation-fill-mode:both;
  will-change:opacity, translate;
}
/* drop the compositor hint once the entrance is done */
html.mo [data-mo].mo-done{ will-change:auto }

html.mo [data-mo="rise"].mo-in  { animation-name:mo-rise }
html.mo [data-mo="fade"].mo-in  { animation-name:mo-fade }
html.mo [data-mo="left"].mo-in  { animation-name:mo-left }
html.mo [data-mo="right"].mo-in { animation-name:mo-right }
html.mo [data-mo="zoom"].mo-in  { animation-name:mo-zoom }

@keyframes mo-rise { from{ opacity:0; translate:0 var(--mo-rise) } to{ opacity:1; translate:0 0 } }
@keyframes mo-fade { from{ opacity:0 }                             to{ opacity:1 } }
@keyframes mo-left { from{ opacity:0; translate:calc(var(--mo-shift) * -1) 0 } to{ opacity:1; translate:0 0 } }
@keyframes mo-right{ from{ opacity:0; translate:var(--mo-shift) 0 }            to{ opacity:1; translate:0 0 } }
@keyframes mo-zoom { from{ opacity:0; scale:1.045 }                to{ opacity:1; scale:1 } }
@keyframes mo-rise-sm{ from{ opacity:0; translate:0 var(--mo-rise-sm) } to{ opacity:1; translate:0 0 } }

/* ── 2. Sticky header ──────────────────────────────────────────────────────
   Height never changes (the hero's pt-[69px] offset depends on it) — only
   the surface reads more solid once the page has moved under it. */

html.mo header[class*="sticky"]{
  transition:background-color .32s var(--mo-ease-sharp),
             box-shadow      .32s var(--mo-ease-sharp),
             border-color    .32s var(--mo-ease-sharp);
}
html.mo.mo-scrolled header[class*="sticky"]{
  background-color:rgba(255,255,255,.94);
  box-shadow:0 10px 34px rgba(6,42,34,.07);
  border-color:rgba(6,42,34,.10);
}

/* mobile drawer — the inline page script toggles [hidden]; this animates the
   reveal without that script needing to know anything about it */
html.mo #mobileNav:not([hidden]){ animation:mo-drawer .30s var(--mo-ease) both }
@keyframes mo-drawer{
  from{ opacity:0; translate:0 -10px; clip-path:inset(0 0 100% 0) }
  to  { opacity:1; translate:0 0;     clip-path:inset(0 0 0 0)    }
}
html.mo #mobileNav:not([hidden]) .shell > *{ animation:mo-rise-sm .34s var(--mo-ease) both }
html.mo #mobileNav:not([hidden]) .shell > :nth-child(1){ animation-delay:.05s }
html.mo #mobileNav:not([hidden]) .shell > :nth-child(2){ animation-delay:.08s }
html.mo #mobileNav:not([hidden]) .shell > :nth-child(3){ animation-delay:.11s }
html.mo #mobileNav:not([hidden]) .shell > :nth-child(4){ animation-delay:.14s }
html.mo #mobileNav:not([hidden]) .shell > :nth-child(5){ animation-delay:.17s }
html.mo #mobileNav:not([hidden]) .shell > :nth-child(6){ animation-delay:.20s }
html.mo #mobileNav:not([hidden]) .shell > :nth-child(7){ animation-delay:.23s }
html.mo #mobileNav:not([hidden]) .shell > :nth-child(8){ animation-delay:.26s }
html.mo #mobileNav:not([hidden]) .shell > :nth-child(9){ animation-delay:.29s }

/* ── 3. Interaction feedback ───────────────────────────────────────────────
   Each transition below is a SUPERSET of the Tailwind transition already on
   the element (transition-colors / transition-transform), so adding `scale`
   never costs the colour or transform fade the design already had. */

html.mo a[class*="rounded-full"],
html.mo button[class*="rounded-full"]{
  transition:color            var(--mo-normal) var(--mo-ease-sharp),
             background-color var(--mo-normal) var(--mo-ease-sharp),
             border-color     var(--mo-normal) var(--mo-ease-sharp),
             box-shadow       var(--mo-normal) var(--mo-ease),
             transform        .2s               var(--mo-ease-sharp),
             scale            var(--mo-fast)    var(--mo-ease-sharp);
}
html.mo a[class*="rounded-full"]:active,
html.mo button[class*="rounded-full"]:active{ scale:.972 }

/* primary gradient button — press + a warmer glow on hover */
html.mo .btn-grad:hover{ box-shadow:0 16px 40px rgba(53,214,164,.34) }
html.mo .btn-grad:active{ scale:.972 }

/* trailing "→" in CTA links slides on hover/focus (motion.js wraps the glyph) */
html.mo .mo-arrow{
  display:inline-block;
  transition:translate .24s var(--mo-ease);
}
html.mo a:hover .mo-arrow,
html.mo a:focus-visible .mo-arrow,
html.mo button:hover .mo-arrow{ translate:4px 0 }

/* card icons lift with the card */
html.mo article > img{ transition:translate .34s var(--mo-ease), scale .34s var(--mo-ease) }
html.mo article:hover > img{ translate:0 -2px; scale:1.06 }

/* ── 4. Content swaps ──────────────────────────────────────────────────────
   The process timeline, the technology tabs and the testimonial switcher all
   rewrite text in place. motion.js watches for that and stamps `.mo-swap`,
   so the new copy fades in instead of hard-cutting. */

html.mo .mo-swap{ animation:mo-swap .34s var(--mo-ease) both }
@keyframes mo-swap{ from{ opacity:0; translate:0 6px } to{ opacity:1; translate:0 0 } }

/* industries accordion — .ind-panel already eases its flex; fade the body in
   behind that so the copy does not appear before the panel has room for it */
html.mo .ind-panel [data-body]:not([hidden]){ animation:mo-fade .42s var(--mo-ease) .12s both }

/* ── 5. Counters ───────────────────────────────────────────────────────────
   Tabular figures stop the digits jittering while a stat counts up. */
html.mo [data-mo-count]{ font-variant-numeric:tabular-nums }