/* Keep the real screen inside one continuous device throughout the entrance. */
body[data-page=index] .hero-stage .product-phone{animation:none!important;translate:none!important}
.hero-stage .phone-motion-stage{perspective:1200px;perspective-origin:50% 48%}
.phone-turn{position:relative;width:380px;max-width:100%;display:flex;justify-content:center;transform-style:preserve-3d;transform-origin:50% 50%;backface-visibility:hidden}
.phone-turn-enter{animation:rebuild-device-entrance 5.4s cubic-bezier(.3,.05,.2,1) both}
.phone-turn .device-screen::after{background:linear-gradient(112deg,#ffffff0c,transparent 34%);transition:none}
.phone-turn-enter .device-screen::after{background:linear-gradient(112deg,transparent 25%,#ffffff1a 48%,transparent 72%);background-size:250% 100%;animation:rebuild-glass-light 5.4s ease-in-out both}
@keyframes rebuild-device-entrance{
  0%{transform:translate3d(0,20px,-90px) rotateY(-16deg) rotateX(3deg);filter:brightness(.88)}
  30%{transform:translate3d(0,-3px,15px) rotateY(12deg) rotateX(-1deg);filter:brightness(1.04)}
  62%{transform:translate3d(0,0,0) rotateY(-8deg) rotateX(1deg);filter:brightness(.99)}
  86%,100%{transform:translate3d(0,0,0) rotateY(0deg) rotateX(0deg);filter:brightness(1)}
}
@keyframes rebuild-glass-light{
  0%{background-position:100% 0;opacity:.7}
  30%{background-position:0% 0;opacity:1}
  62%{background-position:80% 0;opacity:.6}
  86%,100%{background-position:50% 0;opacity:.2}
}
.phone-intro-replay{display:block;margin:8px auto 0;min-height:44px;padding:8px 14px;border:0;background:none;color:#e4e1dc;text-decoration:underline;text-underline-offset:5px;font:inherit;font-size:.85rem;cursor:pointer}
.phone-intro-replay[hidden]{display:none}
.hero-stage .motion-is-paused .phone-turn-enter,.motion-is-paused .phone-turn-enter{animation-play-state:paused}
.motion-is-paused .phone-turn-enter .device-screen::after{animation-play-state:paused}
@media(max-width:1200px){.phone-turn{width:350px}}
@media(max-width:520px){.phone-turn{width:min(360px,100%)}}

@media(prefers-reduced-motion:reduce){
 .phone-turn-enter,.phone-turn-enter .device-screen::after{animation:none!important}
}