/* Gravita Technology motion layer. Owner: GT-Lambda (card 28G-C04). Attribute API and M1 to M47 map: docs/rebuild/MOTION-SPEC.md.
   Loaded after site.css, so it wins over the older 25 Oct motion block in site.css.
   Only transform, opacity and clip-path move (plus short stroke-dashoffset runs, shadows by pseudo-element opacity).
   Hidden start states exist only under html.mo (JS present, motion allowed); without JS or under reduced motion everything is shown. */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --d-press:120ms;--d-hover:160ms;--d-ui:220ms;--d-panel:280ms;--d-exit:200ms;--d-node:360ms;--d-draw:520ms;--d-reveal:600ms;
  --stagger:60ms;
  --ease:var(--ease-out);
  interpolate-size:allow-keywords;
}

/* ---------- M2 header settles: logo scale, shadow by pseudo-element ---------- */
.site-header{transition:transform var(--d-ui) var(--ease-out)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:12px;pointer-events:none;background:linear-gradient(to bottom,rgba(12,24,68,.14),rgba(12,24,68,0));opacity:0;transition:opacity var(--d-ui) var(--ease-out)}
.site-header.is-scrolled::after{opacity:1}
.brand img{transform-origin:left center;transition:transform var(--d-ui) var(--ease-out)}
.site-header.is-scrolled .brand img{transform:scale(.92)}

/* ---------- M3 menu indicator glides (scaleX on a 1px base) ---------- */
.nav-ind{width:1px!important;transform-origin:0 50%;transition:transform 280ms var(--ease-in-out),opacity 160ms!important}

/* ---------- M9 button lift (shadow on a pseudo-element), M10 press, M11 arrow, M12 underline ---------- */
.btn{position:relative;transition:background-color var(--d-hover) var(--ease-out),color var(--d-hover) var(--ease-out),border-color var(--d-hover) var(--ease-out),transform var(--d-hover) var(--ease-out)!important;box-shadow:none!important;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;box-shadow:0 8px 20px rgba(12,24,68,.2);opacity:0;transition:opacity var(--d-hover) var(--ease-out)}
.btn-secondary::after{z-index:-1}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translate3d(0,-2px,0)}
  .btn:hover::after{opacity:1}
}
.btn:active,.tile:active,.offer-row:active{transition-duration:var(--d-press)!important}
.btn:active{transform:scale(.97)!important}
.btn:active::after{opacity:0}
.tile:active{transform:scale(.99)}
[data-player] button:active,.player-btn:active{transform:scale(.96)}
.link-arrow::after,.offer-action svg,.mo-arrow svg{display:inline-block;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .link-arrow:hover::after,.offer-row:hover .offer-action svg,.mo-arrow:hover svg{transform:translate3d(4px,0,0)}
}
main :is(p,li,dd) a:not(.btn):not(.link-arrow),.site-footer a{transition:background-size 240ms var(--ease-out),color var(--d-hover)}

/* ---------- M8 door: image zooms from its own origin, rule grows, arrow nudges; no lift, no shadow ---------- */
.offer-row{position:relative;transition:background-color var(--d-hover) var(--ease-out)}
.offer-row::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-ui) var(--ease-out)}
.offer-thumb{overflow:hidden}
.offer-thumb img,.mo-zoom img{transition:transform 500ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .offer-row:hover::before{transform:scaleX(1)}
  .offer-row:hover .offer-thumb img,.mo-zoom:hover img{transform:scale(1.03)}
  .figure:hover img,.app-fig:hover img{transform:none}
}

/* ---------- M13 row highlight and rule lift ---------- */
.trow,.stable tr,.mo-row{position:relative;transition:background-color var(--d-hover) var(--ease-out)}
.trow::before,.mo-row::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .trow:hover,.mo-row:hover{background-color:rgba(12,24,68,.03)}
  .trow:hover::before,.mo-row:hover::before{transform:scaleX(1)}
  .stable tbody tr:hover{background-color:rgba(12,24,68,.03)}
}

/* ---------- M6 tab indicator glides, M7 segmented thumb ---------- */
.has-tab-ind{position:relative}
.tab-ind{position:absolute;left:0;top:0;width:1px;height:1px;background:var(--accent-text,var(--accent));transform-origin:0 0;opacity:0;pointer-events:none;transition:transform var(--d-ui) var(--ease-in-out),background-color 160ms var(--ease-out),opacity 160ms}
html.mo .has-tab-ind [role="tab"][aria-selected="true"]{border-color:transparent!important}
.has-thumb{position:relative}
.sw-thumb{position:absolute;left:0;top:0;border-radius:999px;background:var(--text);pointer-events:none;transition:transform var(--d-ui) var(--ease-in-out),width var(--d-ui) var(--ease-in-out);z-index:0}
.has-thumb button{position:relative;z-index:1;transition:color var(--d-ui) var(--ease-in-out)}
.has-thumb button[aria-selected="true"]{background:transparent!important}

