/* Original Optom motion: only the artwork and surrounding product selectors change. */ #wp-shop-v2 .wp2-hero{height:auto;min-height:440px;padding:24px 0 44px;overflow:hidden;isolation:isolate;position:relative} #wp-shop-v2 .wp2-hero-copy{position:relative;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;isolation:isolate;z-index:2} #wp-shop-v2 .hero-v22-art{position:absolute;inset:0;pointer-events:none;user-select:none;z-index:-1} #wp-shop-v2 .hero-v22-device{position:absolute;display:block;width:var(--device-w);height:var(--device-h);transform-origin:center;pointer-events:none} #wp-shop-v2 .hero-v22-device i{display:block;width:100%;height:100%;background-image:var(--watch-image);background-repeat:no-repeat;background-size:contain;background-position:center} #wp-shop-v2 .hero-v22-phone{--device-w:calc(324 * var(--unit));--device-h:calc(458 * var(--unit));--watch-image:url('/assets/hero/datejust.png')} #wp-shop-v2 .hero-v22-tablet{--device-w:calc(392 * var(--unit));--device-h:calc(423 * var(--unit));--watch-image:url('/assets/hero/gmt.png')} #wp-shop-v2 .hero-v22-watch{--device-w:calc(378 * var(--unit));--device-h:calc(447 * var(--unit));--watch-image:url('/assets/hero/rm-white.png')} #wp-shop-v2 .hero-v22-laptop{--device-w:calc(503 * var(--unit));--device-h:calc(399 * var(--unit));--watch-image:url('/assets/hero/rm-pink.png')} /* Sqoch Public mascot-effects.css: seven original timing/clip curves. Blue edge-light replaces violet; artwork uses the existing shared device sprite. */ #wp-shop-v2 .m33-home{--shock-duration:3s;--shock-delay:0s;--shock-x-a:-.9rem;--shock-x-b:1.05rem;--shock-x-c:-.72rem;--shock-x-d:.65rem;--shock-x-e:-.38rem;--shock-skew-a:6deg;--shock-skew-b:-6.8deg;--shock-skew-c:4.4deg;--shock-skew-d:-3.2deg;--shock-light-a:1.68;--shock-light-c:1.54;--employee-idle-opacity:0} #wp-shop-v2 .m33-home .hero-v22-device{animation:none;opacity:1;transform:rotate(var(--tilt));transition:none;overflow-anchor:none} #wp-shop-v2 .m33-home .m33-electric{display:block;position:relative;width:100%;height:100%} #wp-shop-v2 .m33-home .hero-v22-device i{position:absolute;inset:0;animation:none} #wp-shop-v2 .m33-home .m33-fragment{opacity:0;pointer-events:none} #wp-shop-v2 .m33-home.m33-running .hero-v22-device{opacity:0} #wp-shop-v2 .m33-home.m33-active .hero-v22-device{animation:m33-employee-electric-flash 3s linear both} #wp-shop-v2 .m33-home.m33-active .m33-electric{animation:m33-employee-electric-shock 3s steps(1,end) both} #wp-shop-v2 .m33-home.m33-active .m33-base{animation:m33-avatar-electric-dissolve 3s linear both} #wp-shop-v2 .m33-home.m33-active .m33-fragment-a{animation:m33-avatar-glitch-slice-a 3s steps(1,end) both} #wp-shop-v2 .m33-home.m33-active .m33-fragment-b{animation:m33-avatar-glitch-slice-b 3s steps(1,end) both} #wp-shop-v2 .m33-home.m33-active .m33-fragment-c{animation:m33-avatar-glitch-block-c 3s steps(1,end) both} #wp-shop-v2 .m33-home.m33-active .m33-fragment-d{animation:m33-avatar-glitch-block-d 3s steps(1,end) both} #wp-shop-v2 .m33-home.m33-paused .hero-v22-device,#wp-shop-v2 .m33-home.m33-paused .m33-electric,#wp-shop-v2 .m33-home.m33-paused i{animation-play-state:paused!important} /* Eight curated compositions with one dominant device and three satellites. Mobile grid lines reserve the SAME 128px bands as the old 116+12 / 12+108+8 layout. display:contents lets ANY device use either band via CSS alone: no reparenting, JS measurements or layout shifts, including the SSR scene. Desktop positions use outer, inner and middle gutters and varied vertical levels. */ @media(max-width:1023px){ #wp-shop-v2 .m33-home{display:grid!important;width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1fr);grid-template-rows:128px auto auto 128px auto;row-gap:0!important;justify-items:center;align-items:start} #wp-shop-v2 .m33-home .hero-v22-art{display:contents;overflow-anchor:none} #wp-shop-v2 .m33-home>h1{grid-row:2;grid-column:1;margin:0!important} #wp-shop-v2 .m33-home>p{grid-row:3;grid-column:1;margin:24px 0 0!important} #wp-shop-v2 .m33-home .hero-v23-actions{grid-row:5;grid-column:1;margin:0!important;max-width:100%} #wp-shop-v2 .m33-home .hero-v22-device{grid-column:1 / 2;grid-row:var(--band) / span 1;left:calc(var(--slot-x) - var(--device-w)/2);right:auto;top:calc(var(--slot-y) + var(--band-offset) - var(--device-h)/2)} #wp-shop-v2 .m33-home .hero-v22-phone{--band:1;--band-offset:0px;--unit:.095px;--slot-x:calc(100% - 58px);--slot-y:82px;--tilt:14deg} #wp-shop-v2 .m33-home .hero-v22-tablet{--band:1;--band-offset:0px;--unit:.18px;--slot-x:68px;--slot-y:56px;--tilt:-10deg} #wp-shop-v2 .m33-home .hero-v22-watch{--band:4;--band-offset:12px;--unit:.058px;--slot-x:46px;--slot-y:35px;--tilt:24deg} #wp-shop-v2 .m33-home .hero-v22-laptop{--band:4;--band-offset:12px;--unit:.118px;--slot-x:calc(100% - 92px);--slot-y:66px;--tilt:-10deg} #wp-shop-v2 .m33-home[data-motion-scene="1"] .hero-v22-phone{--band:4;--band-offset:12px;--unit:.18px;--slot-x:calc(100% - 67px);--slot-y:54px;--tilt:-5deg} #wp-shop-v2 .m33-home[data-motion-scene="1"] .hero-v22-tablet{--band:4;--band-offset:12px;--unit:.07px;--slot-x:49px;--slot-y:30px;--tilt:18deg} #wp-shop-v2 .m33-home[data-motion-scene="1"] .hero-v22-watch{--band:1;--band-offset:0px;--unit:.062px;--slot-x:calc(100% - 49px);--slot-y:32px;--tilt:-24deg} #wp-shop-v2 .m33-home[data-motion-scene="1"] .hero-v22-laptop{--band:1;--band-offset:0px;--unit:.125px;--slot-x:81px;--slot-y:70px;--tilt:8deg} #wp-shop-v2 .m33-home[data-motion-scene="2"] .hero-v22-phone{--band:1;--band-offset:0px;--unit:.12px;--slot-x:90px;--slot-y:76px;--tilt:-9deg} #wp-shop-v2 .m33-home[data-motion-scene="2"] .hero-v22-tablet{--band:4;--band-offset:12px;--unit:.085px;--slot-x:calc(100% - 52px);--slot-y:32px;--tilt:12deg} #wp-shop-v2 .m33-home[data-motion-scene="2"] .hero-v22-watch{--band:1;--band-offset:0px;--unit:.068px;--slot-x:calc(100% - 48px);--slot-y:34px;--tilt:20deg} #wp-shop-v2 .m33-home[data-motion-scene="2"] .hero-v22-laptop{--band:4;--band-offset:12px;--unit:.17px;--slot-x:71px;--slot-y:60px;--tilt:6deg} #wp-shop-v2 .m33-home[data-motion-scene="3"] .hero-v22-phone{--band:1;--band-offset:0px;--unit:.09px;--slot-x:48px;--slot-y:35px;--tilt:18deg} #wp-shop-v2 .m33-home[data-motion-scene="3"] .hero-v22-tablet{--band:1;--band-offset:0px;--unit:.12px;--slot-x:calc(100% - 90px);--slot-y:66px;--tilt:-15deg} #wp-shop-v2 .m33-home[data-motion-scene="3"] .hero-v22-watch{--band:4;--band-offset:12px;--unit:.145px;--slot-x:72px;--slot-y:57px;--tilt:12deg} #wp-shop-v2 .m33-home[data-motion-scene="3"] .hero-v22-laptop{--band:4;--band-offset:12px;--unit:.075px;--slot-x:calc(100% - 52px);--slot-y:30px;--tilt:-10deg} #wp-shop-v2 .m33-home[data-motion-scene="4"] .hero-v22-phone{--band:4;--band-offset:12px;--unit:.115px;--slot-x:85px;--slot-y:60px;--tilt:8deg} #wp-shop-v2 .m33-home[data-motion-scene="4"] .hero-v22-tablet{--band:1;--band-offset:0px;--unit:.18px;--slot-x:calc(100% - 68px);--slot-y:56px;--tilt:9deg} #wp-shop-v2 .m33-home[data-motion-scene="4"] .hero-v22-watch{--band:1;--band-offset:0px;--unit:.06px;--slot-x:60px;--slot-y:30px;--tilt:-22deg} #wp-shop-v2 .m33-home[data-motion-scene="4"] .hero-v22-laptop{--band:4;--band-offset:12px;--unit:.085px;--slot-x:calc(100% - 46px);--slot-y:30px;--tilt:8deg} #wp-shop-v2 .m33-home[data-motion-scene="5"] .hero-v22-phone{--band:1;--band-offset:0px;--unit:.19px;--slot-x:66px;--slot-y:56px;--tilt:-5deg} #wp-shop-v2 .m33-home[data-motion-scene="5"] .hero-v22-tablet{--band:4;--band-offset:12px;--unit:.10px;--slot-x:calc(100% - 58px);--slot-y:32px;--tilt:10deg} #wp-shop-v2 .m33-home[data-motion-scene="5"] .hero-v22-watch{--band:4;--band-offset:12px;--unit:.09px;--slot-x:85px;--slot-y:65px;--tilt:-18deg} #wp-shop-v2 .m33-home[data-motion-scene="5"] .hero-v22-laptop{--band:1;--band-offset:0px;--unit:.095px;--slot-x:calc(100% - 81px);--slot-y:84px;--tilt:6deg} #wp-shop-v2 .m33-home[data-motion-scene="6"] .hero-v22-phone{--band:4;--band-offset:12px;--unit:.11px;--slot-x:calc(100% - 100px);--slot-y:62px;--tilt:12deg} #wp-shop-v2 .m33-home[data-motion-scene="6"] .hero-v22-tablet{--band:4;--band-offset:12px;--unit:.08px;--slot-x:55px;--slot-y:33px;--tilt:-15deg} #wp-shop-v2 .m33-home[data-motion-scene="6"] .hero-v22-watch{--band:1;--band-offset:0px;--unit:.055px;--slot-x:50px;--slot-y:29px;--tilt:22deg} #wp-shop-v2 .m33-home[data-motion-scene="6"] .hero-v22-laptop{--band:1;--band-offset:0px;--unit:.18px;--slot-x:calc(100% - 77px);--slot-y:65px;--tilt:6deg} #wp-shop-v2 .m33-home[data-motion-scene="7"] .hero-v22-phone{--band:4;--band-offset:12px;--unit:.085px;--slot-x:62px;--slot-y:35px;--tilt:-14deg} #wp-shop-v2 .m33-home[data-motion-scene="7"] .hero-v22-tablet{--band:1;--band-offset:0px;--unit:.105px;--slot-x:calc(100% - 98px);--slot-y:78px;--tilt:16deg} #wp-shop-v2 .m33-home[data-motion-scene="7"] .hero-v22-watch{--band:1;--band-offset:0px;--unit:.15px;--slot-x:68px;--slot-y:58px;--tilt:-16deg} #wp-shop-v2 .m33-home[data-motion-scene="7"] .hero-v22-laptop{--band:4;--band-offset:12px;--unit:.10px;--slot-x:calc(100% - 62px);--slot-y:68px;--tilt:5deg} } @media(min-width:1024px){ #wp-shop-v2 .m33-home{width:min(680px,calc(100% - 400px))!important;max-width:min(680px,calc(100% - 400px))!important;min-height:340px;justify-content:center;--m35-outer:clamp(66px,calc(37.5vw - 344px),368px);--m35-inner:clamp(35px,calc(10vw - 58px),140px);--m35-middle:calc((var(--m35-outer) + var(--m35-inner))*.55)} #wp-shop-v2 .m33-home .hero-v22-art{position:absolute;inset:0;width:auto;max-width:none;height:auto;margin:0;z-index:-1} #wp-shop-v2 .m33-home .hero-v22-device{left:calc(var(--slot-x) - var(--device-w)/2);right:auto;top:calc(var(--slot-y) - var(--device-h)/2)} #wp-shop-v2 .m33-home .hero-v22-phone{--unit:clamp(.16px,.017vw,.26px);--slot-x:calc(100% + var(--m35-outer));--slot-y:282px;--tilt:12deg} #wp-shop-v2 .m33-home .hero-v22-tablet{--unit:clamp(.27px,.029vw,.42px);--slot-x:calc(0px - var(--m35-outer));--slot-y:86px;--tilt:-8deg} #wp-shop-v2 .m33-home .hero-v22-watch{--unit:clamp(.06px,.0065vw,.10px);--slot-x:calc(0px - var(--m35-inner));--slot-y:250px;--tilt:22deg} #wp-shop-v2 .m33-home .hero-v22-laptop{--unit:clamp(.14px,.016vw,.24px);--slot-x:calc(100% + var(--m35-inner));--slot-y:80px;--tilt:-12deg} #wp-shop-v2 .m33-home[data-motion-scene="1"] .hero-v22-phone{--unit:clamp(.26px,.0278vw,.41px);--slot-x:calc(100% + var(--m35-outer));--slot-y:218px;--tilt:-8deg} #wp-shop-v2 .m33-home[data-motion-scene="1"] .hero-v22-tablet{--unit:clamp(.075px,.007vw,.12px);--slot-x:calc(100% + var(--m35-inner));--slot-y:45px;--tilt:18deg} #wp-shop-v2 .m33-home[data-motion-scene="1"] .hero-v22-watch{--unit:clamp(.08px,.0085vw,.14px);--slot-x:calc(0px - var(--m35-inner));--slot-y:98px;--tilt:-24deg} #wp-shop-v2 .m33-home[data-motion-scene="1"] .hero-v22-laptop{--unit:clamp(.18px,.019vw,.30px);--slot-x:calc(0px - var(--m35-outer));--slot-y:268px;--tilt:9deg} #wp-shop-v2 .m33-home[data-motion-scene="2"] .hero-v22-phone{--unit:clamp(.07px,.007vw,.12px);--slot-x:calc(0px - var(--m35-inner));--slot-y:35px;--tilt:18deg} #wp-shop-v2 .m33-home[data-motion-scene="2"] .hero-v22-tablet{--unit:clamp(.14px,.0145vw,.23px);--slot-x:calc(100% + var(--m35-inner));--slot-y:310px;--tilt:-15deg} #wp-shop-v2 .m33-home[data-motion-scene="2"] .hero-v22-watch{--unit:clamp(.085px,.009vw,.145px);--slot-x:calc(100% + var(--m35-outer));--slot-y:130px;--tilt:22deg} #wp-shop-v2 .m33-home[data-motion-scene="2"] .hero-v22-laptop{--unit:clamp(.26px,.028vw,.41px);--slot-x:calc(0px - var(--m35-outer));--slot-y:205px;--tilt:-8deg} #wp-shop-v2 .m33-home[data-motion-scene="3"] .hero-v22-phone{--unit:clamp(.10px,.011vw,.17px);--slot-x:calc(0px - var(--m35-outer));--slot-y:90px;--tilt:-12deg} #wp-shop-v2 .m33-home[data-motion-scene="3"] .hero-v22-tablet{--unit:clamp(.16px,.017vw,.25px);--slot-x:calc(0px - var(--m35-inner));--slot-y:285px;--tilt:14deg} #wp-shop-v2 .m33-home[data-motion-scene="3"] .hero-v22-watch{--unit:clamp(.23px,.024vw,.35px);--slot-x:calc(100% + var(--m35-outer));--slot-y:196px;--tilt:-18deg} #wp-shop-v2 .m33-home[data-motion-scene="3"] .hero-v22-laptop{--unit:clamp(.075px,.008vw,.13px);--slot-x:calc(100% + var(--m35-inner));--slot-y:35px;--tilt:9deg} #wp-shop-v2 .m33-home[data-motion-scene="4"] .hero-v22-phone{--unit:clamp(.07px,.007vw,.12px);--slot-x:calc(100% + var(--m35-outer));--slot-y:45px;--tilt:-16deg} #wp-shop-v2 .m33-home[data-motion-scene="4"] .hero-v22-tablet{--unit:clamp(.26px,.027vw,.42px);--slot-x:calc(100% + var(--m35-middle));--slot-y:235px;--tilt:8deg} #wp-shop-v2 .m33-home[data-motion-scene="4"] .hero-v22-watch{--unit:clamp(.08px,.0085vw,.14px);--slot-x:calc(0px - var(--m35-outer));--slot-y:245px;--tilt:26deg} #wp-shop-v2 .m33-home[data-motion-scene="4"] .hero-v22-laptop{--unit:clamp(.13px,.014vw,.22px);--slot-x:calc(0px - var(--m35-inner));--slot-y:60px;--tilt:-7deg} #wp-shop-v2 .m33-home[data-motion-scene="5"] .hero-v22-phone{--unit:clamp(.25px,.025vw,.38px);--slot-x:calc(0px - var(--m35-middle));--slot-y:250px;--tilt:-12deg} #wp-shop-v2 .m33-home[data-motion-scene="5"] .hero-v22-tablet{--unit:clamp(.07px,.007vw,.12px);--slot-x:calc(0px - var(--m35-outer));--slot-y:40px;--tilt:19deg} #wp-shop-v2 .m33-home[data-motion-scene="5"] .hero-v22-watch{--unit:clamp(.13px,.013vw,.21px);--slot-x:calc(100% + var(--m35-outer));--slot-y:92px;--tilt:15deg} #wp-shop-v2 .m33-home[data-motion-scene="5"] .hero-v22-laptop{--unit:clamp(.10px,.010vw,.16px);--slot-x:calc(100% + var(--m35-inner));--slot-y:292px;--tilt:-11deg} #wp-shop-v2 .m33-home[data-motion-scene="6"] .hero-v22-phone{--unit:clamp(.095px,.01vw,.17px);--slot-x:calc(0px - var(--m35-outer));--slot-y:242px;--tilt:15deg} #wp-shop-v2 .m33-home[data-motion-scene="6"] .hero-v22-tablet{--unit:clamp(.15px,.016vw,.25px);--slot-x:calc(0px - var(--m35-inner));--slot-y:78px;--tilt:-10deg} #wp-shop-v2 .m33-home[data-motion-scene="6"] .hero-v22-watch{--unit:clamp(.055px,.006vw,.10px);--slot-x:calc(100% + var(--m35-inner));--slot-y:330px;--tilt:-24deg} #wp-shop-v2 .m33-home[data-motion-scene="6"] .hero-v22-laptop{--unit:clamp(.25px,.0275vw,.41px);--slot-x:calc(100% + var(--m35-outer));--slot-y:154px;--tilt:6deg} #wp-shop-v2 .m33-home[data-motion-scene="7"] .hero-v22-phone{--unit:clamp(.065px,.007vw,.11px);--slot-x:calc(0px - var(--m35-inner));--slot-y:40px;--tilt:-14deg} #wp-shop-v2 .m33-home[data-motion-scene="7"] .hero-v22-tablet{--unit:clamp(.10px,.0105vw,.18px);--slot-x:calc(100% + var(--m35-outer));--slot-y:272px;--tilt:16deg} #wp-shop-v2 .m33-home[data-motion-scene="7"] .hero-v22-watch{--unit:clamp(.23px,.024vw,.35px);--slot-x:calc(0px - var(--m35-outer));--slot-y:205px;--tilt:12deg} #wp-shop-v2 .m33-home[data-motion-scene="7"] .hero-v22-laptop{--unit:clamp(.13px,.013vw,.21px);--slot-x:calc(100% + var(--m35-inner));--slot-y:50px;--tilt:-11deg} } @keyframes m33-employee-electric-shock { 0%, 9.9%, 20%, 70%, 80%, 100% { opacity: 1; transform: none; filter: none; } 10% { opacity: 1; transform: translate3d(var(--shock-x-a), .16rem, 0) skewX(var(--shock-skew-a)); filter: brightness(1.9) saturate(1.55) drop-shadow(.18rem 0 rgba(37, 99, 235, .72)) drop-shadow(-.14rem 0 rgba(14, 165, 233, .58)); } 12.2% { opacity: 1; transform: translate3d(var(--shock-x-b), -.22rem, 0) skewX(var(--shock-skew-b)); filter: brightness(1.08) saturate(1.25) drop-shadow(-.16rem 0 rgba(37, 99, 235, .62)) drop-shadow(.12rem 0 rgba(14, 165, 233, .5)); } 14.4% { opacity: 1; transform: translate3d(var(--shock-x-c), .13rem, 0) skewX(var(--shock-skew-c)); filter: brightness(var(--shock-light-a)) saturate(1.48) drop-shadow(.12rem 0 rgba(37, 99, 235, .66)) drop-shadow(-.1rem 0 rgba(14, 165, 233, .48)); } 16.6% { opacity: 1; transform: translate3d(var(--shock-x-d), -.1rem, 0) skewX(var(--shock-skew-d)); filter: brightness(1.12) saturate(1.24) drop-shadow(-.09rem 0 rgba(37, 99, 235, .48)) drop-shadow(.07rem 0 rgba(14, 165, 233, .38)); } 18.8% { opacity: 1; transform: translate3d(var(--shock-x-e), .06rem, 0) skewX(1.8deg); filter: brightness(var(--shock-light-c)) saturate(1.38) drop-shadow(.06rem 0 rgba(37, 99, 235, .4)) drop-shadow(-.045rem 0 rgba(14, 165, 233, .32)); } 71.2% { opacity: 1; transform: translate3d(var(--shock-x-e), -.06rem, 0) skewX(-1.8deg); filter: brightness(var(--shock-light-c)) saturate(1.38) drop-shadow(-.06rem 0 rgba(37, 99, 235, .4)) drop-shadow(.045rem 0 rgba(14, 165, 233, .32)); } 73.4% { opacity: 1; transform: translate3d(var(--shock-x-d), .1rem, 0) skewX(var(--shock-skew-d)); filter: brightness(1.12) saturate(1.24) drop-shadow(.09rem 0 rgba(37, 99, 235, .48)) drop-shadow(-.07rem 0 rgba(14, 165, 233, .38)); } 75.6% { opacity: 1; transform: translate3d(var(--shock-x-c), -.13rem, 0) skewX(var(--shock-skew-c)); filter: brightness(var(--shock-light-a)) saturate(1.48) drop-shadow(-.12rem 0 rgba(37, 99, 235, .66)) drop-shadow(.1rem 0 rgba(14, 165, 233, .48)); } 77.8% { opacity: 1; transform: translate3d(var(--shock-x-b), .22rem, 0) skewX(var(--shock-skew-b)); filter: brightness(1.08) saturate(1.25) drop-shadow(.16rem 0 rgba(37, 99, 235, .62)) drop-shadow(-.12rem 0 rgba(14, 165, 233, .5)); } 79.2% { opacity: 1; transform: translate3d(var(--shock-x-a), -.16rem, 0) skewX(var(--shock-skew-a)); filter: brightness(1.9) saturate(1.55) drop-shadow(-.18rem 0 rgba(37, 99, 235, .72)) drop-shadow(.14rem 0 rgba(14, 165, 233, .58)); } } @keyframes m33-avatar-glitch-slice-a { 0%, 9.9%, 20%, 70%, 80%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); filter: none; } 10% { opacity: .88; transform: translate3d(.78rem, -.12rem, 0) scale(1.06); clip-path: inset(4% 43% 52% 0); filter: hue-rotate(48deg) saturate(2.05) brightness(1.28); } 12.5% { opacity: .66; transform: translate3d(-.64rem, .16rem, 0) scale(1.04); clip-path: inset(34% 48% 22% 4%); filter: hue-rotate(82deg) saturate(1.9) brightness(1.2); } 15% { opacity: .76; transform: translate3d(.54rem, .05rem, 0) scale(1.05); clip-path: inset(58% 46% 4% 2%); filter: hue-rotate(34deg) saturate(2) brightness(1.24); } 18% { opacity: .42; transform: translate3d(-.3rem, -.08rem, 0); clip-path: inset(22% 52% 48% 3%); filter: hue-rotate(66deg) saturate(1.72) brightness(1.14); } 71% { opacity: .42; transform: translate3d(.3rem, .08rem, 0); clip-path: inset(22% 52% 48% 3%); filter: hue-rotate(66deg) saturate(1.72) brightness(1.14); } 74% { opacity: .76; transform: translate3d(-.54rem, -.05rem, 0) scale(1.05); clip-path: inset(58% 46% 4% 2%); filter: hue-rotate(34deg) saturate(2) brightness(1.24); } 76.5% { opacity: .66; transform: translate3d(.64rem, -.16rem, 0) scale(1.04); clip-path: inset(34% 48% 22% 4%); filter: hue-rotate(82deg) saturate(1.9) brightness(1.2); } 79% { opacity: .88; transform: translate3d(-.78rem, .12rem, 0) scale(1.06); clip-path: inset(4% 43% 52% 0); filter: hue-rotate(48deg) saturate(2.05) brightness(1.28); } } @keyframes m33-avatar-glitch-slice-b { 0%, 10.4%, 20%, 70%, 79.6%, 100% { opacity: 0; transform: none; clip-path: inset(100% 0 0 0); filter: none; } 10.5% { opacity: .78; transform: translate3d(-.72rem, .14rem, 0) scale(1.07); clip-path: inset(48% 1% 6% 48%); filter: hue-rotate(-58deg) saturate(2.1) brightness(1.24); } 13% { opacity: .56; transform: translate3d(.62rem, -.12rem, 0) scale(1.04); clip-path: inset(7% 3% 57% 51%); filter: hue-rotate(-82deg) saturate(1.92) brightness(1.18); } 15.5% { opacity: .68; transform: translate3d(-.48rem, .05rem, 0) scale(1.05); clip-path: inset(55% 2% 4% 54%); filter: hue-rotate(-42deg) saturate(2) brightness(1.22); } 18.5% { opacity: .38; transform: translate3d(.26rem, .06rem, 0); clip-path: inset(28% 4% 39% 51%); filter: hue-rotate(-68deg) saturate(1.78) brightness(1.14); } 71.5% { opacity: .38; transform: translate3d(-.26rem, -.06rem, 0); clip-path: inset(28% 4% 39% 51%); filter: hue-rotate(-68deg) saturate(1.78) brightness(1.14); } 74.5% { opacity: .68; transform: translate3d(.48rem, -.05rem, 0) scale(1.05); clip-path: inset(55% 2% 4% 54%); filter: hue-rotate(-42deg) saturate(2) brightness(1.22); } 77% { opacity: .56; transform: translate3d(-.62rem, .12rem, 0) scale(1.04); clip-path: inset(7% 3% 57% 51%); filter: hue-rotate(-82deg) saturate(1.92) brightness(1.18); } 79.5% { opacity: .78; transform: translate3d(.72rem, -.14rem, 0) scale(1.07); clip-path: inset(48% 1% 6% 48%); filter: hue-rotate(-58deg) saturate(2.1) brightness(1.24); } } @keyframes m33-avatar-glitch-block-c { 0%, 10.9%, 20%, 70%, 79.1%, 100% { opacity: 0; transform: none; clip-path: inset(100% 100% 0 0); filter: none; } 11% { opacity: .72; transform: translate3d(-.92rem, .22rem, 0) scale(1.08); clip-path: inset(26% 49% 31% 3%); filter: hue-rotate(118deg) saturate(2.1) brightness(1.26); } 14% { opacity: .58; transform: translate3d(.76rem, -.2rem, 0) scale(1.06); clip-path: inset(5% 52% 55% 2%); filter: hue-rotate(92deg) saturate(1.95) brightness(1.2); } 17% { opacity: .44; transform: translate3d(-.5rem, .14rem, 0); clip-path: inset(58% 51% 3% 4%); filter: hue-rotate(132deg) saturate(1.8) brightness(1.16); } 73% { opacity: .44; transform: translate3d(.5rem, -.14rem, 0); clip-path: inset(58% 51% 3% 4%); filter: hue-rotate(132deg) saturate(1.8) brightness(1.16); } 76% { opacity: .58; transform: translate3d(-.76rem, .2rem, 0) scale(1.06); clip-path: inset(5% 52% 55% 2%); filter: hue-rotate(92deg) saturate(1.95) brightness(1.2); } 79% { opacity: .72; transform: translate3d(.92rem, -.22rem, 0) scale(1.08); clip-path: inset(26% 49% 31% 3%); filter: hue-rotate(118deg) saturate(2.1) brightness(1.26); } } @keyframes m33-avatar-glitch-block-d { 0%, 11.4%, 20%, 70%, 78.6%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 100%); filter: none; } 11.5% { opacity: .7; transform: translate3d(.88rem, -.2rem, 0) scale(1.08); clip-path: inset(18% 3% 39% 53%); filter: hue-rotate(-116deg) saturate(2.15) brightness(1.28); } 14.5% { opacity: .54; transform: translate3d(-.72rem, .18rem, 0) scale(1.05); clip-path: inset(51% 2% 6% 50%); filter: hue-rotate(-94deg) saturate(1.95) brightness(1.2); } 17.5% { opacity: .42; transform: translate3d(.46rem, -.12rem, 0); clip-path: inset(4% 4% 57% 55%); filter: hue-rotate(-132deg) saturate(1.82) brightness(1.16); } 72.5% { opacity: .42; transform: translate3d(-.46rem, .12rem, 0); clip-path: inset(4% 4% 57% 55%); filter: hue-rotate(-132deg) saturate(1.82) brightness(1.16); } 75.5% { opacity: .54; transform: translate3d(.72rem, -.18rem, 0) scale(1.05); clip-path: inset(51% 2% 6% 50%); filter: hue-rotate(-94deg) saturate(1.95) brightness(1.2); } 78.5% { opacity: .7; transform: translate3d(-.88rem, .2rem, 0) scale(1.08); clip-path: inset(18% 3% 39% 53%); filter: hue-rotate(-116deg) saturate(2.15) brightness(1.28); } } @keyframes m33-avatar-electric-dissolve { 0%, 9.9%, 80%, 100% { opacity: 0; filter: brightness(1.3) saturate(.62); } 10% { opacity: .14; filter: brightness(1.3) saturate(.66); } 12% { opacity: .66; filter: brightness(1.2) saturate(.84); } 14% { opacity: .22; filter: brightness(1.28) saturate(.72); } 16% { opacity: .86; filter: brightness(1.12) saturate(.92); } 18% { opacity: .56; filter: brightness(1.18) saturate(.86); } 20%, 70% { opacity: 1; filter: none; } 72% { opacity: .68; filter: brightness(1.12) saturate(.9); } 74% { opacity: .16; filter: brightness(1.24) saturate(.72); } 76% { opacity: .7; filter: brightness(1.14) saturate(.88); } 78% { opacity: .18; filter: brightness(1.28) saturate(.68); } } @keyframes m33-employee-electric-flash { 0%, 10%, 80%, 100% { opacity: var(--employee-idle-opacity); } 12% { opacity: .72; } 13.5% { opacity: .16; } 15.5% { opacity: .94; } 17% { opacity: .34; } 18.5% { opacity: .78; } 20%, 70% { opacity: 1; } 71.5% { opacity: .38; } 73% { opacity: .92; } 74.5% { opacity: .14; } 76.5% { opacity: .76; } 78% { opacity: .26; } } @media(max-width:1023px){ #wp-shop-v2 .wp2-hero{min-height:0;padding:12px 16px 48px} #wp-shop-v2 .wp2-hero-copy{position:relative;padding:0} #wp-shop-v2 .wp2-hero h1{max-width:100%;font-size:29px} #wp-shop-v2 .wp2-hero-copy>p{font-size:14px;line-height:1.6;max-width:340px;margin-bottom:0} #wp-shop-v2 .hero-v22-device{position:relative;align-self:start;justify-self:start} #wp-shop-v2 .wp2-hero-buttons{position:relative;width:100%;justify-content:center;gap:10px} } @media(min-width:1281px){#wp-shop-v2 .m33-home{--m35-outer:clamp(66px,calc(37.5vw - 344px),176px)}} @media(prefers-reduced-motion:reduce){ #wp-shop-v2 .m33-home .hero-v22-device,#wp-shop-v2 .m33-home .m33-electric,#wp-shop-v2 .m33-home i{animation:none!important} #wp-shop-v2 .m33-home.m33-running .hero-v22-device,#wp-shop-v2 .m33-home .m33-base{opacity:1!important} #wp-shop-v2 .m33-home .m33-fragment{opacity:0!important} }