.phone-device{
    transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;
}
.phone-connections>div{
    position:relative;
    transition:transform .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.phone-connections>div>.icon{
    transition:transform .25s cubic-bezier(.2,.7,.2,1),color .22s ease;
    transform-origin:center;
}
.phone-connections>div>span{
    transition:color .22s ease;
}
.phone-app-footer>span{
    border-radius:8px;
    padding:5px 10px;
    transition:background-color .22s ease,color .22s ease,transform .22s ease;
}
@media(hover:hover) and (pointer:fine){
    .phone-preview:hover .phone-device{
        transform:rotate(0deg) translateY(-5px);
        box-shadow:0 30px 60px #0a1f3b25,inset 0 0 0 2px #536575;
    }
    .phone-connections>div:hover{
        z-index:1;
        transform:translateY(-3px);
        background:#e1f5ee;
        border-color:#89c9bc;
        box-shadow:0 7px 13px #168c8717;
    }
    .phone-connections>div:hover>.icon{
        transform:scale(1.16) rotate(-5deg);
        color:#08756f;
    }
    .phone-connections>div:hover>span{color:#075e59}
    .phone-app-footer>span:hover{
        color:#08756f;
        background:#e1f5ee;
        transform:translateY(-2px);
    }
}
.phone-connections>div:active{
    transform:scale(.97);
    background:#d1eee4;
    border-color:#89c9bc;
}
.phone-app-footer>span:active{background:#d1eee4;color:#08756f}
@media(prefers-reduced-motion:reduce){
    .phone-device,.phone-preview:hover .phone-device,
    .phone-connections>div:hover,.phone-connections>div:active,
    .phone-connections>div:hover>.icon,.phone-app-footer>span:hover{
        transform:none;
        transition:none;
    }
}