/* ---------- M21 plus turns to minus, M22 question opens with height ---------- */
.qa summary svg{display:none}
.qa summary::after,.mo-pm::after{content:"";width:20px;height:20px;flex:0 0 auto;color:var(--accent-text);background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform 200ms var(--ease-out),background-size 200ms var(--ease-out)}
.qa details[open] summary::after{transform:rotate(90deg);background-size:100% 2px,2px 0}
@supports (selector(::details-content)){
  .qa details::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size 200ms var(--ease-out),opacity 200ms var(--ease-out),content-visibility 200ms allow-discrete}
  .qa details[open]::details-content{block-size:auto;opacity:1;transition-duration:260ms}
}

/* ---------- hero: M1 rise in order, M45 contact panel, M24 persona drift, M29 crossfade ---------- */
@keyframes mo-rise{from{opacity:0;transform:translate3d(0,18px,0)}}
@keyframes mo-rise-24{from{opacity:0;transform:translate3d(0,24px,0)}}
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-drift{from{transform:scale(1.04)}to{transform:scale(1)}}
html.mo main > section:first-of-type :is(h1,.lead,.offer-line,.hero-caption,.actions){animation:mo-rise var(--d-reveal) var(--ease-out) both}
html.mo main > section:first-of-type h1{animation-delay:0ms}
html.mo main > section:first-of-type :is(.lead,.offer-line){animation-delay:80ms}
html.mo main > section:first-of-type .actions{animation-delay:160ms}
html.mo main > section:first-of-type .hero-caption{animation-delay:240ms}
html.mo [data-hero-late]{animation:mo-rise-24 var(--d-reveal) var(--ease-out) 320ms both}
html.mo .home-hero .hero-bg img{animation:none}
.hero-media picture{transition:opacity 1400ms var(--ease-in-out)!important}
html.mo .hero-media picture.is-active img{animation:mo-drift 9000ms linear both}
html.mo .hero-media[data-paused="true"] picture.is-active img,html.mo .hero-media[data-focus-hold="true"] picture.is-active img{animation-play-state:paused}
html.mo-off .hero-media picture{transition:none!important}
.hero-pause{position:absolute;right:max(var(--s3,24px),env(safe-area-inset-right,0px));bottom:var(--s3,24px);z-index:3;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:rgba(12,24,68,.55);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color var(--d-hover),transform var(--d-hover) var(--ease-out)}
.hero-pause:hover{background:rgba(12,24,68,.8)}
.hero-pause:active{transform:scale(.96)}
.hero-pause svg{width:20px;height:20px}
.hero-pause .i-play{display:none}
.hero-pause[aria-pressed="true"] .i-pause{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}
/* 29A-28: on a phone the photo is the first block of the hero, so the control sits in the photo's top-right corner, clear of every heading whatever the photo height */
@media (max-width:760px){.hero-pause{top:12px;bottom:auto;right:12px}}
html:not(.js) .hero-pause{display:none}

/* ---------- reveal variants (M17 lead figure clip, M31 doors arrive, stagger) ---------- */
html.mo [data-reveal]{transition:opacity var(--d-reveal) var(--ease-out) var(--rd,0ms),transform var(--d-reveal) var(--ease-out) var(--rd,0ms),clip-path 800ms var(--ease-out) var(--rd,0ms)}
html.mo [data-reveal]:not(.is-in){opacity:0;transform:translate3d(0,16px,0)}
html.mo [data-reveal="fade"]:not(.is-in){transform:none}
html.mo [data-reveal="left"]:not(.is-in){transform:translate3d(-24px,0,0)}
html.mo [data-reveal="right"]:not(.is-in){transform:translate3d(24px,0,0)}
html.mo [data-reveal="scale"]:not(.is-in){transform:scale(.96)}
html.mo [data-reveal="clip"]:not(.is-in){transform:none;clip-path:inset(0 0 calc(100% - 2px) 0);opacity:0}
html.mo [data-reveal="clip"].is-in{clip-path:inset(0)}
html.mo [data-stagger] > *{transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out);transition-delay:min(calc(var(--i,0) * var(--st,60ms)),540ms)}
html.mo [data-stagger]:not(.is-in) > *{opacity:0;transform:translate3d(0,16px,0)}
html.mo .no-tr,html.mo .no-tr > *{transition:none!important}
[data-count]{font-variant-numeric:tabular-nums}

