/* Q-DASH Motion Studio — scene diversity and purposeful motion layer. */
.motion3{--m3-motion-fast:.28s;--m3-motion-base:.55s;--m3-motion-slow:6s}

/* Storyboard: hook, idea, proof and action are four different visual beats. */
.motion3-board__frame{isolation:isolate;background-color:#eaf0f3;background-image:linear-gradient(rgba(7,29,49,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(7,29,49,.035) 1px,transparent 1px);background-size:24px 24px}
.motion3-board__frame:after{content:"";position:absolute;z-index:1;pointer-events:none}
.motion3-board:nth-child(1) .motion3-board__frame>i:nth-of-type(1){left:50%;top:50%;width:78px;height:78px;border-color:#5da7e5;border-style:dashed;transform:translate(-50%,-50%);animation:m3-board-orbit 7s linear infinite}
.motion3-board:nth-child(1) .motion3-board__frame>i:nth-of-type(1):after{content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--m3-orange);box-shadow:0 0 0 6px rgba(243,91,43,.13)}
.motion3-board:nth-child(1) .motion3-board__frame>i:nth-of-type(2){left:50%;top:50%;right:auto;bottom:auto;width:18px;height:18px;border:0;border-radius:50%;background:var(--m3-orange);transform:translate(-50%,-50%);animation:m3-board-target 2.4s var(--m3-ease) infinite}
.motion3-board:nth-child(1) .motion3-board__frame>i:nth-of-type(3){left:14%;right:14%;top:50%;bottom:auto;border-color:#9eb0bc;animation:m3-board-scan 3.2s var(--m3-ease) infinite}
.motion3-board:nth-child(1) .motion3-board__frame:after{inset:19% 31%;border:1px solid rgba(7,29,49,.13);border-radius:50%}
.motion3-board:nth-child(2) .motion3-board__frame>i{border:0;border-radius:50%;background:#5da7e5;box-shadow:0 0 0 7px rgba(93,167,229,.12)}
.motion3-board:nth-child(2) .motion3-board__frame>i:nth-of-type(1){left:16%;top:62%;width:13px;height:13px;animation:m3-board-node-a 4.4s var(--m3-ease) infinite}
.motion3-board:nth-child(2) .motion3-board__frame>i:nth-of-type(2){right:16%;bottom:auto;top:28%;width:16px;height:16px;transform:none;background:var(--m3-orange);animation:m3-board-node-b 4.4s var(--m3-ease) infinite}
.motion3-board:nth-child(2) .motion3-board__frame>i:nth-of-type(3){left:43%;right:auto;bottom:39%;width:11px;height:11px;background:#20c9b2}
.motion3-board:nth-child(2) .motion3-board__frame:after{left:18%;right:18%;top:32%;height:38%;border:2px dashed #9eb0bc;border-width:2px 2px 0 0;transform:skewY(-14deg)}
.motion3-board:nth-child(3) .motion3-board__frame>i{top:auto!important;bottom:25%!important;border:0!important;border-radius:6px 6px 2px 2px;background:linear-gradient(#5da7e5,#2f668f);transform:none!important;transform-origin:bottom;animation:m3-board-bars 3.6s var(--m3-ease) infinite}
.motion3-board:nth-child(3) .motion3-board__frame>i:nth-of-type(1){left:18%;width:18%;height:34%}
.motion3-board:nth-child(3) .motion3-board__frame>i:nth-of-type(2){left:41%;right:auto;width:18%;height:58%;animation-delay:-1.2s}
.motion3-board:nth-child(3) .motion3-board__frame>i:nth-of-type(3){left:64%;right:auto;width:18%;height:76%;animation-delay:-2.4s;background:linear-gradient(var(--m3-orange),#c83f18)}
.motion3-board:nth-child(3) .motion3-board__frame:after{left:14%;right:14%;bottom:23%;height:1px;background:#9eb0bc}
.motion3-board:nth-child(4) .motion3-board__frame>i:nth-of-type(1){left:15%;top:28%;width:70%;height:62px;border:0;border-radius:12px;background:#fff;box-shadow:0 9px 24px rgba(7,29,49,.1);animation:m3-board-card 4s var(--m3-ease) infinite}
.motion3-board:nth-child(4) .motion3-board__frame>i:nth-of-type(2){right:22%;bottom:26%;width:64px;height:22px;border:0;border-radius:20px;background:var(--m3-orange);transform:none;animation:m3-board-cta 4s var(--m3-ease) infinite}
.motion3-board:nth-child(4) .motion3-board__frame>i:nth-of-type(3){left:23%;right:48%;bottom:35%;border-color:#9eb0bc}
.motion3-board:nth-child(4) .motion3-board__frame:after{left:22%;top:41%;width:54px;height:7px;border-radius:9px;background:#cbd7de;box-shadow:0 15px 0 #dce5e9}

/* 2D and 3D each have their own spatial system; hidden really means hidden. */
.motion3-dimension-visual>[hidden],.motion3-dimension-stage article[hidden]{display:none!important}
.motion3-dimension-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(93,167,229,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(93,167,229,.07) 1px,transparent 1px);background-size:34px 34px;transform:perspective(500px) rotateX(55deg) scale(1.35);transform-origin:bottom;opacity:.72}
.motion3-2d,.motion3-3d{z-index:1}
.motion3-2d i{border-radius:38% 62% 62% 38%/46% 42% 58% 54%;box-shadow:0 18px 50px rgba(243,91,43,.2);animation:m3-shape-morph 5.6s var(--m3-ease) infinite}
.motion3-2d i:nth-child(2){width:88px;height:88px;border-radius:18px;background:rgba(93,167,229,.9);mix-blend-mode:screen;animation:m3-shape-slide 5.6s var(--m3-ease) infinite}
.motion3-2d:after{content:"";position:absolute;width:160px;height:160px;border:1px dashed rgba(255,255,255,.32);border-radius:50%;animation:m3-spin 13s linear infinite}
.motion3-3d{transform-style:preserve-3d;animation:m3-scene-float 5s var(--m3-ease) infinite}
.motion3-3d i{inset:auto;width:112px;height:112px;border-radius:14px;background:linear-gradient(145deg,#f35b2b,#ad3316);box-shadow:28px 28px 0 rgba(47,102,143,.9),-16px -16px 0 rgba(93,167,229,.25);transform-style:preserve-3d;animation:m3-cube-orbit 8s var(--m3-ease) infinite}
.motion3-3d i:before,.motion3-3d i:after{content:"";position:absolute;inset:0;border-radius:14px;backface-visibility:hidden}
.motion3-3d i:before{background:rgba(93,167,229,.62);transform:rotateY(90deg) translateZ(54px)}
.motion3-3d i:after{background:rgba(255,255,255,.13);transform:rotateX(90deg) translateZ(54px)}

/* Logo laboratory: blueprint, path tracing and final reveal. */
.motion3-logo-sequence{position:relative}
.motion3-logo-sequence>div{position:relative;isolation:isolate;overflow:hidden;background:#0b2b43}
.motion3-logo-sequence>div:before,.motion3-logo-sequence>div:after{content:"";position:absolute;pointer-events:none}
.motion3-logo-sequence>div:nth-of-type(1){background-image:linear-gradient(rgba(93,167,229,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(93,167,229,.08) 1px,transparent 1px);background-size:18px 18px}
.motion3-logo-sequence>div:nth-of-type(1):before{width:112px;height:112px;border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 0 0 26px rgba(93,167,229,.06)}
.motion3-logo-sequence>div:nth-of-type(1):after{width:1px;height:160px;background:rgba(255,255,255,.18);box-shadow:-80px 80px 0 rgba(255,255,255,.12);transform:rotate(90deg)}
.motion3-logo-sequence>div:nth-of-type(1) b{font-size:0;width:58px;height:58px;border:9px solid #fff;border-radius:50%;transform:translateY(5px)}
.motion3-logo-sequence>div:nth-of-type(1) b:after{content:"";display:block;width:27px;height:9px;margin:39px 0 0 37px;background:#fff;transform:rotate(45deg);transform-origin:left}
.motion3-logo-sequence>div:nth-of-type(2):before{width:132px;height:132px;border:1px dashed rgba(93,167,229,.48);border-radius:50%;animation:m3-logo-path-spin 7s linear infinite}
.motion3-logo-sequence>div:nth-of-type(2):after{width:12px;height:12px;border-radius:50%;background:var(--m3-orange);box-shadow:0 0 0 8px rgba(243,91,43,.14);animation:m3-logo-path-dot 3.8s var(--m3-ease) infinite}
.motion3-logo-sequence .is-path b{-webkit-text-stroke:2px #fff;filter:drop-shadow(0 0 12px rgba(243,91,43,.35))}
.motion3-logo-sequence .is-final:before{inset:0;background:conic-gradient(from 120deg,transparent,rgba(255,255,255,.22),transparent 38%);animation:m3-logo-ray 4s linear infinite}
.motion3-logo-sequence .is-final b,.motion3-logo-sequence .is-final em{z-index:1}
.motion3-logo-sequence>i{animation:m3-logo-arrow 1.8s var(--m3-ease) infinite}
.motion3-logo-sequence.is-visible>div,.motion3-logo-sequence.is-playing>div{animation:m3-logo-step .7s var(--m3-ease) both}
.motion3-logo-sequence.is-visible>div:nth-of-type(2),.motion3-logo-sequence.is-playing>div:nth-of-type(2){animation-delay:.18s}
.motion3-logo-sequence.is-visible>div:nth-of-type(3),.motion3-logo-sequence.is-playing>div:nth-of-type(3){animation-delay:.36s}

/* Kinetic typography side panels are live demonstrations, not frozen icons. */
.motion3-type-stage__uses span{position:relative;min-height:76px;padding-inline-end:145px;overflow:hidden}
.motion3-type-stage__uses span:before,.motion3-type-stage__uses span:after{content:"";position:absolute;inset-inline-end:18px;top:50%;pointer-events:none}
.motion3-type-stage__uses span:nth-child(1):before{width:95px;height:19px;border-radius:4px;background:#fff;transform:translateY(-50%);clip-path:inset(0 100% 0 0);animation:m3-title-mask 4.5s var(--m3-ease) infinite}
.motion3-type-stage__uses span:nth-child(1):after{width:96px;height:3px;background:var(--m3-orange);transform:translateY(14px) scaleX(.15);transform-origin:right;animation:m3-title-line 4.5s var(--m3-ease) infinite}
.motion3-type-stage__uses span:nth-child(2):before{width:92px;height:42px;transform:translateY(-50%);background:linear-gradient(to top,var(--m3-orange) 0 100%) left bottom/16px 36% no-repeat,linear-gradient(to top,#5da7e5 0 100%) center bottom/16px 62% no-repeat,linear-gradient(to top,#20c9b2 0 100%) right bottom/16px 88% no-repeat;animation:m3-data-bars 4.5s var(--m3-ease) infinite}
.motion3-type-stage__uses span:nth-child(2):after{width:92px;height:1px;background:rgba(255,255,255,.3);transform:translateY(20px)}
.motion3-type-stage__uses span:nth-child(3):before{width:98px;height:7px;border-radius:5px;background:#fff;box-shadow:0 13px 0 rgba(255,255,255,.7),0 26px 0 rgba(93,167,229,.75);transform:translateY(-20px);animation:m3-caption-type 4.5s var(--m3-ease) infinite}
.motion3-type-stage__uses span:nth-child(3):after{width:3px;height:11px;background:var(--m3-orange);transform:translate(-91px,-20px);animation:m3-caption-caret 1s steps(2,end) infinite}
.motion3-type-stage__uses i{width:22px;text-align:center;animation:m3-icon-cue 3.2s var(--m3-ease) infinite}

/* Every delivery surface gets a different composition, not a resized Q tile. */
.motion3-format-preview>div{isolation:isolate;overflow:hidden;background:#0e3855;box-shadow:0 28px 70px rgba(0,0,0,.24)}
.motion3-format-preview>div:before,.motion3-format-preview>div:after{content:"";position:absolute;pointer-events:none}
.motion3-format-preview>div span{position:relative;z-index:2;width:96px;height:96px;font-size:0;border:0}
.motion3-format-preview>div b,.motion3-format-preview>div i{position:relative;z-index:2}
.motion3-format-preview>div[data-motion-format-frame=reel]{background:linear-gradient(160deg,#0e3855,#071d31)}
.motion3-format-preview>div[data-motion-format-frame=reel] span{border-radius:50%;background:radial-gradient(circle at 45% 40%,#fff 0 7%,#f35b2b 8% 30%,transparent 31%),conic-gradient(#5da7e5,#20c9b2,#f35b2b,#5da7e5);animation:m3-format-reel 5s var(--m3-ease) infinite}
.motion3-format-preview>div[data-motion-format-frame=reel]:before{inset:8%;border:1px solid rgba(255,255,255,.18);border-radius:18px}
.motion3-format-preview>div[data-motion-format-frame=reel]:after{left:18%;right:18%;top:12%;height:3px;border-radius:9px;background:linear-gradient(90deg,var(--m3-orange) 64%,rgba(255,255,255,.2) 64%)}
.motion3-format-preview>div[data-motion-format-frame=feed]{background:#f2f6f8;color:var(--m3-ink)}
.motion3-format-preview>div[data-motion-format-frame=feed] span{width:150px;height:132px;border-radius:18px;background:linear-gradient(135deg,var(--m3-orange) 0 48%,transparent 49%),linear-gradient(225deg,#5da7e5 0 48%,#0d304a 49%);box-shadow:-22px 18px 0 rgba(7,29,49,.09);animation:m3-format-feed 4.8s var(--m3-ease) infinite}
.motion3-format-preview>div[data-motion-format-frame=feed] i{background:linear-gradient(90deg,var(--m3-orange) 0 28%,#a8bbc7 28% 42%,#a8bbc7 42% 56%,#a8bbc7 56%);height:5px;border-radius:9px}
.motion3-format-preview>div[data-motion-format-frame=landscape]{background:linear-gradient(90deg,#071d31 0 55%,#f35b2b 55%)}
.motion3-format-preview>div[data-motion-format-frame=landscape] span{width:142px;height:82px;border:2px solid rgba(255,255,255,.7);border-radius:50%;animation:m3-format-landscape 5.2s var(--m3-ease) infinite}
.motion3-format-preview>div[data-motion-format-frame=landscape] span:after{content:"";position:absolute;left:52px;top:20px;border-left:34px solid #fff;border-top:19px solid transparent;border-bottom:19px solid transparent}
.motion3-format-preview>div[data-motion-format-frame=display]{background:linear-gradient(160deg,#f6f8fa,#dfe8ed);color:var(--m3-ink)}
.motion3-format-preview>div[data-motion-format-frame=display] span{width:120px;height:120px;border-radius:24px;background:#fff;box-shadow:0 24px 48px rgba(7,29,49,.16)}
.motion3-format-preview>div[data-motion-format-frame=display] span:before{content:"25%";position:absolute;inset:26px 15px auto;padding:10px;border-radius:9px;background:var(--m3-orange);color:#fff;font-size:22px;font-weight:950;text-align:center;animation:m3-format-offer 4s var(--m3-ease) infinite}
.motion3-format-preview>div[data-motion-format-frame=web]{background:#071d31}
.motion3-format-preview>div[data-motion-format-frame=web] span{width:140px;height:140px;border:1px dashed #5da7e5;border-radius:50%;animation:m3-spin 9s linear infinite}
.motion3-format-preview>div[data-motion-format-frame=web] span:before,.motion3-format-preview>div[data-motion-format-frame=web] span:after{content:"";position:absolute;border-radius:50%}
.motion3-format-preview>div[data-motion-format-frame=web] span:before{left:14px;top:8px;width:18px;height:18px;background:var(--m3-orange);box-shadow:0 0 0 7px rgba(243,91,43,.12)}
.motion3-format-preview>div[data-motion-format-frame=web] span:after{inset:34px;border:3px solid #20c9b2;border-left-color:transparent}
.motion3-format-preview>div.is-switching{animation:m3-format-switch .55s var(--m3-ease)}

/* Before / after: static hierarchy versus a choreographed reading path. */
.motion3-transformer__static b,.motion3-transformer__motion b{font-size:0;width:210px;height:210px;border-radius:20px}
.motion3-transformer__static b{position:relative;background:#eef3f5;box-shadow:0 20px 50px rgba(0,0,0,.14)}
.motion3-transformer__static b:before{content:"";position:absolute;inset:25px 25px 92px;background:#9eb0bc;border-radius:10px}
.motion3-transformer__static b:after{content:"";position:absolute;left:25px;right:25px;bottom:28px;height:14px;border-radius:8px;background:#fff;box-shadow:0 -28px 0 #cbd7de}
.motion3-transformer__motion b{position:relative;background:linear-gradient(145deg,#f35b2b,#a93116);box-shadow:0 28px 70px rgba(243,91,43,.24);animation:m3-campaign-card 4.8s var(--m3-ease) infinite}
.motion3-transformer__motion b:before{content:"";position:absolute;left:30px;right:30px;top:32px;height:44px;border-radius:10px;background:#fff;clip-path:inset(0 100% 0 0);animation:m3-campaign-copy 4.8s var(--m3-ease) infinite}
.motion3-transformer__motion b:after{content:"";position:absolute;left:30px;bottom:32px;width:86px;height:24px;border:2px solid #fff;border-radius:20px;animation:m3-campaign-cta 4.8s var(--m3-ease) infinite}
.motion3-transformer__static span,.motion3-transformer__motion span{position:absolute;top:24px;padding:7px 11px;border:1px solid rgba(255,255,255,.22);border-radius:20px;font-size:10px;letter-spacing:.12em}
.motion3-transformer__motion i{width:300px;height:300px;animation:m3-spin 13s linear infinite}

/* Sound is a full beat map instead of a small frozen waveform card. */
.motion3-sound .motion3-split{grid-template-columns:1.12fr .88fr;gap:clamp(45px,7vw,100px)}
.motion3-soundboard{position:relative;min-height:430px;box-shadow:0 30px 75px rgba(7,29,49,.09)}
.motion3-soundboard header{min-height:92px}
.motion3-waveform{height:270px;padding:52px 24px;background-image:linear-gradient(rgba(7,29,49,.05) 1px,transparent 1px);background-size:100% 54px}
.motion3-waveform:before{content:"BEAT 01     VO IN     SFX HIT     BEAT 02";position:absolute;left:24px;right:24px;top:15px;color:#7891a3;font:800 8px/1.2 monospace;word-spacing:26px;letter-spacing:.08em}
.motion3-waveform:after{content:"";position:absolute;right:9%;top:50%;width:42px;height:42px;border:1px solid rgba(243,91,43,.45);border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 18px rgba(243,91,43,.07);animation:m3-beat-ring 2s var(--m3-ease) infinite}
.motion3-waveform>i:nth-child(4n){background:#5da7e5;animation:m3-wave-idle 3.2s var(--m3-ease) infinite}
.motion3-waveform>i:nth-child(8n){background:var(--m3-orange);animation-delay:-1.1s}
.motion3-soundboard.is-playing .motion3-waveform>i{animation:m3-wave-live .8s var(--m3-ease) infinite alternate;animation-delay:-.12s}
.motion3-soundboard.is-playing .motion3-waveform>i:nth-child(3n){animation-delay:-.34s}
.motion3-soundboard.is-playing .motion3-waveform>i:nth-child(4n){animation-delay:-.56s}
.motion3-soundboard.is-playing .motion3-waveform>i:nth-child(5n){animation-delay:-.72s}
.motion3-soundboard.is-playing .motion3-waveform>span{animation:m3-wave-play 4s linear 1}

/* Every workflow stage owns a different production-monitor scene. */
.motion3-workflow__panel{position:relative;min-height:500px;align-items:center;isolation:isolate}
.motion3-workflow__panel article{position:relative;z-index:2;padding-top:150px;animation:m3-workflow-enter .55s var(--m3-ease) both}
.motion3-workflow__panel article:before,.motion3-workflow__panel article:after{content:"";position:absolute;pointer-events:none}
.motion3-workflow__panel article:before{left:0;right:0;top:0;height:116px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:#071d31;box-shadow:inset 0 0 35px rgba(93,167,229,.04)}
.motion3-workflow__panel article:after{top:31px;left:32px;width:52%;height:54px;border-radius:8px;background:linear-gradient(90deg,var(--m3-orange),var(--m3-orange)) 0 0/16% 8px no-repeat,linear-gradient(90deg,#5da7e5,#5da7e5) 0 23px/72% 7px no-repeat,linear-gradient(90deg,#7891a3,#7891a3) 0 46px/48% 5px no-repeat;animation:m3-workflow-screen 3.8s var(--m3-ease) infinite}
.motion3-workflow__panel article[data-motion-workflow-panel="1"]:after{width:70%;background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(255,255,255,.25) 13px 14px),linear-gradient(90deg,var(--m3-orange) 24%,transparent 24%);animation:m3-brief-write 4s var(--m3-ease) infinite}
.motion3-workflow__panel article[data-motion-workflow-panel="2"]:after{width:78%;height:48px;background:linear-gradient(90deg,#5da7e5 0 18%,transparent 18% 21%,var(--m3-orange) 21% 49%,transparent 49% 52%,#20c9b2 52% 80%,transparent 80%);animation:m3-script-track 4.6s var(--m3-ease) infinite}
.motion3-workflow__panel article[data-motion-workflow-panel="3"]:after{width:76%;height:62px;background:linear-gradient(90deg,#123c5a 0 30%,transparent 30% 35%,#1b4e70 35% 65%,transparent 65% 70%,#f35b2b 70%);animation:m3-story-pan 5s var(--m3-ease) infinite}
.motion3-workflow__panel article[data-motion-workflow-panel="4"]:after{width:82px;height:82px;top:17px;border-radius:50%;background:conic-gradient(var(--m3-orange) 0 32%,#5da7e5 32% 68%,#20c9b2 68%);animation:m3-palette-turn 7s linear infinite}
.motion3-workflow__panel article[data-motion-workflow-panel="5"]:after{width:92px;height:64px;border:1px dashed #5da7e5;border-radius:50%;background:radial-gradient(circle,var(--m3-orange) 0 8px,transparent 9px);animation:m3-motion-path 3.6s var(--m3-ease) infinite}
.motion3-workflow__panel article[data-motion-workflow-panel="6"]:after{width:75%;height:56px;background:repeating-linear-gradient(90deg,#5da7e5 0 5px,transparent 5px 12px);clip-path:polygon(0 45%,5% 15%,10% 70%,15% 22%,20% 78%,25% 35%,30% 62%,35% 8%,40% 85%,45% 30%,50% 60%,55% 18%,60% 76%,65% 38%,70% 66%,75% 25%,80% 82%,85% 42%,90% 65%,95% 20%,100% 50%,100% 100%,0 100%);animation:m3-sound-shift 2.8s var(--m3-ease) infinite}
.motion3-workflow__panel article[data-motion-workflow-panel="7"]:after{width:84%;height:12px;top:54px;border-radius:9px;background:linear-gradient(90deg,var(--m3-orange) 0 72%,rgba(255,255,255,.1) 72%);animation:m3-render-pass 3s var(--m3-ease) infinite}
.motion3-workflow__panel article[data-motion-workflow-panel="8"]:after{width:78%;height:66px;top:25px;background:linear-gradient(90deg,#173d58 0 48%,var(--m3-orange) 48% 51%,#284d66 51%);animation:m3-review-wipe 4.2s var(--m3-ease) infinite}
.motion3-workflow__panel article[data-motion-workflow-panel="9"]:after{width:72%;height:64px;background:linear-gradient(135deg,#fff 0 26%,transparent 27%) 0 0/33% 100% repeat-x;filter:drop-shadow(0 10px 0 rgba(93,167,229,.22));animation:m3-delivery-stack 3.8s var(--m3-ease) infinite}
.motion3-workflow__panel aside{position:relative;z-index:2}

@keyframes m3-board-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes m3-board-target{0%,100%{transform:translate(-50%,-50%) scale(.78)}48%{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 18px rgba(243,91,43,0)}}
@keyframes m3-board-scan{0%,100%{transform:translateY(-28px);opacity:.35}50%{transform:translateY(28px);opacity:1}}
@keyframes m3-board-node-a{0%,100%{transform:translate(0,0)}50%{transform:translate(45px,-34px)}}
@keyframes m3-board-node-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-38px,42px)}}
@keyframes m3-board-bars{0%,100%{scale:1 .45}50%{scale:1 1}}
@keyframes m3-board-card{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes m3-board-cta{0%,44%,100%{transform:scale(1)}55%{transform:scale(.9)}68%{transform:scale(1.08)}}
@keyframes m3-shape-morph{0%,100%{transform:translate(-28px,12px) rotate(-8deg);border-radius:38% 62% 62% 38%/46% 42% 58% 54%}50%{transform:translate(24px,-10px) rotate(18deg);border-radius:18px 60px 20px 52px}}
@keyframes m3-shape-slide{0%,100%{transform:translate(38px,-20px) rotate(20deg)}50%{transform:translate(-24px,34px) rotate(-18deg)}}
@keyframes m3-scene-float{0%,100%{transform:translateY(8px)}50%{transform:translateY(-10px)}}
@keyframes m3-cube-orbit{0%,100%{transform:rotateX(55deg) rotateZ(35deg) rotateY(0)}50%{transform:rotateX(64deg) rotateZ(225deg) rotateY(18deg)}}
@keyframes m3-logo-path-spin{to{transform:rotate(360deg)}}
@keyframes m3-logo-path-dot{0%,100%{transform:translate(-48px,-40px) scale(.8)}50%{transform:translate(52px,38px) scale(1.15)}}
@keyframes m3-logo-ray{to{transform:rotate(360deg)}}
@keyframes m3-logo-arrow{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(-5px);opacity:1}}
@keyframes m3-title-mask{0%,15%{clip-path:inset(0 100% 0 0)}48%,78%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes m3-title-line{0%,18%{transform:translateY(14px) scaleX(.12)}55%,80%{transform:translateY(14px) scaleX(1)}100%{transform:translateY(14px) scaleX(.12)}}
@keyframes m3-data-bars{0%,100%{transform:translateY(-50%) scaleY(.25)}45%,70%{transform:translateY(-50%) scaleY(1)}}
@keyframes m3-caption-type{0%,12%{clip-path:inset(0 100% 0 0)}55%,82%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes m3-caption-caret{50%{opacity:0}}
@keyframes m3-icon-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes m3-format-reel{0%,100%{transform:rotate(-8deg) scale(.92)}50%{transform:rotate(12deg) scale(1.06)}}
@keyframes m3-format-feed{0%,100%{transform:translateY(4px) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes m3-format-landscape{0%,100%{transform:translateX(-18px)}50%{transform:translateX(22px)}}
@keyframes m3-format-offer{0%,100%{transform:scale(.88)}45%,70%{transform:scale(1.08)}}
@keyframes m3-format-switch{0%{opacity:.45;transform:scale(.95) rotate(-1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes m3-campaign-card{0%,100%{transform:translateY(5px) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes m3-campaign-copy{0%,15%{clip-path:inset(0 100% 0 0)}55%,100%{clip-path:inset(0)}}
@keyframes m3-campaign-cta{0%,48%,100%{transform:scale(1)}62%{transform:scale(.88)}75%{transform:scale(1.06)}}
@keyframes m3-beat-ring{0%,100%{transform:translateY(-50%) scale(.6);opacity:.2}50%{transform:translateY(-50%) scale(1.25);opacity:1}}
@keyframes m3-wave-idle{0%,100%{scale:1 .72}50%{scale:1 1}}
@keyframes m3-wave-live{to{scale:1 .35}}
@keyframes m3-workflow-enter{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes m3-workflow-screen{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(22px);opacity:1}}
@keyframes m3-brief-write{0%,100%{clip-path:inset(0 72% 0 0)}55%{clip-path:inset(0)}}
@keyframes m3-script-track{0%,100%{transform:scaleX(.65);transform-origin:right}50%{transform:scaleX(1);transform-origin:right}}
@keyframes m3-story-pan{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@keyframes m3-palette-turn{to{transform:rotate(360deg)}}
@keyframes m3-motion-path{0%,100%{transform:translateX(0) rotate(-8deg)}50%{transform:translateX(60px) rotate(12deg)}}
@keyframes m3-sound-shift{0%,100%{transform:scaleY(.62)}50%{transform:scaleY(1)}}
@keyframes m3-render-pass{0%{background-size:5% 100%;background-repeat:no-repeat}75%,100%{background-size:92% 100%;background-repeat:no-repeat}}
@keyframes m3-review-wipe{0%,100%{clip-path:inset(0 54% 0 0)}50%{clip-path:inset(0 7% 0 0)}}
@keyframes m3-delivery-stack{0%,100%{transform:translateY(4px)}50%{transform:translateY(-7px)}}

@media(max-width:780px){.motion3-logo-sequence>i{animation-name:m3-logo-arrow-mobile}.motion3-type-stage__uses span{padding-inline-end:122px}.motion3-sound .motion3-split{grid-template-columns:1fr}.motion3-workflow__panel{min-height:0}}
@media(max-width:520px){.motion3-storyboard__strip{gap:18px}.motion3-board__frame{height:180px}.motion3-dimension-stage{gap:22px}.motion3-dimension-visual{height:300px}.motion3-type-stage__uses span{padding-inline-end:110px}.motion3-type-stage__uses span:before,.motion3-type-stage__uses span:after{inset-inline-end:12px;scale:.82}.motion3-format-preview{gap:28px}.motion3-format-preview>div{max-height:360px}.motion3-transformer__static b,.motion3-transformer__motion b{width:155px;height:180px}.motion3-transformer__motion i{width:220px;height:220px}.motion3-soundboard{min-height:390px}.motion3-waveform{height:230px;padding-inline:14px;gap:3px}.motion3-workflow__panel article{padding-top:138px}}
@keyframes m3-logo-arrow-mobile{0%,100%{transform:rotate(-90deg) translateX(0);opacity:.45}50%{transform:rotate(-90deg) translateX(-5px);opacity:1}}
@media(prefers-reduced-motion:reduce){.motion3-board__frame *,.motion3-dimension-visual *,.motion3-logo-sequence *,.motion3-type-stage__uses *,.motion3-format-preview>div,.motion3-format-preview>div *,.motion3-transformer__canvas *,.motion3-waveform *,.motion3-workflow__panel article,.motion3-workflow__panel article:after{animation:none!important}}

/* Category explorer: each service type previews its own production grammar. */
.motion3-category-preview article{animation:m3-category-enter .55s var(--m3-ease) both}
.motion3-category-preview__visual:before,.motion3-category-preview__visual:after{content:"";position:absolute;pointer-events:none}
.motion3-category-preview article[data-motion-category-panel=explainer] .motion3-category-preview__visual>span{width:230px;height:120px;border-radius:18px;animation:m3-explainer-route 5s var(--m3-ease) infinite}
.motion3-category-preview article[data-motion-category-panel=explainer] .motion3-category-preview__visual:before{width:46px;height:46px;border-radius:50%;background:#5da7e5;transform:translateX(-90px);box-shadow:90px 0 0 var(--m3-orange),180px 0 0 #20c9b2}
.motion3-category-preview article[data-motion-category-panel=explainer] .motion3-category-preview__visual>em{width:180px;animation:m3-explainer-line 5s var(--m3-ease) infinite}
.motion3-category-preview article[data-motion-category-panel=logo] .motion3-category-preview__visual>span{width:190px;height:190px;border-style:solid;border-color:rgba(243,91,43,.3);box-shadow:inset 0 0 0 28px rgba(93,167,229,.05);animation:m3-logo-path-spin 8s linear infinite}
.motion3-category-preview article[data-motion-category-panel=logo] .motion3-category-preview__visual>i{border-radius:50% 50% 12px 50%;animation:m3-logo-mark 4.2s var(--m3-ease) infinite}
.motion3-category-preview article[data-motion-category-panel=product] .motion3-category-preview__visual{perspective:700px}
.motion3-category-preview article[data-motion-category-panel=product] .motion3-category-preview__visual>span{width:120px;height:120px;border:0;border-radius:14px;background:linear-gradient(145deg,#5da7e5,#174c70);box-shadow:32px 30px 0 rgba(243,91,43,.8);animation:m3-product-turn 6s var(--m3-ease) infinite}
.motion3-category-preview article[data-motion-category-panel=product] .motion3-category-preview__visual>i{background:#fff;color:var(--m3-orange);animation:m3-feature-focus 4s var(--m3-ease) infinite}
.motion3-category-preview article[data-motion-category-panel=social] .motion3-category-preview__visual>span{width:126px;height:190px;border:5px solid #5da7e5;border-radius:24px;background:linear-gradient(#0d304a,#0d304a) padding-box;animation:m3-phone-story 5s var(--m3-ease) infinite}
.motion3-category-preview article[data-motion-category-panel=social] .motion3-category-preview__visual:before{z-index:3;top:26px;width:92px;height:3px;border-radius:6px;background:linear-gradient(90deg,var(--m3-orange) 66%,rgba(255,255,255,.2) 66%)}
.motion3-category-preview article[data-motion-category-panel=social] .motion3-category-preview__visual>i{width:58px;height:58px;border-radius:50%;animation:m3-social-cta 3.8s var(--m3-ease) infinite}
.motion3-category-preview article[data-motion-category-panel=corporate] .motion3-category-preview__visual>span{width:240px;height:130px;border:0;border-bottom:1px solid #5da7e5;border-radius:0;background:linear-gradient(to top,#5da7e5 0 100%) 12% bottom/22px 34% no-repeat,linear-gradient(to top,#20c9b2 0 100%) 38% bottom/22px 62% no-repeat,linear-gradient(to top,var(--m3-orange) 0 100%) 64% bottom/22px 82% no-repeat,linear-gradient(to top,#5da7e5 0 100%) 90% bottom/22px 51% no-repeat;animation:m3-corporate-bars 5s var(--m3-ease) infinite}
.motion3-category-preview article[data-motion-category-panel=corporate] .motion3-category-preview__visual>i{width:54px;height:54px;transform:translateY(-72px);animation:m3-corporate-cue 5s var(--m3-ease) infinite}

/* Journey cards reveal different production actions instead of repeating icon tiles. */
.motion3-journey__rail article{overflow:hidden;isolation:isolate;transition:transform .3s var(--m3-ease),border-color .3s}
.motion3-journey__rail article:after{content:"";position:absolute;z-index:-1;inset:auto -20% -65% 15%;height:120px;border-radius:50%;background:rgba(93,167,229,.06);transition:transform .4s var(--m3-ease)}
.motion3-journey__rail article:hover{transform:translateY(-8px);border-color:rgba(243,91,43,.55)}
.motion3-journey__rail article:hover:after{transform:scale(1.35)}
.motion3-journey__rail article:nth-child(1)>i{animation:m3-journey-seed 3.8s var(--m3-ease) infinite}
.motion3-journey__rail article:nth-child(2)>i{animation:m3-journey-page 4s var(--m3-ease) infinite}
.motion3-journey__rail article:nth-child(3)>i{animation:m3-journey-pen 3.6s var(--m3-ease) infinite}
.motion3-journey__rail article:nth-child(4)>i{animation:m3-journey-frames 4.2s steps(4,end) infinite}

/* Product scene uses a feature lens rather than another repeated letter tile. */
.motion3-product-object b{font-size:0;width:78px;height:102px;border-radius:18px;background:linear-gradient(150deg,#f35b2b,#a93216);box-shadow:inset 0 0 0 8px rgba(255,255,255,.15)}
.motion3-product-object b:before{content:"";display:block;width:34px;height:34px;margin:20px auto 0;border:2px solid #fff;border-radius:50%;animation:m3-product-lens 3.8s var(--m3-ease) infinite}
.motion3-product-object b:after{content:"";display:block;width:38px;height:5px;margin:15px auto;border-radius:7px;background:#fff;box-shadow:0 10px 0 rgba(255,255,255,.55)}

/* Pipeline icons become five live production instruments. */
.motion3-pipeline__map article>i{position:relative;overflow:hidden;font-size:0;isolation:isolate}
.motion3-pipeline__map article>i:before,.motion3-pipeline__map article>i:after{content:"";position:absolute}
.motion3-pipeline__map article:nth-of-type(1)>i:before{inset:14px 10px;background:repeating-linear-gradient(0deg,var(--m3-orange) 0 3px,transparent 3px 8px);animation:m3-pipe-write 3.5s var(--m3-ease) infinite}
.motion3-pipeline__map article:nth-of-type(1)>i:after{right:10px;bottom:9px;width:4px;height:20px;background:#5da7e5;transform:rotate(25deg)}
.motion3-pipeline__map article:nth-of-type(2)>i:before{inset:10px;border:2px solid #5da7e5;border-radius:50%;animation:m3-spin 5s linear infinite}
.motion3-pipeline__map article:nth-of-type(2)>i:after{left:21px;top:16px;border-left:14px solid var(--m3-orange);border-top:10px solid transparent;border-bottom:10px solid transparent}
.motion3-pipeline__map article:nth-of-type(3)>i:before{inset:10px;background:linear-gradient(90deg,var(--m3-orange) 0 4px,transparent 4px) 7px 0/12px 100% repeat-x;animation:m3-pipe-sliders 3.8s var(--m3-ease) infinite}
.motion3-pipeline__map article:nth-of-type(3)>i:after{left:9px;right:9px;top:24px;height:5px;border-radius:6px;background:#5da7e5}
.motion3-pipeline__map article:nth-of-type(4)>i:before{left:8px;top:12px;width:25px;height:17px;border:2px solid var(--m3-orange);border-radius:9px;box-shadow:12px 13px 0 -1px #5da7e5;animation:m3-pipe-review 3.6s var(--m3-ease) infinite}
.motion3-pipeline__map article:nth-of-type(5)>i:before{left:10px;top:17px;width:32px;height:24px;border-radius:5px;background:#5da7e5;clip-path:polygon(0 15%,40% 15%,48% 0,100% 0,100% 100%,0 100%);animation:m3-pipe-deliver 4s var(--m3-ease) infinite}
.motion3-pipeline__map article:nth-of-type(5)>i:after{left:24px;top:9px;width:3px;height:22px;background:var(--m3-orange);box-shadow:-5px 5px 0 -1px var(--m3-orange),5px 5px 0 -1px var(--m3-orange)}

/* Creative-direction symbols communicate eight rules with restrained motion. */
.motion3-direction__board article{position:relative;overflow:hidden}
.motion3-direction__board article:after{content:"";position:absolute;inset:auto -18px -28px auto;width:82px;height:82px;border:1px solid rgba(93,167,229,.18);border-radius:50%;transition:transform .45s var(--m3-ease)}
.motion3-direction__board article:hover:after{transform:scale(1.6)}
.motion3-direction__board article:nth-child(4n+1)>i{animation:m3-direction-shape 4.2s var(--m3-ease) infinite}
.motion3-direction__board article:nth-child(4n+2)>i{animation:m3-direction-colour 4.8s var(--m3-ease) infinite}
.motion3-direction__board article:nth-child(4n+3)>i{animation:m3-direction-story 4s var(--m3-ease) infinite}
.motion3-direction__board article:nth-child(4n)>i{animation:m3-direction-pace 3.6s var(--m3-ease) infinite}

/* Knowledge flow visibly passes a decision from brief to delivery. */
.motion3-knowledge__diagram i{position:relative;overflow:visible}
.motion3-knowledge__diagram i:after{content:"";position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;background:var(--m3-orange);transform:translateY(-50%);animation:m3-knowledge-flow 3.6s var(--m3-ease) infinite}
.motion3-knowledge__diagram i:nth-of-type(2):after{animation-delay:.35s}.motion3-knowledge__diagram i:nth-of-type(3):after{animation-delay:.7s}

@keyframes m3-category-enter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes m3-explainer-route{0%,100%{transform:scale(.86)}50%{transform:scale(1)}}@keyframes m3-explainer-line{0%{clip-path:inset(0 100% 0 0)}65%,100%{clip-path:inset(0)}}
@keyframes m3-logo-mark{0%,100%{transform:rotate(-14deg) scale(.88);border-radius:50% 50% 12px 50%}50%{transform:rotate(42deg) scale(1.08);border-radius:18px}}
@keyframes m3-product-turn{0%,100%{transform:rotateX(10deg) rotateY(-18deg)}50%{transform:rotateX(-8deg) rotateY(32deg)}}@keyframes m3-feature-focus{0%,100%{transform:scale(.8)}50%{transform:scale(1.08);box-shadow:0 0 0 20px rgba(243,91,43,0)}}
@keyframes m3-phone-story{0%,100%{transform:translateY(5px) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}@keyframes m3-social-cta{0%,45%,100%{transform:scale(1)}60%{transform:scale(.82)}72%{transform:scale(1.12)}}
@keyframes m3-corporate-bars{0%,100%{transform:scaleY(.5);transform-origin:bottom}50%{transform:scaleY(1);transform-origin:bottom}}@keyframes m3-corporate-cue{0%,100%{transform:translateY(-72px)}50%{transform:translate(50px,-72px)}}
@keyframes m3-journey-seed{0%,100%{transform:translateY(3px) scale(.8)}50%{transform:translateY(-5px) scale(1.1)}}@keyframes m3-journey-page{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}@keyframes m3-journey-pen{0%,100%{transform:translateX(-5px) rotate(-8deg)}50%{transform:translateX(9px) rotate(8deg)}}@keyframes m3-journey-frames{0%{transform:translateX(0)}100%{transform:translateX(10px)}}
@keyframes m3-product-lens{0%,100%{transform:scale(.75);box-shadow:0 0 0 0 rgba(255,255,255,.2)}50%{transform:scale(1);box-shadow:0 0 0 10px rgba(255,255,255,0)}}
@keyframes m3-pipe-write{0%,100%{clip-path:inset(0 70% 0 0)}55%{clip-path:inset(0)}}@keyframes m3-pipe-sliders{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}@keyframes m3-pipe-review{0%,100%{transform:translateX(-3px)}50%{transform:translateX(5px)}}@keyframes m3-pipe-deliver{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}
@keyframes m3-direction-shape{0%,100%{transform:rotate(-8deg) scale(.92)}50%{transform:rotate(10deg) scale(1.05)}}@keyframes m3-direction-colour{0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(75deg)}}@keyframes m3-direction-story{0%,100%{transform:translateX(-3px)}50%{transform:translateX(5px)}}@keyframes m3-direction-pace{0%,100%{transform:scale(.9)}50%{transform:scale(1.08)}}
@keyframes m3-knowledge-flow{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}

@media(prefers-reduced-motion:reduce){.motion3-category-preview *,.motion3-journey__rail *,.motion3-product-object *,.motion3-pipeline__map *,.motion3-direction__board *,.motion3-knowledge__diagram *{animation:none!important}}