/* MJM R&D progressive 3D showcase; browser and phone only. */
.mjm-depth{--mjm-tilt-x:0deg;--mjm-tilt-y:0deg;--mjm-phone-x:0px;--mjm-phone-y:0px;--mjm-glow-x:50%;--mjm-glow-y:35%;perspective:1650px;transform-style:preserve-3d}
.mjm-depth .mjm-stage-browser{position:relative;isolation:isolate;transform:rotateX(var(--mjm-tilt-x)) rotateY(var(--mjm-tilt-y));transform-origin:50% 45%;backface-visibility:hidden;box-shadow:0 30px 68px rgba(5,31,65,.24),0 8px 21px rgba(10,42,81,.11);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;animation:mjm-window-breathe 7.2s ease-in-out infinite}
.mjm-depth .mjm-stage-browser::after{content:"";position:absolute;inset:0;z-index:10;pointer-events:none;border-radius:inherit;background:radial-gradient(480px circle at var(--mjm-glow-x) var(--mjm-glow-y),rgba(255,255,255,.34),transparent 75%);opacity:.66;transition:opacity .3s ease}
.mjm-depth .mjm-stage-phone{pointer-events:none;transform-style:preserve-3d;backface-visibility:hidden;box-shadow:0 27px 51px rgba(5,26,59,.29),0 6px 15px rgba(8,44,78,.16);transition:transform .62s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;animation:mjm-phone-breathe 6.4s ease-in-out infinite;transform:translate3d(var(--mjm-phone-x),var(--mjm-phone-y),35px) rotate(6deg)}
.mjm-depth .mjm-stage-orbit{animation:mjm-orbit-breathe 10s ease-in-out infinite}
.mjm-depth.mjm-depth--hover .mjm-stage-browser{box-shadow:0 41px 84px rgba(4,33,71,.31),0 11px 26px rgba(8,43,76,.13)}
.mjm-depth .mjm-stage-switch,.mjm-depth .mjm-stage-badge{position:relative;z-index:12}
@keyframes mjm-window-breathe{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes mjm-phone-breathe{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes mjm-orbit-breathe{0%,100%{opacity:.82;filter:saturate(.95)}50%{opacity:1;filter:saturate(1.08)}}
@media(max-width:980px),(hover:none),(pointer:coarse){.mjm-depth{perspective:none}.mjm-depth .mjm-stage-browser{transform:none!important;animation-duration:8.8s}.mjm-depth .mjm-stage-phone{animation-duration:8.2s}.mjm-depth .mjm-stage-browser::after{opacity:.35}}
@media(prefers-reduced-motion:reduce){.mjm-depth .mjm-stage-browser,.mjm-depth .mjm-stage-phone,.mjm-depth .mjm-stage-orbit{animation:none!important;transition:none!important;translate:none!important;transform:none!important}.mjm-depth .mjm-stage-phone{transform:rotate(6deg)!important}.mjm-depth .mjm-stage-browser::after{display:none}}