/* Architectural scenes with a beginning, a reveal, and a quiet finish. */
.process-illustration{width:100%;max-width:380px;margin:12px auto 20px;aspect-ratio:18/13;color:#454b32;overflow:visible}
.process-illustration svg{display:block;width:100%;height:100%;overflow:visible}
.process .steps li{scroll-margin-top:30px}
.process-illustration [data-motion]{transform-box:fill-box;transform-origin:center}
.process-illustration [data-motion=phone]{transform-origin:50% 90%}
.process-illustration [data-motion=pen]{transform-origin:10% 90%}
.process-illustration [data-motion=door]{transform-origin:left center}
.process-illustration [data-motion=wreath]{transform-origin:center top}
.process-illustration [data-motion=palette]{transform-origin:20% 90%}
.process-illustration [data-motion=swatch]{transform-box:view-box;transform-origin:94px 205px}
.is-playing [data-motion=swatch]{animation:wd-fan 3.5s cubic-bezier(.22,.7,.25,1) both}
.is-playing [data-motion=phone]{animation:wd-frame 2.4s cubic-bezier(.22,.7,.25,1) both}
.is-playing [data-motion=flash]{animation:wd-capture 2.6s ease both}
.is-playing [data-motion=photo]{animation:wd-photo 3.5s cubic-bezier(.22,.7,.25,1) both}
.is-playing [data-motion=paper]{animation:wd-paper 1.4s ease-out both}
.is-playing [data-motion=pen]{animation:wd-pen 3s ease-in-out both}
.is-playing [data-motion=draw]{stroke-dasharray:1;animation:wd-draw 2.7s ease-in-out both}
.is-playing [data-motion=palette]{animation:wd-palette 3.3s cubic-bezier(.22,.7,.25,1) both}
.is-playing [data-motion=door]{animation:wd-door 4.2s cubic-bezier(.45,0,.25,1) both}
.is-playing [data-motion=wreath]{animation:wd-wreath 4.5s ease-in-out both}
.is-playing [data-motion=lantern]{animation:wd-light 4.4s ease-in-out both}
.is-playing [data-motion=pumpkins]{animation:wd-arrange 3.6s cubic-bezier(.22,.7,.25,1) both}
@keyframes wd-frame{0%,10%{transform:translateY(9px) rotate(-7deg)}45%{transform:translateY(-3px) rotate(2deg)}70%,100%{transform:none}}
@keyframes wd-fan{0%,36%{transform:rotate(var(--fold-angle))}78%,100%{transform:rotate(0)}}
@keyframes wd-capture{0%,35%{opacity:0;transform:scale(.4)}48%{opacity:1;transform:scale(1.3)}68%{opacity:.25;transform:scale(.85)}85%,100%{opacity:1;transform:none}}
@keyframes wd-photo{0%,32%{opacity:0;transform:translate(-12px,22px) rotate(-12deg) scale(.75)}62%{opacity:1;transform:translate(2px,-5px) rotate(4deg) scale(1.02)}82%,100%{opacity:1;transform:none}}
@keyframes wd-paper{from{transform:translateY(8px) rotate(-3deg)}to{transform:none}}
@keyframes wd-pen{0%,10%{transform:translate(9px,-13px) rotate(9deg)}28%{transform:translate(-11px,7px) rotate(-6deg)}42%{transform:translate(4px,-6px) rotate(2deg)}55%{transform:translate(-8px,6px) rotate(-4deg)}78%,100%{transform:none}}
@keyframes wd-draw{0%,15%{stroke-dashoffset:1}80%,100%{stroke-dashoffset:0}}
@keyframes wd-palette{0%,36%{opacity:0;transform:translateY(15px) rotate(-20deg) scale(.88)}62%{opacity:1;transform:translateY(-3px) rotate(4deg)}85%,100%{opacity:1;transform:none}}
@keyframes wd-door{0%,12%{transform:none}37%,57%{transform:skewY(-5deg) scaleX(.72)}84%,100%{transform:none}}
@keyframes wd-wreath{0%,10%{transform:rotate(-5deg)}28%{transform:rotate(9deg)}45%{transform:rotate(-6deg)}63%{transform:rotate(4deg)}82%,100%{transform:none}}
@keyframes wd-light{0%,15%{opacity:.18}42%,72%{opacity:1}100%{opacity:.8}}
@keyframes wd-arrange{0%,26%{opacity:0;transform:translate(19px,-10px) rotate(12deg) scale(.92)}52%{opacity:1;transform:translate(-3px,0) rotate(-4deg) scale(1)}75%,100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.process-illustration *{animation:none!important;transition:none!important}.process .steps li{scroll-behavior:auto}}