/* ---------- M14 diagram entrance: parts rise 8 px, labels follow, connectors draw (script) ---------- */
[data-part],[data-label]{transform-box:fill-box;transform-origin:center}
html.mo [data-diagram] [data-part]{transition:opacity var(--d-node) var(--ease-out),transform var(--d-node) var(--ease-out);transition-delay:min(calc(var(--pi,0) * var(--stagger)),540ms)}
html.mo [data-diagram]:not(.is-in) [data-part]{opacity:0;transform:translate3d(0,8px,0)}
html.mo [data-diagram] [data-label]{transition:opacity var(--d-node) var(--ease-out);transition-delay:calc(min(calc(var(--li,0) * var(--stagger)),540ms) + 120ms)}
html.mo [data-diagram]:not(.is-in) [data-label]{opacity:0}
/* M23, M40 hotspots: fill 30 to 100 percent, siblings sit at .35, label card scales from the part */
[data-part] [data-fill]{opacity:.3;transition:opacity 160ms var(--ease-out)}
[data-part].is-hot [data-fill]{opacity:1}
[data-part]{cursor:default;outline-offset:4px}
[data-part][tabindex],[data-part][data-part-card]{cursor:pointer}
html.mo [data-diagram].has-hot [data-part]:not(.is-hot){opacity:.35;transition:opacity 160ms var(--ease-out)}
.part-card{position:absolute;z-index:4;transform-origin:center}
.flow-dot{pointer-events:none;will-change:transform}
html.mo-off .flow-dot.is-packet{display:none}

/* existing explainer diagrams (learn.css): whole block not faded, parts follow M14 (360 ms, 60 ms stagger, arrows draw 520 ms) */
html.mo .diagram-anim[data-reveal]:not(.is-in){opacity:1;transform:none}
html.mo .diagram-anim .step{transition:opacity var(--d-node) var(--ease-out),transform var(--d-node) var(--ease-out)!important;transition-delay:min(calc(var(--s,0) * var(--stagger)),540ms)!important}
html.mo .diagram-anim .arrow{transition:stroke-dashoffset var(--d-draw) var(--ease-in-out)!important;transition-delay:min(calc(var(--s,0) * var(--stagger)),540ms)!important}
html.mo-off .diagram-anim .step{opacity:1!important;transform:none!important}
html.mo-off .diagram-anim .arrow{stroke-dashoffset:0!important}

