/* Ion-i motion layer (draft). Everything is scoped to html.motion-on so it can be switched off in one place. */
:root{--m-ease:cubic-bezier(.22,.61,.36,1);--m-spring:cubic-bezier(.34,1.4,.64,1)}

/* 1. Intro: each part waits (m-pending) until it scrolls into view, then plays (m-in) */
html.motion-on .selected-roadmap.m-pending .selected-root,
html.motion-on .selected-roadmap.m-pending .selected-branches:before,
html.motion-on .selected-roadmap.m-pending .selected-branches:after,
html.motion-on .selected-roadmap.m-pending .selected-branches i{opacity:0}
html.motion-on .selected-roadmap.m-in .selected-root{animation:m-pop .55s var(--m-spring) both}
html.motion-on .selected-roadmap.m-in .selected-branches:before{transform-origin:top;animation:m-grow-y .35s var(--m-ease) .35s both}
html.motion-on .selected-roadmap.m-in .selected-branches:after{transform-origin:center;animation:m-grow-x .45s var(--m-ease) .6s both}
html.motion-on .selected-roadmap.m-in .selected-branches i{transform-origin:top;animation:m-grow-y .3s var(--m-ease) 1s both}
html.motion-on .selected-team.m-pending{opacity:0;transform:translateY(18px)}
html.motion-on .selected-team.m-pending .selected-event{opacity:0}
html.motion-on .selected-team.m-pending .selected-event:before{transform:scale(0)}
html.motion-on .selected-team.m-in{animation:m-rise .6s var(--m-ease) both;animation-delay:var(--m-delay,0ms)}
html.motion-on .selected-team.m-in .selected-event{animation:m-fade-left .45s var(--m-ease) both;animation-delay:calc(var(--m-delay,0ms) + 300ms + var(--j,0) * 140ms)}
html.motion-on .selected-team.m-in .selected-event:before{animation:m-dot .4s var(--m-spring) both;animation-delay:calc(var(--m-delay,0ms) + 350ms + var(--j,0) * 140ms)}
html.motion-on .selected-workflows-heading.m-pending{opacity:0}
html.motion-on .selected-workflows-heading.m-in{animation:m-rise .6s var(--m-ease) both}

