/* Scene styling and keyframes for the hero animation of /features/anonymous-codes.html,
   "Amara sells her bike". Every animated element's resting style IS its final pose; the
   keyframes only animate towards it (fill-mode both), so a scene shown without animation
   (reduced motion) is complete. Keyframes run only while their scene carries .is-active.
   The buyer is a stranger, so he is drawn as the faceless person prop, never a character. */

.an-ink { color: var(--anim-ink); }
.an-muted { color: var(--anim-muted); }
.an-friend { color: var(--brand-2); }
.an-brand { color: var(--brand-1); }
.an-warm { color: var(--anim-warm); }
.an-love { color: var(--anim-love); }
.an-alert { color: var(--anim-alert); }
.an-stranger { color: var(--anim-muted); }
.an-line { fill: var(--anim-muted); opacity: 0.7; }
.an-new { fill: var(--brand-1); }
.an-awning { fill: var(--brand-2); }
.an-stripe { fill: var(--anim-surface); opacity: 0.75; }
.an-pole { fill: var(--anim-wood); }
.an-floor { fill: var(--anim-muted); opacity: 0.35; }
.an-glow-soft { fill: var(--anim-warm-soft); }
.an-speed { fill: none; stroke: var(--anim-muted); stroke-width: 3; stroke-linecap: round; }
.an-ringc { opacity: 0; }
.an-face-out { opacity: 0; }
.an-pop, .an-grow, .an-move { transform-box: fill-box; transform-origin: center; }
.an-grow { transform-origin: 0 50%; }
.an-body { transform-box: fill-box; transform-origin: 50% 100%; }

@keyframes an-fade-in { from { opacity: 0; } }
@keyframes an-fade-out { from { opacity: 1; } }
@keyframes an-pop { from { transform: scale(0); opacity: 0; } 50% { opacity: 1; } }
@keyframes an-grow { from { transform: scaleX(0); } }
@keyframes an-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-9px); } 70% { transform: translateY(2px); } }
@keyframes an-giggle { 0%, 40%, 80%, 100% { transform: none; } 20% { transform: translateY(-6px) rotate(-2deg); } 60% { transform: translateY(-5px) rotate(2deg); } }
@keyframes an-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes an-buzz { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: rotate(-8deg); } 20%, 40%, 60%, 80% { transform: rotate(8deg); } }
@keyframes an-ring { from { opacity: 1; } 25% { opacity: 0.25; } 50% { opacity: 1; } 75% { opacity: 0.25; } to { opacity: 0; } }
@keyframes an-enter { from { transform: translateX(140px); opacity: 0; } 40% { opacity: 1; } }
@keyframes an-ride { from { transform: translateX(-190px); } }
@keyframes an-poof { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }

/* Springy entrances overshoot through the easing, not through extra keyframes. */
.is-active .an-pop { animation: an-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--an-at, 0s) both; }
/* A face swap: the earlier face fades out as the later one fades in, at the pair's --an-at. */
.is-active .an-face-out { animation: an-fade-out 0.2s ease var(--an-at, 1s) both; }
.is-active .an-face-in { animation: an-fade-in 0.2s ease var(--an-at, 1s) both; }

/* Scene 1, the moment: at a flea market a stranger comes up to Amara and asks about her bike. */
.an-s1-k1 { --an-at: 0.3s; }
.an-s1-k2 { --an-at: 0.4s; }
.is-active .an-s1-stranger { animation: an-enter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both; }
.an-s1-ask { --an-at: 1.2s; }
.an-s1-face { --an-at: 1.5s; }
.is-active .an-s1-amara { animation: an-hop 0.5s ease-out 1.5s both; }

/* Scene 2, the old way: the number she gave away keeps ringing — unknown callers, again and
   again — and her face falls. */
.is-active .an-s2-phone { animation: an-buzz 0.9s linear 0.3s both; }
.is-active .an-s2-ring { animation: an-ring 0.9s ease 0.3s both; }
.an-s2-c1 { --an-at: 0.5s; }
.an-s2-c2 { --an-at: 0.75s; }
.an-s2-c3 { --an-at: 1s; }
.an-s2-face { --an-at: 1.3s; }
.is-active .an-s2-amara { animation: an-shake 0.4s ease 1.3s both; }
.an-s2-card { --an-at: 1.7s; }

/* Scene 3, allme: she reads out a one-time code, the stranger enters it, and they chat under
   nicknames. */
.an-s3-qr { --an-at: 0.2s; }
.an-s3-say { --an-at: 0.5s; }
.is-active .an-s3-code { animation: an-grow 0.35s ease-out 0.9s both; }
.an-s3-tag1 { --an-at: 1.3s; }
.an-s3-tag2 { --an-at: 1.4s; }
.an-s3-m1 { --an-at: 1.9s; }
.an-s3-m2 { --an-at: 2.3s; }
.an-s3-m3 { --an-at: 2.7s; }
.an-s3-face { --an-at: 2.1s; }

/* Scene 4, the payoff: the bike rides off, the used code disappears from her phone, and Amara
   laughs. */
.is-active .an-s4-ride { animation: an-ride 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.is-active .an-s4-speed { animation: an-fade-in 0.3s ease 0.5s both; }
.an-s4-code { opacity: 0; }
.is-active .an-s4-code { animation: an-poof 0.4s ease 1s both; }
.an-s4-k1 { --an-at: 1.15s; }
.an-s4-k2 { --an-at: 1.25s; }
.an-s4-face { --an-at: 1.4s; }
.is-active .an-s4-amara { animation: an-giggle 0.6s ease 1.4s both; }
.an-s4-heart { --an-at: 1.6s; }