/* ── Homepage bento tiles (home/_meaning_grid, home/bento/*) ─────────────────
   Five of the seven tiles loop a short, real sequence: a roster filling, an
   announcement reaching six families, a declined card retried, pins landing
   near you, and attendance turning into transcript hours overnight.

   Loaded by home/index only, beside home_pillars.css, for the same reason: it
   is keyframes nothing else on the site uses.

   COLOUR IS NOT HERE. Every colour is a Tailwind class with its dark: twin in
   the partial, so the tiles follow the page's theme the way the rest of the
   page does; this file only moves things. LAYOUT IS FLUID — unlike the pillar
   scenes these reflow at every width rather than scaling a fixed stage.

   Paused until play_in_view_controller sees the tile; with reduced motion
   every element holds on a frame from the end of its story (the delay puts
   each one at the same moment of its own loop). */

.bento-motion:not(.is-playing) .bm { animation-play-state: paused !important; }
.bm { animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .bm { animation-play-state: paused !important; animation-delay: calc(var(--bm-dur, 10s) * -0.8) !important; }
  .bm-marquee { animation: none !important; }
}

/* ── Know who is coming ── */
.bm-who { --bm-dur: 10s; }
.bm-who .bm { animation-duration: 10s; }
.bm-who-r1 { animation-name: bm-who-r1; } @keyframes bm-who-r1 { 0%, 5% { opacity: 0; transform: translateY(-12px); } 8%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-who-r2 { animation-name: bm-who-r2; } @keyframes bm-who-r2 { 0%, 15% { opacity: 0; transform: translateY(-12px); } 18%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-who-r3 { animation-name: bm-who-r3; } @keyframes bm-who-r3 { 0%, 25% { opacity: 0; transform: translateY(-12px); } 28%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-who-r4 { animation-name: bm-who-r4; } @keyframes bm-who-r4 { 0%, 35% { opacity: 0; transform: translateY(-12px); } 38%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-who-r5 { animation-name: bm-who-r5; } @keyframes bm-who-r5 { 0%, 45% { opacity: 0; transform: translateY(-12px); } 48%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-who-n0 { animation-name: bm-who-n0; } @keyframes bm-who-n0 { 0%, 7% { opacity: 1; } 8%, 100% { opacity: 0; } }
.bm-who-n1 { animation-name: bm-who-n1; } @keyframes bm-who-n1 { 0%, 7% { opacity: 0; } 8%, 17% { opacity: 1; } 18%, 100% { opacity: 0; } }
.bm-who-n2 { animation-name: bm-who-n2; } @keyframes bm-who-n2 { 0%, 17% { opacity: 0; } 18%, 27% { opacity: 1; } 28%, 100% { opacity: 0; } }
.bm-who-n3 { animation-name: bm-who-n3; } @keyframes bm-who-n3 { 0%, 27% { opacity: 0; } 28%, 37% { opacity: 1; } 38%, 100% { opacity: 0; } }
.bm-who-n4 { animation-name: bm-who-n4; } @keyframes bm-who-n4 { 0%, 37% { opacity: 0; } 38%, 47% { opacity: 1; } 48%, 100% { opacity: 0; } }
.bm-who-n5 { animation-name: bm-who-n5; } @keyframes bm-who-n5 { 0%, 47% { opacity: 0; } 48%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
.bm-who-fill { animation-name: bm-who-fill; } @keyframes bm-who-fill { 0%, 5% { width: 0; } 8% { width: 16.7%; } 18% { width: 25%; } 28% { width: 41.7%; } 38% { width: 50%; } 48%, 95% { width: 66.7%; } 99%, 100% { width: 0; } }
.bm-who-foot { animation-name: bm-who-foot; } @keyframes bm-who-foot { 0%, 52% { opacity: 0; transform: translateY(6px); } 58%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

/* ── Tell everyone at once ── */
.bm-tell { --bm-dur: 10s; }
.bm-tell .bm { animation-duration: 10s; }
/* The message arrives rather than types: it is two lines at some widths and
   one at others, and a per-character reveal cannot follow a reflowing wrap. */
.bm-tell-msg { animation-name: bm-tell-msg; }
@keyframes bm-tell-msg { 0%, 4% { opacity: 0; transform: translateY(6px); filter: blur(3px); } 14%, 95% { opacity: 1; transform: none; filter: none; } 99%, 100% { opacity: 0; } }
.bm-tell-send { animation-name: bm-tell-send; } @keyframes bm-tell-send { 0%, 33% { transform: none; } 35% { transform: scale(.95); } 37%, 100% { transform: none; } }
.bm-tell-s1 { animation-name: bm-tell-s1; } @keyframes bm-tell-s1 { 0%, 36% { opacity: 1; } 37%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }
.bm-tell-s2 { animation-name: bm-tell-s2; } @keyframes bm-tell-s2 { 0%, 36% { opacity: 0; } 37%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
.bm-tell-k1 { animation-name: bm-tell-k1; } @keyframes bm-tell-k1 { 0%, 40% { opacity: 0; transform: scale(.3); } 42% { opacity: 1; transform: scale(1.2); } 43%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-tell-k2 { animation-name: bm-tell-k2; } @keyframes bm-tell-k2 { 0%, 43% { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1.2); } 46%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-tell-k3 { animation-name: bm-tell-k3; } @keyframes bm-tell-k3 { 0%, 46% { opacity: 0; transform: scale(.3); } 48% { opacity: 1; transform: scale(1.2); } 49%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-tell-k4 { animation-name: bm-tell-k4; } @keyframes bm-tell-k4 { 0%, 49% { opacity: 0; transform: scale(.3); } 51% { opacity: 1; transform: scale(1.2); } 52%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-tell-k5 { animation-name: bm-tell-k5; } @keyframes bm-tell-k5 { 0%, 52% { opacity: 0; transform: scale(.3); } 54% { opacity: 1; transform: scale(1.2); } 55%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-tell-k6 { animation-name: bm-tell-k6; } @keyframes bm-tell-k6 { 0%, 55% { opacity: 0; transform: scale(.3); } 57% { opacity: 1; transform: scale(1.2); } 58%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.bm-tell-foot { animation-name: bm-tell-foot; } @keyframes bm-tell-foot { 0%, 60% { opacity: 0; transform: translateY(6px); } 64%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

/* ── Get paid without asking twice ── */
.bm-paid { --bm-dur: 10s; }
.bm-paid .bm { animation-duration: 10s; }
.bm-paid-p1 { animation-name: bm-paid-p1; } @keyframes bm-paid-p1 { 0%, 24% { opacity: 1; } 26%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }
.bm-paid-p2 { animation-name: bm-paid-p2; } @keyframes bm-paid-p2 { 0%, 24% { opacity: 0; } 26%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
.bm-paid-p3 { animation-name: bm-paid-p3; } @keyframes bm-paid-p3 { 0%, 52% { opacity: 0; transform: scale(.8); } 55% { opacity: 1; transform: scale(1.1); } 57%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.bm-paid-o1 { animation-name: bm-paid-o1; } @keyframes bm-paid-o1 { 0%, 6% { opacity: .35; } 9%, 96% { opacity: 1; } 99%, 100% { opacity: .35; } }
.bm-paid-o2 { animation-name: bm-paid-o2; } @keyframes bm-paid-o2 { 0%, 28% { opacity: .35; } 31%, 96% { opacity: 1; } 99%, 100% { opacity: .35; } }
.bm-paid-o3 { animation-name: bm-paid-o3; } @keyframes bm-paid-o3 { 0%, 52% { opacity: .35; } 55%, 96% { opacity: 1; } 99%, 100% { opacity: .35; } }
.bm-paid-zero { animation-name: bm-paid-zero; } @keyframes bm-paid-zero { 0%, 60% { opacity: 0; transform: translateY(8px); } 65%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

/* ── See everything happening near you ── */
.bm-near .bm-ring { animation: bm-near-ring 4s ease-out infinite; }
@keyframes bm-near-ring { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: .25; } }
.bm-near .bm-pin { animation: bm-near-pin 8s cubic-bezier(.3, 1.4, .5, 1) infinite both; }
@keyframes bm-near-pin { 0% { transform: translate(-50%, -50%) scale(0); } 6%, 92% { transform: translate(-50%, -50%) scale(1); } 97%, 100% { transform: translate(-50%, -50%) scale(0); } }
.bm-marquee { animation: bm-near-up 18s linear infinite; }
@keyframes bm-near-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.bento-motion:not(.is-playing) .bm-ring,
.bento-motion:not(.is-playing) .bm-pin,
.bento-motion:not(.is-playing) .bm-marquee { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .bm-near .bm-ring, .bm-near .bm-pin { animation: none !important; transform: translate(-50%, -50%); }
}

/* ── Let the record write itself ── */
.bm-rec { --bm-dur: 11s; }
.bm-rec .bm { animation-duration: 11s; }
.bm-rec-c1 { animation-name: bm-rec-c1; } @keyframes bm-rec-c1 { 0%, 5% { opacity: 0; transform: scale(.4); } 8%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.bm-rec-c2 { animation-name: bm-rec-c2; } @keyframes bm-rec-c2 { 0%, 11% { opacity: 0; transform: scale(.4); } 14%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.bm-rec-c3 { animation-name: bm-rec-c3; } @keyframes bm-rec-c3 { 0%, 17% { opacity: 0; transform: scale(.4); } 20%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.bm-rec-night { animation-name: bm-rec-night; } @keyframes bm-rec-night { 0%, 25% { opacity: 0; } 29%, 37% { opacity: .94; } 41%, 100% { opacity: 0; } }
.bm-rec-grow { animation-name: bm-rec-grow; } @keyframes bm-rec-grow { 0%, 40% { width: var(--a); } 50%, 96% { width: var(--b); } 99%, 100% { width: var(--a); } }
.bm-rec-hA { animation-name: bm-rec-hA; } @keyframes bm-rec-hA { 0%, 44% { opacity: 1; } 46%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }
.bm-rec-hB { animation-name: bm-rec-hB; } @keyframes bm-rec-hB { 0%, 44% { opacity: 0; } 46%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
.bm-rec-done { animation-name: bm-rec-done; } @keyframes bm-rec-done { 0%, 54% { opacity: 0; transform: translateY(8px); } 59%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }