/* The family's moves on the websites: the figure rules from the app (src/styles/family.css). */
/* The family's moves (src/ui/family.js draws them). Each part turns around its own joint, set on the
   part itself in the drawing's units. Poses: idle (breathing, blinking), wave, talk, cheer, peek. */
/* The noodle limbs (and the ink pen's edge) take the screen's ink, so they show on light and dark. */
.fam { display: inline-block; line-height: 0; flex: none; --fam-limb: var(--fam-ink, #16140F); }
.fam .fm { height: 100%; width: auto; overflow: visible; display: block; }
.fam .fm-k { stroke: var(--fam-limb); }
.fam .fm-kf { fill: var(--fam-limb); }
.fam .fm-leg, .fam .fm-arm, .fam .fm-top { transform-box: view-box; }
.fam .fm-eye { transform-box: fill-box; transform-origin: center; animation: fm-blink 3.8s infinite; }
.fam .fm-eye-r { opacity: 0; }
.fam .fm-sound { opacity: .9; }

.fam .fm-pen { stroke: var(--fam-limb); }

.fam[data-pose="idle"] .fm-top { animation: fm-breathe 2.8s ease-in-out infinite; }

.fam[data-pose="wave"] .fm-arm-r { animation: fm-wave-r .9s ease-in-out infinite; }
.fam[data-who="bubble"][data-pose="wave"] .fm-arm-r { animation: none; }
.fam[data-who="bubble"][data-pose="wave"] .fm-arm-l { animation: fm-wave-l .9s ease-in-out infinite; }
.fam[data-pose="wave"] .fm-top { animation: fm-breathe 2.8s ease-in-out infinite; }

.fam[data-pose="talk"] .fm-top { animation: fm-breathe 1.2s ease-in-out infinite; }
.fam[data-pose="talk"] .fm-arm-l { animation: fm-gesture 1.6s ease-in-out infinite; }
.fam[data-who="bubble"][data-pose="talk"] .fm-arm-r { animation: fm-mic 1.4s ease-in-out infinite; }
.fam[data-who="babble"][data-pose="talk"] .fm-sound { animation: fm-sound .7s ease-in-out infinite; }

.fam[data-pose="cheer"] { animation: fm-hop .6s cubic-bezier(.3, .7, .4, 1) infinite; }
.fam[data-pose="cheer"] .fm-arm-l { transform: rotate(86deg); }
.fam[data-pose="cheer"] .fm-arm-r { transform: rotate(-30deg); }
.fam[data-who="scribble"][data-pose="cheer"] .fm-arm-r { transform: rotate(-100deg); }
.fam[data-who="babble"][data-pose="cheer"] .fm-arm-l { transform: rotate(60deg); }
.fam[data-who="babble"][data-pose="cheer"] .fm-arm-r { transform: rotate(-60deg); }
.fam[data-who="bubble"][data-pose="cheer"] .fm-wink { opacity: 0; }
.fam[data-who="bubble"][data-pose="cheer"] .fm-eye-r { opacity: 1; }

/* Signature actions (ACTION in family.js). Bubble talks: the mic comes up and sound rings out. */
.fam .fm-rings path { opacity: 0; transform-box: view-box; transform-origin: 244px 192px; }
.fam[data-who="bubble"][data-pose="talk"] .fm-rings path { animation: fm-ring 1.4s ease-out infinite; }
.fam[data-who="bubble"][data-pose="talk"] .fm-rings path:nth-child(2) { animation-delay: .18s; }
.fam[data-who="bubble"][data-pose="talk"] .fm-rings path:nth-child(3) { animation-delay: .36s; }
/* Scribble writes: a red pen in her hand ticks the page while the lines in her notebook write themselves. */
.fam .fm-quill { opacity: 0; transition: opacity .2s; }
.fam[data-pose="write"] .fm-quill { opacity: 1; }
.fam[data-pose="write"] .fm-arm-l { animation: fm-tick .9s ease-in-out infinite; }
.fam[data-pose="write"] .fm-top { animation: fm-breathe 1.8s ease-in-out infinite; }
.fam[data-pose="write"] .fm-lines { transform-box: fill-box; transform-origin: 0 50%; animation: fm-lines 2.6s ease-out infinite; } /* transform only: cheap on the battery (tests/motion.test.js) */
/* Nib: a hand shoots up with a question, and waves to be picked. */
.fam[data-pose="hand"] .fm-arm-l { animation: fm-hand 1.1s ease-in-out infinite; }
.fam[data-pose="hand"] .fm-top { animation: fm-bob .55s ease-in-out infinite; }
/* Babble babbles: bobbing, the sound lines pulsing. */
.fam[data-who="babble"][data-pose="talk"] .fm-top { animation: fm-bob .5s ease-in-out infinite; }

/* peek: leans in from the side, as Nib does with a hint */
.fam[data-pose="peek"] .fm-top { animation: fm-peek 2.4s ease-in-out infinite; }

@keyframes fm-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes fm-breathe { 50% { transform: translateY(-4px); } }
@keyframes fm-wave-l { 0%, 100% { transform: rotate(58deg); } 50% { transform: rotate(92deg); } }
@keyframes fm-wave-r { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-38deg); } }
@keyframes fm-gesture { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(16deg); } }
@keyframes fm-mic { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(-22deg); } }
@keyframes fm-sound { 50% { opacity: .2; } }
@keyframes fm-hop { 0%, 100% { transform: translateY(0) scaleY(1); } 12% { transform: translateY(0) scaleY(.95); } 45% { transform: translateY(-14%) scaleY(1.03); } }
@keyframes fm-ring { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes fm-tick { 0%, 100% { transform: rotate(8deg); } 35% { transform: rotate(46deg); } 55% { transform: rotate(30deg); } }
@keyframes fm-lines { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
@keyframes fm-hand { 0%, 100% { transform: rotate(116deg); } 50% { transform: rotate(134deg); } }
@keyframes fm-bob { 50% { transform: translateY(-6px); } }
@keyframes fm-peek { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }

@media (prefers-reduced-motion: reduce) {
  .fam, .fam * { animation: none !important; }
}