/* S&S Glass Works footer scene (ssg-). Built 2026-09-28 by Idea Forge Studios.
   The SVG geometry + the base rules below ARE the finished still frame (no-JS, reduced motion).
   Motion runs only under .ssg-on (added by ssg-glassworks.js once the footer is in view);
   .ssg-paused freezes every animation in place (the visible Pause control, off-screen, hidden tab). */
.ssg-scene{position:relative;overflow:hidden;background:
  radial-gradient(ellipse 60% 90% at 62% 100%,rgba(255,196,160,.10),rgba(255,196,160,0) 70%)}
.ssg-inner{position:relative;max-width:80rem;margin:0 auto;padding:.5rem 1rem 0;display:grid;
  grid-template-columns:460fr 840fr;align-items:end}
.ssg-svg{display:block;width:100%;height:auto;overflow:hidden}
.ssg-bath{aspect-ratio:460/250}
.ssg-work{aspect-ratio:840/250}
@media (min-width:768px){.ssg-work{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%);mask-image:linear-gradient(90deg,transparent 0,#000 6%)}}
/* the street runs edge to edge beyond the 80rem column */
.ssg-scene::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--ssg-road,1.4rem);background:#470202;
  box-shadow:0 -.36rem 0 #5E0606}
.ssg-scene{--ssg-road:calc((min(100vw,80rem) - 2rem) * 22 / 1300)}
.ssg-toggle{position:absolute;top:.5rem;right:1rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
  min-height:2rem;padding:.3rem .7rem .3rem .55rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  background:rgba(40,0,0,.45);color:#fff;font:600 .75rem/1 Inter,system-ui,sans-serif;letter-spacing:.02em;cursor:pointer}
.ssg-toggle[hidden]{display:none}
.ssg-toggle:hover{background:rgba(40,0,0,.7);border-color:rgba(255,255,255,.6)}
.ssg-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ssg-toggle svg{width:.8rem;height:.8rem;fill:currentColor}
.ssg-toggle .ssg-i-play{display:none}
.ssg-scene.ssg-user-paused .ssg-toggle .ssg-i-play{display:block}
.ssg-scene.ssg-user-paused .ssg-toggle .ssg-i-pause{display:none}
@media (max-width:767px){
  .ssg-inner{grid-template-columns:1fr;padding:.25rem 0 0}
  .ssg-scene::before{display:none}
  .ssg-work{aspect-ratio:auto;height:12rem}
  .ssg-toggle{top:.4rem;right:.75rem}
}
.ssg-svg [class*="-af"],.ssg-svg [class*="-ab"],.ssg-svg [class*="-l-a"],.ssg-svg [class*="-l-b"],.ssg-bd,.ssg-wh,.ssg-sway,.ssg-bk,.ssg-pk,.ssg-tb{transform-box:fill-box}

/* ---------- still frame (base state) ---------- */
.ssg-water{opacity:0}
.ssg-hglint,.ssg-bk,.ssg-pk{opacity:0}
.ssg-bs,.ssg-ps{opacity:0}
.ssg-bi{transform:translate(-44px,0)}
.ssg-bi-af{transform-origin:50% 0;transform:rotate(-112deg)}
.ssg-bi-ab{transform-origin:50% 0;transform:rotate(6deg)}
.ssg-bi-l-a,.ssg-bi-l-b,[class*="-l-a"],[class*="-l-b"]{transform-origin:50% 0}
.ssg-bd{transform-origin:0 50%}
.ssg-il{opacity:0}
.ssg-iw1-af,.ssg-iw2-af{transform-origin:50% 0;transform:rotate(6deg)}
.ssg-rp{opacity:0}
.ssg-oc,.ssg-rc{opacity:0}
.ssg-wh{transform-origin:50% 50%}
.ssg-sway{transform-origin:50% 100%}

/* ---------- motion ---------- */
.ssg-on .ssg-cloud-1{animation:ssg-drift 46s ease-in-out infinite alternate}
.ssg-on .ssg-cloud-2{animation:ssg-drift 60s ease-in-out infinite alternate-reverse}
@keyframes ssg-drift{from{transform:translateX(-18px)}to{transform:translateX(26px)}}
.ssg-on .ssg-sway{animation:ssg-sway 7s ease-in-out infinite alternate}
@keyframes ssg-sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
.ssg-on .ssg-lit{animation:ssg-lit 9s ease-in-out infinite}
.ssg-on .ssg-lit-1{animation-delay:-3s}.ssg-on .ssg-lit-2{animation-delay:-6s}
.ssg-lit{opacity:.55}
@keyframes ssg-lit{0%,100%{opacity:.55}45%{opacity:.22}55%{opacity:.22}}

/* BATH, 16s loop */
.ssg-on .ssg-bi{animation:ssg-bi 16s linear infinite both}
@keyframes ssg-bi{
 0%{transform:translate(-120px,0);opacity:1;animation-timing-function:cubic-bezier(.45,0,.35,1)}
 18%{transform:translate(0,0)}
 44%{transform:translate(0,0);animation-timing-function:cubic-bezier(.45,0,.35,1)}
 52%{transform:translate(-44px,0)}
 92%{transform:translate(-44px,0);opacity:1}
 95.9%{transform:translate(-44px,0);opacity:0}
 96%{transform:translate(-120px,0);opacity:0}
 100%{transform:translate(-120px,0);opacity:1}}
.ssg-on .ssg-bi-af{animation:ssg-bi-af 16s linear infinite both}
@keyframes ssg-bi-af{
 0%,20%{transform:rotate(-50deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}
 25%,29%{transform:rotate(-133deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}
 33%,44%{transform:rotate(-50deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}
 48%,53%{transform:rotate(6deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}
 56%,64%{transform:rotate(-112deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}
 68%,95.9%{transform:rotate(6deg)}
 96%,100%{transform:rotate(-50deg)}}
.ssg-on .ssg-bi-ab{animation:ssg-bi-ab 16s linear infinite both}
@keyframes ssg-bi-ab{0%,44%{transform:rotate(-44deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}48%,95.9%{transform:rotate(6deg)}96%,100%{transform:rotate(-44deg)}}
@keyframes ssg-bi-lw-a{0%{transform:rotate(0deg)}1.31%{transform:rotate(16deg)}3.94%{transform:rotate(-16deg)}6.56%{transform:rotate(16deg)}9.19%{transform:rotate(-16deg)}11.81%{transform:rotate(16deg)}14.44%{transform:rotate(-16deg)}18%{transform:rotate(0deg)}44%{transform:rotate(0deg)}45.31%{transform:rotate(16deg)}47.94%{transform:rotate(-16deg)}50.56%{transform:rotate(16deg)}52%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}@keyframes ssg-bi-lw-b{0%{transform:rotate(0deg)}1.31%{transform:rotate(-16deg)}3.94%{transform:rotate(16deg)}6.56%{transform:rotate(-16deg)}9.19%{transform:rotate(16deg)}11.81%{transform:rotate(-16deg)}14.44%{transform:rotate(16deg)}18%{transform:rotate(0deg)}44%{transform:rotate(0deg)}45.31%{transform:rotate(-16deg)}47.94%{transform:rotate(16deg)}50.56%{transform:rotate(-16deg)}52%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
.ssg-on .ssg-bi-l-a{animation:ssg-bi-lw-a 16s linear infinite both}
.ssg-on .ssg-bi-l-b{animation:ssg-bi-lw-b 16s linear infinite both}
.ssg-on .ssg-bd{animation:ssg-bd 16s linear infinite both}
@keyframes ssg-bd{
 0%{transform:translate(-120px,4px) rotate(-3deg);opacity:1;animation-timing-function:cubic-bezier(.45,0,.35,1)}
 18%{transform:translate(0,-3px) rotate(0deg);animation-timing-function:ease-out}
 21%{transform:translate(0,0)}
 58%{transform:translate(0,0) scaleX(1) skewY(0deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}
 61.5%{transform:translate(0,0) scaleX(.3) skewY(-9deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}
 63%{transform:translate(0,0) scaleX(.3) skewY(-9deg);animation-timing-function:cubic-bezier(.5,0,.3,1.25)}
 66.5%{transform:translate(0,0) scaleX(1) skewY(0deg)}
 92%{transform:translate(0,0);opacity:1}
 95.9%{transform:translate(0,0);opacity:0}
 96%{transform:translate(-120px,4px) rotate(-3deg);opacity:0}
 100%{transform:translate(-120px,4px) rotate(-3deg);opacity:1}}
.ssg-on .ssg-hglint{animation:ssg-hglint 16s linear infinite both}
@keyframes ssg-hglint{0%,18.5%{opacity:0}20%{opacity:1}23%,100%{opacity:0}}
.ssg-on .ssg-bl{animation:ssg-bl 16s linear infinite both}
@keyframes ssg-bl{0%,25.5%{opacity:0;transform:translateY(30px)}27%{opacity:1}29.5%{transform:translateY(0);opacity:1}50%{opacity:1;transform:translateY(0)}53%,100%{opacity:0;transform:translateY(0)}}
.ssg-on .ssg-bb{animation:ssg-bb 16s linear infinite both}
@keyframes ssg-bb{0%,30%{transform:translateX(4.5px);animation-timing-function:cubic-bezier(.45,0,.35,1)}37%{transform:translateX(-1.1px);animation-timing-function:cubic-bezier(.45,0,.35,1)}40%,100%{transform:translateX(0)}}
.ssg-bk{transform-origin:50% 50%}
.ssg-on .ssg-bk{animation:ssg-pop 16s linear infinite both}
@keyframes ssg-pop{0%,39%{opacity:0;transform:scale(.2) rotate(0)}41%{opacity:1;transform:scale(1.15) rotate(20deg)}45%,100%{opacity:0;transform:scale(.6) rotate(45deg)}}
.ssg-on .ssg-bs{animation:ssg-bs 16s linear infinite both}
@keyframes ssg-bs{0%,66%{opacity:0;transform:skewX(-18deg) translateX(0)}66.5%{opacity:1}74%{opacity:1;transform:skewX(-18deg) translateX(240px)}74.5%,100%{opacity:0;transform:skewX(-18deg) translateX(240px)}}
.ssg-on .ssg-water{animation:ssg-water 16s linear infinite both}
.ssg-on .ssg-water path{animation:ssg-drip .5s linear infinite}
@keyframes ssg-water{0%,72%{opacity:0}73.5%,85%{opacity:.95}87%,100%{opacity:0}}
@keyframes ssg-drip{to{stroke-dashoffset:-12}}

/* WORK, 28s loop */
.ssg-on .ssg-tk{animation:ssg-tk 28s linear infinite both}
@keyframes ssg-tk{
 0%{transform:translateX(-580px);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
 14%,85%{transform:translateX(0);animation-timing-function:cubic-bezier(.55,0,.85,.4)}
 96%,100%{transform:translateX(560px)}}
.ssg-on .ssg-wh{animation:ssg-wh 28s linear infinite both}
@keyframes ssg-wh{
 0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
 14%,85%{transform:rotate(2967deg);animation-timing-function:cubic-bezier(.55,0,.85,.4)}
 96%,100%{transform:rotate(5832deg)}}
.ssg-on .ssg-tb{animation:ssg-tb 28s linear infinite both}
@keyframes ssg-tb{0%,13.6%{transform:translateY(0) rotate(0)}14.6%{transform:translateY(.8px) rotate(.4deg)}16%,85%{transform:translateY(0) rotate(0)}86.5%{transform:rotate(-.35deg)}88%,100%{transform:rotate(0)}}
.ssg-tb{transform-origin:50% 100%}
.ssg-on .ssg-rp{animation:ssg-rp 28s linear infinite both}
@keyframes ssg-rp{0%,19.9%{opacity:1}20%,99.9%{opacity:0}100%{opacity:1}}
.ssg-on .ssg-oc{animation:ssg-oc 28s linear infinite both}
@keyframes ssg-oc{
 0%,15%{opacity:0;transform:translate(0,0)}
 17.5%{opacity:1;transform:translate(0,0)}
 25%{opacity:1;transform:translate(0,0);animation-timing-function:ease-in-out}
 42.5%{opacity:1;transform:translate(168px,-22px)}
 44.5%,100%{opacity:0;transform:translate(176px,-24px)}}
.ssg-on .ssg-cp{animation:ssg-cp 28s linear infinite both}
@keyframes ssg-cp{0%,19.9%{opacity:0;transform:translateY(0)}20%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.45,0,.35,1)}24%,100%{opacity:1;transform:translateY(16px)}}
@keyframes ssg-oc-lw-a{0%{transform:rotate(0deg)}25%{transform:rotate(0deg)}25.8%{transform:rotate(18deg)}27.41%{transform:rotate(-18deg)}29.02%{transform:rotate(18deg)}30.62%{transform:rotate(-18deg)}32.23%{transform:rotate(18deg)}33.84%{transform:rotate(-18deg)}35.45%{transform:rotate(18deg)}37.05%{transform:rotate(-18deg)}38.66%{transform:rotate(18deg)}40.27%{transform:rotate(-18deg)}42.5%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}@keyframes ssg-oc-lw-b{0%{transform:rotate(0deg)}25%{transform:rotate(0deg)}25.8%{transform:rotate(-18deg)}27.41%{transform:rotate(18deg)}29.02%{transform:rotate(-18deg)}30.62%{transform:rotate(18deg)}32.23%{transform:rotate(-18deg)}33.84%{transform:rotate(18deg)}35.45%{transform:rotate(-18deg)}37.05%{transform:rotate(18deg)}38.66%{transform:rotate(-18deg)}40.27%{transform:rotate(18deg)}42.5%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
.ssg-on .ssg-oc1-l-a,.ssg-on .ssg-oc2-l-b{animation:ssg-oc-lw-a 28s linear infinite both}
.ssg-on .ssg-oc1-l-b,.ssg-on .ssg-oc2-l-a{animation:ssg-oc-lw-b 28s linear infinite both}
.ssg-on .ssg-ip{animation:ssg-ip 28s linear infinite both}
@keyframes ssg-ip{
 0%,44.9%{opacity:0;transform:translate(-140px,5px)}
 46.5%{opacity:1;transform:translate(-140px,5px);animation-timing-function:ease-in-out}
 57%{opacity:1;transform:translate(0,5px);animation-timing-function:cubic-bezier(.45,0,.35,1)}
 60%{transform:translate(0,-4px);animation-timing-function:cubic-bezier(.45,0,.35,1)}
 63%,96%{opacity:1;transform:translate(0,0)}
 99%,100%{opacity:0;transform:translate(0,0)}}
.ssg-on .ssg-il{animation:ssg-il 28s linear infinite both}
@keyframes ssg-il{0%,63.5%{opacity:1}66%,100%{opacity:0}}
.ssg-on .ssg-iw{animation:ssg-iw 28s linear infinite both}
@keyframes ssg-iw{
 0%,44.9%{opacity:0;transform:translate(-140px,0)}
 46.5%{opacity:1;transform:translate(-140px,0);animation-timing-function:ease-in-out}
 57%{opacity:1;transform:translate(0,0)}
 69%{opacity:1;transform:translate(0,0)}
 72%,100%{opacity:0;transform:translate(-10px,0)}}
@keyframes ssg-iw-lw-a{0%{transform:rotate(0deg)}46.5%{transform:rotate(0deg)}47.3%{transform:rotate(18deg)}48.91%{transform:rotate(-18deg)}50.52%{transform:rotate(18deg)}52.12%{transform:rotate(-18deg)}53.73%{transform:rotate(18deg)}55.34%{transform:rotate(-18deg)}57%{transform:rotate(0deg)}69%{transform:rotate(0deg)}69.8%{transform:rotate(18deg)}72%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}@keyframes ssg-iw-lw-b{0%{transform:rotate(0deg)}46.5%{transform:rotate(0deg)}47.3%{transform:rotate(-18deg)}48.91%{transform:rotate(18deg)}50.52%{transform:rotate(-18deg)}52.12%{transform:rotate(18deg)}53.73%{transform:rotate(-18deg)}55.34%{transform:rotate(18deg)}57%{transform:rotate(0deg)}69%{transform:rotate(0deg)}69.8%{transform:rotate(-18deg)}72%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
.ssg-on .ssg-iw1-l-a,.ssg-on .ssg-iw2-l-b{animation:ssg-iw-lw-a 28s linear infinite both}
.ssg-on .ssg-iw1-l-b,.ssg-on .ssg-iw2-l-a{animation:ssg-iw-lw-b 28s linear infinite both}
.ssg-on .ssg-iw1-af{animation:ssg-iw1-af 28s linear infinite both}
@keyframes ssg-iw1-af{0%,63.5%{transform:rotate(-44deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}66.5%,100%{transform:rotate(6deg)}}
.ssg-on .ssg-iw2-af{animation:ssg-iw2-af 28s linear infinite both}
@keyframes ssg-iw2-af{0%,63.5%{transform:rotate(-157deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}66.5%,100%{transform:rotate(6deg)}}
.ssg-pk{transform-origin:50% 50%}
.ssg-on .ssg-pk{animation:ssg-pk 28s linear infinite both}
@keyframes ssg-pk{0%,63%{opacity:0;transform:scale(.2) rotate(0)}65%{opacity:1;transform:scale(1.2) rotate(20deg)}68%,100%{opacity:0;transform:scale(.6) rotate(45deg)}}
.ssg-on .ssg-ps{animation:ssg-ps 28s linear infinite both}
@keyframes ssg-ps{0%,66%{opacity:0;transform:skewX(-18deg) translateX(0)}66.5%{opacity:1}74%{opacity:1;transform:skewX(-18deg) translateX(250px)}74.5%,100%{opacity:0;transform:skewX(-18deg) translateX(250px)}}
.ssg-on .ssg-rc{animation:ssg-rc 28s linear infinite both}
@keyframes ssg-rc{
 0%,72%{opacity:0;transform:translate(168px,-22px)}
 74%{opacity:1;transform:translate(168px,-22px);animation-timing-function:ease-in-out}
 82.5%{opacity:1;transform:translate(0,0)}
 84.5%,100%{opacity:0;transform:translate(0,0)}}
@keyframes ssg-rc-lw-a{0%{transform:rotate(0deg)}74%{transform:rotate(0deg)}74.8%{transform:rotate(18deg)}76.41%{transform:rotate(-18deg)}78.02%{transform:rotate(18deg)}79.63%{transform:rotate(-18deg)}81.23%{transform:rotate(18deg)}82.5%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}@keyframes ssg-rc-lw-b{0%{transform:rotate(0deg)}74%{transform:rotate(0deg)}74.8%{transform:rotate(-18deg)}76.41%{transform:rotate(18deg)}78.02%{transform:rotate(-18deg)}79.63%{transform:rotate(18deg)}81.23%{transform:rotate(-18deg)}82.5%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
.ssg-on .ssg-rc1-l-a,.ssg-on .ssg-rc2-l-b{animation:ssg-rc-lw-a 28s linear infinite both}
.ssg-on .ssg-rc1-l-b,.ssg-on .ssg-rc2-l-a{animation:ssg-rc-lw-b 28s linear infinite both}

/* pause: freezes every frame exactly where it is */
.ssg-paused *,.ssg-paused *::before,.ssg-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .ssg-scene *{animation:none!important}
  .ssg-toggle{display:none!important}
}