/* Scene styling and keyframes for the hero animation of /features/bunches.html,
   "Amara's running club". 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. */

.bu-ink { color: var(--anim-ink); }
.bu-muted { color: var(--anim-muted); }
.bu-friend { color: var(--brand-2); }
.bu-joined { color: var(--brand-2); }
.bu-brand { color: var(--brand-1); }
.bu-warm { color: var(--anim-warm); }
.bu-love { color: var(--anim-love); }
.bu-alert { color: var(--anim-alert); }
.bu-wood { color: var(--anim-wood); }
.bu-grass { fill: var(--anim-warm-soft); }
.bu-track { fill: none; stroke: var(--anim-muted); stroke-width: 3; stroke-dasharray: 8 10; stroke-linecap: round; opacity: 0.6; }
.bu-sun { fill: var(--anim-warm); }
.bu-sheet { fill: var(--anim-surface); stroke: var(--anim-ink); stroke-width: 2.5; }
.bu-dot { fill: var(--anim-muted); }
.bu-row { fill: var(--anim-muted); opacity: 0.7; }
.bu-frame { fill: var(--anim-surface); stroke: var(--brand-2); stroke-width: 2; }
.bu-strike, .bu-beam, .bu-halo, .bu-link { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.bu-strike { stroke: var(--anim-alert); stroke-width: 3; }
.bu-halo { stroke: var(--anim-warm-soft); stroke-width: 12; }
.bu-beam { stroke: var(--anim-warm); stroke-width: 3; }
.bu-link { stroke: var(--brand-1); stroke-width: 2.5; opacity: 0.55; stroke-dasharray: none; }
.bu-s4-l1, .bu-s4-l2, .bu-s4-l3, .bu-s4-l4, .bu-s4-l5, .bu-s4-l6, .bu-s4-l7, .bu-s4-l8, .bu-s4-l9, .bu-s4-l10,
.bu-s4-n1, .bu-s4-n2, .bu-s4-n3 { stroke-dasharray: 100; }
.bu-gone { opacity: 0; }
.bu-face-out { opacity: 0; }
.bu-pop, .bu-slide, .bu-arrive, .bu-leave { transform-box: fill-box; transform-origin: center; }
.bu-body { transform-box: fill-box; transform-origin: 50% 100%; }
.bu-leave { opacity: 0; transform: translateX(-90px); }

@keyframes bu-fade-in { from { opacity: 0; } }
@keyframes bu-fade-out { from { opacity: 1; } }
@keyframes bu-link-out { from { opacity: 0.55; } }
@keyframes bu-pop { from { transform: scale(0); opacity: 0; } 50% { opacity: 1; } }
@keyframes bu-draw { from { stroke-dashoffset: 100; } }
@keyframes bu-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-9px); } 70% { transform: translateY(2px); } }
@keyframes bu-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes bu-slide { from { transform: translateX(260px) rotate(8deg); opacity: 0; } 30% { opacity: 1; } }
@keyframes bu-join { from { color: var(--anim-muted); } }
@keyframes bu-arrive { from { transform: translateX(70px); opacity: 0; } }
@keyframes bu-leave { from { transform: none; opacity: 1; } 55% { opacity: 1; } }

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

/* Scene 1, the moment: Amara in the park, and the runners of her new club arrive. */
.bu-s1-sun { --bu-at: 0.2s; }
.bu-s1-p1 { --bu-at: 0.3s; } .bu-s1-p2 { --bu-at: 0.38s; } .bu-s1-p3 { --bu-at: 0.46s; } .bu-s1-p4 { --bu-at: 0.54s; }
.bu-s1-p5 { --bu-at: 0.62s; } .bu-s1-p6 { --bu-at: 0.7s; } .bu-s1-p7 { --bu-at: 0.78s; } .bu-s1-p8 { --bu-at: 0.86s; }
.bu-s1-q1 { --bu-at: 0.95s; } .bu-s1-q2 { --bu-at: 1.05s; } .bu-s1-q3 { --bu-at: 1.15s; }
.bu-s1-q4 { --bu-at: 1.25s; } .bu-s1-q5 { --bu-at: 1.35s; } .bu-s1-q6 { --bu-at: 1.45s; }
.bu-s1-face { --bu-at: 1.8s; }
.is-active .bu-s1-amara { animation: bu-hop 0.5s ease-out 1.8s both; }
.bu-s1-k1 { --bu-at: 2s; }
.bu-s1-k2 { --bu-at: 2.1s; }

/* Scene 2, the old way: a paper list of numbers goes round, entries get crossed out, the
   runners ask again, and Amara's face falls. */
