/* How we use AI · v2 · motion pass (CSS only; motion.js adds html.js-motion + trigger classes).
   Rules:
   - every "before" state sits behind html.js-motion, so no JS = the original, fully visible page
   - only opacity / transform / clip-path / colors / shadows move, so layout never shifts
   - prefers-reduced-motion and print always show the final state */

/* ---------- shared ---------- */
@keyframes mo-pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes mo-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}

/* ---------- 5 · scroll fade-ins (all pages) ---------- */
.js-motion .mo-fade{opacity:0;transform:translateY(12px);transition:opacity .6s ease-out,transform .6s ease-out}
.js-motion .mo-fade.mo-in{opacity:1;transform:none}

/* ---------- 1 · PDCA loop (method.html #pdca) · the only loop ---------- */
@keyframes mo-pdca{
  0%,100%{box-shadow:0 0 0 0 rgba(163,74,37,0);transform:none}
  5%,20%{box-shadow:0 0 0 2px rgba(163,74,37,.32),0 8px 20px rgba(61,44,41,.08);transform:translateY(-2px)}
  30%{box-shadow:0 0 0 0 rgba(163,74,37,0);transform:none}
}
@keyframes mo-pdca-arrow{0%,18%,34%,100%{transform:none}25%{transform:translateX(3px)}}
@media (max-width:820px){@keyframes mo-pdca-arrow{0%,18%,34%,100%{transform:none}25%{transform:translateY(3px)}}}
@keyframes mo-pdca-back{0%,70%,100%{border-color:rgba(163,74,37,0.735)}82%{border-color:rgba(163,74,37,1)}}
.js-motion .pdca > div{animation:mo-pdca 8s ease-in-out infinite both;animation-play-state:paused}
.js-motion .pdca > div:not(:last-child)::after{animation:mo-pdca-arrow 8s ease-in-out infinite both;animation-play-state:paused}
.js-motion .pdca > div:nth-child(2),.js-motion .pdca > div:nth-child(2)::after{animation-delay:2s}
.js-motion .pdca > div:nth-child(3),.js-motion .pdca > div:nth-child(3)::after{animation-delay:4s}
.js-motion .pdca > div:nth-child(4){animation-delay:6s}
.js-motion .pdca ~ .loopback,.js-motion .pdca ~ .loopback-m{animation:mo-pdca-back 8s ease-in-out infinite;animation-play-state:paused}
.js-motion .pdca.mo-live > div,.js-motion .pdca.mo-live > div::after,
.js-motion .pdca.mo-live ~ .loopback,.js-motion .pdca.mo-live ~ .loopback-m{animation-play-state:running}

