/*
  Cartoon characters' tap acts (tree/cartoon.js). TreeCartoon.play(el) puts "is-acting" on the
  element around a character for about two seconds, and the character's data-act picks the moves.
  Parts: .ct-body (the whole person), .ct-head, .ct-armL (the hand that holds things), .ct-prop
  (what they hold), .ct-arm (the right arm), .ct-fx / .ct-fxb (extras in front of / behind them).
  --sy is the shoulder height and --ny the neck, which change a little with the person's age.
*/
.ct .ct-body { transform-origin: 80px 178px; }
.ct .ct-head { transform-origin: 80px var(--ny, 94px); }
.ct .ct-armL, .ct .ct-prop { transform-origin: 37px var(--sy, 112px); }
.ct .ct-arm { transform-origin: 118px var(--sy, 112px); }
.ct .ct-happy, .ct .ct-shut, .ct .ct-laugh, .ct .ct-lhappy, .ct .ct-fx, .ct .ct-fxb { opacity: 0; }
.ct .ct-fx, .ct .ct-fxb { pointer-events: none; }
.ct [class*="fx-"] { transform-box: fill-box; transform-origin: center; }

/* everyone: the extras fade in and out, and they smile */
.is-acting .ct .ct-fx, .is-acting .ct .ct-fxb { animation: ct-fx 2.2s ease both; }
.is-acting .ct .ct-smile { opacity: 1; }
.is-acting .ct .ct-flat { opacity: 0; }
@keyframes ct-fx { 0% { opacity: 0; } 6%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ct-hide { 0%, 100% { opacity: 1; } 6%, 88% { opacity: 0; } }
/* laughing: eyes squeeze shut, mouth wide open (and the lamb laughs too) */
.is-acting .ct.ct-lol .ct-laugh, .is-acting .ct.ct-lol .ct-happy, .is-acting .ct.ct-lol .ct-lhappy { animation: ct-fx 2.2s ease both; }
.is-acting .ct.ct-lol .ct-eyes, .is-acting .ct.ct-lol .ct-leye, .is-acting .ct.ct-lol .ct-smile { animation: ct-hide 2.2s ease both; }

/* the little extras */
.is-acting .ct .fx-pop { animation: fx-pop 2.1s var(--d, 0s) cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes fx-pop { 0% { transform: scale(0); } 14%, 86% { transform: scale(1); } 100% { transform: scale(0); } }
.is-acting .ct .fx-twinkle { animation: fx-twinkle 1.1s var(--d, 0s) ease both 2; }
@keyframes fx-twinkle { 0% { transform: scale(0) rotate(0); } 40% { transform: scale(1.25) rotate(45deg); } 70% { transform: scale(.8) rotate(70deg); } 100% { transform: scale(0) rotate(90deg); } }
.is-acting .ct .fx-rise { animation: fx-rise 1.4s var(--d, 0s) ease-out both; }
@keyframes fx-rise { 0% { transform: translate(0, 12px) scale(.5); opacity: 0; } 25% { opacity: 1; transform: translate(-3px, 0) scale(1); } 60% { transform: translate(3px, -16px); } 100% { transform: translate(-2px, -34px); opacity: 0; } }
.is-acting .ct .fx-fall { animation: fx-fall .6s var(--d, 0s) ease-in both 3; }
@keyframes fx-fall { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
.is-acting .ct .fx-late { animation: fx-late 2.2s ease both; transform-origin: 130px 14px; transform-box: view-box; }
@keyframes fx-late { 0%, 58% { transform: scale(0); } 70%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
.is-acting .ct .fx-glow { animation: fx-glow 2.2s ease both; }
@keyframes fx-glow { 0% { transform: scale(.3) rotate(0); opacity: 0; } 20% { opacity: 1; } 50% { transform: scale(1.05) rotate(20deg); } 80% { transform: scale(.95) rotate(35deg); opacity: 1; } 100% { transform: scale(1.1) rotate(45deg); opacity: 0; } }

/* ---- tickle / laugh (Sarah laughed: Genesis 18:12; "God has made me laugh": 21:6) */
.is-acting .ct:is([data-act="laugh"], [data-act="tickle"], [data-act="stew"]) .ct-arm { animation: ct-belly-r 2.2s ease both; }
.is-acting .ct:is([data-act="laugh"], [data-act="tickle"], [data-act="stew"]) .ct-armL { animation: ct-belly-l 2.2s ease both; }
.is-acting .ct:is([data-act="laugh"], [data-act="tickle"], [data-act="stew"]) .ct-body { animation: ct-giggle 2.2s ease both; }
.is-acting .ct:is([data-act="laugh"], [data-act="tickle"]) .ct-head { animation: ct-headback 2.2s ease both; }
.is-acting .ct[data-act="tickle"] .ct-body { animation: ct-poke 2.2s ease both; }
@keyframes ct-belly-r { 0%, 100% { transform: rotate(0); } 12%, 86% { transform: rotate(40deg); } }
@keyframes ct-belly-l { 0%, 100% { transform: rotate(0); } 12%, 86% { transform: rotate(-40deg); } }
@keyframes ct-giggle { 0%, 100% { transform: none; } 15%, 35%, 55%, 75% { transform: translate(-1.5px, -3px) rotate(-3deg); } 25%, 45%, 65%, 85% { transform: translate(1.5px, 0) rotate(3deg); } }
@keyframes ct-poke { 0%, 100% { transform: none; } 6% { transform: translateY(-14px) rotate(-5deg); } 12% { transform: translateY(2px) scaleY(.94); } 20%, 40%, 60%, 80% { transform: translate(-1.5px, -3px) rotate(-3deg); } 30%, 50%, 70% { transform: translate(1.5px, 0) rotate(3deg); } }
@keyframes ct-headback { 0%, 100% { transform: none; } 15%, 85% { transform: rotate(-7deg); } 40%, 60% { transform: rotate(-4deg) translateY(-1px); } }

/* ---- cheer (raise the staff and cheer), jump, and the prop held high */
.is-acting .ct:is([data-act="cheer"], [data-act="shout"], [data-act="stars"], [data-act="royal"]) :is(.ct-armL, .ct-prop) { animation: ct-raiseL 2.2s ease both; }
.is-acting .ct:is([data-act="cheer"], [data-act="jump"], [data-act="flex"]) .ct-arm { animation: ct-raiseR 2.2s ease both; }
.is-acting .ct:is([data-act="jump"], [data-act="flex"]) .ct-armL { animation: ct-raiseL 2.2s ease both; }
.is-acting .ct[data-act="stars"] :is(.ct-armL, .ct-prop) { animation: ct-pointup 2.2s ease both; }
.is-acting .ct:is([data-act="cheer"], [data-act="shout"]) .ct-body { animation: ct-hop2 2.2s ease both; }
.is-acting .ct[data-act="jump"] .ct-body { animation: ct-jump 2.2s ease both; }
.is-acting .ct[data-act="stars"] .ct-head { animation: ct-lookup 2.2s ease both; }
@keyframes ct-raiseL { 0%, 100% { transform: rotate(0); } 14% { transform: rotate(155deg); } 28% { transform: rotate(128deg); } 42% { transform: rotate(155deg); } 56% { transform: rotate(128deg); } 70%, 84% { transform: rotate(150deg); } }
@keyframes ct-raiseR { 0%, 100% { transform: rotate(0); } 14% { transform: rotate(-155deg); } 28% { transform: rotate(-128deg); } 42% { transform: rotate(-155deg); } 56% { transform: rotate(-128deg); } 70%, 84% { transform: rotate(-150deg); } }
@keyframes ct-pointup { 0%, 100% { transform: rotate(0); } 15%, 85% { transform: rotate(140deg); } }
@keyframes ct-lookup { 0%, 100% { transform: none; } 15%, 85% { transform: rotate(-8deg) translateY(-2px); } }
@keyframes ct-hop2 { 0%, 100% { transform: none; } 14%, 42% { transform: translateY(-12px); } 28%, 56% { transform: translateY(0) scaleY(.96); } 70% { transform: translateY(-6px); } 84% { transform: none; } }
@keyframes ct-jump { 0%, 100% { transform: none; } 8%, 50% { transform: translateY(3px) scaleY(.92); } 22%, 64% { transform: translateY(-26px) rotate(-4deg); } 36%, 78% { transform: translateY(0) scaleY(.95); } 88% { transform: none; } }

/* ---- toss the lamb up and catch it (Isaac: "God will provide the lamb", Genesis 22:8) */
.is-acting .ct[data-act="toss"] .ct-prop { animation: ct-toss 2.2s ease both; transform-box: fill-box; transform-origin: center; }
.is-acting .ct[data-act="toss"] .ct-armL { animation: ct-throw 2.2s ease both; }
.is-acting .ct[data-act="toss"] .ct-body { animation: ct-catch 2.2s ease both; }
@keyframes ct-toss { 0%, 100% { transform: none; } 14% { transform: translateY(6px); } 30% { transform: translate(18px, -96px) rotate(200deg); } 46% { transform: translate(24px, -118px) rotate(360deg); } 64% { transform: translate(10px, -40px) rotate(560deg); } 72% { transform: translateY(4px) rotate(720deg); } 80% { transform: translateY(-3px) rotate(720deg); } 88% { transform: rotate(720deg); } }
@keyframes ct-throw { 0%, 100% { transform: rotate(0); } 14% { transform: rotate(-12deg); } 26% { transform: rotate(90deg); } 60% { transform: rotate(40deg); } 72% { transform: rotate(0); } }
@keyframes ct-catch { 0%, 100% { transform: none; } 24% { transform: translateY(-6px); } 72% { transform: translateY(3px) scaleY(.95); } 80%, 86% { transform: translate(-1px, -2px) rotate(-2deg); } 83%, 92% { transform: translate(1px, 0) rotate(2deg); } }

/* ---- Rachel's lamb nuzzles her cheek (her name means "ewe"; she kept her father's sheep, Genesis 29:9) */
.is-acting .ct[data-act="nuzzle"] .ct-prop { animation: ct-nuzzle 2.2s ease both; transform-box: fill-box; transform-origin: center; }
.is-acting .ct[data-act="nuzzle"] .ct-head { animation: ct-tilt-l 2.2s ease both; }
.is-acting .ct[data-act="nuzzle"] .ct-armL { animation: ct-lift 2.2s ease both; }
@keyframes ct-nuzzle { 0%, 100% { transform: none; } 20% { transform: translate(8px, -48px) rotate(-14deg); } 30%, 50%, 70% { transform: translate(14px, -66px) rotate(-8deg); } 40%, 60% { transform: translate(18px, -64px) rotate(-18deg); } 82% { transform: translate(6px, -20px); } }
@keyframes ct-tilt-l { 0%, 100% { transform: none; } 20%, 80% { transform: rotate(-9deg); } }
@keyframes ct-lift { 0%, 100% { transform: rotate(0); } 20%, 80% { transform: rotate(35deg); } }

/* ---- Noah: rocking in the ark on the waves, a rainbow, and the dove with a leaf (Genesis 8:11, 9:13) */
.is-acting .ct[data-act="ark"] .ct-body { animation: ct-rock 2.2s ease-in-out both; }
.is-acting .ct[data-act="ark"] .fx-waves { animation: fx-waves 1.1s linear 2; transform-box: view-box; }
.is-acting .ct[data-act="ark"] .fx-dove { animation: fx-dove 2.2s ease-out both; }
@keyframes ct-rock { 0%, 100% { transform: none; } 15%, 55% { transform: rotate(-6deg) translateY(-3px); } 35%, 75% { transform: rotate(6deg); } }
@keyframes fx-waves { to { transform: translateX(40px); } }
@keyframes fx-dove { 0% { transform: translate(-150px, 40px) rotate(12deg); } 50% { transform: translate(-40px, 6px) rotate(-6deg); } 70%, 100% { transform: none; } }

/* ---- Rebekah pours water for the camels too (Genesis 24:19) */
.is-acting .ct[data-act="pour"] .ct-prop { animation: ct-pour 2.2s ease both; transform-box: fill-box; transform-origin: 60% 80%; }
@keyframes ct-pour { 0%, 100% { transform: none; } 16%, 84% { transform: rotate(-78deg) translate(4px, -6px); } }

/* ---- Jacob dozes on his stone pillow and dreams of the stairway to heaven (Genesis 28:11–12) */
.is-acting .ct[data-act="dream"] .ct-head { animation: ct-doze 2.2s ease both; }
.is-acting .ct[data-act="dream"] .ct-eyes { animation: ct-eyes-shut 2.2s ease both; }
.is-acting .ct[data-act="dream"] .ct-shut { animation: ct-eyes-open 2.2s ease both; }
.is-acting .ct[data-act="dream"] .ct-body { animation: ct-wake 2.2s ease both; }
@keyframes ct-doze { 0%, 100% { transform: none; } 12%, 60% { transform: rotate(14deg) translate(2px, 3px); } 36% { transform: rotate(10deg) translate(2px, 1px); } 68% { transform: rotate(-4deg); } }
@keyframes ct-eyes-shut { 0%, 8%, 64%, 100% { opacity: 1; } 12%, 60% { opacity: 0; } }
@keyframes ct-eyes-open { 0%, 8%, 64%, 100% { opacity: 0; } 12%, 60% { opacity: 1; } }
@keyframes ct-wake { 0%, 62%, 100% { transform: none; } 72% { transform: translateY(-14px); } 82% { transform: translateY(0) scaleY(.96); } }

/* ---- Joseph twirls to show off his coat of many colors (Genesis 37:3) */
.is-acting .ct[data-act="twirl"] .ct-body { animation: ct-twirl 2.2s ease-in-out both; }
.is-acting .ct[data-act="twirl"] .ct-arm { animation: ct-outR 2.2s ease both; }
.is-acting .ct[data-act="twirl"] .ct-armL { animation: ct-outL 2.2s ease both; }
@keyframes ct-twirl { 0%, 100% { transform: none; } 20% { transform: scaleX(-1) translateY(-6px); } 40% { transform: scaleX(1); } 60% { transform: scaleX(-1) translateY(-6px); } 80% { transform: scaleX(1); } }
@keyframes ct-outR { 0%, 100% { transform: rotate(0); } 12%, 86% { transform: rotate(-80deg); } }
@keyframes ct-outL { 0%, 100% { transform: rotate(0); } 12%, 86% { transform: rotate(80deg); } }

/* ---- Moses holds up the tablets, and his face shines (Exodus 34:29) */
.is-acting .ct[data-act="shine"] .ct-prop { animation: ct-tablets-up 2.2s ease both; }
.is-acting .ct[data-act="shine"] .ct-armL { animation: ct-upL 2.2s ease both; }
.is-acting .ct[data-act="shine"] .ct-arm { animation: ct-upR 2.2s ease both; }
@keyframes ct-tablets-up { 0%, 100% { transform: none; } 18%, 82% { transform: translate(50px, -122px); } }
@keyframes ct-upL { 0%, 100% { transform: rotate(0); } 18%, 82% { transform: rotate(158deg); } }
@keyframes ct-upR { 0%, 100% { transform: rotate(0); } 18%, 82% { transform: rotate(-158deg); } }

/* ---- Miriam shakes her tambourine and dances (Exodus 15:20) */
.is-acting .ct[data-act="tamb"] .ct-prop { animation: ct-shake 2.2s ease both; transform-box: fill-box; transform-origin: center; }
.is-acting .ct:is([data-act="tamb"], [data-act="leap"], [data-act="king8"], [data-act="king7"]) .ct-body { animation: ct-hop3 2.2s ease both; }
.is-acting .ct[data-act="tamb"] .ct-arm { animation: ct-raiseR 2.2s ease both; }
@keyframes ct-shake { 0%, 100% { transform: none; } 10% { transform: translateY(-40px) rotate(-25deg); } 16%, 28%, 40%, 52%, 64%, 76% { transform: translateY(-44px) rotate(22deg); } 22%, 34%, 46%, 58%, 70%, 82% { transform: translateY(-40px) rotate(-22deg); } 90% { transform: translateY(-10px); } }
@keyframes ct-hop3 { 0%, 100% { transform: none; } 12%, 40%, 68% { transform: translateY(-12px); } 26%, 54%, 82% { transform: translateY(0) scaleY(.96); } }

/* ---- Aaron's rod blossoms overnight (Numbers 17:8) */
.is-acting .ct[data-act="bloom"] .ct-body { animation: ct-bob 2.2s ease both; }
@keyframes ct-bob { 0%, 100% { transform: none; } 30%, 70% { transform: translateY(-5px); } 50% { transform: translateY(-2px); } }

/* ---- Joshua: shout, and the walls of Jericho tumble (Joshua 6:20) */
.is-acting .ct[data-act="shout"] .ct-laugh { animation: ct-fx 2.2s ease both; }
.is-acting .ct[data-act="shout"] .ct-smile { animation: ct-hide 2.2s ease both; }
.is-acting .ct .fx-tumble { animation: fx-tumble 1.3s var(--d, 0s) ease-in both; }
@keyframes fx-tumble { 0% { transform: none; } 100% { transform: translate(8px, 40px) rotate(var(--r, 30deg)); opacity: .2; } }

/* ---- Deborah under her palm tree, Mary singing (Judges 4:5, 5; Luke 1:46), a harp being strummed */
.is-acting .ct:is([data-act="palm"], [data-act="sing"], [data-act="strum"]) .ct-body { animation: ct-sway 2.2s ease-in-out both; }
.is-acting .ct:is([data-act="palm"], [data-act="sing"]) .ct-head { animation: ct-tilt-sing 2.2s ease-in-out both; }
@keyframes ct-sway { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(-4deg); } 40%, 80% { transform: rotate(4deg); } }
@keyframes ct-tilt-sing { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(6deg); } 40%, 80% { transform: rotate(-6deg); } }

/* ---- Samson flexes (Judges 16) */
.is-acting .ct[data-act="flex"] .ct-body { animation: ct-puff 2.2s ease both; }
@keyframes ct-puff { 0%, 100% { transform: none; } 20%, 80% { transform: scale(1.08, 1.04); } 40%, 60% { transform: scale(1.12, 1.05) translateY(-2px); } }

/* ---- Ruth gathers grain (Ruth 2) */
.is-acting .ct[data-act="grain"] .ct-body { animation: ct-bend 2.2s ease both; }
.is-acting .ct .fx-grow { animation: fx-grow 1.8s var(--d, 0s) cubic-bezier(.3, 1.4, .5, 1) both; transform-origin: 50% 100%; }
@keyframes ct-bend { 0%, 100% { transform: none; } 15%, 35% { transform: rotate(-9deg) translateY(4px); } 50% { transform: none; } 65% { transform: rotate(-7deg) translateY(3px); } 80% { transform: translateY(-4px); } }
@keyframes fx-grow { 0% { transform: scaleY(0); } 30%, 90% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---- Samuel: "Here I am!" (1 Samuel 3:4) */
.is-acting .ct[data-act="hereiam"] .ct-body { animation: ct-springup 2.2s ease both; }
.is-acting .ct[data-act="hereiam"] .ct-arm { animation: ct-handup 2.2s ease both; }
.is-acting .ct .ct-flame { animation: ct-flicker .3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ct-springup { 0%, 100% { transform: none; } 8% { transform: translateY(3px) scaleY(.92); } 20% { transform: translateY(-20px); } 32%, 88% { transform: none; } }
@keyframes ct-handup { 0%, 100% { transform: rotate(0); } 16%, 86% { transform: rotate(-172deg); } 40%, 60% { transform: rotate(-160deg); } }
@keyframes ct-flicker { from { transform: scale(1, 1); } to { transform: scale(1.3, 1.5) skewX(6deg); } }

/* ---- David dances with all his might (2 Samuel 6:14) */
.is-acting .ct[data-act="dance"] .ct-body { animation: ct-dance 2.2s ease-in-out both; }
.is-acting .ct[data-act="dance"] .ct-arm { animation: ct-danceR 2.2s ease-in-out both; }
.is-acting .ct[data-act="dance"] :is(.ct-armL, .ct-prop) { animation: ct-danceL 2.2s ease-in-out both; }
@keyframes ct-dance { 0%, 100% { transform: none; } 12% { transform: translate(-8px, -14px) rotate(-9deg); } 25% { transform: none; } 37% { transform: translate(8px, -14px) rotate(9deg); } 50% { transform: none; } 62% { transform: translate(-8px, -14px) rotate(-9deg); } 75% { transform: none; } 87% { transform: translate(8px, -14px) rotate(9deg); } }
@keyframes ct-danceR { 0%, 100% { transform: rotate(0); } 12%, 62% { transform: rotate(-150deg); } 37%, 87% { transform: rotate(-40deg); } }
@keyframes ct-danceL { 0%, 100% { transform: rotate(0); } 12%, 62% { transform: rotate(40deg); } 37%, 87% { transform: rotate(150deg); } }

/* ---- Solomon thinks... aha! (God gave him wisdom, 1 Kings 3:12) */
.is-acting .ct[data-act="wise"] .ct-arm { animation: ct-chin 2.2s ease both; }
.is-acting .ct[data-act="wise"] .ct-head { animation: ct-ponder 2.2s ease both; }
.is-acting .ct[data-act="wise"] .ct-body { animation: ct-wake 2.2s ease both; }
@keyframes ct-chin { 0%, 100% { transform: rotate(0); } 12%, 56% { transform: rotate(140deg); } 30% { transform: rotate(134deg); } 44% { transform: rotate(142deg); } 66%, 86% { transform: rotate(-150deg); } }
@keyframes ct-ponder { 0%, 100% { transform: none; } 12%, 56% { transform: rotate(7deg); } 66%, 86% { transform: rotate(-4deg); } }

/* ---- Esther holds up the golden scepter and curtsies (Esther 5:2) */
.is-acting .ct[data-act="royal"] .ct-body { animation: ct-curtsy 2.2s ease both; }
@keyframes ct-curtsy { 0%, 100% { transform: none; } 30%, 60% { transform: translateY(6px) scaleY(.95); } 45%, 75% { transform: none; } }

/* ---- Elijah goes up in the whirlwind with the chariot of fire (2 Kings 2:11) */
.is-acting .ct[data-act="whirl"] .ct-body { animation: ct-whirl 2.2s ease-in-out both; transform-origin: 80px 110px; }
.is-acting .ct .fx-spin { animation: fx-spin .7s linear 3; }
.is-acting .ct .fx-flame { animation: fx-flame .35s var(--d, 0s) ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes ct-whirl { 0%, 100% { transform: none; } 45% { transform: translateY(-30px) rotate(360deg) scale(.86); } 55% { transform: translateY(-30px) rotate(400deg) scale(.86); } 90% { transform: rotate(720deg); } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-flame { from { transform: scaleY(.7); } to { transform: scaleY(1.2) skewX(-8deg); } }

/* ---- Elisha: the axe head floats (2 Kings 6:6) */
.is-acting .ct[data-act="axe"] .ct-arm { animation: ct-point 2.2s ease both; }
.is-acting .ct .fx-float { animation: fx-float 2.2s ease both; }
@keyframes ct-point { 0%, 100% { transform: rotate(0); } 15%, 85% { transform: rotate(-100deg); } }
@keyframes fx-float { 0% { transform: translateY(40px); opacity: 0; } 25% { transform: translateY(-4px); opacity: 1; } 40%, 70% { transform: translateY(2px) rotate(-6deg); } 55%, 85% { transform: translateY(-5px) rotate(6deg); } 100% { transform: translateY(-2px); } }

/* ---- Daniel: the lion's mouth is shut, and it purrs (Daniel 6:22) */
.is-acting .ct[data-act="lion"] .ct-arm { animation: ct-pat 2.2s ease both; }
.is-acting .ct .fx-peek { animation: fx-peek 2.2s ease both; }
@keyframes ct-pat { 0%, 100% { transform: rotate(0); } 20%, 40%, 60%, 80% { transform: rotate(-38deg); } 30%, 50%, 70% { transform: rotate(-24deg); } }
@keyframes fx-peek { 0% { transform: translateY(50px); } 20% { transform: translateY(-4px); } 30%, 50%, 70% { transform: rotate(-5deg); } 40%, 60%, 80% { transform: rotate(5deg); } 100% { transform: none; } }

/* ---- Jonah: the great fish spits and splashes (Jonah 2:10) */
.is-acting .ct[data-act="spout"] .ct-prop { animation: ct-flop 2.2s ease both; transform-box: fill-box; transform-origin: center; }
.is-acting .ct[data-act="spout"] .ct-body { animation: ct-giggle 2.2s ease both; }
.is-acting .ct .fx-spray { animation: fx-spray 1.4s var(--d, 0s) ease-out both; }
@keyframes ct-flop { 0%, 100% { transform: none; } 10%, 30%, 50%, 70% { transform: rotate(-18deg) translateY(-6px); } 20%, 40%, 60%, 80% { transform: rotate(14deg); } }
@keyframes fx-spray { 0% { transform: scale(0); opacity: 0; } 20% { transform: scale(1.2); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(26px) scale(.8); opacity: 0; } }

/* ---- Enoch walked with God (Genesis 5:24) */
.is-acting .ct[data-act="walk"] .ct-body { animation: ct-walk 2.2s ease-in-out both; }
@keyframes ct-walk { 0%, 100% { transform: none; opacity: 1; } 10%, 30% { transform: translate(8px, -3px) rotate(3deg); } 20% { transform: translate(14px, 0) rotate(-3deg); } 45% { transform: translate(18px, -40px) scale(.7); opacity: 0; } 60% { transform: translate(-18px, -40px) scale(.7); opacity: 0; } 85% { transform: none; opacity: 1; } }

/* ---- Methuselah, 969 years old (Genesis 5:27) */
.is-acting .ct[data-act="old"] .ct-body { animation: ct-wobble 2.2s ease-in-out both; }
.is-acting .ct[data-act="old"] .ct-head { animation: ct-nod 2.2s ease both; }
@keyframes ct-wobble { 0%, 100% { transform: none; } 15%, 45%, 75% { transform: rotate(-3deg) translateY(3px); } 30%, 60%, 90% { transform: rotate(3deg) translateY(3px); } }
@keyframes ct-nod { 0%, 100% { transform: none; } 20%, 50%, 80% { transform: rotate(6deg) translateY(2px); } 35%, 65% { transform: none; } }

/* ---- Saul, a head taller than everyone (1 Samuel 9:2) */
.is-acting .ct[data-act="tall"] .ct-body { animation: ct-tall 2.2s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes ct-tall { 0%, 100% { transform: none; } 20%, 80% { transform: scale(.94, 1.2); } 40%, 60% { transform: scale(.96, 1.16); } }

/* ---- John the Baptist: locusts and wild honey (Matthew 3:4) */
.is-acting .ct[data-act="honey"] .ct-body { animation: ct-giggle 2.2s ease both; }
.is-acting .ct .fx-buzz { animation: fx-buzz 2.2s linear both; transform-box: view-box; transform-origin: 0 0; }
@keyframes fx-buzz { 0% { transform: translate(150px, 110px); } 20% { transform: translate(120px, 30px) rotate(-10deg); } 40% { transform: translate(40px, 24px) rotate(10deg); } 60% { transform: translate(24px, 90px) rotate(-10deg); } 80% { transform: translate(100px, 128px) rotate(10deg); } 100% { transform: translate(140px, 60px); } }

/* ---- Zechariah can't talk, so he writes "His name is John" (Luke 1:20, 63) */
.is-acting .ct[data-act="hush"] .ct-arm { animation: ct-hushR 2.2s ease both; }
.is-acting .ct[data-act="hush"] .ct-armL { animation: ct-hushL 2.2s ease both; }
.is-acting .ct[data-act="hush"] .ct-smile { animation: ct-hide 2.2s ease both; }
.is-acting .ct[data-act="hush"] .fx-late { transform-origin: 29px 133px; }
@keyframes ct-hushR { 0%, 100% { transform: rotate(0); } 12%, 56% { transform: rotate(146deg); } }
@keyframes ct-hushL { 0%, 100% { transform: rotate(0); } 12%, 56% { transform: rotate(-146deg); } }

/* ---- Elizabeth: the baby leaped for joy (Luke 1:41) · Jonathan and David, best friends (1 Samuel 18:1–4) */
.is-acting .ct[data-act="friend"] .ct-arm { animation: ct-wave 1.4s ease-in-out; }
.is-acting .ct[data-act="friend"] .ct-body { animation: ct-hop 0.7s ease 2; }

/* ---- Joseph the carpenter (Matthew 13:55) */
.is-acting .ct[data-act="hammer"] .ct-prop { animation: ct-hammer 2.2s ease both; transform-box: fill-box; transform-origin: 60% 90%; }
@keyframes ct-hammer { 0%, 100% { transform: none; } 10%, 30%, 50%, 70% { transform: rotate(-50deg); } 20%, 40%, 60%, 80% { transform: rotate(8deg); } }

/* ---- Rahab's scarlet cord in the window (Joshua 2:18) */
.is-acting .ct[data-act="rope"] .ct-arm { animation: ct-wave 1.6s ease-in-out; }
.is-acting .ct .fx-drop { animation: fx-drop 2.2s ease both; transform-origin: 50% 0; }
@keyframes fx-drop { 0% { transform: scaleY(0); } 30%, 100% { transform: scaleY(1); } }

/* ---- the boy kings, Josiah (8) and Joash (7) (2 Kings 22:1; 11:21) */
.is-acting .ct:is([data-act="king8"], [data-act="king7"]) .ct-arm { animation: ct-raiseR 2.2s ease both; }

/* Jesus' emblem glows */
.is-acting .ct-emblem .ct-light { animation: ct-glow 1.4s ease; transform-origin: 80px 96px; }

/* less motion: no moving parts, just the faces and the extras fading in */
@media (prefers-reduced-motion: reduce) {
  .is-acting .ct :is(.ct-body, .ct-head, .ct-arm, .ct-armL, .ct-prop, .ct-flame, [class*="fx-"]) { animation: none !important; }
}