/* Motion refinement of the existing ten illustrations. No layout or artwork replacement. */
.sm-shot{animation:so-storyboard 7.2s cubic-bezier(.22,.75,.2,1) infinite}
.sm-shot-two{animation-delay:0.324s}.sm-shot-three{animation-delay:0.648s}
.sm-camera-setup{transform-origin:60% 85%;animation:so-camera 7.2s cubic-bezier(.22,.75,.2,1) infinite}
.sm-light-beam{animation:so-light 7.2s ease-in-out infinite}
.sm-script-lines i{animation-name:so-write}
.sm-platform{animation-name:so-platform}
.sm-post-main{animation-name:so-post}
.sm-reel{animation-name:so-reel}
.sm-profile-grid>span{animation-name:so-feed}
.sm-logo-circle{animation-name:so-guides}
.sm-brand-mark>i{animation:so-mark-left 7.2s cubic-bezier(.22,.75,.2,1) infinite}
.sm-brand-mark>b{animation:so-mark-right 7.2s cubic-bezier(.22,.75,.2,1) infinite}
.sm-poster-mark{animation:so-poster-mark 7.2s ease-in-out infinite}
.sm-search-bar{animation:so-query 7.2s cubic-bezier(.22,.75,.2,1) infinite}
.sm-result{animation:so-result 7.2s cubic-bezier(.22,.75,.2,1) infinite}
.sp-video-track>div:first-child{animation:so-cut 8.64s cubic-bezier(.65,0,.25,1) infinite}
.sp-title-track{animation:so-titles-track 8.64s cubic-bezier(.22,.75,.2,1) infinite;transform-origin:left}
.sp-audio-track>svg{animation:so-audio-track 8.64s ease-in-out infinite;transform-origin:left}
.sp-grade-curve>path:nth-child(2){stroke-dasharray:130;animation:so-curve 8.64s ease-in-out infinite}
.sp-edit-monitor .sp-product-art{animation:so-footage 8.64s cubic-bezier(.4,0,.2,1) infinite;transform-origin:50% 58%}
.sp-edit .sp-process>span{animation:so-edit-step 8.64s linear infinite;font-weight:700}
.sp-edit .sp-process>span:nth-of-type(2){animation-delay:-6.48s}.sp-edit .sp-process>span:nth-of-type(3){animation-delay:-4.32s}.sp-edit .sp-process>span:nth-of-type(4){animation-delay:-2.16s}
.sp-edit .sp-process>span i{color:inherit}
.sp-wire-body b,.sp-wire-cards i{transform-origin:left;animation:so-wireframe 7.92s ease-in-out infinite}
.sp-wire-body b:nth-child(2){animation-delay:0.108s}.sp-wire-body b:nth-child(3){animation-delay:0.216s}
.sp-site-cards>span{transform-origin:bottom;animation:so-web-card 7.92s cubic-bezier(.22,.75,.2,1) infinite}
.sp-site-cards>span:nth-child(2){animation-delay:0.18s}.sp-site-cards>span:nth-child(3){animation-delay:0.36s}
.sp-motion-path>path:first-child{stroke-dasharray:480;animation:so-motion-path 7.2s ease-in-out infinite}
.sp-keyframe-lanes i{animation:so-keyframe 7.2s ease-in-out infinite}
.sp-keyframe-lanes i:nth-child(2){animation-delay:0.288s}.sp-keyframe-lanes i:nth-child(3){animation-delay:0.576s}.sp-keyframe-lanes i:nth-child(4){animation-delay:0.864s}
.sp-variant-one{animation:so-variant 7.2s cubic-bezier(.22,.75,.2,1) infinite}
.sp-variant-three{animation:so-variant 7.2s 0.432s cubic-bezier(.22,.75,.2,1) infinite}
.sp-mail-cta{animation:so-mail-action 7.92s ease-in-out infinite}
@keyframes so-storyboard{0%,100%{opacity:.3;transform:translateY(12%) scale(.94)}28%{opacity:1;transform:translateY(0) scale(1)}58%{opacity:1;transform:translateY(-2%) scale(1.015)}80%{opacity:1;transform:translateY(1%) scale(.995)}}
@keyframes so-camera{0%,100%{transform:translateX(8%) rotate(4deg);opacity:.45}34%{transform:translateX(0) rotate(0);opacity:1}62%{transform:translateX(-1.5%) rotate(-1deg);opacity:1}82%{transform:translateX(1%) rotate(.5deg);opacity:1}}
@keyframes so-light{0%,100%{opacity:0;transform:scale(.75);transform-origin:80% 20%}38%{opacity:.85;transform:scale(.97);transform-origin:80% 20%}62%{opacity:1;transform:scale(1.04);transform-origin:80% 20%}82%{opacity:.65;transform:scale(.94);transform-origin:80% 20%}}
@keyframes so-write{0%,100%{transform:scaleX(.05)}32%{transform:scaleX(.75)}60%{transform:scaleX(1)}80%{transform:scaleX(.9)}}
@keyframes so-platform{0%,100%{border-color:#111;transform:translateY(8%);opacity:.5}32%{border-color:#e5332a;transform:translateY(0);opacity:1}60%{border-color:#e5332a;transform:translateY(-3%);opacity:1}82%{border-color:#111;transform:translateY(1%);opacity:.9}}
@keyframes so-post{0%,100%{transform:translateY(10%) rotate(-8deg);opacity:.55}30%{transform:translateY(0) rotate(0);opacity:1}60%{transform:translateY(-2%) rotate(1.5deg);opacity:1}82%{transform:translateY(1%) rotate(-1deg);opacity:1}}
@keyframes so-reel{0%,100%{transform:translateY(14%) rotate(11deg);opacity:.4}36%{transform:translateY(0) rotate(4deg);opacity:1}62%{transform:translateY(-3%) rotate(2deg);opacity:1}84%{transform:translateY(1%) rotate(5deg);opacity:1}}
@keyframes so-feed{0%,100%{transform:translateY(20%) scale(.92);opacity:.25}40%{transform:translateY(0) scale(1);opacity:1}64%{transform:translateY(-3%) scale(1.025);opacity:1}84%{transform:translateY(1%) scale(.99);opacity:.9}}
@keyframes so-guides{0%,100%{opacity:.55;transform:scale(.75)}28%{opacity:.55;transform:scale(1)}56%{opacity:.15;transform:scale(1.04)}80%{opacity:.3;transform:scale(.96)}}
@keyframes so-mark-left{0%,100%{transform:translate(-12%,12%) rotate(-8deg);opacity:.3}30%{transform:translate(0,0) rotate(0);opacity:1}60%{transform:translate(1%,-1%) rotate(1deg);opacity:1}82%{transform:translate(-1%,1%) rotate(-1deg);opacity:1}}
@keyframes so-mark-right{0%,100%{transform:translate(14%,-16%) rotate(12deg);opacity:.3}34%{transform:translate(0,0) rotate(0);opacity:1}62%{transform:translate(-1%,1%) rotate(-1deg);opacity:1}84%{transform:translate(1%,-1%) rotate(1deg);opacity:1}}
@keyframes so-poster-mark{0%,100%{transform:scale(.8) rotate(-10deg)}38%{transform:scale(1) rotate(0)}64%{transform:scale(1.035) rotate(3deg)}84%{transform:scale(.98) rotate(-2deg)}}
@keyframes so-query{0%,100%{clip-path:inset(0 80% 0 0)}34%{clip-path:inset(0 8% 0 0)}60%{clip-path:inset(0)}82%{clip-path:inset(0 12% 0 0)}}
@keyframes so-result{0%,100%{transform:translateY(15%);opacity:.35;box-shadow:inset 0 0 0 #e5332a}38%{transform:translateY(0);opacity:1;box-shadow:inset .2cqw 0 0 #e5332a}64%{transform:translateY(-2%);opacity:1;box-shadow:inset .3cqw 0 0 #e5332a}84%{transform:translateY(1%);opacity:.95;box-shadow:inset .15cqw 0 0 #e5332a}}
/* A trim reveals a shorter clip; it must not squash its thumbnail contents. */
@keyframes so-cut{0%,100%{clip-path:inset(0)}28%{clip-path:inset(0 17.0213% 0 0)}54%{clip-path:inset(0 12.766% 0 0)}78%{clip-path:inset(0 17.0213% 0 0)}}
@keyframes so-titles-track{0%,100%{clip-path:inset(0 100% 0 0)}40%{clip-path:inset(0 6% 0 0)}62%{clip-path:inset(0)}82%{clip-path:inset(0 8% 0 0)}}
@keyframes so-audio-track{0%,100%{clip-path:inset(0 100% 0 0);transform:scaleY(.5)}30%{clip-path:inset(0);transform:scaleY(.55)}48%{clip-path:inset(0);transform:scaleY(.82)}62%{clip-path:inset(0);transform:scaleY(1)}76%{clip-path:inset(0);transform:scaleY(.7)}86%{clip-path:inset(0);transform:scaleY(.9)}}
@keyframes so-curve{0%,100%{stroke-dashoffset:130}36%{stroke-dashoffset:10}62%{stroke-dashoffset:0}82%{stroke-dashoffset:30}}
@keyframes so-footage{0%,100%{transform:scale(1) translateX(0)}30%{transform:scale(1.12) translateX(-2%)}56%{transform:scale(1.07) translateX(-.5%)}80%{transform:scale(1.03) translateX(1%)}}
@keyframes so-edit-step{0%,24%{color:#e5332a}25%,100%{color:#555}}
@keyframes so-wireframe{0%,100%{transform:scaleX(.25);opacity:.35}32%{transform:scaleX(.9);opacity:1}60%{transform:scaleX(1);opacity:1}82%{transform:scaleX(.94);opacity:.9}}
@keyframes so-web-card{0%,100%{transform:scaleY(.15);opacity:.3}40%{transform:scaleY(1);opacity:1}64%{transform:scaleY(1.04);opacity:1}84%{transform:scaleY(.98);opacity:.95}}
@keyframes so-motion-path{0%,100%{stroke-dashoffset:480}32%{stroke-dashoffset:170}58%{stroke-dashoffset:0}82%{stroke-dashoffset:100}}
@keyframes so-keyframe{0%,100%{transform:rotate(45deg) scale(.4);background:#999}34%{transform:rotate(45deg) scale(1);background:#e5332a}60%{transform:rotate(45deg) scale(1.15);background:#e5332a}82%{transform:rotate(45deg) scale(.85);background:#777}}
@keyframes so-variant{0%,100%{transform:translateX(-15%);opacity:.2}30%{transform:translateX(0);opacity:1}60%{transform:translateX(2%);opacity:1}82%{transform:translateX(-1%);opacity:.9}}
@keyframes so-mail-action{0%,100%{background:#111;transform:scale(1)}34%{background:#222;transform:scale(.99)}58%{background:#333;transform:scale(.97)}78%{background:#111;transform:scale(1.01)}}

.sp-video-track>div:first-child{position:absolute;inset:0 auto 0 0;width:47%;z-index:1;flex-shrink:0}
.sp-video-track>div:nth-child(2){position:absolute;left:39%;top:0;bottom:0}
.sp-video-track>div:nth-child(3){position:absolute;left:67%;top:0;bottom:0}
