/* dir-6 background motion (generated by _work/gen_motion6.py). Background shapes only; cards and tabs stay still. */
.mv{transform-box:fill-box;transform-origin:center;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes mv-bob{0%{transform:translate(0px,0px) rotate(0deg) scale(1)} 50%{transform:translate(0px,-7px) rotate(3deg) scale(1)} 100%{transform:translate(0px,0px) rotate(0deg) scale(1)}}
.mv--bob{animation-name:mv-bob}
@keyframes mv-drift{0%{transform:translate(0px,0px) rotate(0deg) scale(1)} 25%{transform:translate(5px,-4px) rotate(4deg) scale(1)} 50%{transform:translate(0px,-7px) rotate(0deg) scale(1)} 75%{transform:translate(-5px,-3px) rotate(-4deg) scale(1)} 100%{transform:translate(0px,0px) rotate(0deg) scale(1)}}
.mv--drift{animation-name:mv-drift}
@keyframes mv-sway{0%{transform:translate(0px,0px) rotate(-9deg) scale(1)} 50%{transform:translate(0px,-3px) rotate(9deg) scale(1)} 100%{transform:translate(0px,0px) rotate(-9deg) scale(1)}}
.mv--sway{animation-name:mv-sway}
@keyframes mv-twinkle{0%{transform:translate(0px,0px) rotate(0deg) scale(0.86);opacity:0.6} 50%{transform:translate(0px,0px) rotate(12deg) scale(1.12);opacity:1} 100%{transform:translate(0px,0px) rotate(0deg) scale(0.86);opacity:0.6}}
.mv--twinkle{animation-name:mv-twinkle}
@keyframes mv-pulse{0%{transform:translate(0px,0px) rotate(0deg) scale(1)} 40%{transform:translate(0px,-2px) rotate(0deg) scale(1.1)} 60%{transform:translate(0px,-2px) rotate(0deg) scale(1.1)} 100%{transform:translate(0px,0px) rotate(0deg) scale(1)}}
.mv--pulse{animation-name:mv-pulse}

/* hero: shapes are inline vectors under the kids image; their whole motion envelope was checked to stay inside the panel and clear of the kids */
.hero__art{background:#fff3d6}
.hero__shapes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero__art img{z-index:1}
/* footer row */
.ft__parade svg{display:block;width:min(1180px,100% - 48px);height:auto;margin:0 auto;overflow:visible}
/* faint drifting layers in the empty side margins beside "Meet the author" (wide screens only) */
.about{position:relative;overflow:hidden}
.drift{position:absolute;top:50%;width:150px;height:380px;margin-top:-190px;opacity:.55;pointer-events:none;display:none}
.drift--l{right:calc(50% + 470px)}.drift--r{left:calc(50% + 470px)}
.drift .mv{animation-duration:18s!important}
@media (min-width:1240px){.drift{display:block}}
@media (prefers-reduced-motion:reduce){.mv{animation:none!important}}