/* How a page is painted from its first byte, the look of paint.js. It is a piece of its own, and no page's
   colour is in it. The host serves the page with the class paint on its root and these two set in a line of style:
     --paint     the field's colour, the logo's own
     --paint-on  the colour of words read on the field
   paint-live says a script is running. paint-fall says the dot is falling. Without the class paint there is no field. */
.paint-field{display:none}
.paint .paint-field{display:block;position:fixed;inset:0;z-index:60;background:var(--paint);overflow:hidden}
/* while the page waits the field breathes: a pale round swells and goes, slowly, and only once the wait is felt */
.paint .paint-field::after{content:"";position:absolute;left:50%;top:50%;width:30vmin;height:30vmin;margin:-15vmin 0 0 -15vmin;border-radius:50%;background:var(--paint-on);opacity:0;animation:paint-breath 2.6s .7s ease-in-out infinite}
@keyframes paint-breath{0%,100%{opacity:0;transform:scale(.84)}50%{opacity:.09;transform:scale(1)}}
/* the fall: the field's colour goes and the dot alone covers the page. paint.js moves it by transform only */
.paint-fall .paint-field{background:none;pointer-events:none}
.paint-fall .paint-field::after{display:none}
.paint-dot{position:fixed;display:block;fill:var(--paint);transform-origin:50% 50%;will-change:transform}
/* with no script running the field leaves by itself. It holds even where less motion is asked for */
.paint:not(.paint-live) .paint-field{animation:paint-leave .4s 8s forwards!important}
@keyframes paint-leave{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){ .paint .paint-field::after{animation:none} }