/* CULTIV8T3D: twelve question-specific motion studies */
.study-svg{width:100%;height:auto;overflow:visible;color:#e9e8dd}
.study-svg path,.study-svg rect,.study-svg circle{vector-effect:non-scaling-stroke}
.study-grid{stroke:#c9d0ad;stroke-width:.5;opacity:.065}
.study-gold{stroke:#d4a52a;stroke-width:1.35}
.study-ivory{stroke:#e1e3d5;stroke-width:1.15}
.study-dim{stroke:#adb799;stroke-width:.9;opacity:.38}
.study-dot{fill:#d4a52a}
.study-text{fill:#c9ceba;font-family:Jost,Arial,sans-serif;font-size:9px;letter-spacing:1.1px}
.study-small{fill:#b6c0a6;font-family:Jost,Arial,sans-serif;font-size:7px;letter-spacing:.65px}
.study-numeral{fill:#f0ead8;font-family:Jost,Arial,sans-serif;font-size:37px;font-weight:300}
.study-svg g,.study-svg circle,.study-svg path{transition:opacity .7s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
/* 01: two interpretations drift across a changing gap. */
.m-intent{animation:mg-intention 9s ease-in-out infinite}
.m-perception{animation:mg-perception 9s ease-in-out infinite}
.m-point{animation:mg-meaning-point 9s ease-in-out infinite}
@keyframes mg-intention{0%,100%{transform:translateX(-7px)}50%{transform:translateX(26px)}}
@keyframes mg-perception{0%,100%{transform:translateX(7px)}50%{transform:translateX(-26px)}}
@keyframes mg-meaning-point{0%,100%{opacity:.35}50%{opacity:1}}
.visual-canvas[data-answer="aligned"] .m-intent{animation:none;transform:translateX(29px)}
.visual-canvas[data-answer="aligned"] .m-perception{animation:none;transform:translateX(-55px)}
.visual-canvas[data-answer="positioning"] .m-perception{animation:none;transform:translateX(18px)}
.visual-canvas[data-answer="perception"] .m-perception{stroke-dasharray:4 4}
.visual-canvas[data-answer="unknown"] .m-perception{stroke-dasharray:2 7;opacity:.45}
/* 02: a message route resolves toward the relevant audience. */
.a-source{animation:mg-message-send 6s ease-in-out infinite}
.a-route{stroke-dasharray:180;animation:mg-audience-route 6s ease-in-out infinite}
.a-ring{transform-origin:238px 103px;animation:mg-audience-resonance 6s ease-in-out infinite}
@keyframes mg-message-send{0%,100%{transform:translateX(0)}20%{transform:translateX(7px)}35%,85%{transform:translateX(0)}}
@keyframes mg-audience-route{0%,12%{stroke-dashoffset:180;opacity:.15}55%,82%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes mg-audience-resonance{0%,35%,100%{transform:scale(.86);opacity:.1}60%{transform:scale(1.13);opacity:.9}85%{transform:scale(1);opacity:.35}}
/* 03: three different trust signals build before the check resolves. */
.t-proof{animation:mg-evidence 8s ease-in-out infinite}
.t-consistency{animation:mg-consistency 8s ease-in-out infinite}
.t-credibility{animation:mg-credibility 8s ease-in-out infinite}
.t-check{stroke-dasharray:100;animation:mg-confidence 8s ease-in-out infinite}
@keyframes mg-evidence{0%,100%{opacity:.25;transform:translateX(-8px)}15%,80%{opacity:1;transform:translateX(0)}}
@keyframes mg-consistency{0%,15%,100%{opacity:.25;transform:translateX(-8px)}35%,80%{opacity:1;transform:translateX(0)}}
@keyframes mg-credibility{0%,35%,100%{opacity:.25;transform:translateX(-8px)}55%,80%{opacity:1;transform:translateX(0)}}
@keyframes mg-confidence{0%,55%{stroke-dashoffset:100;opacity:.2}75%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.2}}
.visual-canvas[data-answer="proof"] .t-proof rect{stroke-width:2.5}
.visual-canvas[data-answer="signals"] .t-consistency rect{stroke:#d4a52a;stroke-width:2.5}
/* 04: interest pauses at the gap, then continues across the next step. */
.b-link{stroke-dasharray:70;animation:mg-friction-link 7s ease-in-out infinite}
.b-traveler{animation:mg-action-journey 7s ease-in-out infinite}
@keyframes mg-friction-link{0%,35%,100%{stroke-dashoffset:70;opacity:.2}48%,85%{stroke-dashoffset:0;opacity:1}}
@keyframes mg-action-journey{0%{transform:translateX(0);opacity:0}10%{opacity:1}28%,40%{transform:translateX(53px);opacity:1}58%{transform:translateX(179px)}80%{transform:translateX(258px);opacity:1}91%,100%{transform:translateX(258px);opacity:0}}
.visual-canvas[data-answer="clear"] .b-link{animation:none;stroke-dashoffset:0;opacity:1}
/* 05: a complete operating circuit moves through four review stages. */
.s-circuit{stroke-dasharray:85 603;animation:mg-operating-cycle 10s linear infinite}
.s-plan{animation:mg-plan-stage 10s linear infinite}
.s-do{animation:mg-do-stage 10s linear infinite}
.s-review{animation:mg-review-stage 10s linear infinite}
.s-refine{animation:mg-refine-stage 10s linear infinite}
@keyframes mg-operating-cycle{to{stroke-dashoffset:-688}}
@keyframes mg-plan-stage{0%,100%{opacity:1}25%,75%{opacity:.4}}
@keyframes mg-do-stage{0%,50%,100%{opacity:.4}25%{opacity:1}}
@keyframes mg-review-stage{0%,25%,75%,100%{opacity:.4}50%{opacity:1}}
@keyframes mg-refine-stage{0%,50%,100%{opacity:.4}75%{opacity:1}}
/* 06: visual framing settles and a light plane travels over the same object. */
.v-frame{transform-origin:200px 160px;animation:mg-viewfinder-focus 8s ease-in-out infinite}
.v-object{transform-origin:200px 170px;animation:mg-subject-alignment 8s ease-in-out infinite}
.v-scan{animation:mg-light-plane 8s ease-in-out infinite}
.v-thumbnails{animation:mg-visual-consistency 8s ease-in-out infinite}
@keyframes mg-viewfinder-focus{0%,100%{transform:scale(1.055);opacity:.6}35%,85%{transform:scale(1);opacity:1}}
@keyframes mg-subject-alignment{0%,100%{transform:translate(-10px,5px) rotate(-4deg)}35%,85%{transform:translate(0,0) rotate(0)}}
@keyframes mg-light-plane{0%,15%{transform:translateY(0);opacity:0}28%{opacity:.8}65%{transform:translateY(112px);opacity:.8}80%,100%{transform:translateY(112px);opacity:0}}
@keyframes mg-visual-consistency{0%,30%,100%{opacity:.2}65%,85%{opacity:1}}
.visual-canvas[data-answer="clear"] .v-object{animation:none;transform:none}
/* 07: three envelopes enter in the order the relationship develops. */
.e-thread{stroke-dasharray:390;animation:mg-email-thread 9s ease-in-out infinite}
.e-welcome{animation:mg-email-welcome 9s ease-in-out infinite}
.e-educate{animation:mg-email-educate 9s ease-in-out infinite}
.e-invite{animation:mg-email-invite 9s ease-in-out infinite}
@keyframes mg-email-thread{0%,10%{stroke-dashoffset:390;opacity:.2}70%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.15}}
@keyframes mg-email-welcome{0%,100%{transform:translateY(9px);opacity:.3}15%,80%{transform:translateY(0);opacity:1}}
@keyframes mg-email-educate{0%,25%,100%{transform:translateY(9px);opacity:.3}40%,80%{transform:translateY(0);opacity:1}}
@keyframes mg-email-invite{0%,50%,100%{transform:translateY(9px);opacity:.3}65%,80%{transform:translateY(0);opacity:1}}
.visual-canvas[data-answer="notused"] .study-email{opacity:.55}
/* 08: a content compass intentionally chooses its next business purpose. */
.c-compass{transform-origin:200px 157px;animation:mg-content-direction 16s cubic-bezier(.65,0,.35,1) infinite}
.c-post{transform-origin:320px 80px;animation:mg-content-card 16s ease-in-out infinite}
@keyframes mg-content-direction{0%,12%{transform:rotate(0deg)}25%,37%{transform:rotate(90deg)}50%,62%{transform:rotate(180deg)}75%,87%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
@keyframes mg-content-card{0%,12%,100%{transform:translateY(0);opacity:.4}25%,37%{transform:translateY(-5px);opacity:1}50%,87%{transform:translateY(0);opacity:.4}}
.visual-canvas[data-answer="notused"] .study-social{opacity:.55}
/* 09: anticipation rises, launch lifts, and follow-through lights last. */
.l-tease{animation:mg-launch-anticipate 10s ease-in-out infinite}
.l-day{animation:mg-launch-day 10s ease-in-out infinite}
.l-follow{animation:mg-launch-follow 10s ease-in-out infinite}
.l-run{stroke-dasharray:333;animation:mg-launch-window 10s ease-in-out infinite}
.l-beacon{transform-origin:200px 243px;animation:mg-launch-moment 10s ease-in-out infinite}
@keyframes mg-launch-anticipate{0%,100%{opacity:.35}15%,80%{opacity:1}}
@keyframes mg-launch-day{0%,20%,100%{transform:translateY(0);opacity:.45}40%,65%{transform:translateY(-10px);opacity:1}80%{transform:translateY(0);opacity:1}}
@keyframes mg-launch-follow{0%,45%,100%{opacity:.35}70%,85%{opacity:1}}
@keyframes mg-launch-window{0%{stroke-dashoffset:333}85%,100%{stroke-dashoffset:0}}
@keyframes mg-launch-moment{0%,30%,100%{transform:scale(.6);opacity:.3}45%{transform:scale(1.6);opacity:1}60%,90%{transform:scale(1);opacity:.8}}
.visual-canvas[data-answer="none"] .study-launch{opacity:.55}
/* 10: a queue compresses at a real delivery limit before moving through it. */
.k-queue{animation:mg-demand-queue 7s ease-in-out infinite}
.k-delivery{animation:mg-capacity-release 7s ease-in-out infinite}
@keyframes mg-demand-queue{0%,100%{transform:translateY(-13px);opacity:.5}28%,68%{transform:translateY(9px);opacity:1}}
@keyframes mg-capacity-release{0%,10%{transform:translateY(0);opacity:0}24%{opacity:1}35%,58%{transform:translateY(31px);opacity:1}85%{transform:translateY(122px);opacity:1}100%{transform:translateY(122px);opacity:0}}
.visual-canvas[data-answer="bottleneck"] .k-delivery{animation-duration:11s}
.visual-canvas[data-answer="bottleneck"] .k-queue{animation-duration:11s}
.visual-canvas[data-answer="clear"] .k-delivery{animation-duration:5s}
/* 11: three support routes are explored independently. Selection holds one route. */
.u-route{stroke-dasharray:260}
.u-self{animation:mg-support-self 12s ease-in-out infinite}
.u-advice{animation:mg-support-advice 12s ease-in-out infinite}
.u-ongoing{animation:mg-support-ongoing 12s ease-in-out infinite}
@keyframes mg-support-self{0%,100%{stroke-dashoffset:260;opacity:.1}15%,25%{stroke-dashoffset:0;opacity:1}35%,90%{stroke-dashoffset:0;opacity:.15}}
@keyframes mg-support-advice{0%,30%,100%{stroke-dashoffset:260;opacity:.1}45%,55%{stroke-dashoffset:0;opacity:1}65%,90%{stroke-dashoffset:0;opacity:.15}}
@keyframes mg-support-ongoing{0%,60%,100%{stroke-dashoffset:260;opacity:.1}75%,85%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:.15}}
.visual-canvas[data-answer="self"] .u-route,.visual-canvas[data-answer="advice"] .u-route,.visual-canvas[data-answer="leadership"] .u-route{animation:none;stroke-dashoffset:0;opacity:.12}
.visual-canvas[data-answer="self"] .u-self,.visual-canvas[data-answer="advice"] .u-advice,.visual-canvas[data-answer="leadership"] .u-ongoing{opacity:1;stroke-width:2}
/* 12: an actual decision window moves along the timeline, then holds the chosen time. */
.d-window{animation:mg-timing-window 12s cubic-bezier(.65,0,.35,1) infinite}
@keyframes mg-timing-window{0%,15%,100%{transform:translateX(0)}35%,50%{transform:translateX(135px)}70%,85%{transform:translateX(270px)}}
.visual-canvas[data-answer="now"] .d-window{animation:none;transform:translateX(0)}
.visual-canvas[data-answer="quarter"] .d-window{animation:none;transform:translateX(135px)}
.visual-canvas[data-answer="later"] .d-window{animation:none;transform:translateX(270px)}
/* Pause applies to every nested illustration; reduced motion gets a fully drawn static figure. */
.motion-paused .study-svg *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
.study-svg *{animation:none!important;transition:none!important;stroke-dashoffset:0!important}
.a-ring,.t-check,.e-thread,.b-link,.u-route,.l-run{opacity:1}
.s-circuit{stroke-dasharray:none;opacity:.5}
}