/* A travelling breeze traces a loop around the handset before leaving the rail. */
.rail-phone{display:grid;place-items:center;width:88px;height:72px;margin:12px 0 22px;position:relative;overflow:hidden}
.phone-aura{display:grid;place-items:center;position:relative;width:88px;height:72px}
.phone-handset{width:27px;height:27px;position:relative;z-index:1;color:#36584b;animation:phone-sway 5.5s ease-in-out infinite}
.phone-wind{position:absolute;inset:0;width:88px;height:72px;overflow:hidden;color:#769687}
.phone-wind path{stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-dasharray:42 260;stroke-dashoffset:42;opacity:0;animation:phone-breeze 5.5s cubic-bezier(.35,0,.25,1) infinite}
.phone-wind path+path{stroke-width:.7;animation-delay:.22s}
.rail-phone:hover .phone-handset{color:#173e30}.rail-phone:hover .phone-wind{color:#36584b}
@keyframes phone-breeze{0%,8%{stroke-dashoffset:42;opacity:0}18%{opacity:.75}63%{opacity:.75}78%,100%{stroke-dashoffset:-260;opacity:0}}
@keyframes phone-sway{0%,24%,70%,100%{transform:rotate(0)}38%{transform:rotate(-8deg)}47%{transform:rotate(7deg)}56%{transform:rotate(-3deg)}}
@media(max-width:700px){.rail .rail-phone{width:65px;height:64px;margin:0 6px 0 0}.phone-aura{width:65px;height:64px}.phone-wind{left:-12px;top:-4px}.phone-handset{width:25px;height:25px}}