/* Warmth-and-feel pass: makes Leo's phone open like a real phone. Small, quick, no confetti.
   Owner: PHONE worker. Battery text, read receipts and typing bubble are plain markup built in
   game.js (openPhone); this file only handles motion and the small decorative bits. */

#phone.phone-in{animation:phoneOpen .38s cubic-bezier(.24,1.34,.4,1) both}
#phone.phone-out{animation:phoneClose .16s ease-in both}
@keyframes phoneOpen{0%{opacity:0;transform:translateY(46px) scale(.98)}70%{opacity:1;transform:translateY(-5px) scale(1.005)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes phoneClose{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(26px)}}

/* Message cards pop in with a short stagger on open, keyed off --i set inline per card. */
#phone .message{opacity:0;animation:msgPopIn .32s ease-out both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes msgPopIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#phone .msg-body.msg-reveal{animation:msgReveal .26s ease-out both}
@keyframes msgReveal{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Three-dot "typing…" bubble standing in for a message that just arrived. */
#phone .typing-dots{display:inline-flex;gap:4px;padding:6px 2px}
#phone .typing-dots i{width:6px;height:6px;border-radius:50%;background:#8a8862;opacity:.55;animation:typingDot 1s ease-in-out infinite}
#phone .typing-dots i:nth-child(2){animation-delay:.15s}
#phone .typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes typingDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* Read receipts under Leo's own sent bubbles. */
#phone .read-receipt{margin:3px 0 0 20px;font-size:10px;letter-spacing:.3px;color:#7a8a70;opacity:.85}
#phone .read-receipt .receipt-time{color:#8d9982}

/* The bubble Leo just sent gets a small upward whoosh. */
#phone .message .sent.just-sent{animation:sentWhoosh .32s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes sentWhoosh{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Ping card wobble + phone button dot bounce, layered on top of the existing phonePingIn animation
   (polish.css) via the extra class rather than replacing it. */
#phone-ping.show.ping-wobble{animation:phonePingIn .26s ease-out both,pingWobble .46s ease-out .18s both}
@keyframes pingWobble{0%{transform:rotate(0)}30%{transform:rotate(-1.4deg) scale(1.015)}60%{transform:rotate(1deg)}100%{transform:rotate(0) scale(1)}}
#phone-dot.dot-bounce{animation:dotBounce .5s ease}
@keyframes dotBounce{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-3px) scale(1.25)}60%{transform:translateY(0.5px) scale(.95)}}

@media(prefers-reduced-motion:reduce){
 #phone.phone-in,#phone.phone-out,#phone .message,#phone .msg-body.msg-reveal,#phone .typing-dots i,#phone .message .sent.just-sent,#phone-ping.show.ping-wobble,#phone-dot.dot-bounce{animation:none!important;opacity:1!important;transform:none!important}
}