.mockup-reveal{align-items:center;display:flex;justify-content:center;min-height:80vh;position:relative;text-align:center}.mockup-reveal__header>div{line-height:1.1;text-transform:uppercase}.mockup-reveal__content{font-family:Big Shoulders Display;font-size:36px;margin-top:1rem;text-transform:uppercase}.mockup-reveal__content>div:has(img),.mockup-reveal__content>div:has(img) *{align-items:center;display:flex;justify-content:center}.mockup-reveal__mockup{animation-delay:.5s;aspect-ratio:536/1056;filter:drop-shadow(2px 4px 16px rgba(0,0,0,.5));height:clamp(320px,56vh,720px);object-fit:contain;position:absolute;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);width:auto;z-index:0}.mockup__inner{-webkit-animation:vibrate-3 15s linear infinite both;animation:vibrate-3 15s linear infinite both;height:100%;object-fit:contain;width:100%}.mockup--1 .mockup__inner,.mockup__inner{animation-delay:.8s;-webkit-animation-delay:.8s}.mockup--1 .mockup__inner{animation-delay:.3s;-webkit-animation-delay:.3s;position:relative}.mockup-reveal__ball img,.mockup-reveal__mockup .mockup-image{height:100%!important;position:relative;width:100%!important;z-index:1}.mockup-reveal__mockup .mockup-image{display:block;object-fit:contain}.mockup-reveal__mockup .screen-image{border-radius:50px;display:block;height:auto;height:97%;left:6%;object-fit:contain;overflow:hidden;overflow:clip;position:absolute;top:1%;width:87%;z-index:0}.mockup-reveal__mockup .screen-image img{display:block;height:auto;left:0;opacity:0;position:absolute;top:0;transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;width:100%}.mockup-reveal__mockup .screen-image img.active{opacity:1}.mockup-reveal__ball{-webkit-animation:vibrate-3 15s linear infinite both;animation:vibrate-3 15s linear infinite both;height:100%;object-fit:contain;position:absolute}@-webkit-keyframes mockup-1{0%{-webkit-transform:translateY(-50%) translateX(20vw) rotate(4deg);transform:translateY(-50%) translateX(20vw) rotate(4deg)}to{-webkit-transform:translateY(-50%) translateX(-2.5vw) rotate(-4deg);transform:translateY(-50%) translateX(-2.5vw) rotate(-4deg)}}@keyframes mockup-1{0%{-webkit-transform:translateY(-50%) translateX(20vw) rotate(4deg);transform:translateY(-50%) translateX(20vw) rotate(4deg)}to{-webkit-transform:translateY(-50%) translateX(-2.5vw) rotate(-4deg);transform:translateY(-50%) translateX(-2.5vw) rotate(-4deg)}}@-webkit-keyframes mockup-2{0%{-webkit-transform:translateY(-50%) translateX(-20vw) rotate(-4deg);transform:translateY(-50%) translateX(-20vw) rotate(-4deg)}to{-webkit-transform:translateY(-50%) translateX(2.5vw) rotate(4deg);transform:translateY(-50%) translateX(2.5vw) rotate(4deg)}}@keyframes mockup-2{0%{-webkit-transform:translateY(-50%) translateX(-20vw) rotate(-4deg);transform:translateY(-50%) translateX(-20vw) rotate(-4deg)}to{-webkit-transform:translateY(-50%) translateX(2.5vw) rotate(4deg);transform:translateY(-50%) translateX(2.5vw) rotate(4deg)}}@-webkit-keyframes mockup-1-reverse{0%{-webkit-transform:translateY(-50%) translateX(-2.5vw) rotate(-4deg);transform:translateY(-50%) translateX(-2.5vw) rotate(-4deg)}to{-webkit-transform:translateY(-50%) translateX(20vw) rotate(4deg);transform:translateY(-50%) translateX(20vw) rotate(4deg)}}@keyframes mockup-1-reverse{0%{-webkit-transform:translateY(-50%) translateX(-2.5vw) rotate(-4deg);transform:translateY(-50%) translateX(-2.5vw) rotate(-4deg)}to{-webkit-transform:translateY(-50%) translateX(20vw) rotate(4deg);transform:translateY(-50%) translateX(20vw) rotate(4deg)}}@-webkit-keyframes mockup-2-reverse{0%{-webkit-transform:translateY(-50%) translateX(2.5vw) rotate(4deg);transform:translateY(-50%) translateX(2.5vw) rotate(4deg)}to{-webkit-transform:translateY(-50%) translateX(-20vw) rotate(-4deg);transform:translateY(-50%) translateX(-20vw) rotate(-4deg)}}@keyframes mockup-2-reverse{0%{-webkit-transform:translateY(-50%) translateX(2.5vw) rotate(4deg);transform:translateY(-50%) translateX(2.5vw) rotate(4deg)}to{-webkit-transform:translateY(-50%) translateX(-20vw) rotate(-4deg);transform:translateY(-50%) translateX(-20vw) rotate(-4deg)}}@-webkit-keyframes vibrate-3{0%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-.5%,-.5%);transform:translate(-.5%,-.5%)}20%{-webkit-transform:translate(.5%,-.5%);transform:translate(.5%,-.5%)}30%{-webkit-transform:translate(-.5%,.5%);transform:translate(-.5%,.5%)}40%{-webkit-transform:translate(.5%,.5%);transform:translate(.5%,.5%)}50%{-webkit-transform:translate(-.5%,-.5%);transform:translate(-.5%,-.5%)}60%{-webkit-transform:translate(.5%,-.5%);transform:translate(.5%,-.5%)}70%{-webkit-transform:translate(-.5%,.5%);transform:translate(-.5%,.5%)}80%{-webkit-transform:translate(-.5%,-.5%);transform:translate(-.5%,-.5%)}90%{-webkit-transform:translate(.5%,-.5%);transform:translate(.5%,-.5%)}to{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate-3{0%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-.5%,-.5%);transform:translate(-.5%,-.5%)}20%{-webkit-transform:translate(.5%,-.5%);transform:translate(.5%,-.5%)}30%{-webkit-transform:translate(-.5%,.5%);transform:translate(-.5%,.5%)}40%{-webkit-transform:translate(.5%,.5%);transform:translate(.5%,.5%)}50%{-webkit-transform:translate(-.5%,-.5%);transform:translate(-.5%,-.5%)}60%{-webkit-transform:translate(.5%,-.5%);transform:translate(.5%,-.5%)}70%{-webkit-transform:translate(-.5%,.5%);transform:translate(-.5%,.5%)}80%{-webkit-transform:translate(-.5%,-.5%);transform:translate(-.5%,-.5%)}90%{-webkit-transform:translate(.5%,-.5%);transform:translate(.5%,-.5%)}to{-webkit-transform:translate(0);transform:translate(0)}}