/* Decorative motion stays outside the app screen and never changes layout. */
.phone-motion-stage{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;min-width:0}
.phone-orbit{display:none;position:absolute;z-index:-1;pointer-events:none;left:50%;top:43%;width:min(125%,470px);aspect-ratio:1;transform:translate(-50%,-50%)}
.phone-orbit>span{position:absolute;inset:0;border-radius:50%;border:1px solid #50dcec2e;border-top-color:#70e7fbb0;border-right-color:#50dcec68;box-shadow:0 0 24px #50dcec0a,inset 0 0 24px #50dcec08}
.phone-orbit>span:last-child{inset:9%;border-color:#50dcec15;border-bottom-color:#50dcec75;border-left-color:#50dcec40}
.motion-enabled .phone-orbit{display:block}
.motion-enabled .phone-orbit>span:first-child{animation:rebuild-orbit 28s linear infinite}
.motion-enabled .phone-orbit>span:last-child{animation:rebuild-orbit 38s linear infinite reverse}
.motion-enabled .phone-motion-stage>.product-phone{animation:rebuild-float 9s ease-in-out infinite;will-change:translate}
.motion-enabled .hero-image{animation:rebuild-landscape 24s ease-in-out infinite alternate;transform-origin:65% 50%;will-change:transform}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:-14px;padding:6px 14px;border:1px solid #ffffff38;border-radius:24px;background:#11192080;color:#cbdde1;font-size:.875rem;line-height:1.4}
.motion-toggle:hover{border-color:#50dcec99;color:#fffaf4}
.motion-toggle[hidden]{display:none}
.motion-toggle:focus-visible{outline:3px solid #50dcec;outline-offset:5px}
.motion-ready .reveal-pending{opacity:0;translate:0 16px}
.motion-ready .reveal-complete{animation:rebuild-reveal .65s cubic-bezier(.2,.65,.3,1) both}
.motion-enabled .preview-switch .phone-screen{animation:rebuild-preview .35s ease-out both}
.motion-is-paused .phone-orbit>span,.motion-is-paused .phone-motion-stage>.product-phone,.motion-is-paused .hero-image{animation-play-state:paused}
.motion-is-paused .reveal-pending{opacity:1;translate:none}
@keyframes rebuild-orbit{to{transform:rotate(360deg)}}
@keyframes rebuild-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes rebuild-landscape{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes rebuild-reveal{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes rebuild-preview{from{opacity:.65}to{opacity:1}}
@media(max-width:520px){.phone-orbit{width:112%;top:42%}.motion-enabled .phone-motion-stage>.product-phone{animation-duration:10s}.motion-enabled .hero-image{animation:none;will-change:auto}.motion-toggle{margin-top:-12px}}
@media(prefers-reduced-motion:reduce){.phone-orbit{display:none!important}.phone-motion-stage>.product-phone,.hero-image,.reveal-complete,.phone-screen{animation:none!important;will-change:auto!important}.motion-ready .reveal-pending{opacity:1;translate:none}.motion-toggle{display:none}}
