/* ============================================================
   itsaura — scenes: every piece of motion on the site lives here,
   so reduced-motion handling has exactly one home (bottom of file).
   ============================================================ */

/* ---------- ambient aura ---------- */
@keyframes auraBreath{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}
  50%{opacity:.9;transform:translateX(-50%) scale(1.08)}}
@keyframes auraBreathC{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}}
/* 100%, not 120vw: the glow is centred with translateX(-50%), so anything
   wider than the viewport spills 10vw off each side and the document scrolls
   sideways. body has overflow-x:clip, but `clip` does not propagate to the
   viewport the way `hidden` does, so it never caught this. The gradient is
   transparent past 62% anyway — the visible core is unchanged. */
.aura{position:absolute;left:50%;top:60px;transform:translateX(-50%);
  width:min(880px,100%);height:680px;pointer-events:none;z-index:0;filter:blur(8px);
  background:radial-gradient(circle at 50% 40%,rgba(212,175,55,.26) 0%,
    rgba(212,175,55,.07) 34%,transparent 62%);
  animation:auraBreath 12s ease-in-out infinite}
.aura-cta{top:50%;transform:translate(-50%,-50%);width:760px;height:540px;
  background:radial-gradient(circle,rgba(212,175,55,.22) 0%,transparent 60%);
  animation-name:auraBreathC}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv2{transition-delay:.12s}
.rv3{transition-delay:.24s}
.rv.rv-in{opacity:1;transform:none}

/* ============================================================
   Living scenes. Each plays on hover or keyboard focus of its .card,
   or when site.js adds .scene-play on touch devices (no hover there).
   ============================================================ */
.scene{position:relative;width:210px;height:118px}
/* The scenes are authored at 210x118 with absolute pixel positions, so they
   cannot reflow. Where the card art band is shorter than that, scale the whole
   scene down uniformly rather than letting overflow:hidden crop it. */
.card-art .scene{transform:scale(.88);transform-origin:center}

/* -- Projects: scattered fragments assemble into a working system -- */
@keyframes ptDrift{0%,100%{margin:0}50%{margin:-4px 0 0 3px}}
.sc-projects .pt{position:absolute;left:50%;top:50%;width:13px;height:10px;
  border-radius:2px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.26);
  transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));
  transition:transform .85s cubic-bezier(.34,1.24,.44,1),background .7s ease,
             border-color .7s ease;
  animation:ptDrift 6s ease-in-out infinite}
.card:hover .sc-projects .pt,.card:focus-visible .sc-projects .pt,
.scene-play.sc-projects .pt{
  transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy)));
  background:rgba(212,175,55,.34);border-color:rgba(212,175,55,.85);animation:none}
/* Assembled, the fragments resolve into distinct colours — a system made of
   parts rather than an undifferentiated block. */