/* 2. Time-aware timeline: progress fill, NOW marker, past weeks */
.selected-timeline{position:relative}
html.motion-on .selected-timeline:after{content:'';position:absolute;left:-2px;top:0;width:2px;height:var(--m-progress,0px);background:var(--accent);border-radius:2px;transition:height 1.2s var(--m-ease) .2s}
html.motion-on .selected-event.m-now:before{animation:m-pulse 2.2s ease-out .4s infinite}
.m-now-chip{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:9px;background:var(--accent);color:#fff;font-size:8.5px;letter-spacing:.1em;vertical-align:1px}
.selected-event.m-past p{color:#8ea0aa}
.selected-event.m-past:before{background:#fff;border:2px solid var(--accent)}

/* 3. Team cards: lift, matching branch lights up, arrow nudge */
html.motion-on .selected-team{transition:transform .25s var(--m-ease),box-shadow .25s var(--m-ease),border-color .25s}
html.motion-on .selected-team:hover,html.motion-on .selected-team:focus-visible{transform:translateY(-4px);box-shadow:0 12px 28px #2b4a601c;border-color:var(--accent)}
html.motion-on .selected-team-footer{transition:padding-left .25s var(--m-ease)}
html.motion-on .selected-team:hover .selected-team-footer{padding-left:20px}
html.motion-on .selected-team:hover .selected-team-head span{animation:m-nudge 1s ease-in-out infinite}
html.motion-on .selected-branches i{transition:border-color .25s}
html.motion-on .selected-branches i:after{transition:border-top-color .25s,transform .25s var(--m-ease)}
html.motion-on .selected-roadmap:has(.selected-hardware:hover) .selected-branches i:nth-child(1),
html.motion-on .selected-roadmap:has(.selected-electronics:hover) .selected-branches i:nth-child(2),
html.motion-on .selected-roadmap:has(.selected-diagnostics:hover) .selected-branches i:nth-child(3){border-left:2px solid #284d63}
html.motion-on .selected-roadmap:has(.selected-hardware:hover) .selected-branches i:nth-child(1):after,
html.motion-on .selected-roadmap:has(.selected-electronics:hover) .selected-branches i:nth-child(2):after,
html.motion-on .selected-roadmap:has(.selected-diagnostics:hover) .selected-branches i:nth-child(3):after{border-top-color:#284d63;transform:translateY(2px)}

/* 4. Work blocks: reveal on scroll, smooth dependency focus */
html.motion-on .home-work{transition:opacity .3s var(--m-ease),transform .3s var(--m-ease),border-color .2s,box-shadow .25s}
html.motion-on .home-work.m-pending{opacity:0;transform:translateY(14px)}
html.motion-on .home-work.dependency-active{transform:translateY(-2px);box-shadow:0 8px 20px #2b4a6018}
html.motion-on .home-work.dependency-related{animation:m-ring .7s var(--m-ease)}
html.motion-on .home-member,html.motion-on .home-resource-primary{transition:transform .2s var(--m-ease),background-color .2s}
html.motion-on .home-member:hover,html.motion-on .home-resource-primary:hover{transform:translateY(-1px)}

/* 5. Workflow panel: slide in, then diagram draws itself */
html.motion-on .home-expanded.m-pending{opacity:0;transform:translateY(18px)}
html.motion-on .home-expanded.m-enter{animation:m-rise .5s var(--m-ease) both}
html.motion-on .home-expanded.m-flash{animation:m-flash 1.1s var(--m-ease)}
html.motion-on .m-wait .m-stage,html.motion-on .m-wait .m-node,html.motion-on .m-wait .m-late{opacity:0}
html.motion-on .m-wait .m-edge{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len)}
html.motion-on .m-draw .m-stage{animation:m-fade .45s var(--m-ease) both;animation-delay:calc(var(--d,0) * 1ms)}
html.motion-on .m-draw .m-node{animation:m-fade-up .4s var(--m-ease) both;animation-delay:calc(var(--d,0) * 1ms)}
html.motion-on .m-draw .m-edge{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);animation:m-dash .5s var(--m-ease) forwards;animation-delay:calc(var(--d,0) * 1ms)}
html.motion-on .m-draw .m-late{animation:m-fade .4s var(--m-ease) both;animation-delay:calc(var(--d,0) * 1ms)}
html.motion-on .flow-graphic .node.interactive,html.motion-on .flow-graphic .f-node{transition:filter .2s}
html.motion-on .flow-graphic .node.interactive:hover,html.motion-on .flow-graphic .f-node:hover{filter:drop-shadow(0 4px 6px #2b4a6030)}
html.motion-on .flow-mobile-stage[open] .flow-mobile-body,html.motion-on .flow-mobile-stage.open .flow-mobile-body{animation:m-fade-up .35s var(--m-ease) both}
html.motion-on .home-flow-tabs button{transition:background-color .2s,color .2s,transform .2s var(--m-ease)}
html.motion-on .home-flow-tabs button:active{transform:scale(.97)}

/* 6. Dialogs */
html.motion-on dialog[open]{animation:m-pop .3s var(--m-spring)}
html.motion-on dialog[open]::backdrop{animation:m-fade .3s ease both}

/* Draft-only control */
.m-control{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;gap:6px;align-items:center;padding:6px 6px 6px 12px;background:#fff;border:1px solid #d7e3e9;border-radius:22px;box-shadow:0 8px 24px #2b4a601f;font:12px/1.2 system-ui,sans-serif;color:#355266}
.m-control b{font-size:10px;letter-spacing:.1em;color:#8096a3;margin-right:4px}
.m-control button{border:1px solid #cddde6;background:#f6f9fb;color:#284d63;border-radius:16px;padding:6px 11px;font:inherit;cursor:pointer}
.m-control button[aria-pressed=true]{background:#284d63;color:#fff;border-color:#284d63}

@keyframes m-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes m-grow-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes m-grow-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes m-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes m-fade-left{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes m-dot{from{transform:scale(0)}to{transform:none}}
@keyframes m-dash{to{stroke-dashoffset:0}}
@keyframes m-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes m-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes m-ring{0%{box-shadow:0 0 0 0 #6594b066}100%{box-shadow:0 0 0 7px transparent}}
@keyframes m-flash{0%{box-shadow:0 0 0 0 #6594b055}100%{box-shadow:0 8px 28px #3151690a,0 0 0 12px transparent}}

@media (max-width:760px){.m-control{left:12px;right:12px;justify-content:space-between}}
@media (prefers-reduced-motion:reduce){html.motion-on *,html.motion-on *:before,html.motion-on *:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}