/* 01 — The team joins in sequence, then the active speaker moves between portraits. */
.media-workflow.wf-animating.media-team-scene .media-person{--wf1-enter:0s;--wf1-turn:0s;outline:1px solid transparent;outline-offset:-1px;animation:wf1-join .85s cubic-bezier(.18,.72,.22,1) var(--wf1-enter) both,wf1-speaker 10.5s ease-in-out var(--wf1-turn) infinite}
.media-workflow.wf-animating.media-team-scene .media-person:nth-child(2){--wf1-enter:.16s;--wf1-turn:3.5s}
.media-workflow.wf-animating.media-team-scene .media-person:nth-child(3){--wf1-enter:.32s;--wf1-turn:7s}
.media-workflow.wf-animating.media-team-scene .media-person>img{animation:wf1-portrait 10.5s ease-in-out var(--wf1-turn) infinite;transform-origin:50% 32%}
.media-workflow.wf-animating.media-team-scene .media-person:before{content:"";position:absolute;z-index:3;right:8px;top:9px;width:18px;height:15px;background:repeating-linear-gradient(90deg,#e5c882 0 3px,transparent 3px 6px);clip-path:polygon(0 30%,17% 30%,17% 100%,33% 100%,33% 0,50% 0,50% 100%,67% 100%,67% 18%,84% 18%,84% 100%,100% 100%,0 100%);transform-origin:center bottom;animation:wf1-signal 10.5s linear var(--wf1-turn) infinite backwards;filter:drop-shadow(0 0 5px #d5b46b66)}
.media-workflow.wf-animating.media-team-scene .media-person figcaption{animation:wf1-name-enter .75s cubic-bezier(.18,.72,.22,1) calc(var(--wf1-enter) + .22s) both}
.media-workflow.wf-animating.media-team-scene .media-person figcaption>b{animation:wf1-name-active 10.5s ease-in-out var(--wf1-turn) infinite}
.media-workflow.wf-animating.media-team-scene .media-caption{animation:wf1-caption-enter .9s ease-out .6s both}
@keyframes wf1-join{from{opacity:.35;translate:0 18px;scale:.93}to{opacity:1;translate:0 0;scale:1}}
@keyframes wf1-speaker{0%,31%,100%{outline-color:#d5b46b00;box-shadow:0 0 0 #d5b46b00}5%,25%{outline-color:#e4c57e;box-shadow:0 0 18px #d5b46b33}}
@keyframes wf1-portrait{0%,33%,100%{scale:1;filter:grayscale(.5) sepia(.06) brightness(1)}8%,25%{scale:1.035;filter:grayscale(.25) sepia(.06) brightness(1.07)}}
@keyframes wf1-signal{0%,31%,100%{opacity:.15;scale:1 .32}4%,10%,16%,23%{opacity:1;scale:1 1}7%,13%,20%,27%{opacity:.75;scale:1 .42}}
@keyframes wf1-name-enter{from{opacity:.3;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes wf1-name-active{0%,31%,100%{color:#eee6d6}5%,25%{color:#f3d995}}
@keyframes wf1-caption-enter{from{opacity:.25;translate:8px 0}to{opacity:1;translate:0 0}}

/* 02 — A process map unfolds; a trace follows the boxes and arrows lane by lane. */
.media-workflow.wf-animating.media-map-scene .media-process-sheet{animation:wf2-sheet-enter 1s cubic-bezier(.18,.72,.22,1) both}
.media-workflow.wf-animating.media-map-scene .media-document-heading{animation:wf2-heading-enter .8s ease-out .18s both}
.media-workflow.wf-animating.media-map-scene .media-swimlane{--wf2-start:.55s;--wf2-enter:.3s;position:relative;animation:wf2-lane-enter .65s cubic-bezier(.18,.72,.22,1) var(--wf2-enter) both}
.media-workflow.wf-animating.media-map-scene .media-swimlane:nth-child(3){--wf2-start:3.25s;--wf2-enter:.45s}
.media-workflow.wf-animating.media-map-scene .media-swimlane:nth-child(4){--wf2-start:5.95s;--wf2-enter:.6s}
.media-workflow.wf-animating.media-map-scene .media-swimlane:after{content:"";position:absolute;left:20%;right:0;top:-1px;height:2px;background:linear-gradient(90deg,#b39a5a00,#a38343 65%,#e0c889);transform-origin:left center;animation:wf2-trace 8.1s linear var(--wf2-start) infinite backwards}
.media-workflow.wf-animating.media-map-scene .media-swimlane>span{animation:wf2-node 8.1s ease-in-out var(--wf2-start) infinite}
.media-workflow.wf-animating.media-map-scene .media-swimlane>span:nth-of-type(2){animation-delay:calc(var(--wf2-start) + .72s)}
.media-workflow.wf-animating.media-map-scene .media-swimlane>span:nth-of-type(3){animation-delay:calc(var(--wf2-start) + 1.44s)}
.media-workflow.wf-animating.media-map-scene .media-swimlane>i{animation:wf2-arrow 8.1s ease-in-out calc(var(--wf2-start) + .36s) infinite}
.media-workflow.wf-animating.media-map-scene .media-swimlane>i:nth-of-type(2){animation-delay:calc(var(--wf2-start) + 1.08s)}
.media-workflow.wf-animating.media-map-scene .media-swimlane>b{animation:wf2-lane-label 8.1s ease-in-out var(--wf2-start) infinite}
.media-workflow.wf-animating.media-map-scene .media-document-foot>span{animation:wf2-legend-enter .7s ease-out .75s both}
.media-workflow.wf-animating.media-map-scene .media-document-foot>span:nth-child(2){animation-delay:.9s}
.media-workflow.wf-animating.media-map-scene .media-document-foot>span:nth-child(3){animation-delay:1.05s}
@keyframes wf2-sheet-enter{from{opacity:.35;translate:-22px 15px;rotate:-2deg;scale:.94}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes wf2-heading-enter{from{opacity:.25;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes wf2-lane-enter{from{opacity:.35;translate:14px 0}to{opacity:1;translate:0 0}}
@keyframes wf2-trace{0%{opacity:0;scale:.01 1}3%{opacity:.9}28%{opacity:.9;scale:1 1}34%,100%{opacity:0;scale:1 1}}
@keyframes wf2-node{0%,14%,100%{scale:1;box-shadow:0 0 0 0 #a3834300,0 0 0 #6b5c3500}4%,9%{scale:1.055;box-shadow:0 0 0 2px #a3834399,0 4px 9px #6b5c3533}}
@keyframes wf2-arrow{0%,13%,100%{translate:0 0;opacity:.65}4%{translate:3px 0;opacity:1}8%{translate:0 0;opacity:1}}
@keyframes wf2-lane-label{0%,32%,100%{color:#7f7354}5%,25%{color:#56401f}}
@keyframes wf2-legend-enter{from{opacity:.3;translate:0 5px}to{opacity:1;translate:0 0}}

/* 03 — Proposal clauses resolve into a calendar, with three sequential progress bars. */
.media-workflow.wf-animating.media-scope-scene .media-scope-paper{animation:wf3-proposal-enter .95s cubic-bezier(.18,.72,.22,1) both}
.media-workflow.wf-animating.media-scope-scene .media-paper-line{--wf3-clause:.45s;animation:wf3-clause-enter .65s ease-out var(--wf3-clause) both}
.media-workflow.wf-animating.media-scope-scene .media-paper-line:nth-child(3){--wf3-clause:.7s}
.media-workflow.wf-animating.media-scope-scene .media-paper-line:nth-child(4){--wf3-clause:.95s}
.media-workflow.wf-animating.media-scope-scene .media-paper-line>i{transform-origin:left center;animation:wf3-contract-line 9s cubic-bezier(.2,.65,.25,1) var(--wf3-clause) infinite backwards}
.media-workflow.wf-animating.media-scope-scene .media-paper-total{position:relative;animation:wf3-clause-enter .7s ease-out 1.1s both}
.media-workflow.wf-animating.media-scope-scene .media-paper-total:after{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:#92743a;transform-origin:left center;animation:wf3-agreement 9s ease-in-out 1.1s infinite backwards}
.media-workflow.wf-animating.media-scope-scene .media-calendar{animation:wf3-calendar-enter 1.05s cubic-bezier(.18,.72,.22,1) .35s both}
.media-workflow.wf-animating.media-scope-scene .media-calendar>header>b{animation:wf3-direction 9s ease-in-out 1.1s infinite}
.media-workflow.wf-animating.media-scope-scene .media-calendar-columns>span{animation:wf3-clause-enter .6s ease-out .85s both}
.media-workflow.wf-animating.media-scope-scene .media-calendar-columns>span:nth-child(2){animation-delay:1s}
.media-workflow.wf-animating.media-scope-scene .media-calendar-columns>span:nth-child(3){animation-delay:1.15s}
.media-workflow.wf-animating.media-scope-scene .media-timeline-row{--wf3-stage:1.2s}
.media-workflow.wf-animating.media-scope-scene .media-timeline-row:nth-of-type(3){--wf3-stage:2.05s}
.media-workflow.wf-animating.media-scope-scene .media-timeline-row:nth-of-type(4){--wf3-stage:2.9s}
.media-workflow.wf-animating.media-scope-scene .media-timeline-row>i{transform-origin:left center;animation:wf3-progress 9s cubic-bezier(.22,.64,.25,1) var(--wf3-stage) infinite backwards}
.media-workflow.wf-animating.media-scope-scene .media-timeline-row>b{animation:wf3-stage-label 9s ease-in-out var(--wf3-stage) infinite}
.media-workflow.wf-animating.media-scope-scene .media-calendar>footer{animation:wf3-clause-enter .75s ease-out 1.6s both}
@keyframes wf3-proposal-enter{from{opacity:.35;translate:-24px 18px;rotate:-3deg;scale:.93}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes wf3-clause-enter{from{opacity:.35;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes wf3-contract-line{0%{scale:.08 1;opacity:.55}17%,82%{scale:1 1;opacity:1}94%{scale:1 1;opacity:.55}100%{scale:.08 1;opacity:.55}}
@keyframes wf3-agreement{0%{scale:.01 1;opacity:.4}18%,80%{scale:1 1;opacity:1}92%,100%{scale:1 1;opacity:0}}
@keyframes wf3-calendar-enter{from{opacity:.25;translate:25px 17px;rotate:3deg;scale:.94}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes wf3-direction{0%,28%,100%{translate:0 0;color:#ad9866}9%,18%{translate:3px -3px;color:#e5c882}}
@keyframes wf3-progress{0%{scale:.05 1;opacity:.65;box-shadow:0 0 0 #d5b46b00}16%{scale:1 1;opacity:1;box-shadow:0 0 9px #d5b46b55}25%,82%{scale:1 1;opacity:1;box-shadow:0 0 0 #d5b46b00}94%{scale:1 1;opacity:.55}100%{scale:.05 1;opacity:.65;box-shadow:0 0 0 #d5b46b00}}
@keyframes wf3-stage-label{0%,30%,100%{color:#beb28f}7%,20%{color:#f1d99c}}

/* 04 — Objectives become a priority map. Existing rotations remain intact. */
.media-workflow.wf-animating.media-priorities-scene .media-objective-intro>span,
.media-workflow.wf-animating.media-priorities-scene .media-objective-intro>h4 {
  animation:wf4-title .85s cubic-bezier(.16,.8,.25,1) both;
}
.media-workflow.wf-animating.media-priorities-scene .media-objective-intro>h4 {animation-delay:.12s}
.media-workflow.wf-animating.media-priorities-scene .media-goal-tag {
  animation:wf4-goal-in .7s cubic-bezier(.16,.8,.25,1) .3s both;
}
.media-workflow.wf-animating.media-priorities-scene .media-goal-tag:nth-of-type(2) {animation-delay:.46s}
.media-workflow.wf-animating.media-priorities-scene .media-goal-tag:nth-of-type(3) {animation-delay:.62s}
.media-workflow.wf-animating.media-priorities-scene .media-goal-tag>b {
  display:inline-block;
  animation:wf4-goal-match 11.6s ease-in-out .55s infinite;
}
.media-workflow.wf-animating.media-priorities-scene .media-goal-tag:nth-of-type(2)>b {animation-delay:1.4s}
.media-workflow.wf-animating.media-priorities-scene .media-goal-tag:nth-of-type(3)>b {animation-delay:2.3s}
.media-workflow.wf-animating.media-priorities-scene .media-objective-matrix {
  animation:wf4-board 1s cubic-bezier(.16,.8,.25,1) .15s both;
}
.media-workflow.wf-animating.media-priorities-scene .media-matrix-grid::before,
.media-workflow.wf-animating.media-priorities-scene .media-matrix-grid::after {
  content:"";position:absolute;pointer-events:none;opacity:0;
  background:#d5b46b;box-shadow:0 0 9px #e8c57955;
}
.media-workflow.wf-animating.media-priorities-scene .media-matrix-grid::before {
  left:0;right:0;top:0;height:1px;
  animation:wf4-scan-y 11.6s ease-in-out infinite;
}
.media-workflow.wf-animating.media-priorities-scene .media-matrix-grid::after {
  top:0;bottom:0;left:0;width:1px;
  animation:wf4-scan-x 11.6s ease-in-out infinite;
}
.media-workflow.wf-animating.media-priorities-scene .media-priority-one {
  animation:wf4-locate-one 11.6s cubic-bezier(.22,.76,.25,1) infinite;
}
.media-workflow.wf-animating.media-priorities-scene .media-priority-two {
  animation:wf4-locate-two 11.6s cubic-bezier(.22,.76,.25,1) infinite;
}
.media-workflow.wf-animating.media-priorities-scene .media-priority-three {
  animation:wf4-locate-three 11.6s cubic-bezier(.22,.76,.25,1) infinite;
}
.media-workflow.wf-animating.media-priorities-scene .media-priority-two::after {
  content:"";position:absolute;inset:-4px;border:1px solid #f3d893;
  pointer-events:none;opacity:0;
  animation:wf4-priority-lock 11.6s ease-out infinite;
}
@keyframes wf4-title {
  from{opacity:0;translate:-18px 0;clip-path:inset(0 100% 0 0)}
  to{opacity:1;translate:0 0;clip-path:inset(0)}
}
@keyframes wf4-goal-in {from{opacity:0;translate:-15px 0}to{opacity:1;translate:0 0}}
@keyframes wf4-board {from{opacity:0;translate:8% 12%;rotate:5deg;scale:.91}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes wf4-goal-match {
  0%,8%,46%,100%{scale:1;color:#d5b46b}
  16%,28%{scale:1.3;color:#fff0bf;text-shadow:0 0 12px #e4c47966}
}
@keyframes wf4-scan-y {
  0%,7%{top:0;opacity:0}10%{opacity:.55}29%{top:100%;opacity:.4}
  35%,100%{top:100%;opacity:0}
}
@keyframes wf4-scan-x {
  0%,12%{left:0;opacity:0}15%{opacity:.45}35%{left:100%;opacity:.35}
  41%,100%{left:100%;opacity:0}
}
@keyframes wf4-locate-one {
  0%,9%{opacity:0;translate:10cqw -7cqw;rotate:-9deg;scale:.76}
  17%{opacity:1;translate:-.7cqw .4cqw;rotate:2deg;scale:1.04}
  22%,90%{opacity:1;translate:0 0;rotate:0deg;scale:1}
  96%,100%{opacity:0;translate:0 1cqw;rotate:0deg;scale:.97}
}
@keyframes wf4-locate-two {
  0%,17%{opacity:0;translate:-9cqw 12cqw;rotate:11deg;scale:.76}
  27%{opacity:1;translate:.5cqw -.7cqw;rotate:-2deg;scale:1.06}
  33%,91%{opacity:1;translate:0 0;rotate:0deg;scale:1}
  97%,100%{opacity:0;translate:0 1cqw;rotate:0deg;scale:.97}
}
@keyframes wf4-locate-three {
  0%,25%{opacity:0;translate:-11cqw -8cqw;rotate:-10deg;scale:.76}
  36%{opacity:1;translate:.6cqw .5cqw;rotate:2deg;scale:1.04}
  42%,92%{opacity:1;translate:0 0;rotate:0deg;scale:1}
  98%,100%{opacity:0;translate:0 1cqw;rotate:0deg;scale:.97}
}
@keyframes wf4-priority-lock {
  0%,31%{opacity:0;scale:1.2}35%{opacity:.9;scale:1}
  45%{opacity:.5;scale:1}58%,100%{opacity:0;scale:1.12}
}

/* 05 — A workspace assembles; the first module is picked up and placed. */
.media-workflow.wf-animating.media-start-scene .media-workspace {
  animation:wf5-open .9s cubic-bezier(.16,.8,.25,1) both;
}
.media-workflow.wf-animating.media-start-scene .media-workspace>aside>span {
  animation:wf5-nav-in .6s ease-out .2s both;
}
.media-workflow.wf-animating.media-start-scene .media-workspace>aside>span:nth-of-type(2) {animation-delay:.3s}
.media-workflow.wf-animating.media-start-scene .media-workspace>aside>span:nth-of-type(3) {animation-delay:.4s}
.media-workflow.wf-animating.media-start-scene .media-workspace>aside>span:nth-of-type(4) {animation-delay:.5s}
.media-workflow.wf-animating.media-start-scene .media-workspace-main>header {
  animation:wf5-heading .7s ease-out .3s both;
}
.media-workflow.wf-animating.media-start-scene .media-kanban>div {
  animation:wf5-lane .8s cubic-bezier(.2,.75,.25,1) .45s both;
}
.media-workflow.wf-animating.media-start-scene .media-kanban>div:nth-child(2) {animation-delay:.58s}
.media-workflow.wf-animating.media-start-scene .media-kanban>div:nth-child(3) {animation-delay:.71s}
.media-workflow.wf-animating.media-start-scene .media-kanban article {
  animation:wf5-task-in .8s cubic-bezier(.16,.8,.25,1) .9s both;
}
.media-workflow.wf-animating.media-start-scene .media-kanban article:nth-of-type(2) {animation-delay:1.12s}
.media-workflow.wf-animating.media-start-scene .media-kanban>div:nth-child(3)>article {animation-delay:1.4s}
.media-workflow.wf-animating.media-start-scene .media-kanban .media-featured-task {
  position:relative;z-index:2;
  animation:wf5-place-module 12.4s cubic-bezier(.22,.75,.25,1) infinite;
}
.media-workflow.wf-animating.media-start-scene .media-featured-task::after {
  content:"";position:absolute;right:10%;bottom:-8%;width:2.3cqw;height:3cqw;
  background:#f8e5b7;filter:drop-shadow(1px 2px 1px #443b2488);
  clip-path:polygon(0 0,0 100%,28% 73%,49% 100%,67% 91%,46% 65%,88% 61%);
  opacity:0;pointer-events:none;animation:wf5-drag-cursor 12.4s ease-in-out infinite;
}
.media-workflow.wf-animating.media-start-scene .media-kanban article>i {
  transform-origin:left;animation:wf5-task-lines 12.4s cubic-bezier(.2,.8,.25,1) .5s infinite;
}
.media-workflow.wf-animating.media-start-scene .media-kanban article>i:nth-of-type(2) {animation-delay:.8s}
.media-workflow.wf-animating.media-start-scene .media-featured-task>em {
  animation:wf5-module-note 12.4s ease-in-out infinite;
}
.media-workflow.wf-animating.media-start-scene .media-kanban>div:nth-child(2) h5>span {
  display:inline-block;animation:wf5-lane-ready 12.4s ease-in-out infinite;
}
.media-workflow.wf-animating.media-start-scene .media-status {
  animation:wf5-status-ready 12.4s ease-in-out infinite;
}
@keyframes wf5-open {from{opacity:0;translate:0 12%;scale:.91;rotate:2deg}to{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes wf5-nav-in {from{opacity:0;translate:-10px 0}to{opacity:1;translate:0 0}}
@keyframes wf5-heading {from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes wf5-lane {from{opacity:0;translate:0 16%;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes wf5-task-in {from{opacity:0;translate:0 -22%;rotate:-5deg;scale:.9}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes wf5-place-module {
  0%,10%{opacity:0;translate:-108% 24%;rotate:-7deg;scale:.9}
  16%{opacity:1;translate:-108% 24%;rotate:-4deg;scale:1}
  23%{opacity:1;translate:-96% -7%;rotate:-5deg;scale:1.06;box-shadow:0 12px 16px #483b3533}
  34%{opacity:1;translate:1% -8%;rotate:2deg;scale:1.05;box-shadow:0 12px 16px #483b3533}
  40%,91%{opacity:1;translate:0 0;rotate:0deg;scale:1;box-shadow:0 3px 4px #0001}
  97%,100%{opacity:0;translate:0 5%;rotate:0deg;scale:.97;box-shadow:0 3px 4px #0001}
}
@keyframes wf5-drag-cursor {
  0%,14%{opacity:0;translate:10px 12px;scale:1}
  19%{opacity:1;translate:0 0;scale:1}
  23%,34%{opacity:1;translate:0 0;scale:.88}
  40%{opacity:1;translate:0 0;scale:1}
  47%,100%{opacity:0;translate:8px 12px;scale:1}
}
@keyframes wf5-task-lines {0%,15%{scale:.12 1;opacity:.25}29%,88%{scale:1 1;opacity:1}97%,100%{scale:.12 1;opacity:.25}}
@keyframes wf5-module-note {0%,36%{opacity:0;translate:0 5px}45%,91%{opacity:1;translate:0 0}97%,100%{opacity:0;translate:0 5px}}
@keyframes wf5-lane-ready {0%,34%,60%,100%{scale:1;color:#ad9e6a}41%,49%{scale:1.65;color:#8b682a}}
@keyframes wf5-status-ready {0%,39%,78%,100%{background-color:transparent;border-color:#b7ac87}47%,61%{background-color:#d5b46b33;border-color:#a38a4f}}

/* 06 — Fill the prototype, try the action, then review the next release. */
.media-workflow.wf-animating.media-delivery-scene .media-app-window {
  animation:wf6-app-in 1s cubic-bezier(.16,.8,.25,1) both;
}
.media-workflow.wf-animating.media-delivery-scene .media-app-layout>aside {
  animation:wf6-tools-in .7s ease-out .35s both;
}
.media-workflow.wf-animating.media-delivery-scene .media-app-layout h4,
.media-workflow.wf-animating.media-delivery-scene .media-mini-eyebrow {
  animation:wf6-copy-in .75s ease-out .3s both;
}
.media-workflow.wf-animating.media-delivery-scene .media-form-mock>b {
  position:relative;animation:wf6-field-focus 13s ease-in-out infinite;
}
.media-workflow.wf-animating.media-delivery-scene .media-form-mock>b:nth-of-type(2) {animation-delay:1.15s}
.media-workflow.wf-animating.media-delivery-scene .media-form-mock>b::after {
  content:"";position:absolute;inset:1px 4%;background:#f1eddf;
  transform-origin:right;opacity:0;pointer-events:none;
  animation:wf6-type-field 13s steps(16,end) infinite;
}
.media-workflow.wf-animating.media-delivery-scene .media-form-mock>b:nth-of-type(2)::after {animation-delay:1.15s}
.media-workflow.wf-animating.media-delivery-scene .media-form-mock>strong {
  position:relative;animation:wf6-try-action 13s ease-in-out infinite;
}
.media-workflow.wf-animating.media-delivery-scene .media-form-mock>strong::after {
  content:"";position:absolute;right:9%;bottom:-35%;width:2.3cqw;height:3cqw;
  background:#f8e5b7;filter:drop-shadow(1px 2px 1px #443b2488);
  clip-path:polygon(0 0,0 100%,28% 73%,49% 100%,67% 91%,46% 65%,88% 61%);
  opacity:0;pointer-events:none;animation:wf6-click-action 13s ease-in-out infinite;
}
.media-workflow.wf-animating.media-delivery-scene .media-release-card {
  animation:wf6-release-in 1.05s cubic-bezier(.16,.8,.25,1) .7s both;
}
.media-workflow.wf-animating.media-delivery-scene .media-release-card>div {
  animation:wf6-review-row 13s ease-in-out infinite;
}
.media-workflow.wf-animating.media-delivery-scene .media-release-card>div:nth-of-type(2) {animation-delay:.8s}
.media-workflow.wf-animating.media-delivery-scene .media-release-card>div:nth-of-type(3) {animation-delay:1.6s}
.media-workflow.wf-animating.media-delivery-scene .media-release-card>div>b {
  display:inline-block;animation:wf6-review-check 13s cubic-bezier(.2,.85,.3,1) infinite;
}
.media-workflow.wf-animating.media-delivery-scene .media-release-card>div:nth-of-type(2)>b {animation-delay:.8s}
.media-workflow.wf-animating.media-delivery-scene .media-release-card>div:nth-of-type(3)>b {animation-delay:1.6s}
.media-workflow.wf-animating.media-delivery-scene .media-release-card::after {
  content:"";position:absolute;left:10%;right:10%;bottom:5%;height:2px;
  background:linear-gradient(90deg,#8b713c,#ecd493);transform-origin:left;
  opacity:0;animation:wf6-release-progress 13s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes wf6-app-in {from{opacity:0;translate:-12% 7%;rotate:-4deg;scale:.93}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes wf6-tools-in {from{opacity:0;translate:-50% 0}to{opacity:1;translate:0 0}}
@keyframes wf6-copy-in {from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes wf6-field-focus {
  0%,8%,29%,100%{border-color:#b9ad89;box-shadow:0 0 0 0 #b7a06100}
  12%,22%{border-color:#9b7b34;box-shadow:0 0 0 2px #c3a96b44}
}
@keyframes wf6-type-field {
  0%,9%{opacity:1;scale:1 1}24%{opacity:1;scale:0 1}
  25%,94%{opacity:0;scale:0 1}95%,100%{opacity:0;scale:1 1}
}
@keyframes wf6-try-action {
  0%,29%,47%,100%{scale:1;background-color:#524b31;box-shadow:0 0 0 0 #d5b46b00}
  34%{scale:1;background-color:#766034;box-shadow:0 0 0 3px #d5b46b33}
  36%{scale:.965;background-color:#9a7a36;box-shadow:0 0 0 1px #d5b46b55}
  39%{scale:1;background-color:#766034;box-shadow:0 0 0 8px #d5b46b00}
}
@keyframes wf6-click-action {
  0%,27%{opacity:0;translate:8px 15px;scale:1}
  33%{opacity:1;translate:0 0;scale:1}
  36%{opacity:1;translate:0 0;scale:.83}
  39%{opacity:1;translate:0 0;scale:1}
  46%,100%{opacity:0;translate:9px 10px;scale:1}
}
@keyframes wf6-release-in {from{opacity:0;translate:20% 12%;rotate:7deg;scale:.88}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes wf6-review-row {0%,37%{opacity:.45;translate:6px 0}46%,84%{opacity:1;translate:0 0}96%,100%{opacity:.45;translate:6px 0}}
@keyframes wf6-review-check {
  0%,37%,77%,100%{scale:1;rotate:0deg;color:#d5b46b}
  43%{scale:1.45;rotate:-12deg;color:#fff0ba}
  49%,62%{scale:1;rotate:0deg;color:#f1d38c}
}
@keyframes wf6-release-progress {0%,37%{scale:0 1;opacity:0}41%{scale:.05 1;opacity:.8}66%,87%{scale:1 1;opacity:.8}96%,100%{scale:1 1;opacity:0}}

/* 07 — Follow-up: requests arrive, their status is reviewed, then the meeting takes over. */
.media-workflow.wf-animating.media-follow-scene .media-follow-board {
  animation: wf7-board 9s cubic-bezier(.22,.61,.36,1) infinite;
}
.media-workflow.wf-animating.media-follow-scene .media-requests > div {
  position: relative;
  animation: wf7-request 9s cubic-bezier(.22,.61,.36,1) infinite;
}
.media-workflow.wf-animating.media-follow-scene .media-requests > div:nth-of-type(2) { animation-delay: .48s; }
.media-workflow.wf-animating.media-follow-scene .media-requests > div:nth-of-type(3) { animation-delay: .96s; }
.media-workflow.wf-animating.media-follow-scene .media-requests > div > i {
  animation: wf7-status-dot 9s ease-out infinite;
}
.media-workflow.wf-animating.media-follow-scene .media-requests > div:nth-of-type(2) > i { animation-delay: .48s; }
.media-workflow.wf-animating.media-follow-scene .media-requests > div:nth-of-type(3) > i { animation-delay: .96s; }
.media-workflow.wf-animating.media-follow-scene .media-requests > div > em {
  animation: wf7-status-review 9s ease-in-out infinite;
}
.media-workflow.wf-animating.media-follow-scene .media-requests > div:nth-of-type(2) > em { animation-delay: .48s; }
.media-workflow.wf-animating.media-follow-scene .media-requests > div:nth-of-type(3) > em { animation-delay: .96s; }
.media-workflow.wf-animating.media-follow-scene .media-meeting-note {
  position: relative;
  transform-origin: 50% 10%;
  animation: wf7-meeting 9s cubic-bezier(.22,.61,.36,1) infinite;
}
.media-workflow.wf-animating.media-follow-scene .media-meeting-note::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #fff1ba;
  opacity: 0;
  pointer-events: none;
  animation: wf7-meeting-ring 9s ease-out infinite;
}
.media-workflow.wf-animating.media-follow-scene .media-follow-bottom > span {
  animation: wf7-outcome 9s ease-in-out infinite;
}
.media-workflow.wf-animating.media-follow-scene .media-follow-bottom > span:nth-child(2) { animation-delay: .35s; }
.media-workflow.wf-animating.media-follow-scene .media-follow-bottom > span:nth-child(3) { animation-delay: .7s; }
@keyframes wf7-board {
  0%,100% { translate: 0 0; scale: 1; }
  7% { translate: 0 .8cqw; scale: .985; }
  17%,88% { translate: 0 0; scale: 1; }
}
@keyframes wf7-request {
  0%,4% { translate: -2cqw 0; opacity: .35; }
  13%,26% { translate: .5cqw 0; opacity: 1; background-color: #d5b46b16; border-color: #d5b46b80; }
  34%,88% { translate: 0 0; opacity: 1; background-color: transparent; border-color: #4d4531; }
  100% { translate: -2cqw 0; opacity: .35; }
}
@keyframes wf7-status-dot {
  0%,12%,37%,100% { scale: 1; box-shadow: 0 0 0 0 #d5b46b00; }
  19% { scale: 1.5; box-shadow: 0 0 0 5px #d5b46b30; }
  32% { scale: 1; box-shadow: 0 0 0 9px #d5b46b00; }
}
@keyframes wf7-status-review {
  0%,14%,45%,100% { color: #b7a875; background-color: transparent; border-color: #72724b; }
  23%,34% { color: #f4e2a8; background-color: #d5b46b25; border-color: #d5b46b; }
}
@keyframes wf7-meeting {
  0%,34%,100% { translate: 0 0; rotate: 0deg; scale: 1; }
  43% { translate: 0 -1.1cqw; rotate: 4deg; scale: 1.055; }
  50%,70% { translate: 0 -.7cqw; rotate: 2deg; scale: 1.035; }
  81% { translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes wf7-meeting-ring {
  0%,41%,67%,100% { opacity: 0; scale: 1; }
  43% { opacity: .9; scale: 1; }
  60% { opacity: 0; scale: 1.13; }
}
@keyframes wf7-outcome {
  0%,54%,86%,100% { color: #958d77; translate: 0 0; }
  62%,73% { color: #ead294; translate: 0 -.35cqw; }
}

/* 08 — Direction: priorities grow, resources converge, decisions are considered in turn. */
.media-workflow.wf-animating.media-direction-scene .media-direction-bars > i {
  transform-origin: left center;
  animation: wf8-priority-bar 8.6s cubic-bezier(.22,.61,.36,1) infinite;
}
.media-workflow.wf-animating.media-direction-scene .media-direction-bars > i:nth-child(2) { animation-delay: .3s; }
.media-workflow.wf-animating.media-direction-scene .media-direction-bars > i:nth-child(3) { animation-delay: .6s; }
.media-workflow.wf-animating.media-direction-scene .media-direction-circles > i {
  animation: wf8-resource-center 8.6s ease-in-out infinite;
}
.media-workflow.wf-animating.media-direction-scene .media-direction-circles > i:first-child {
  animation-name: wf8-resource-left;
}
.media-workflow.wf-animating.media-direction-scene .media-direction-circles > i:last-child {
  animation-name: wf8-resource-right;
}
.media-workflow.wf-animating.media-direction-scene .media-direction-checks > span {
  animation: wf8-decision 8.6s ease-in-out infinite;
}
.media-workflow.wf-animating.media-direction-scene .media-direction-checks > span:nth-child(2) { animation-delay: .55s; }
.media-workflow.wf-animating.media-direction-scene .media-direction-checks > span:nth-child(3) { animation-delay: 1.1s; }
.media-workflow.wf-animating.media-direction-scene .media-direction-deck > h4 > em {
  animation: wf8-conclusion 8.6s ease-in-out infinite;
}
.media-workflow.wf-animating.media-direction-scene .media-direction-grid > article > span {
  display: inline-block;
  animation: wf8-column 8.6s ease-in-out infinite;
}
.media-workflow.wf-animating.media-direction-scene .media-direction-grid > article:nth-child(2) > span { animation-delay: 1.55s; }
.media-workflow.wf-animating.media-direction-scene .media-direction-grid > article:nth-child(3) > span { animation-delay: 3.1s; }
@keyframes wf8-priority-bar {
  0%,100% { scale: .08 1; opacity: .35; }
  8% { scale: .08 1; opacity: 1; }
  23% { scale: 1.06 1; opacity: 1; }
  29%,85% { scale: 1 1; opacity: 1; }
  95% { scale: .08 1; opacity: .35; }
}
@keyframes wf8-resource-left {
  0%,16%,100% { translate: -.9cqw 0; scale: .82; }
  32%,62% { translate: .65cqw 0; scale: 1; box-shadow: 0 0 0 3px #9b8b5518; }
  77%,90% { translate: 0 0; scale: 1; box-shadow: 0 0 0 0 #9b8b5500; }
}
@keyframes wf8-resource-center {
  0%,16%,100% { translate: 0 1cqw; scale: .72; }
  32%,62% { translate: 0 -.4cqw; scale: 1.08; box-shadow: 0 0 0 5px #9b8b551a; }
  77%,90% { translate: 0 0; scale: 1; box-shadow: 0 0 0 0 #9b8b5500; }
}
@keyframes wf8-resource-right {
  0%,16%,100% { translate: .9cqw 0; scale: .82; }
  32%,62% { translate: -.65cqw 0; scale: 1; box-shadow: 0 0 0 3px #9b8b5518; }
  77%,90% { translate: 0 0; scale: 1; box-shadow: 0 0 0 0 #9b8b5500; }
}
@keyframes wf8-decision {
  0%,37%,74%,100% { translate: 0 0; color: #8c7a48; background-color: transparent; }
  46%,57% { translate: .6cqw 0; color: #493713; background-color: #b59b5c25; }
}
@keyframes wf8-conclusion {
  0%,60%,94%,100% { color: #a17e35; text-shadow: 0 0 0 #bca05c00; }
  69%,82% { color: #785516; text-shadow: 0 0 18px #d5b46b55; }
}
@keyframes wf8-column {
  0%,8%,31%,100% { color: #a58e53; scale: 1; }
  16%,22% { color: #594312; scale: 1.18; }
}

/* 09 — Adoption: the pointer explores the interface, chooses a result, then shares it. */
.media-workflow.wf-animating.media-learning-scene .media-cursor {
  z-index: 3;
  animation: wf9-cursor 10s cubic-bezier(.45,0,.2,1) infinite;
}
.media-workflow.wf-animating.media-learning-scene .media-cursor::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 4%;
  width: 3cqw;
  height: 3cqw;
  margin: -1.5cqw;
  border: 1px solid #9d7b35;
  border-radius: 50%;
  opacity: 0;
  animation: wf9-click 10s ease-out infinite;
}
.media-workflow.wf-animating.media-learning-scene .media-learning-ui > b {
  animation: wf9-search-focus 10s ease-in-out infinite;
}
.media-workflow.wf-animating.media-learning-scene .media-learning-ui > i {
  transform-origin: left center;
  animation: wf9-search-results 10s ease-in-out infinite;
}
.media-workflow.wf-animating.media-learning-scene .media-learning-ui > i:nth-of-type(2) { animation-delay: .2s; }
.media-workflow.wf-animating.media-learning-scene .media-learning-ui > i:nth-of-type(3) { animation-delay: .4s; }
.media-workflow.wf-animating.media-learning-scene .media-learning-ui > strong {
  transform-origin: left center;
  animation: wf9-result-selected 10s ease-in-out infinite;
}
.media-workflow.wf-animating.media-learning-scene .media-learning-steps > span {
  position: relative;
  animation: wf9-step 10s ease-in-out infinite;
}
.media-workflow.wf-animating.media-learning-scene .media-learning-steps > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.55cqw;
  height: 1px;
  background: #e3c875;
  opacity: 0;
  transform-origin: left center;
  animation: wf9-step-line 10s ease-in-out infinite;
}
.media-workflow.wf-animating.media-learning-scene .media-learning-steps > span:nth-child(2),
.media-workflow.wf-animating.media-learning-scene .media-learning-steps > span:nth-child(2)::after { animation-delay: 2.6s; }
.media-workflow.wf-animating.media-learning-scene .media-learning-steps > span:nth-child(3),
.media-workflow.wf-animating.media-learning-scene .media-learning-steps > span:nth-child(3)::after { animation-delay: 5.2s; }
@keyframes wf9-cursor {
  0%,8%,100% { translate: 1cqw .8cqw; scale: 1; }
  20%,29% { translate: -15cqw -5.5cqw; scale: 1; }
  31% { translate: -15cqw -5.5cqw; scale: .8; }
  35% { translate: -15cqw -5.5cqw; scale: 1; }
  47%,53% { translate: -7cqw -1.6cqw; scale: 1; }
  55% { translate: -7cqw -1.6cqw; scale: .8; }
  59%,72% { translate: -7cqw -1.6cqw; scale: 1; }
  85%,94% { translate: 1cqw .8cqw; scale: 1; }
}
@keyframes wf9-click {
  0%,29%,45%,53%,71%,100% { scale: .2; opacity: 0; }
  31%,55% { scale: .25; opacity: .8; }
  41%,67% { scale: 2; opacity: 0; }
}
@keyframes wf9-search-focus {
  0%,17%,48%,100% { color: #4b462d; background-color: transparent; }
  24%,39% { color: #584012; background-color: #d5b46b40; }
}
@keyframes wf9-search-results {
  0%,30%,83%,100% { scale: 1 1; background-color: #bab295; }
  34% { scale: .15 1; background-color: #c7af70; }
  45%,64% { scale: 1 1; background-color: #97824d; }
}
@keyframes wf9-result-selected {
  0%,47%,88%,100% { scale: 1; color: #7c693b; background-color: transparent; box-shadow: 0 0 0 0 #b59b5c00; }
  57%,73% { scale: 1.06; color: #4d3912; background-color: #d5b46b35; box-shadow: 0 0 0 3px #b59b5c18; }
}
@keyframes wf9-step {
  0%,7%,34%,100% { color: #b9b59b; translate: 0 0; }
  14%,27% { color: #f0d798; translate: 0 -.3cqw; }
}
@keyframes wf9-step-line {
  0%,7%,40%,100% { scale: 0 1; opacity: 0; }
  14%,27% { scale: 1 1; opacity: .9; }
  34% { scale: 1 1; opacity: 0; }
}

/* 10 — Next steps: both possible paths are presented, then reunited by a shared framework. */
.media-workflow.wf-animating.media-next-scene .media-next-paths > article {
  position: relative;
  animation: wf10-path-left 10s cubic-bezier(.22,.61,.36,1) infinite;
}
.media-workflow.wf-animating.media-next-scene .media-next-paths > article:last-child {
  animation-name: wf10-path-right;
}
.media-workflow.wf-animating.media-next-scene .media-next-paths > article::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid #e4c579;
  opacity: 0;
  pointer-events: none;
  animation: wf10-path-outline 10s ease-out infinite;
}
.media-workflow.wf-animating.media-next-scene .media-next-paths > article:last-child::after { animation-delay: 3s; }
.media-workflow.wf-animating.media-next-scene .media-next-paths article > div {
  animation: wf10-path-item 10s ease-in-out infinite;
}
.media-workflow.wf-animating.media-next-scene .media-next-paths article > div:nth-of-type(2) { animation-delay: .45s; }
.media-workflow.wf-animating.media-next-scene .media-next-paths article:last-child > div { animation-delay: 3s; }
.media-workflow.wf-animating.media-next-scene .media-next-paths article:last-child > div:nth-of-type(2) { animation-delay: 3.45s; }
.media-workflow.wf-animating.media-next-scene .media-next-paths article > div > i {
  display: inline-block;
  animation: wf10-path-arrow 10s ease-in-out infinite;
}
.media-workflow.wf-animating.media-next-scene .media-next-paths article > div:nth-of-type(2) > i { animation-delay: .45s; }
.media-workflow.wf-animating.media-next-scene .media-next-paths article:last-child > div > i { animation-delay: 3s; }
.media-workflow.wf-animating.media-next-scene .media-next-paths article:last-child > div:nth-of-type(2) > i { animation-delay: 3.45s; }
.media-workflow.wf-animating.media-next-scene .media-next-footer > span {
  animation: wf10-common-framework 10s ease-in-out infinite;
}
.media-workflow.wf-animating.media-next-scene .media-next-footer > span:nth-of-type(2) { animation-delay: .35s; }
.media-workflow.wf-animating.media-next-scene .media-next-footer > span:nth-of-type(3) { animation-delay: .7s; }
.media-workflow.wf-animating.media-next-scene .media-next-footer > i {
  animation: wf10-framework-link 10s ease-in-out infinite;
}
.media-workflow.wf-animating.media-next-scene .media-next-footer > i:last-of-type { animation-delay: .35s; }
@keyframes wf10-path-left {
  0%,100% { translate: -2cqw 0; opacity: .55; scale: .97; }
  12%,35% { translate: 0 -.65cqw; opacity: 1; scale: 1.015; border-color: #bfa15f; }
  45%,88% { translate: 0 0; opacity: 1; scale: 1; border-color: #655e3e; }
}
@keyframes wf10-path-right {
  0%,100% { translate: 2cqw 0; opacity: .55; scale: .97; }
  12%,35% { translate: 0 0; opacity: 1; scale: 1; border-color: #655e3e; }
  44%,65% { translate: 0 -.65cqw; opacity: 1; scale: 1.015; border-color: #bfa15f; }
  75%,88% { translate: 0 0; opacity: 1; scale: 1; border-color: #655e3e; }
}
@keyframes wf10-path-outline {
  0%,8%,38%,100% { opacity: 0; scale: 1; }
  14% { opacity: .75; scale: 1; }
  31% { opacity: 0; scale: 1.075; }
}
@keyframes wf10-path-item {
  0%,12%,42%,100% { translate: 0 0; color: #bdbb96; border-color: #554b34; }
  21%,31% { translate: .55cqw 0; color: #efdaa1; border-color: #ad9155; }
}
@keyframes wf10-path-arrow {
  0%,13%,40%,100% { translate: 0 0; opacity: 1; }
  21% { translate: .45cqw -.45cqw; opacity: 1; }
  24% { translate: .7cqw -.7cqw; opacity: 0; }
  25% { translate: -.5cqw .5cqw; opacity: 0; }
  33% { translate: 0 0; opacity: 1; }
}
@keyframes wf10-common-framework {
  0%,65%,94%,100% { color: #8e866c; translate: 0 0; }
  74%,84% { color: #e7cf91; translate: 0 -.35cqw; }
}
@keyframes wf10-framework-link {
  0%,65%,94%,100% { scale: 1 1; color: #655a43; }
  74%,84% { scale: 1.8 1; color: #c5a864; }
}

/* Animation cancellation returns each property to the original illustration.
   Never reset transform/filter/opacity globally: those also style the artwork. */
.motion-off .media-workflow,
.motion-off .media-workflow *,
.motion-off .media-workflow::before,
.motion-off .media-workflow::after,
.motion-off .media-workflow *::before,
.motion-off .media-workflow *::after {
  animation:none!important;
  transition:none!important;
}

@media (prefers-reduced-motion:reduce), print {
  .media-workflow,
  .media-workflow *,
  .media-workflow::before,
  .media-workflow::after,
  .media-workflow *::before,
  .media-workflow *::after {
    animation:none!important;
    transition:none!important;
  }
}