.card:hover .sc-projects .p1,.scene-play.sc-projects .p1{
  background:rgba(34,197,94,.4);border-color:#22c55e}
.card:hover .sc-projects .p3,.scene-play.sc-projects .p3{
  background:rgba(59,130,246,.4);border-color:#3b82f6}
.card:hover .sc-projects .p5,.scene-play.sc-projects .p5{
  background:rgba(139,92,246,.4);border-color:#8b5cf6}
.card:hover .sc-projects .p7,.scene-play.sc-projects .p7{
  background:rgba(6,182,212,.4);border-color:#06b6d4}
.card:hover .sc-projects .p9,.scene-play.sc-projects .p9{
  background:rgba(249,115,22,.4);border-color:#f97316}
.sc-projects .p1{--x:-62px;--y:-26px;--gx:-22px;--gy:-15px}
.sc-projects .p2{--x:53px;--y:-29px;--gx:0px;--gy:-15px;transition-delay:.04s;animation-delay:-1s}
.sc-projects .p3{--x:-43px;--y:24px;--gx:22px;--gy:-15px;transition-delay:.08s;animation-delay:-2s}
.sc-projects .p4{--x:62px;--y:19px;--gx:-22px;--gy:0px;transition-delay:.12s;animation-delay:-3s}
.sc-projects .p5{--x:-10px;--y:-30px;--gx:0px;--gy:0px;transition-delay:.16s;animation-delay:-4s}
.sc-projects .p6{--x:20px;--y:29px;--gx:22px;--gy:0px;transition-delay:.2s;animation-delay:-5s}
.sc-projects .p7{--x:-64px;--y:2px;--gx:-22px;--gy:15px;transition-delay:.24s;animation-delay:-2.5s}
.sc-projects .p8{--x:38px;--y:-5px;--gx:0px;--gy:15px;transition-delay:.28s;animation-delay:-3.5s}
.sc-projects .p9{--x:4px;--y:-12px;--gx:22px;--gy:15px;transition-delay:.32s;animation-delay:-1.5s}
.sc-projects .pt-panel{position:absolute;left:44px;top:22px;right:44px;bottom:22px;
  border:1.3px solid rgba(212,175,55,.6);border-radius:7px;opacity:0;transform:scale(.9);
  transition:opacity .55s .3s ease,transform .55s .3s var(--ease)}
.card:hover .sc-projects .pt-panel,.card:focus-visible .sc-projects .pt-panel,
.scene-play.sc-projects .pt-panel{opacity:1;transform:none}
.sc-projects .pt-panel::after{content:"";position:absolute;left:8px;right:8px;bottom:7px;
  height:3px;border-radius:2px;background:var(--gold);transform:scaleX(0);
  transform-origin:left;transition:transform .8s .55s var(--ease)}
.card:hover .sc-projects .pt-panel::after,
.card:focus-visible .sc-projects .pt-panel::after,
.scene-play.sc-projects .pt-panel::after{transform:scaleX(1)}

/* -- Consultancy: one route among several is chosen -- */
.sc-consultancy{overflow:visible}
.sc-consultancy .rt{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-linecap:round;
  opacity:.26;transition:opacity .55s ease}
/* The alternatives are real options, not filler — each gets its own colour so
   the choice reads as a choice. */
.sc-consultancy path.rt:nth-of-type(1){stroke:#3b82f6}
.sc-consultancy path.rt:nth-of-type(3){stroke:#22c55e}
.sc-consultancy circle.node:nth-of-type(1){stroke:#3b82f6}
.sc-consultancy circle.node:nth-of-type(2){stroke:#22c55e}
.sc-consultancy .rt-on{stroke-width:1.8}
.sc-consultancy .node{fill:none}
.sc-consultancy .node-on{fill:rgba(212,175,55,.2);stroke:var(--gold);stroke-width:1.6}
.sc-consultancy .tick{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round}
.sc-consultancy .dot{fill:var(--gold)}
.card:hover .sc-consultancy .rt,.card:focus-visible .sc-consultancy .rt,
.scene-play.sc-consultancy .rt{opacity:.1}
.card:hover .sc-consultancy .rt-on,.card:focus-visible .sc-consultancy .rt-on,
.scene-play.sc-consultancy .rt-on{opacity:1}
.sc-consultancy .goal{opacity:.4;transform:scale(.75);transform-origin:170px 59px;
  transition:transform .5s 1.5s cubic-bezier(.34,1.5,.5,1),opacity .5s 1.5s ease}
.card:hover .sc-consultancy .goal,.card:focus-visible .sc-consultancy .goal,
.scene-play.sc-consultancy .goal{opacity:1;transform:scale(1)}
@keyframes travel{0%{opacity:0;offset-distance:0%}14%{opacity:1}
  86%{opacity:1}100%{opacity:1;offset-distance:100%}}
.sc-consultancy .trav{opacity:0;offset-path:path("M32 59 C92 59 100 59 158 59")}
.card:hover .sc-consultancy .trav,.card:focus-visible .sc-consultancy .trav,
.scene-play.sc-consultancy .trav{animation:travel 1.5s .35s cubic-bezier(.5,0,.5,1) forwards}

/* -- Knowhow: documents become a cited answer -- */
.sc-knowhow .doc{position:absolute;width:26px;height:33px;border-radius:3px;left:14px;
  top:calc(50% - 17px);background:linear-gradient(180deg,#171a22,#101319);
  border:1px solid rgba(255,255,255,.24);
  transform:translate(var(--dx),var(--dy)) rotate(var(--r));
  transition:transform .9s cubic-bezier(.34,1.2,.44,1),opacity .9s ease,
             border-color .9s ease}
.sc-knowhow .d1{--dx:0px;--dy:-14px;--r:-9deg;border-color:rgba(59,130,246,.6)}
.sc-knowhow .d2{--dx:7px;--dy:-5px;--r:-3deg;transition-delay:.09s;
  border-color:rgba(34,197,94,.6)}
.sc-knowhow .d3{--dx:14px;--dy:5px;--r:4deg;transition-delay:.18s;
  border-color:rgba(139,92,246,.6)}
.sc-knowhow .d4{--dx:21px;--dy:15px;--r:10deg;transition-delay:.27s;
  border-color:rgba(6,182,212,.6)}
.sc-knowhow .src:nth-child(1){color:#7fb0f5;border-color:rgba(59,130,246,.45);
  background:rgba(59,130,246,.12)}
.sc-knowhow .src:nth-child(2){color:#7fd06f;border-color:rgba(34,197,94,.45);
  background:rgba(34,197,94,.12)}
.sc-knowhow .src:nth-child(3){color:#c4b5fd;border-color:rgba(139,92,246,.45);
  background:rgba(139,92,246,.12)}
.card:hover .sc-knowhow .doc,.card:focus-visible .sc-knowhow .doc,
.scene-play.sc-knowhow .doc{transform:translate(74px,0) rotate(0deg) scale(.5);
  opacity:0;border-color:rgba(212,175,55,.8)}
.sc-knowhow .core{position:absolute;left:132px;top:calc(50% - 22px);width:44px;height:44px;
  border-radius:50%;border:1.4px solid rgba(212,175,55,.45);display:flex;
  align-items:center;justify-content:center;
  transition:border-color .6s ease,box-shadow .6s ease,transform .6s cubic-bezier(.34,1.4,.5,1)}
.sc-knowhow .core::before{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.8)}
.card:hover .sc-knowhow .core,.card:focus-visible .sc-knowhow .core,
.scene-play.sc-knowhow .core{border-color:rgba(212,175,55,1);transform:scale(1.15);
  box-shadow:0 0 34px rgba(212,175,55,.42),inset 0 0 18px rgba(212,175,55,.18)}
/* Centred on the scene, not on the core: three chips are wider than the space
   to the right of the core, and anchoring them there squeezed each onto two
   lines. The documents have vanished by this point, so the left half is free. */
.sc-knowhow .srcs{position:absolute;left:50%;transform:translateX(-50%);
  bottom:10px;display:flex;gap:5px;white-space:nowrap}
.sc-knowhow .src{padding:2.5px 7px;border-radius:3px;background:rgba(212,175,55,.14);
  color:var(--gold);font-size:8px;font-weight:400;font-family:var(--mono);
  white-space:nowrap;border:1px solid rgba(212,175,55,.32);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease}
.card:hover .sc-knowhow .src,.card:focus-visible .sc-knowhow .src,
.scene-play.sc-knowhow .src{opacity:1;transform:none}
.sc-knowhow .src:nth-child(1){transition-delay:.6s}
.sc-knowhow .src:nth-child(2){transition-delay:.7s}
.sc-knowhow .src:nth-child(3){transition-delay:.8s}

/* ============================================================
   Mock product screenshots (Projects page).
   These play once when the row scrolls into view — the reveal observer
   already adds .rv-in, so it doubles as the animation trigger and no
   extra JavaScript is needed.
   ============================================================ */

/* -- inbox: rows land, then get classified, then a draft appears -- */
.mk-inbox .mrow{opacity:0;transform:translateX(-14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mk-inbox .mchip{opacity:0;transform:translateY(4px);
  transition:opacity .4s ease,transform .4s ease}
.mk-inbox .mdraft{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv-in .mk-inbox .mrow{opacity:1;transform:none}
.rv-in .mk-inbox .mrow:nth-child(1){transition-delay:.05s}
.rv-in .mk-inbox .mrow:nth-child(2){transition-delay:.15s}
.rv-in .mk-inbox .mrow:nth-child(3){transition-delay:.25s}
.rv-in .mk-inbox .mrow:nth-child(4){transition-delay:.35s}
.rv-in .mk-inbox .mchip{opacity:1;transform:none}
.rv-in .mk-inbox .mrow:nth-child(1) .mchip{transition-delay:.55s}
.rv-in .mk-inbox .mrow:nth-child(2) .mchip{transition-delay:.68s}
.rv-in .mk-inbox .mrow:nth-child(3) .mchip{transition-delay:.81s}
.rv-in .mk-inbox .mrow:nth-child(4) .mchip{transition-delay:.94s}
.rv-in .mk-inbox .mdraft{opacity:1;transform:none;transition-delay:1.15s}

/* -- dashboard: cards land, bar fills, flow pulses, setpoint steps -- */
@keyframes flowA{0%{offset-distance:0%;opacity:0}12%{opacity:1}
  88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.mk-dash .dcard{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mk-dash .pct-bar-fill{transition:transform .9s .5s var(--ease)}
.mk-dash .ctrl-knob{transition:left 1s 1.4s cubic-bezier(.34,1.3,.5,1)}
.mk-dash .ctrl .badge{opacity:0;transition:opacity .5s 2.2s ease}
.mk-dash .fdot{opacity:0}
.rv-in .mk-dash .dcard{opacity:1;transform:none}
.rv-in .mk-dash .dgrid .dcard:nth-child(1){transition-delay:.05s}
.rv-in .mk-dash .dgrid .dcard:nth-child(2){transition-delay:.14s}
.rv-in .mk-dash .dgrid .dcard:nth-child(3){transition-delay:.23s}
.rv-in .mk-dash .dcard-wide{transition-delay:.32s}
.rv-in .mk-dash .pct-bar-fill{transform:scaleX(.74)}
.rv-in .mk-dash .ctrl-knob{left:74%}
.rv-in .mk-dash .ctrl .badge{opacity:1}
/* The tokens previously ran a path that jumped the middle node — 62->121, then
   a curve starting at 121 while the drawn pipe starts at 179 — so they left the
   track. These trace the pipes exactly, straight through the node. */
.rv-in .mk-dash .d-a{offset-path:path("M62 38 L179 38 C210 38 214 16 238 16");
  animation:flowA 3s .6s linear infinite}
.rv-in .mk-dash .d-b{offset-path:path("M62 38 L179 38 C210 38 214 60 238 60");
  animation:flowA 3s 1.9s linear infinite}

/* -- report: sections land, bars fill, sparkline draws, stamp lands -- */
.mk-report .rep-sec,.mk-report .rep-warn{opacity:0;transform:translateY(8px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.mk-report .rep-bar{transition:transform .8s var(--ease)}
.mk-report .pill{opacity:0;transition:opacity .4s ease}
.mk-report .spark{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:340;stroke-dashoffset:340;
  transition:stroke-dashoffset 1.4s 1s var(--ease)}
.mk-report .rep-f .badge{opacity:0;transform:scale(.9);
  transition:opacity .45s 2s ease,transform .45s 2s cubic-bezier(.34,1.5,.5,1)}
.rv-in .mk-report .rep-sec,.rv-in .mk-report .rep-warn{opacity:1;transform:none}
.rv-in .mk-report .rep-sec:nth-of-type(1){transition-delay:.08s}
.rv-in .mk-report .rep-warn{transition-delay:.7s}
.rv-in .mk-report .b1{transform:scaleX(1);transition-delay:.2s}
.rv-in .mk-report .b2{transform:scaleX(.62);transition-delay:.32s}
.rv-in .mk-report .b3{transform:scaleX(.34);transition-delay:.44s}
.rv-in .mk-report .pill{opacity:1}
.rv-in .mk-report .rep-row:nth-child(2) .pill{transition-delay:.5s}
.rv-in .mk-report .rep-row:nth-child(3) .pill{transition-delay:.6s}
.rv-in .mk-report .rep-row:nth-child(4) .pill{transition-delay:.7s}
.rv-in .mk-report .spark{stroke-dashoffset:0}
.rv-in .mk-report .rep-f .badge{opacity:1;transform:none}

/* -- assistant flowchart: nodes land, links draw, a token walks the path -- */
@keyframes fcWalk{0%{offset-distance:0%;opacity:0}6%{opacity:1}
  94%{opacity:1}100%{offset-distance:100%;opacity:0}}
.fc-node{opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.fc-link{stroke-dasharray:160;stroke-dashoffset:160;
  transition:stroke-dashoffset .6s var(--ease)}
.fc-tag{opacity:0;transition:opacity .4s 1.5s ease}
.fc-dot{opacity:0}
.rv-in .fc-node{opacity:1;transform:none}
.rv-in .fc-link{stroke-dashoffset:0}
.rv-in .fc-tag{opacity:1}
.rv-in .fc-assist .n1{transition-delay:.05s}
.rv-in .fc-assist .l1{transition-delay:.2s}
.rv-in .fc-assist .n2{transition-delay:.3s}
.rv-in .fc-assist .l2{transition-delay:.45s}
.rv-in .fc-assist .n3{transition-delay:.55s}
.rv-in .fc-assist .l3{transition-delay:.7s}
.rv-in .fc-assist .n4{transition-delay:.8s}
.rv-in .fc-assist .l4{transition-delay:.95s}
.rv-in .fc-assist .n5{transition-delay:1.05s}
.rv-in .fc-assist .l5{transition-delay:1.2s}
.rv-in .fc-assist .n6{transition-delay:1.3s}
.rv-in .fc-assist .l6{transition-delay:1.45s}
.rv-in .fc-assist .n7{transition-delay:1.55s}
.rv-in .fc-assist .l7{transition-delay:1.7s}
.rv-in .fc-assist .n8{transition-delay:1.8s}
.rv-in .fc-assist .fc-dot{
  offset-path:path("M96 46 L168 46 L264 46 L336 46 L384 46 L384 126 L264 126 L216 126 L216 206 L336 206 L432 206 L504 206");
  animation:fcWalk 5s 2.1s linear infinite}

/* -- monitoring: the stream settles, one event flares and is contained -- */
@keyframes evPulse{0%,100%{box-shadow:0 0 0 rgba(236,106,94,0)}
  50%{box-shadow:0 0 22px rgba(236,106,94,.45)}}
.mk-watch .ev-row{opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.mk-watch .watch-f{opacity:0;transition:opacity .5s 1.5s ease}
.rv-in .mk-watch .ev-row{opacity:1;transform:none}
.rv-in .mk-watch .ev-row:nth-child(1){transition-delay:.05s}
.rv-in .mk-watch .ev-row:nth-child(2){transition-delay:.16s}
.rv-in .mk-watch .ev-row:nth-child(3){transition-delay:.27s}
.rv-in .mk-watch .ev-row:nth-child(4){transition-delay:.38s}
.rv-in .mk-watch .ev-row:nth-child(5){transition-delay:.49s}
.rv-in .mk-watch .ev-hot{border-color:rgba(236,106,94,.5);
  background:rgba(236,106,94,.07);animation:evPulse 2.6s 1s ease-in-out 2}
.rv-in .mk-watch .watch-f{opacity:1}

/* ============================================================
   Advice visualisations — triggered by .rv-in as each row scrolls in.
   ============================================================ */
@keyframes vizWalk{0%{offset-distance:0%;opacity:0}8%{opacity:1}
  92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes pulseNode{0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.22);opacity:.75}}

/* 1. the org chart builds top-down, then the two bottlenecks flare */
@keyframes slowFlash{0%,100%{opacity:1}50%{opacity:.55}}
.viz-org .onode{opacity:0;transform:translateY(-8px);transform-box:fill-box;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.viz-org .oc-link{stroke-dasharray:360;stroke-dashoffset:360;
  transition:stroke-dashoffset .5s var(--ease)}
.viz-org .oc-cap{opacity:0;transition:opacity .5s 1.9s ease}
.rv-in .viz-org .onode{opacity:1;transform:none}
.rv-in .viz-org .oc-link{stroke-dashoffset:0}
.rv-in .viz-org .o-root{transition-delay:.05s}
.rv-in .viz-org .l-a,.rv-in .viz-org .l-b{transition-delay:.3s}
.rv-in .viz-org .l-c,.rv-in .viz-org .l-d,.rv-in .viz-org .l-e{transition-delay:.42s}
.rv-in .viz-org .o-1{transition-delay:.6s}
.rv-in .viz-org .o-2{transition-delay:.7s}
.rv-in .viz-org .o-3{transition-delay:.8s}
.rv-in .viz-org .l-f,.rv-in .viz-org .l-g,.rv-in .viz-org .l-j,
.rv-in .viz-org .l-k{transition-delay:.95s}
.rv-in .viz-org .l-h,.rv-in .viz-org .l-i,.rv-in .viz-org .l-l,
.rv-in .viz-org .l-m{transition-delay:1.05s}
.rv-in .viz-org .o-4{transition-delay:1.2s}
.rv-in .viz-org .o-5{transition-delay:1.3s}
.rv-in .viz-org .o-6{transition-delay:1.4s}
.rv-in .viz-org .o-7{transition-delay:1.5s}
.rv-in .viz-org .o-slow{animation:slowFlash 1.9s 1.8s ease-in-out 3}
.rv-in .viz-org .oc-cap{opacity:1}

/* 2. loose files land, sort themselves, and the drives light up */
.viz-drives .file{transform:translate(var(--fx),var(--fy)) rotate(var(--fr));
  transform-box:view-box;opacity:0;
  transition:transform 1s cubic-bezier(.34,1.15,.44,1),opacity .5s var(--ease)}
.viz-drives .f-1{--fx:250px;--fy:20px;--fr:-14deg}
.viz-drives .f-2{--fx:330px;--fy:16px;--fr:9deg}
.viz-drives .f-3{--fx:410px;--fy:24px;--fr:-6deg}
.viz-drives .f-4{--fx:250px;--fy:120px;--fr:11deg}
.viz-drives .f-5{--fx:330px;--fy:126px;--fr:-9deg}
.viz-drives .f-6{--fx:410px;--fy:118px;--fr:5deg}
.viz-drives .led{opacity:.25;transition:opacity .4s ease}
.viz-drives .drive rect,.viz-drives .drive line{opacity:0;
  transition:opacity .5s var(--ease)}
.viz-drives .vt-b{opacity:0;transition:opacity .5s 1.9s ease}
.rv-in .viz-drives .drive rect,.rv-in .viz-drives .drive line{opacity:1}
.rv-in .viz-drives .d-1 rect,.rv-in .viz-drives .d-1 line{transition-delay:.05s}
.rv-in .viz-drives .d-2 rect,.rv-in .viz-drives .d-2 line{transition-delay:.16s}
.rv-in .viz-drives .d-3 rect,.rv-in .viz-drives .d-3 line{transition-delay:.27s}
.rv-in .viz-drives .file{opacity:1}
.rv-in .viz-drives .f-1{transform:translate(250px,34px) rotate(0deg);transition-delay:.5s}
.rv-in .viz-drives .f-2{transform:translate(316px,34px) rotate(0deg);transition-delay:.6s}
.rv-in .viz-drives .f-3{transform:translate(382px,34px) rotate(0deg);transition-delay:.7s}
.rv-in .viz-drives .f-4{transform:translate(250px,124px) rotate(0deg);transition-delay:.8s}
.rv-in .viz-drives .f-5{transform:translate(316px,124px) rotate(0deg);transition-delay:.9s}
.rv-in .viz-drives .f-6{transform:translate(382px,124px) rotate(0deg);transition-delay:1s}
.rv-in .viz-drives .led{opacity:1}
.rv-in .viz-drives .d-1 .led{transition-delay:1.2s}
.rv-in .viz-drives .d-2 .led{transition-delay:1.35s}
.rv-in .viz-drives .d-3 .led{transition-delay:1.5s}
.rv-in .viz-drives .vt-b{opacity:1}

/* 3. the tree branches, one route wins, a token walks it */
.viz-tree .tnode{opacity:0;transform:translateY(6px);transform-box:fill-box;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.viz-tree .tlink{stroke-dasharray:240;stroke-dashoffset:240;
  transition:stroke-dashoffset .7s var(--ease),opacity .6s 1.5s ease}
.viz-tree .vt-pin{opacity:0;transition:opacity .5s 1.9s ease}
.viz-tree .twalk{opacity:0}
.rv-in .viz-tree .tnode{opacity:1;transform:none}
.rv-in .viz-tree .t-root{transition-delay:.05s}
.rv-in .viz-tree .tlink{stroke-dashoffset:0}
.rv-in .viz-tree .k1{transition-delay:.35s}
.rv-in .viz-tree .k2{transition-delay:.45s}
.rv-in .viz-tree .k3{transition-delay:.55s}
.rv-in .viz-tree .t-ms{transition-delay:.9s}
.rv-in .viz-tree .t-pv{transition-delay:1s}
.rv-in .viz-tree .t-gc{transition-delay:1.1s}
.rv-in .viz-tree .k1,.rv-in .viz-tree .k3{opacity:.22}
.rv-in .viz-tree .vt-pin{opacity:1}
.rv-in .viz-tree .twalk{offset-path:path("M168 123 C240 123 240 123 320 123");
  animation:vizWalk 2.2s 1.6s linear 3}

/* 4. one source, three streams, particles running each */
.viz-river .riv{stroke-dasharray:640;stroke-dashoffset:640;
  transition:stroke-dashoffset 1.1s var(--ease)}
.viz-river .viz-t{opacity:0;transition:opacity .5s 1.4s ease}
.viz-river .rp{opacity:0}
.rv-in .viz-river .riv{stroke-dashoffset:0}
.rv-in .viz-river .r-ok{transition-delay:.15s}
.rv-in .viz-river .r-warn{transition-delay:.3s}
.rv-in .viz-river .r-bad{transition-delay:.45s}
.rv-in .viz-river .viz-t{opacity:1}
.rv-in .viz-river .p-ok{offset-path:path("M20 125 C170 125 200 62 580 62");
  animation:vizWalk 2.8s 1.3s linear 3}
.rv-in .viz-river .p-ok2{offset-path:path("M20 125 C170 125 200 62 580 62");
  animation:vizWalk 2.8s 2.5s linear 3}
.rv-in .viz-river .p-warn{offset-path:path("M20 125 C170 125 200 128 580 128");
  animation:vizWalk 3.2s 1.8s linear 3}
.rv-in .viz-river .p-bad{offset-path:path("M20 125 C170 125 200 192 580 192");
  animation:vizWalk 3.6s 2.2s linear 3}

/* 5. the ladder stacks from the bottom, then your tier is marked */
@keyframes tierFlash{0%,100%{opacity:.7}50%{opacity:1}}
.viz-pyr .tier{opacity:0;transform:translateY(14px);transform-box:fill-box;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.viz-pyr .pyr-l{opacity:0;transition:opacity .4s ease}
.viz-pyr .pyr-pin{opacity:0;transform:translateX(14px);transform-box:fill-box;
  transition:opacity .55s 1.5s var(--ease),transform .55s 1.5s var(--ease)}
.rv-in .viz-pyr .tier{opacity:1;transform:none}
.rv-in .viz-pyr .ty-4{transition-delay:.05s}
.rv-in .viz-pyr .ty-3{transition-delay:.2s}
.rv-in .viz-pyr .ty-2{transition-delay:.35s}
.rv-in .viz-pyr .ty-1{transition-delay:.5s}
.rv-in .viz-pyr .pyr-l{opacity:1;transition-delay:.8s}
.rv-in .viz-pyr .ty-3{animation:tierFlash 2s 1.6s ease-in-out 2}
.rv-in .viz-pyr .pyr-pin{opacity:1;transform:none}

/* 6. the matrix fills cell by cell */
.viz-grid .gc{opacity:0;transform:scale(.82);transform-box:fill-box;transform-origin:center;
  transition:opacity .35s var(--ease),transform .35s cubic-bezier(.34,1.5,.5,1)}
.viz-grid .gh,.viz-grid .gr{opacity:0;transition:opacity .4s .1s ease}
.viz-grid .vt-b{opacity:0;transition:opacity .5s 1.9s ease}
.rv-in .viz-grid .gh,.rv-in .viz-grid .gr{opacity:1}
.rv-in .viz-grid .gc{opacity:1;transform:none}
.rv-in .viz-grid .c-1{transition-delay:.3s}.rv-in .viz-grid .c-2{transition-delay:.38s}
.rv-in .viz-grid .c-3{transition-delay:.46s}.rv-in .viz-grid .c-4{transition-delay:.54s}
.rv-in .viz-grid .c-5{transition-delay:.66s}.rv-in .viz-grid .c-6{transition-delay:.74s}
.rv-in .viz-grid .c-7{transition-delay:.82s}.rv-in .viz-grid .c-8{transition-delay:.9s}
.rv-in .viz-grid .c-9{transition-delay:1.02s}.rv-in .viz-grid .c-10{transition-delay:1.1s}
.rv-in .viz-grid .c-11{transition-delay:1.18s}.rv-in .viz-grid .c-12{transition-delay:1.26s}
.rv-in .viz-grid .vt-b{opacity:1}

/* 7. adoption spreads outward in waves */
.viz-net .netlinks line{stroke-dasharray:120;stroke-dashoffset:120;
  transition:stroke-dashoffset .7s .5s var(--ease)}
.viz-net .pn{opacity:.25;transition:opacity .5s ease,fill .5s ease,stroke .5s ease}
.viz-net .vt-b{opacity:0;transition:opacity .5s 2s ease}
.rv-in .viz-net .netlinks line{stroke-dashoffset:0}
.rv-in .viz-net .w0{opacity:1;animation:pulseNode 2.4s .4s ease-in-out 2}
.rv-in .viz-net .w1{opacity:1;fill:rgba(212,175,55,.5);stroke:rgba(212,175,55,.8);
  transition-delay:.9s}
.rv-in .viz-net .w2{opacity:1;fill:rgba(212,175,55,.28);stroke:rgba(212,175,55,.55);
  transition-delay:1.5s}
.rv-in .viz-net .vt-b{opacity:1}

/* 8. the two curves draw, cross, and the return opens up */
.viz-roi .roi-cost,.viz-roi .roi-gain{stroke-dasharray:700;stroke-dashoffset:700;
  transition:stroke-dashoffset 1.5s var(--ease)}
.viz-roi .roi-fill{opacity:0;transition:opacity .8s 1.7s ease}
.viz-roi .roi-x{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s 1.5s ease,transform .5s 1.5s cubic-bezier(.34,1.6,.5,1)}
.viz-roi .viz-t{opacity:0;transition:opacity .5s 1.9s ease}
.rv-in .viz-roi .roi-cost{stroke-dashoffset:0;transition-delay:.15s}
.rv-in .viz-roi .roi-gain{stroke-dashoffset:0;transition-delay:.35s}
.rv-in .viz-roi .roi-fill{opacity:1}
.rv-in .viz-roi .roi-x{opacity:1;transform:none}
.rv-in .viz-roi .viz-t{opacity:1}

/* ============================================================
   Knowhow — the pipeline flow
   ============================================================ */
@keyframes plX{0%{transform:translateX(0);opacity:0}18%{opacity:1}
  82%{opacity:1}100%{transform:translateX(30px);opacity:0}}
@keyframes plY{0%{transform:translateY(0);opacity:0}18%{opacity:1}
  82%{opacity:1}100%{transform:translateY(24px);opacity:0}}
.pl-dot{animation:plX 2.8s ease-in-out infinite}
.pipe-link.pl-b .pl-dot{animation-delay:1.4s}
@media (max-width:860px){.pl-dot{animation-name:plY}}

/* ============================================================
   Knowhow — the corpus is swept, matches ignite, an answer forms
   ============================================================ */
@keyframes sweep{0%{transform:translateX(-140px);opacity:0}
  8%{opacity:1}92%{opacity:1}100%{transform:translateX(760px);opacity:0}}
.corpus-grid .scan{transform:translateX(-140px);opacity:0}
.hit{opacity:0;transform:scale(.3);
  transition:opacity .35s var(--ease),transform .45s cubic-bezier(.34,1.7,.5,1)}
.corpus-link .cl{stroke-dasharray:120;stroke-dashoffset:120;
  transition:stroke-dashoffset .7s var(--ease)}
.corpus-answer{opacity:0;transform:translateX(14px);
  transition:opacity .6s 2s var(--ease),transform .6s 2s var(--ease)}
.ca-line{transform:scaleX(0);transition:transform .6s var(--ease)}
.ca-c{opacity:0;transform:translateY(5px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ca-time{opacity:0;transition:opacity .5s 3.1s ease}
.corpus-cap{opacity:0;transition:opacity .5s .3s ease}

.rv-in .corpus-grid .scan{animation:sweep 2.4s .2s cubic-bezier(.4,0,.5,1) 1 forwards}
.rv-in .corpus-cap{opacity:1}
.rv-in .hit{opacity:1;transform:none}
.rv-in .hit.h1{transition-delay:.55s}
.rv-in .hit.h2{transition-delay:.8s}
.rv-in .hit.h3{transition-delay:1.05s}
.rv-in .hit.h4{transition-delay:1.3s}
.rv-in .hit.h5{transition-delay:1.55s}
.rv-in .corpus-link .cl{stroke-dashoffset:0}
.rv-in .corpus-link .cl:nth-of-type(1){transition-delay:1.7s}
.rv-in .corpus-link .cl:nth-of-type(2){transition-delay:1.8s}
.rv-in .corpus-link .cl:nth-of-type(3){transition-delay:1.9s}
.rv-in .corpus-link .cl:nth-of-type(4){transition-delay:2s}
.rv-in .corpus-answer{opacity:1;transform:none}
.rv-in .ca-line{transform:scaleX(1)}
.rv-in .ca-line:nth-of-type(1){transition-delay:2.4s}
.rv-in .ca-line:nth-of-type(2){transition-delay:2.55s}
.rv-in .ca-line:nth-of-type(3){transition-delay:2.7s}
.rv-in .ca-c{opacity:1;transform:none}
.rv-in .ca-c:nth-child(1){transition-delay:2.85s}
.rv-in .ca-c:nth-child(2){transition-delay:2.95s}
.rv-in .ca-c:nth-child(3){transition-delay:3.05s}
.rv-in .ca-time{opacity:1}

/* ============================================================
   Reduced motion — keep this block last so it wins.
   Everything resolves to its finished state; nothing moves.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .aura{animation:none!important}
  *,*::before,*::after{
    animation-duration:.001s!important;
    animation-iteration-count:1!important;
    transition-duration:.001s!important}

  /* Resolve each scene to its finished state rather than leaving it in the
     "before" pose. The resolved frame is the one that carries the meaning:
     assembled system, chosen route, cited answer. */
  .sc-projects .pt{transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy)))!important;
    background:rgba(212,175,55,.34)!important;border-color:rgba(212,175,55,.85)!important}
  .sc-projects .pt-panel{opacity:1!important;transform:none!important}
  .sc-projects .pt-panel::after{transform:scaleX(1)!important}
  .sc-consultancy .rt{opacity:.1!important}
  .sc-consultancy .rt-on{opacity:1!important}
  .sc-consultancy .goal{opacity:1!important;transform:scale(1)!important}
  .sc-consultancy .trav{opacity:0!important;animation:none!important}
  .sc-knowhow .doc{opacity:0!important}
  .sc-knowhow .core{transform:scale(1.15)!important;
    box-shadow:0 0 34px rgba(212,175,55,.42)!important}
  .sc-knowhow .src{opacity:1!important;transform:none!important}

  /* Mock screenshots resolve to their finished frame too. */
  .mk-inbox .mrow,.mk-inbox .mchip,.mk-inbox .mdraft,
  .mk-watch .ev-row,.mk-watch .watch-f,
  .mk-dash .dcard,.mk-dash .badge,.mk-report .rep-sec,.mk-report .rep-warn,
  .mk-report .pill,.mk-report .rep-f .badge,.fc-node,.fc-tag{
    opacity:1!important;transform:none!important}
  .mk-report .spark{stroke-dashoffset:0!important}
  .fc-link{stroke-dashoffset:0!important}
  .mk-dash .ctrl-knob{left:74%!important}
  .mk-dash .pct-bar-fill{transform:scaleX(.74)!important}
  .mk-report .b1{transform:scaleX(1)!important}
  .mk-report .b2{transform:scaleX(.62)!important}
  .mk-report .b3{transform:scaleX(.34)!important}
  .mk-watch .ev-hot{animation:none!important}
  .mk-dash .fdot,.fc-dot{animation:none!important;opacity:0!important}
  .viz-org .onode,.viz-org .oc-cap,
  .viz-drives .file,.viz-drives .drive rect,.viz-drives .drive line,
  .viz-drives .led,.viz-drives .vt-b,
  .viz-tree .tnode,.viz-tree .vt-pin,.viz-river .viz-t,
  .viz-pyr .tier,.viz-pyr .pyr-l,.viz-pyr .pyr-pin,
  .viz-grid .gc,.viz-grid .gh,.viz-grid .gr,.viz-grid .vt-b,
  .viz-net .pn,.viz-net .vt-b,
  .viz-roi .roi-fill,.viz-roi .roi-x,.viz-roi .viz-t{
    opacity:1!important;transform:none!important}
  .viz-org .oc-link,.viz-tree .tlink,.viz-river .riv,
  .viz-net .netlinks line,.viz-roi .roi-cost,.viz-roi .roi-gain{
    stroke-dashoffset:0!important}
  .viz-tree .k1,.viz-tree .k3{opacity:.22!important}
  .viz-tree .twalk,.viz-river .rp{opacity:0!important;animation:none!important}
  .viz-pyr .ty-3,.viz-net .w0,.viz-org .o-slow{animation:none!important}
  .pl-dot{animation:none!important;opacity:.7}
  .corpus-grid .scan{animation:none!important;opacity:0!important}
  .hit,.corpus-answer,.ca-c,.ca-time,.corpus-cap{
    opacity:1!important;transform:none!important}
  .corpus-link .cl{stroke-dashoffset:0!important}
  .ca-line{transform:scaleX(1)!important}
  .viz-drives .f-1{transform:translate(250px,34px)!important}
  .viz-drives .f-2{transform:translate(316px,34px)!important}
  .viz-drives .f-3{transform:translate(382px,34px)!important}
  .viz-drives .f-4{transform:translate(250px,124px)!important}
  .viz-drives .f-5{transform:translate(316px,124px)!important}
  .viz-drives .f-6{transform:translate(382px,124px)!important}
}