/* Effie’s Storytellings — line-drawing library styles (front end + dashboard). */

/* ---------- Motifs ---------- */
.motif { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; display: block; }
.motif .fill { fill: currentColor; stroke: none; }
.motif .soft { opacity: .45; }
.motif :is(path, circle, ellipse, rect, line) { stroke-dasharray: 1; stroke-dashoffset: 0; }
.motif g { transform-box: view-box; }
.draw-in :is(path, circle, ellipse, rect, line) { animation: draw 1.8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 100ms + 150ms); }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes redraw { from { stroke-dashoffset: 1; } }

.alive .m-bob       { animation: bob 4.5s ease-in-out infinite; }
.alive .m-sway      { animation: sway 5s ease-in-out infinite; transform-origin: 32px 56px; }
.alive .m-tilt      { animation: tilt 6s ease-in-out infinite; transform-origin: 32px 34px; }
.alive .m-spin      { animation: spin 22s linear infinite; transform-origin: 32px 32px; }
.alive .m-hand      { animation: spin 8s linear infinite; transform-origin: 32px 34px; }
.alive .m-hand-slow { animation: spin 96s linear infinite; transform-origin: 32px 34px; }
.alive .m-twinkle   { animation: twinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.alive .m-twinkle + .m-twinkle { animation-delay: -1.3s; }
.alive .m-fall      { animation: fall 1.7s linear infinite; }
.alive .m-steam     { animation: steam 3s ease-in-out infinite; }
.alive .m-steam + .m-steam { animation-delay: -1.5s; }
.alive .m-flicker   { animation: flicker 1.9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.alive .m-beat      { animation: beat 1.8s ease-in-out infinite; transform-origin: 32px 34px; }
.alive .m-flap      { animation: flap 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.alive .m-beam      { animation: beam 2.4s ease-in-out infinite; }
.alive .m-lift      { animation: lift 5s ease-in-out infinite; transform-origin: 32px 42px; }
.alive .m-wind      { animation: gust 2.6s ease-in-out infinite; }
.alive .m-waves     { animation: drift 3.2s ease-in-out infinite alternate; }
.alive .m-waves2    { animation: drift 3.2s ease-in-out infinite alternate-reverse; }
.alive .m-needle    { animation: swing 6s ease-in-out infinite; transform-origin: 32px 32px; }
.alive .m-enso path { animation: enso 5s cubic-bezier(.2, .7, .2, 1) infinite; }
.alive .m-clap      { animation: clap 3.2s ease-in-out infinite; transform-origin: 11px 28px; }
.alive .m-sprig     { animation: sway 5s ease-in-out infinite; transform-origin: 8px 32px; }
.alive .m-blink     { animation: blink 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.alive .m-flutter   { animation: flutter 1.6s ease-in-out infinite; transform-origin: 32px 32px; }
.alive .m-wag       { animation: wag 2.4s ease-in-out infinite; transform-origin: 20px 20px; }
.alive .m-twitch    { animation: twitch 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.alive .m-hang      { animation: sway 5s ease-in-out infinite; transform-origin: 33px 12px; }
.alive .m-flash     { animation: flash 3.6s linear infinite; }
.alive .m-buzz      { animation: buzz 2.8s linear infinite; transform-origin: 32px 32px; }
.alive .m-tassel    { animation: sway 3s ease-in-out infinite; transform-origin: 54px 25px; }
.alive .m-loop path { animation: enso 6s cubic-bezier(.2, .7, .2, 1) infinite; }
.alive .m-wing      { animation: wing 2.2s ease-in-out infinite; transform-origin: 26px 36px; }
.alive .m-delay-1   { animation-delay: -.6s; }
.alive .m-delay-2   { animation-delay: -1.1s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(.6); opacity: .35; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes fall { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@keyframes steam { 0% { transform: translateY(3px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } }
@keyframes flicker { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.92, 1.08); } 60% { transform: scale(1.05, .95); } }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(.98); } 45% { transform: scale(1.05); } }
@keyframes flap { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(.55) translateY(-2px); } }
@keyframes beam { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes lift { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(2px, -4px) rotate(5deg); } }
@keyframes gust { 0% { transform: translateX(-4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(6px); opacity: 0; } }
@keyframes drift { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes swing { 0% { transform: rotate(-32deg); } 30% { transform: rotate(20deg); } 52% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } 85%, 100% { transform: rotate(0deg); } }
@keyframes enso { 0% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes flutter { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.62); } }
@keyframes wag { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes twitch { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(6deg); } }
@keyframes flash { 0%, 70%, 78%, 100% { opacity: .2; } 72%, 76% { opacity: 1; } }
@keyframes buzz { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-4deg); } 68% { transform: rotate(4deg); } 72% { transform: rotate(-3deg); } 76% { transform: rotate(0); } }
@keyframes wing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
@keyframes clap { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(0); } }

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