/* SiteA2Z illustrations (markup from art.mjs). Class names are prefixed "art-".
   The finished drawing is the default state. Start states for the draw-in only apply under
   `.js .reveal:not(.in)` (or `.js .art-wait:not(.in)`), so no-JS and reduced motion show everything. */
.art{display:block;width:100%;height:auto;overflow:hidden}
.art text{font-family:Montserrat,system-ui,sans-serif}
.art-layer{height:100%}

/* ---- idle loops ---- */
.art-sun{animation:art-sun 7s ease-in-out infinite alternate}
@keyframes art-sun{to{transform:translateY(-5px)}}
.art-twinkle{animation:art-twinkle 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.83s)}
@keyframes art-twinkle{50%{opacity:.2}}
.art-blink{animation:art-blink 1.1s steps(1) infinite}
@keyframes art-blink{50%{opacity:0}}
.art-float{animation:art-float 5s ease-in-out infinite alternate}
@keyframes art-float{to{transform:translateY(-4px)}}
.art-scribble{animation:art-scribble 2.8s ease-in-out infinite}
@keyframes art-scribble{0%,60%,100%{transform:none}15%,45%{transform:translate(-3px,-2px)}30%{transform:translate(2px,-3px)}}
.art-sway{animation:art-sway 4.5s ease-in-out infinite alternate}
@keyframes art-sway{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
.art-needle{animation:art-needle 1.6s ease-in-out infinite alternate}
@keyframes art-needle{from{transform:rotate(-2.5deg)}to{transform:rotate(0deg)}}
.art-spin{animation:art-spin 26s linear infinite}
@keyframes art-spin{to{transform:rotate(360deg)}}
.art-pulse{transform-box:fill-box;transform-origin:center;opacity:0;animation:art-pulse 2.6s ease-out infinite}
@keyframes art-pulse{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(2.3);opacity:0}}
.art-thump{transform-box:fill-box;transform-origin:center;animation:art-thump 1.7s ease-in-out infinite}
@keyframes art-thump{0%,30%,100%{transform:none}10%{transform:scale(1.25)}20%{transform:scale(.95)}}
.art-beam{animation:art-beam 9s ease-in-out infinite alternate}
@keyframes art-beam{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
.art-steam{animation:art-steam 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*-1.5s)}
@keyframes art-steam{0%{transform:translateY(5px);opacity:0}35%{opacity:.85}100%{transform:translateY(-7px);opacity:0}}
.art-ring{animation:art-ring 3s ease-in-out infinite}
@keyframes art-ring{0%,44%,100%{transform:none}4%,14%,24%,34%{transform:rotate(-5deg)}9%,19%,29%,39%{transform:rotate(5deg)}}
.art-wave{animation:art-wave 3s ease-out infinite;animation-delay:calc(var(--i,0)*.14s)}
@keyframes art-wave{0%,50%,100%{opacity:.12}8%,36%{opacity:1}}
.art-beat{stroke-dasharray:.14 .86;animation:art-beat 3.6s linear infinite}
@keyframes art-beat{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.art-flow{animation:art-flow 1.3s linear infinite}
@keyframes art-flow{to{stroke-dashoffset:-18}}
.art-shoot{animation:art-shoot 11s ease-in infinite 2s}
@keyframes art-shoot{0%,86%{opacity:0;transform:none}88%{opacity:.9}94%,100%{opacity:0;transform:translate(-90px,37px)}}

/* ---- draw-in: runs when an ancestor .reveal (or .art-wait) gets .in; stagger with --i ---- */
.art-up,.art-pop,.art-grow{transition:transform .8s var(--ease,cubic-bezier(.2,.8,.2,1)),opacity .5s ease;transition-delay:calc(.2s + var(--i,0)*80ms)}
.art-pop{transform-box:fill-box;transform-origin:center}
.art-grow{transform-box:fill-box;transform-origin:left center}
.art-draw{stroke-dasharray:1.02;transition:stroke-dashoffset 1.1s var(--ease-io,cubic-bezier(.65,0,.35,1)),opacity .2s;transition-delay:calc(.35s + var(--i,0)*80ms)}
@media (prefers-reduced-motion:no-preference){
  .js :is(.reveal,.art-wait):not(.in) .art-up{opacity:0;transform:translateY(14px)}
  .js :is(.reveal,.art-wait):not(.in) .art-pop{opacity:0;transform:scale(.5)}
  .js :is(.reveal,.art-wait):not(.in) .art-grow{transform:scaleX(.05)}
  .js :is(.reveal,.art-wait):not(.in) .art-draw{stroke-dashoffset:1.02;opacity:0}
}

/* ---- buildWire(): put data-art-stage="0|1|2|3" on the svg or any ancestor.
   0 blank page · 1 wireframe drawn · 2 colour and words · 3 photo, labels, "Live". No attribute = finished. ---- */
.art-w-line{opacity:0;stroke-dasharray:1.02;transition:stroke-dashoffset .9s var(--ease-io,ease-in-out),opacity .35s;transition-delay:calc(var(--i,0)*55ms)}
.art-w-fill,.art-w-detail{transition:opacity .55s ease,transform .7s var(--ease,cubic-bezier(.2,.8,.2,1));transition-delay:calc(var(--i,0)*70ms)}
[data-art-stage="0"] .art-w-line{stroke-dashoffset:1.02;transition-delay:0s}
[data-art-stage="1"] .art-w-line{opacity:1}
:is([data-art-stage="0"],[data-art-stage="1"]) .art-w-fill{opacity:0;transition-delay:0s}
:is([data-art-stage="0"],[data-art-stage="1"],[data-art-stage="2"]) .art-w-detail{opacity:0;transform:translateY(8px);transition-delay:0s}
[data-art-stage="2"] .art-w-line,[data-art-stage="3"] .art-w-line{transition-delay:0s}

/* ---- still version ---- */
@media (prefers-reduced-motion:reduce){
  .art *{animation:none!important;transition:none!important}
  .art-beat{stroke-dasharray:none}
  .art-pulse,.art-shoot{opacity:0}
}