/* Calcalist phone: onboarding, then Upcoming, then a tap on My events.
   Plays once when it comes into view; hovering plays it again. */
.ca-phone { position: relative; aspect-ratio: 532 / 1072; }
.ca-phone img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .7s cubic-bezier(.4,0,.2,1); }
.ca-phone .s2, .ca-phone .s1 { opacity: 0; }
.ca-phone[data-s="1"] .s1, .ca-phone[data-s="2"] .s2 { opacity: 1; }
.ca-phone .tap { position: absolute; left: 41.7%; top: 17.9%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; border-radius: 50%; background: rgba(250, 71, 31, .35); opacity: 0; transform: scale(.3); pointer-events: none; z-index: 3; }
.ca-phone.tapping .tap { animation: ca-tap .6s ease-out; }
@keyframes ca-tap { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }