/* Posty the mailbox (art/posty.js): the meal, one slow step at a time. Shared by Mail Truck and ABC Mailbox.
   Calm by design (docs/27-kids-arcade-rules.md): each part moves once, slowly (0.4 to 0.6 s, ease in and out), one
   thing at a time, nothing loops, and with Reduce motion (or the Less motion help) it simply changes. */
.posty { display: block; width: 100%; height: auto; overflow: visible; }
.posty .posty-mouth { transform-box: view-box; transform: scaleY(0); opacity: 0; transition: transform .6s ease-in-out, opacity .6s ease-in-out; }
.posty .posty-smile { transform-box: view-box; transition: opacity .5s ease-in-out, transform .5s ease-in-out; }
.posty.open .posty-mouth { transform: scaleY(1.12); opacity: 1; }
.posty.open .posty-smile, .posty.chomp .posty-smile { opacity: 0; }
/* Looking down at the letter that's coming. */
.posty .posty-pupils { transition: transform .5s ease-in-out; }
.posty.look .posty-pupils { transform: translate(-3px, 6px); }
/* The mouth shuts on it: a wavy "mmm". */
.posty .posty-mmm { opacity: 0; transition: opacity .4s ease-in-out; }
.posty.chomp .posty-mmm { opacity: 1; }
/* Happy: eyes close into smiles, cheeks go rosy, the smile grows. */
.posty .posty-happy { opacity: 0; transition: opacity .5s ease-in-out; }
.posty .posty-pupils, .posty .posty-eyes { transition: opacity .5s ease-in-out, transform .5s ease-in-out; }
.posty.happy .posty-eyes { opacity: 0; }
.posty.happy .posty-happy { opacity: 1; }
.posty .posty-cheeks { opacity: .8; transition: opacity .5s ease-in-out; }
.posty.happy .posty-cheeks { opacity: 1; }
.posty.happy .posty-smile { transform: scale(1.25, 1.35); }
/* The flag rests pointing to the side, and goes up once a letter is in. */
.posty .posty-flag { transform-box: view-box; transform: rotate(90deg); transition: transform .6s ease-in-out; }
.posty.flag-up .posty-flag { transform: rotate(0deg); }
/* One heart floats up once, then stays until the next letter. */
.posty .posty-heart { transform-box: view-box; opacity: 0; transform: translateY(26px) scale(.7); transform-origin: 120px 30px; transition: opacity .6s ease-in-out, transform .6s ease-in-out; }
.posty.love .posty-heart { opacity: 1; transform: translateY(-6px) scale(1); }
/* Back to rest for the next letter happens out of sight: no motion. */
.posty.reset *, .posty.reset .posty-flag, .posty.reset .posty-mouth, .posty.reset .posty-smile, .posty.reset .posty-ring { transition: none !important; }
/* The hint: the mouth stays bright while the screen dims around it (spotlight.js, Doug's standing rule Oct 6: no
   circles). The ring is never drawn; it only marks where the spotlight goes. */
.posty .posty-ring { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .posty *, .posty .posty-mouth, .posty .posty-smile, .posty .posty-flag { transition: none !important; }
}