/* Hometown Websites: unique animated page-hero scenes (services, demos, features, how-it-works). Coded SVG + CSS only. */
.page-hero.has-scene{padding-bottom:calc(clamp(200px,18vw,350px) + 10px)}
.page-hero .mini-scene.ss{height:clamp(200px,18vw,350px)}
.ss .cloud{animation-duration:var(--dur,160s)}
/* shared */
.ss .wheel{transform-box:fill-box;transform-origin:center;animation:spin 1.1s linear infinite}
.ss .sway{transform-box:fill-box;transform-origin:bottom center;animation:sway 4.5s ease-in-out infinite alternate}
.ss .mover{will-change:transform}
/* Services */
.ss .glow{animation:ss-glow 12s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes ss-glow{0%,4%{opacity:.25}12%,80%{opacity:1}92%,100%{opacity:.25}}
.ss .opn{animation:ss-open 12s steps(1,end) infinite;animation-delay:var(--d,0s)}
@keyframes ss-open{0%{opacity:0}10%{opacity:1}86%{opacity:0}}
.ss .pole{animation:ss-pole 1.4s linear infinite}
@keyframes ss-pole{from{transform:translateY(0)}to{transform:translateY(16px)}}
.ss .bike{animation:ss-bike 28s linear infinite}
@keyframes ss-bike{from{transform:translateX(-120px)}to{transform:translateX(1500px)}}
.ss .sign{transform-box:fill-box;transform-origin:50% 0%;animation:ss-swing 3.6s ease-in-out infinite alternate}
@keyframes ss-swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.ss .bob{animation:ss-bob 2.6s ease-in-out infinite}
@keyframes ss-bob{50%{transform:translateY(-2.5px)}}
.ss .steam{animation:ss-steam 2.4s ease-in-out infinite}
@keyframes ss-steam{50%{opacity:.3;transform:translateY(-1.5px)}}
/* Demos */
.ss .scr{animation:ss-scr 8.1s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes ss-scr{0%,100%{opacity:.35}8%,30%{opacity:1}40%{opacity:.35}}
.ss .balloon{animation:ss-balloon 80s linear infinite;animation-delay:-30s}
@keyframes ss-balloon{from{transform:translateX(-1160px)}to{transform:translateX(480px)}}
.ss .bobble{animation:ss-bobble 7s ease-in-out infinite}
@keyframes ss-bobble{50%{transform:translateY(-10px)}}
.ss .train{animation:ss-train 30s linear infinite;animation-delay:-8s}
@keyframes ss-train{from{transform:translateX(-620px)}to{transform:translateX(1100px)}}
.ss .pf{transform-box:fill-box;transform-origin:center;animation:puff 2.2s ease-out infinite}
.ss .pf.p2{animation-delay:1.1s}
/* Features */
.ss .sails{animation:spin 9s linear infinite}
.ss .grow{transform-box:fill-box;transform-origin:50% 100%;animation:ss-grow 10s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes ss-grow{0%{transform:scaleY(.12)}22%{transform:scaleY(1)}88%{transform:scaleY(1);opacity:1}96%{opacity:0;transform:scaleY(1)}100%{opacity:0;transform:scaleY(.12)}}
.ss .bloom{transform-box:fill-box;transform-origin:center;animation:ss-bloom 10s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes ss-bloom{0%,18%{transform:scale(0)}28%{transform:scale(1.15)}32%,100%{transform:scale(1)}}
.ss .tip{transform-box:fill-box;transform-origin:100% 100%;animation:ss-tip 5s ease-in-out infinite}
@keyframes ss-tip{0%,15%,85%,100%{transform:rotate(0)}30%,70%{transform:rotate(24deg)}}
.ss .dr{opacity:0;animation:ss-drop 5s linear infinite}
.ss .dr.d2{animation-delay:.25s}.ss .dr.d3{animation-delay:.5s}
@keyframes ss-drop{0%,30%{opacity:0;transform:translate(0,0)}34%{opacity:1}50%{opacity:0;transform:translate(6px,26px)}54%{opacity:0;transform:translate(0,0)}58%{opacity:1}70%,100%{opacity:0;transform:translate(6px,26px)}}
.ss .fly{animation:ss-fly 18s ease-in-out infinite}
@keyframes ss-fly{0%,100%{transform:translate(0,0)}20%{transform:translate(-120px,30px)}40%{transform:translate(-60px,-20px)}60%{transform:translate(80px,20px)}80%{transform:translate(140px,-14px)}}
.ss .wingL{transform-box:fill-box;transform-origin:100% 50%;animation:ss-flap .32s ease-in-out infinite alternate}
.ss .wingR{transform-box:fill-box;transform-origin:0% 50%;animation:ss-flap .32s ease-in-out infinite alternate}
@keyframes ss-flap{to{transform:scaleX(.25)}}
/* How it works: truck runs 22s; markers light as it passes */
.ss .truck{animation:ss-truck 22s linear infinite}
@keyframes ss-truck{0%{transform:translateX(-290px);opacity:0}4%{opacity:1;transform:translateX(-280px)}84%{opacity:1;transform:translateX(360px)}90%,100%{opacity:0;transform:translateX(370px)}}
.ss .mk{animation:22s linear infinite}
.ss .m1{animation-name:ss-m1}.ss .m2{animation-name:ss-m2}.ss .m3{animation-name:ss-m3}.ss .m4{animation-name:ss-m4}
@keyframes ss-m1{0%,16%{opacity:0}19%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes ss-m2{0%,35%{opacity:0}38%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes ss-m3{0%,55%{opacity:0}58%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes ss-m4{0%,75%{opacity:0}78%,90%{opacity:1}96%,100%{opacity:0}}
@media (max-width:720px){
  .page-hero.has-scene{padding-bottom:152px}
  .page-hero .mini-scene.ss{height:145px}
}
@media (prefers-reduced-motion:reduce){
  .ss *,.ss{animation:none!important}
  .ss .dr{opacity:0}
}

/* ---- Round 2 ---- */
/* How it works: dotted path draws itself, marker travels, pins pop (12s) */
.ss .jdraw{stroke-dashoffset:0;animation:ss-jdraw 12s linear infinite}
@keyframes ss-jdraw{0%{stroke-dashoffset:1;opacity:1}80%{stroke-dashoffset:0}94%{stroke-dashoffset:0;opacity:1}99%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
.ss .jmark{offset-path:path("M486 206 C540 240 600 238 640 222 S700 196 724 206 C764 224 812 240 866 228 S962 202 1000 206");offset-rotate:0deg;offset-distance:100%;animation:ss-jmark 12s linear infinite}
@keyframes ss-jmark{0%{offset-distance:0%;opacity:1}80%{offset-distance:100%}94%{offset-distance:100%;opacity:1}99%,100%{offset-distance:100%;opacity:0}}
.ss .jpin{transform-box:fill-box;transform-origin:50% 100%;animation:12s ease-out infinite}
.ss .jp1{animation-name:ss-jp1}.ss .jp2{animation-name:ss-jp2}.ss .jp3{animation-name:ss-jp3}
@keyframes ss-jp1{0%{transform:scale(0)}4%{transform:scale(1.18)}7%,94%{transform:scale(1)}99%,100%{transform:scale(0)}}
@keyframes ss-jp2{0%,38%{transform:scale(0)}42%{transform:scale(1.18)}45%,94%{transform:scale(1)}99%,100%{transform:scale(0)}}
@keyframes ss-jp3{0%,78%{transform:scale(0)}82%{transform:scale(1.18)}85%,94%{transform:scale(1)}99%,100%{transform:scale(0)}}
.ss .mflag{transform-box:fill-box;transform-origin:0% 100%;animation:ss-mflag 12s ease-in-out infinite}
@keyframes ss-mflag{0%,6%{transform:rotate(90deg)}10%,94%{transform:rotate(0)}100%{transform:rotate(90deg)}}
.ss .lt{animation:ss-lt 12s ease-in-out infinite}
@keyframes ss-lt{0%{transform:translateY(0);opacity:1}8%{transform:translateY(-14px);opacity:0}100%{opacity:0}}
.ss .sketch{stroke-dasharray:1 1;stroke-dashoffset:0;animation:ss-sketch 12s linear infinite}
@keyframes ss-sketch{0%,40%{stroke-dashoffset:1}62%,96%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ss .pencil{animation:ss-pencil 12s ease-in-out infinite}
@keyframes ss-pencil{0%,40%{transform:translateX(-56px)}62%,100%{transform:translateX(0)}}
.ss .bunt{animation:ss-bunt 12s ease-out infinite}
@keyframes ss-bunt{0%,78%{opacity:0;transform:translateY(8px)}84%,96%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.ss .cf{opacity:0;animation:ss-cf 12s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes ss-cf{0%,82%{opacity:0;transform:translate(0,0) rotate(0)}84%{opacity:1}96%{opacity:1;transform:translate(var(--cx),70px) rotate(220deg)}100%{opacity:0;transform:translate(var(--cx),80px)}}
/* Demos: window site assembles block by block, sparkles, owner cheers (10s) */
.ss .blk{transform-box:fill-box;transform-origin:center;animation:ss-blk 10s ease-out infinite both;animation-delay:var(--d,0s)}
@keyframes ss-blk{0%{opacity:0;transform:scale(.6)}5%{opacity:1;transform:scale(1.05)}8%{transform:scale(1)}82%{opacity:1}88%,100%{opacity:0;transform:scale(1)}}
.ss .spark{transform-box:fill-box;transform-origin:center;opacity:1;animation:ss-spark 10s ease-out infinite both;animation-delay:var(--d,0s)}
@keyframes ss-spark{0%,40%{opacity:0;transform:scale(.2) rotate(0)}46%{opacity:1;transform:scale(1.15) rotate(45deg)}56%{opacity:1;transform:scale(.9) rotate(70deg)}66%,100%{opacity:0;transform:scale(.2) rotate(90deg)}}
.ss .armL,.ss .armR{transform-box:fill-box;transform-origin:50% 6%}
.ss .armL{animation:ss-armL 10s ease-in-out infinite}
.ss .armR{animation:ss-armR 10s ease-in-out infinite}
@keyframes ss-armL{0%,40%{transform:rotate(0)}46%,74%{transform:rotate(150deg)}50%,58%,66%{transform:rotate(160deg)}54%,62%,70%{transform:rotate(140deg)}82%,100%{transform:rotate(0)}}
@keyframes ss-armR{0%,40%{transform:rotate(0)}46%,74%{transform:rotate(-150deg)}50%,58%,66%{transform:rotate(-160deg)}54%,62%,70%{transform:rotate(-140deg)}82%,100%{transform:rotate(0)}}
.ss .hop{animation:ss-hop 10s ease-in-out infinite}
@keyframes ss-hop{0%,44%,56%,100%{transform:translateY(0)}48%{transform:translateY(-6px)}52%{transform:translateY(0)}}
/* Features: tools fly out of the toolbox onto the pegboard (12s) */
.ss .tool{animation:ss-tool 12s cubic-bezier(.3,.8,.3,1.1) infinite both;animation-delay:var(--d,0s)}
@keyframes ss-tool{0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}2%{opacity:1}7%{transform:translate(0,0) scale(1.08)}9%{transform:translate(0,0) scale(1)}84%{opacity:1;transform:translate(0,0) scale(1)}90%,100%{opacity:0;transform:translate(0,0) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .ss .armL{transform:rotate(150deg)}.ss .armR{transform:rotate(-150deg)}
  .ss .cf,.ss .lt{opacity:0}
}