/* ---------- M20, M33, M34 player: step change, progress, flowing connector ---------- */
[data-player]{touch-action:pan-y}
[data-player] [data-in-step]{transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
[data-player] [data-in-step].is-pending{opacity:.7}
[data-player] [data-step]{transition:opacity 220ms var(--ease-out)}
[data-player] [data-step]:not(.is-current){opacity:.75}
[data-player] [data-player-progress]{transform:scaleX(0);transform-origin:0 50%;will-change:transform}
[data-player] [data-conn-step].is-flowing{stroke-dasharray:6 8;animation:mo-dash 1600ms linear infinite}
@keyframes mo-dash{to{stroke-dashoffset:-56}}
[data-player] [data-cam-root]{transform-origin:0 0}
:fullscreen [data-stage],[data-stage]:fullscreen{background:var(--bg,#fff);display:grid;place-items:center;animation:mo-fade 200ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  html [data-player] [data-in-step]{transition:opacity 120ms linear!important}
  html [data-player] [data-conn-step].is-flowing{animation:none!important}
}
html.mo-off [data-player] [data-in-step]{transition:opacity 120ms linear!important}
html.mo-off [data-player] [data-conn-step].is-flowing{animation:none}

/* ---------- scrolly (pin), ring M41, switch-on M43 ---------- */
[data-scrolly-stage]{position:sticky;top:96px}
[data-scrolly] [data-show-step],[data-scrolly] [data-from-step]{transition:opacity 220ms var(--ease-out)}
html.mo [data-scrolly] [data-show-step]:not(.is-lit),html.mo [data-scrolly] [data-from-step]:not(.is-lit){opacity:.2}
[data-scrolly-step]{transition:opacity 220ms var(--ease-out)}
html.mo [data-scrolly-step]:not(.is-active){opacity:.5}
[data-ring-stage]{opacity:calc(.35 + .65 * var(--lit,1));transition:opacity 220ms var(--ease-out)}
[data-switch-on] [data-state]{position:absolute;inset:0}
[data-switch-on]{position:relative}

/* ---------- M18 bottom sheet, M38 consent bar, M37 back to top ---------- */
.sheet{transform:translate3d(0,100%,0);transition:transform 200ms var(--ease-drawer)}
.sheet.is-open{transform:none;transition-duration:280ms}
@media (prefers-reduced-motion:reduce){.sheet{transform:none;opacity:0;transition:opacity 120ms linear!important}.sheet.is-open{opacity:1}}
@media (max-width:960px){
  .nav{transition:opacity 200ms var(--ease-drawer),transform 280ms var(--ease-drawer),visibility 0s 280ms!important;transform:translate3d(0,-8px,0)}
  .nav.open{transition:opacity 200ms var(--ease-drawer),transform 280ms var(--ease-drawer),visibility 0s!important;transform:none}
}
@keyframes mo-consent{from{opacity:0;transform:translate3d(0,16px,0)}}
html.mo .consent:not([hidden]){animation:mo-consent 280ms var(--ease-out) both}
.to-top{transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out),border-color var(--d-hover)!important}

/* ---------- M26 page-to-page crossfade (header stays still), M39 door to chapter (shared names) ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:250ms;animation-timing-function:var(--ease-in-out)}
  .site-header{view-transition-name:site-header}
  ::view-transition-group(site-header){animation:none}
  ::view-transition-group(door-custom),::view-transition-group(door-ai),::view-transition-group(door-consulting),::view-transition-group(door-turnkey){animation-duration:400ms;animation-timing-function:var(--ease-in-out)}
}
[data-door="custom"]{view-transition-name:door-custom}
[data-door="ai"]{view-transition-name:door-ai}
[data-door="consulting"]{view-transition-name:door-consulting}
[data-door="turnkey"]{view-transition-name:door-turnkey}
html.mo-off [data-door]{view-transition-name:none}

/* ---------- Pause Motion switch (footer, 10.4) ---------- */
.pause-motion{appearance:none;background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:24px}
.pause-motion::before{content:"";display:inline-block;width:28px;height:16px;border-radius:999px;border:2px solid currentColor;margin-right:8px;vertical-align:-3px;background:linear-gradient(currentColor,currentColor) 2px 50%/8px 8px no-repeat;transition:background-position 160ms var(--ease-out)}
.pause-motion[aria-pressed="true"]::before{background-position:12px 50%}
.pause-motion:active{transform:scale(.97)}

/* ---------- reduced motion and Pause Motion: everything shown, no movement ---------- */
@media (prefers-reduced-motion:reduce){
  html [data-reveal],html [data-stagger] > *,html [data-diagram] [data-part],html [data-diagram] [data-label]{opacity:1!important;transform:none!important;clip-path:none!important}
  html .hero-media picture.is-active img{animation:none!important}
}
html.mo-off [data-reveal],html.mo-off [data-stagger] > *,html.mo-off [data-diagram] [data-part],html.mo-off [data-diagram] [data-label]{opacity:1;transform:none;clip-path:none;transition:none}
html.mo-off .hero-media picture.is-active img,html.mo-off main > section:first-of-type *,html.mo-off [data-hero-late]{animation:none!important}
html.mo-off [data-scrolly] [data-show-step],html.mo-off [data-scrolly] [data-from-step]{opacity:1}
html.mo-off{scroll-behavior:auto}
/* buttons, menu and indicators: colour changes only (M9, M3), no lift, no glide */
@media (prefers-reduced-motion:reduce){
  html .btn{transition:background-color 160ms linear,color 160ms linear,border-color 160ms linear!important}
  html .btn:hover,html .btn:active{transform:none!important}
  html .btn::after{display:none}
  html .nav-ind,html .nav,html .nav.open,html .brand img,html .site-header,html .tab-ind,html .sw-thumb,html .offer-row::before,html .trow::before{transition:none!important}
  html .to-top{transition:opacity 120ms linear!important}
  html .diagram-anim .step,html .diagram-anim .arrow{transition:none!important}
}
html.mo-off .btn{transition:background-color 160ms linear,color 160ms linear,border-color 160ms linear!important}
html.mo-off .btn:hover,html.mo-off .btn:active{transform:none!important}
html.mo-off .btn::after{display:none}
html.mo-off :is(.nav-ind,.tab-ind,.sw-thumb,.brand img){transition:none!important}
html.mo-off .offer-row::before,html.mo-off .trow::before{transition:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .qa details::details-content{transition:none!important}
}