.app-hero-screen-demo{aspect-ratio:1080/2109;background:var(--app-device-screen);width:100%;position:relative;overflow:hidden}.app-hero-screen-demo .app-hero-screen{position:absolute;inset:0}.app-hero-screen-demo .app-hero-screen-destination{transform:translate(-100%)}.app-hero-screen-demo .app-hero-screen-tap{aspect-ratio:1;border:2px solid var(--primary);background:var(--notification-primary-bg);opacity:0;pointer-events:none;border-radius:50%;width:18%;position:absolute;top:14.5%;left:62%}
.app-hero-device{--app-poster-opacity:1;--app-canvas-opacity:0;--app-float-y:48px;--app-float-scale:1.22;width:100%;min-height:680px;transform:translateY(var(--app-float-y)) scale(var(--app-float-scale));transform-origin:50%;animation:6s ease-in-out infinite app-hero-float;animation-play-state:var(--app-float-play-state,running);perspective:1100px;place-items:center;display:grid;position:relative}.app-hero-device[data-scene-ready=true]{--app-poster-opacity:0;--app-canvas-opacity:1}@media (max-width:1100px){.app-hero-device{--app-float-y:32px;--app-float-scale:1.12;min-height:620px}}@media (max-width:768px){.app-hero-device{--app-float-y:0px;--app-float-scale:1;min-height:544px}}@media (prefers-reduced-motion:reduce){.app-hero-device{animation:none}}.app-hero-device .app-hero-poster{width:clamp(218px,22vw,320px);opacity:var(--app-poster-opacity);transition:opacity .2s;position:relative;transform:rotateX(4deg)rotateY(-12deg)rotate(-6deg)}@media (max-width:1100px){.app-hero-device .app-hero-poster{width:218px}}@media (max-width:768px){.app-hero-device .app-hero-poster{width:248px}}@media (prefers-reduced-motion:reduce){.app-hero-device .app-hero-poster{transition:none}}.app-hero-device .app-hero-canvas{opacity:var(--app-canvas-opacity);transition:opacity .2s;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.app-hero-device .app-hero-canvas{transition:none}}.app-hero-device .app-hero-canvas canvas{width:100%;height:100%;display:block}@keyframes app-hero-float{0%,to{transform:translateY(var(--app-float-y)) scale(var(--app-float-scale))}50%{transform:translateY(calc(var(--app-float-y) - 10px)) scale(var(--app-float-scale))}}
.app-hero-jungle{z-index:0;pointer-events:none;opacity:.28;-webkit-mask-image:linear-gradient(to bottom, var(--overlay-medium) 0%, var(--app-device-screen) 28%);mask-image:linear-gradient(to bottom, var(--overlay-medium) 0%, var(--app-device-screen) 28%);background-image:url(/images/app/hero-jungle-botanical-v2.webp);background-position:50%;background-size:cover;position:absolute;inset:0;overflow:hidden}