.is-active .bu-s2-sheet { animation: bu-slide 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both; }
.bu-s2-a1 { --bu-at: 1s; }
.is-active .bu-s2-x1 { animation: bu-draw 0.35s ease-in-out 1.2s both; }
.bu-s2-a2 { --bu-at: 1.3s; }
.is-active .bu-s2-x2 { animation: bu-draw 0.35s ease-in-out 1.5s both; }
.bu-s2-a3 { --bu-at: 1.6s; }
.is-active .bu-s2-x3 { animation: bu-draw 0.35s ease-in-out 1.8s both; }
.bu-s2-no { --bu-at: 2.1s; }
.bu-s2-face { --bu-at: 2.4s; }
.is-active .bu-s2-amara { animation: bu-shake 0.4s ease 2.4s both; }

/* Scene 3, allme: Amara shows the bunch's code; each runner joins and shares only a name tag
   and a photo. */
.bu-s3-code { --bu-at: 0.3s; }
.is-active .bu-s3-halo, .is-active .bu-s3-beam { animation: bu-draw 0.45s ease-in-out 0.6s both; }
.bu-s3-j1 { --bu-at: 1s; } .bu-s3-f1 { --bu-at: 1.1s; }
.bu-s3-j2 { --bu-at: 1.2s; } .bu-s3-f2 { --bu-at: 1.3s; }
.bu-s3-j3 { --bu-at: 1.4s; } .bu-s3-f3 { --bu-at: 1.5s; }
.bu-s3-j4 { --bu-at: 1.6s; } .bu-s3-f4 { --bu-at: 1.7s; }
.bu-s3-j5 { --bu-at: 1.8s; } .bu-s3-f5 { --bu-at: 1.9s; }
.bu-s3-j6 { --bu-at: 2s; } .bu-s3-f6 { --bu-at: 2.1s; }
.bu-s3-face { --bu-at: 2.6s; }
.is-active .bu-s3-amara { animation: bu-hop 0.5s ease-out 2.6s both; }

/* Scene 4, the payoff: everyone is linked to everyone, messages fly without a number, and a
   latecomer arrives and is linked to all. */
.is-active .bu-s4-l1 { animation: bu-draw 0.4s ease-in-out 0.3s both; }
.is-active .bu-s4-l2 { animation: bu-draw 0.4s ease-in-out 0.4s both; }
.is-active .bu-s4-l3 { animation: bu-draw 0.4s ease-in-out 0.5s both; }
.is-active .bu-s4-l4 { animation: bu-draw 0.4s ease-in-out 0.6s both; }
.is-active .bu-s4-l5 { animation: bu-draw 0.4s ease-in-out 0.7s both; }
.is-active .bu-s4-l6 { animation: bu-draw 0.4s ease-in-out 0.8s both; }
.is-active .bu-s4-l7 { animation: bu-draw 0.4s ease-in-out 0.9s both; }
.is-active .bu-s4-l8 { animation: bu-draw 0.4s ease-in-out 1s both; }
.is-active .bu-s4-l9 { animation: bu-draw 0.4s ease-in-out 1.1s both; }
.is-active .bu-s4-l10 { animation: bu-draw 0.4s ease-in-out 1.2s both; }
.bu-s4-m1 { --bu-at: 1.6s; }
.bu-s4-m2 { --bu-at: 2s; }
.is-active .bu-s4-late { animation: bu-arrive 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.6s both; }
.is-active .bu-s4-n1 { animation: bu-draw 0.4s ease-in-out 3.1s both; }
.is-active .bu-s4-n2 { animation: bu-draw 0.4s ease-in-out 3.2s both; }
.is-active .bu-s4-n3 { animation: bu-draw 0.4s ease-in-out 3.3s both; }
.bu-s4-face { --bu-at: 3.4s; }
.is-active .bu-s4-amara { animation: bu-hop 0.5s ease-out 3.4s both; }
.bu-s4-k1 { --bu-at: 3.5s; }
.bu-s4-k2 { --bu-at: 3.6s; }

/* Scene 5, leaving: one runner taps Leave and walks off with a moving box; his links fade, the
   rest stay connected, and Amara smiles. */
.bu-s5-tap { --bu-at: 0.5s; }
.is-active .bu-s5-leaver { animation: bu-leave 1.2s ease-in 1.2s both; }
.is-active .bu-s5-gone { animation: bu-link-out 0.6s ease 1.6s both; }
.bu-s5-face { --bu-at: 2.2s; }
.is-active .bu-s5-amara { animation: bu-hop 0.5s ease-out 2.2s both; }
.bu-s5-k1 { --bu-at: 2.4s; }
.bu-s5-heart { --bu-at: 2.6s; }
.bu-s5-k2 { --bu-at: 2.7s; }