/* Scene styling and keyframes for the hero animation of /features/qr-and-tap.html,
   "Amara meets Mei at a party". 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. */

.qt-ink { color: var(--anim-ink); }
.qt-muted { color: var(--anim-muted); }
.qt-friend { color: var(--brand-2); }
.qt-brand { color: var(--brand-1); }
.qt-warm { color: var(--anim-warm); }
.qt-love { color: var(--anim-love); }
.qt-alert { color: var(--anim-alert); }
.qt-line { fill: var(--anim-muted); opacity: 0.7; }
.qt-new { fill: var(--brand-1); }
.qt-wrong { fill: var(--anim-alert); }
.qt-glow-soft { fill: var(--anim-warm-soft); }
.qt-screen-glow { fill: var(--anim-warm-soft); }
.qt-wood { fill: var(--anim-wood); }
.qt-leg { fill: var(--anim-wood); opacity: 0.75; }
.qt-floor { fill: var(--anim-muted); opacity: 0.35; }
.qt-sun { fill: var(--anim-warm); }
.qt-window { fill: var(--anim-warm-soft); stroke: var(--anim-muted); stroke-width: 3; }
.qt-window-bars { fill: none; stroke: var(--anim-surface); stroke-width: 4; }
.qt-garland { fill: none; stroke: var(--anim-muted); stroke-width: 2; }
.qt-flag1 { fill: var(--brand-1); }
.qt-flag2 { fill: var(--anim-warm); }
.qt-flag3 { fill: var(--anim-love); }
.qt-beam, .qt-halo { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.qt-halo { stroke: var(--anim-warm-soft); stroke-width: 12; }
.qt-beam { stroke: var(--anim-warm); stroke-width: 3; }
.qt-face-out { opacity: 0; }
.qt-pop, .qt-grow, .qt-move { transform-box: fill-box; transform-origin: center; }
.qt-grow { transform-origin: 0 50%; }
.qt-body { transform-box: fill-box; transform-origin: 50% 100%; }

@keyframes qt-fade-in { from { opacity: 0; } }
@keyframes qt-fade-out { from { opacity: 1; } }
@keyframes qt-pop { from { transform: scale(0); opacity: 0; } 50% { opacity: 1; } }
@keyframes qt-grow { from { transform: scaleX(0); } }
@keyframes qt-draw { from { stroke-dashoffset: 100; } }
@keyframes qt-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-9px); } 70% { transform: translateY(2px); } }
@keyframes qt-giggle { 0%, 40%, 80%, 100% { transform: none; } 20% { transform: translateY(-6px) rotate(-2deg); } 60% { transform: translateY(-5px) rotate(2deg); } }
@keyframes qt-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes qt-sway { 0%, 100% { transform: none; } 30% { transform: rotate(-6deg); } 70% { transform: rotate(5deg); } }
@keyframes qt-float { from { transform: translate(-18px, 26px) rotate(-20deg); opacity: 0; } 30% { opacity: 1; } }
@keyframes qt-drift { from { transform: translateX(-190px); opacity: 0; } 20% { opacity: 1; } }
@keyframes qt-meet-l { from { transform: translateX(-26px); } }
@keyframes qt-meet-r { from { transform: translateX(26px); } }
@keyframes qt-ring { from { opacity: 1; } 25% { opacity: 0.25; } 50% { opacity: 1; } 75% { opacity: 0.25; } to { opacity: 0; } }

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

/* Scene 1, the moment: at a birthday party with balloons and music, Amara and Mei hit it off. */
.is-active .qt-s1-b1 { animation: qt-sway 1s ease-in-out 0.2s both; }
.is-active .qt-s1-b2 { animation: qt-sway 1s ease-in-out 0.45s both; }
.is-active .qt-s1-b3 { animation: qt-sway 1s ease-in-out 0.7s both; }
.is-active .qt-s1-n1 { animation: qt-float 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both; }
.is-active .qt-s1-n2 { animation: qt-float 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both; }
.is-active .qt-s1-n3 { animation: qt-float 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both; }
.qt-s1-amara-face { --qt-at: 1s; }
.qt-s1-mei-face { --qt-at: 1.1s; }
.is-active .qt-s1-amara { animation: qt-giggle 0.6s ease 1s both; }
.is-active .qt-s1-mei { animation: qt-giggle 0.6s ease 1.1s both; }
.qt-s1-k1 { --qt-at: 1.3s; }
.qt-s1-k2 { --qt-at: 1.4s; }

/* Scene 2, the old way: Mei shouts her number, the music drowns it out, and the number on
   Amara's phone comes out wrong. */
.qt-s2-say { --qt-at: 0.2s; }
.is-active .qt-s2-n1 { animation: qt-drift 0.8s ease-out 0.4s both; }
.is-active .qt-s2-n2 { animation: qt-drift 0.8s ease-out 0.55s both; }
.is-active .qt-s2-n3 { animation: qt-drift 0.8s ease-out 0.7s both; }
.qt-s2-right { opacity: 0; }
.is-active .qt-s2-right { animation: qt-fade-out 0.25s ease 1.2s both; }
.is-active .qt-s2-wrong { animation: qt-fade-in 0.25s ease 1.2s both; }
.qt-s2-no { --qt-at: 1.35s; }
.qt-s2-face { --qt-at: 1.6s; }
.is-active .qt-s2-amara { animation: qt-shake 0.4s ease 1.6s both; }

/* Scene 3, allme: Amara scans the QR code on Mei's phone — or the two phones tap together. */
.qt-s3-qr { --qt-at: 0.2s; }
.is-active .qt-s3-halo, .is-active .qt-s3-beam { animation: qt-draw 0.45s ease-in-out 0.45s both; }
.qt-s3-c1 { --qt-at: 0.95s; }
.is-active .qt-s3-left { animation: qt-meet-l 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both; }
.is-active .qt-s3-right { animation: qt-meet-r 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both; }
.qt-s3-ring { opacity: 0; }
.is-active .qt-s3-ring { animation: qt-ring 0.9s ease 1.85s both; }
.qt-s3-c2 { --qt-at: 2.5s; }
.qt-s3-mei-face { --qt-at: 2.6s; }
.qt-s3-amara-face { --qt-at: 2.7s; }

/* Scene 4, the payoff: connected in a second; the next day they share a coffee and laugh. */
.qt-s4-c1 { --qt-at: 0.2s; }
.qt-s4-c2 { --qt-at: 0.3s; }
.qt-s4-cup1 { --qt-at: 0.8s; }
.qt-s4-cup2 { --qt-at: 0.95s; }
.qt-s4-amara-face { --qt-at: 1.2s; }
.qt-s4-mei-face { --qt-at: 1.3s; }
.is-active .qt-s4-amara { animation: qt-giggle 0.6s ease 1.2s both; }
.is-active .qt-s4-mei { animation: qt-giggle 0.6s ease 1.3s both; }
.qt-s4-heart { --qt-at: 1.5s; }
.qt-s4-k1 { --qt-at: 1.65s; }
.qt-s4-k2 { --qt-at: 1.75s; }