/* ---------- 2 · mind map draws itself in (method.html #mind-map .mm) ---------- */
@keyframes mo-mm-lines{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes mo-mm-center{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes mo-mm-rail{from{transform:scaleY(0)}to{transform:none}}
.js-motion .mm:not(.mo-in) svg.lines{clip-path:circle(0% at 50% 50%)}
.js-motion .mm:not(.mo-in) > .center,.js-motion .mm:not(.mo-in) > .node{opacity:0}
.js-motion .mm.mo-in svg.lines{animation:mo-mm-lines 1s cubic-bezier(.3,.6,.3,1) .25s both}
.js-motion .mm.mo-in > .center{animation:mo-mm-center .5s ease-out both}
.js-motion .mm.mo-in > .node{animation:mo-up .5s ease-out both}
.js-motion .mm.mo-in > .n1{animation-delay:.55s}.js-motion .mm.mo-in > .n2{animation-delay:.7s}
.js-motion .mm.mo-in > .n3{animation-delay:.85s}.js-motion .mm.mo-in > .n4{animation-delay:1s}
.js-motion .mm.mo-in > .n5{animation-delay:1.15s}.js-motion .mm.mo-in > .n6{animation-delay:1.3s}
@media (max-width:820px){
  .js-motion .mm::before{transform-origin:top}
  .js-motion .mm:not(.mo-in)::before{transform:scaleY(0)}
  .js-motion .mm.mo-in::before{animation:mo-mm-rail 1.2s ease-out .3s both}
}

/* ---------- 3 · status board + tiles light up (control-tower.html) ---------- */
@keyframes mo-light{
  0%{border-top-color:var(--line);box-shadow:0 0 0 0 rgba(0,0,0,0)}
  45%{border-top-color:var(--st);box-shadow:0 0 0 3px color-mix(in srgb,var(--st) 22%,transparent)}
  100%{border-top-color:var(--st);box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
@keyframes mo-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mo-left{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
/* tiles */
.js-motion .tiles:not(.mo-in) > .tile{opacity:0}
.js-motion .tiles:not(.mo-in) > .tile svg{clip-path:inset(0 100% 0 0)}
.js-motion .tiles.mo-in > .tile{animation:mo-up .5s ease-out both,mo-light 1.1s ease-out both;animation-delay:calc(var(--mo-i,0) * 90ms),calc(var(--mo-i,0) * 90ms + 250ms)}
.js-motion .tiles.mo-in > .tile svg{animation:mo-wipe .9s ease-out both;animation-delay:calc(var(--mo-i,0) * 90ms + 300ms)}
/* by specialist + board rows */
.js-motion .by-spec:not(.mo-in) > div,.js-motion .vm:not(.mo-in) .vm-row,.js-motion .vm:not(.mo-in) .waiting .item,.js-motion .vm:not(.mo-in) .week > div{opacity:0}
.js-motion .by-spec:not(.mo-in) .dot,.js-motion .vm:not(.mo-in) .dot,.js-motion .vm:not(.mo-in) .week i{transform:scale(0)}
.js-motion .by-spec.mo-in > div{animation:mo-fade .45s ease-out both;animation-delay:calc(var(--mo-i,0) * 45ms)}
.js-motion .by-spec.mo-in .dot{animation:mo-pop .45s ease-out both;animation-delay:calc(var(--mo-i,0) * 45ms + 150ms)}
.js-motion .vm.mo-in .week > div{animation:mo-up .45s ease-out both;animation-delay:calc(var(--mo-i,0) * 60ms)}
.js-motion .vm.mo-in .week i{animation:mo-pop .4s ease-out both;animation-delay:calc(var(--mo-i,0) * 60ms + 250ms)}
.js-motion .vm.mo-in .vm-row{animation:mo-left .45s ease-out both;animation-delay:calc(var(--mo-i,0) * 90ms + 450ms)}
.js-motion .vm.mo-in .vm-row .dot{animation:mo-pop .45s ease-out both;animation-delay:calc(var(--mo-i,0) * 90ms + 600ms)}
.js-motion .vm.mo-in .waiting .item{animation:mo-left .45s ease-out both;animation-delay:calc(var(--mo-i,0) * 120ms + 1000ms)}
.js-motion .vm.mo-in .waiting .dot,.js-motion .vm.mo-in .keylist .dot{animation:mo-pop .45s ease-out both;animation-delay:calc(var(--mo-i,0) * 120ms + 1150ms)}

/* ---------- 4 · build-plan progress fill (plan.html #meter) ---------- */
@keyframes mo-fill{from{transform:scaleX(0)}to{transform:none}}
.js-motion .meter i{position:relative;overflow:hidden}
.js-motion .meter:not(.mo-in) i.solid{background:rgba(61,44,41,0.064)}
.js-motion .meter:not(.mo-in) i.prog{background:rgba(61,44,41,.1)}
.js-motion .meter i.mo-grow.solid{background:rgba(61,44,41,0.064)}
.js-motion .meter i.mo-grow.prog{background:rgba(61,44,41,.1)}
.js-motion .meter i.mo-grow::after{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:left;animation:mo-fill .55s cubic-bezier(.3,.6,.3,1) both;animation-delay:calc(var(--mo-i,0) * 80ms)}
.js-motion .meter i.mo-grow.solid::after{background:var(--st-g)}
.js-motion .meter i.mo-grow.prog::after{background:linear-gradient(90deg,var(--gold-fill) 50%,transparent 50%)}

/* ---------- new section · "From tasks to time" (control-tower.html #tasks-to-time) ---------- */
.tt{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);grid-template-rows:auto 48px auto;margin:4px 0 0}
.tt-step{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px}
.tt-step h4{font:600 17px/1.3 var(--serif);margin:0 0 4px;display:flex;align-items:center;gap:10px}
.tt-step p{margin:0;font-size:14.5px;color:var(--ink-2)}
.tt-n{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--C);color:var(--C);font:italic 400 17px/1 var(--serif)}
.tt-arrow{display:flex;align-items:center;justify-content:center;min-width:0}
.tt-arrow svg{display:block;fill:none;stroke:var(--C);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tt-arrow.h svg{width:40px;height:16px}
.tt-arrow.v svg{width:16px;height:40px}
.tt-arrow.back svg{stroke:var(--rust);stroke-dasharray:4 4}
.tt-arrow.back svg path:last-child{stroke-dasharray:none}
.tt .s1{grid-area:1/1}.tt .a12{grid-area:1/2}.tt .s2{grid-area:1/3}.tt .a23{grid-area:2/3}
.tt .s3{grid-area:3/3}.tt .a34{grid-area:3/2}.tt .s4{grid-area:3/1}.tt .a41{grid-area:2/1}
@media (max-width:820px){
  .tt{grid-template-columns:minmax(0,1fr);grid-template-rows:none;position:relative;padding-left:30px}
  .tt .s1{grid-area:1/1}.tt .a12{grid-area:2/1}.tt .s2{grid-area:3/1}.tt .a23{grid-area:4/1}
  .tt .s3{grid-area:5/1}.tt .a34{grid-area:6/1}.tt .s4{grid-area:7/1}
  .tt-arrow{height:40px}
  .tt .a12 svg{transform:rotate(90deg)}.tt .a34 svg{transform:rotate(-90deg)}
  /* the return arrow becomes a dashed rail up the left side, from step 4 back to step 1 */
  .tt .a41{grid-area:auto;position:absolute;left:4px;top:30px;bottom:30px;width:22px;height:auto;display:block;border:1.5px dashed rgba(163,74,37,0.735);border-right:0;border-radius:12px 0 0 12px}
  .tt .a41 svg{display:none}
  .tt .a41::after{content:"";position:absolute;right:-3px;top:-6.5px;border:5.5px solid transparent;border-left:8px solid var(--rust);border-right:0}
}
/* draw-in: steps 1 → 4, then the return arrow (arrows are clipped open along their direction) */
@keyframes mo-tt-r{from{clip-path:inset(-4px 100% -4px -4px)}to{clip-path:inset(-4px)}}
@keyframes mo-tt-d{from{clip-path:inset(-4px -4px 100% -4px)}to{clip-path:inset(-4px)}}
@keyframes mo-tt-l{from{clip-path:inset(-4px -4px -4px 100%)}to{clip-path:inset(-4px)}}
@keyframes mo-tt-u{from{clip-path:inset(100% -12px -12px -12px)}to{clip-path:inset(-12px)}}
.js-motion .tt:not(.mo-in) > *{opacity:0}
.js-motion .tt.mo-in > .tt-step{animation:mo-up .5s ease-out both}
.js-motion .tt.mo-in .tt-n{animation:mo-pop .45s ease-out both}
.js-motion .tt.mo-in > .a12 svg{animation:mo-tt-r .4s ease-out both}
.js-motion .tt.mo-in > .a23 svg{animation:mo-tt-d .4s ease-out both}
.js-motion .tt.mo-in > .a34 svg{animation:mo-tt-l .4s ease-out both}
.js-motion .tt.mo-in > .a41{animation:mo-tt-u .8s ease-in-out both}
.js-motion .tt.mo-in > .s1{animation-delay:0s}   .js-motion .tt.mo-in > .s1 .tt-n{animation-delay:.15s}
.js-motion .tt.mo-in > .a12 svg{animation-delay:.45s}
.js-motion .tt.mo-in > .s2{animation-delay:.75s} .js-motion .tt.mo-in > .s2 .tt-n{animation-delay:.9s}
.js-motion .tt.mo-in > .a23 svg{animation-delay:1.2s}
.js-motion .tt.mo-in > .s3{animation-delay:1.5s} .js-motion .tt.mo-in > .s3 .tt-n{animation-delay:1.65s}
.js-motion .tt.mo-in > .a34 svg{animation-delay:1.95s}
.js-motion .tt.mo-in > .s4{animation-delay:2.25s} .js-motion .tt.mo-in > .s4 .tt-n{animation-delay:2.4s}
.js-motion .tt.mo-in > .a41{animation-delay:2.8s}

/* ---------- always show the final state: reduced motion + print ---------- */
@media (prefers-reduced-motion:reduce){
  .js-motion *,.js-motion *::before,.js-motion *::after{animation:none !important;transition:none !important}
  .js-motion .mo-fade,.js-motion .tiles > .tile,.js-motion .by-spec > div,.js-motion .vm .vm-row,.js-motion .vm .waiting .item,.js-motion .vm .week > div,
  .js-motion .mm > .center,.js-motion .mm > .node,.js-motion .tt > *{opacity:1 !important;transform:none !important}
  .js-motion .dot,.js-motion .week i,.js-motion .mm::before,.js-motion .pdca > div{transform:none !important}
  .js-motion .mm svg.lines,.js-motion .tiles svg,.js-motion .tt svg,.js-motion .tt .a41{clip-path:none !important}
  .js-motion .meter i.solid{background:var(--st-g) !important}
  .js-motion .meter i.prog{background:linear-gradient(90deg,var(--gold-fill) 50%,rgba(61,44,41,.1) 50%) !important}
  .js-motion .meter i::after{content:none !important}
}
@media print{
  .js-motion *,.js-motion *::before,.js-motion *::after{animation:none !important;transition:none !important}
  .js-motion .mo-fade,.js-motion .tiles > .tile,.js-motion .by-spec > div,.js-motion .vm .vm-row,.js-motion .vm .waiting .item,.js-motion .vm .week > div,
  .js-motion .mm > .center,.js-motion .mm > .node,.js-motion .tt > *{opacity:1 !important;transform:none !important}
  .js-motion .dot,.js-motion .week i,.js-motion .mm::before{transform:none !important}
  .js-motion .mm svg.lines,.js-motion .tiles svg,.js-motion .tt svg,.js-motion .tt .a41{clip-path:none !important}
}