/* =========================================================================
   SJCE animated SVG scenes
   Speed: --sj-speed (multiplier on durations, set by the widget "Scene speed").
   ========================================================================= */
.sj-scene{position:absolute;inset:0;overflow:hidden;--sj-speed:1;
  --sk1:#7ec8f0;--sk2:#fdf2d6;--gr1:#6fbf4a;--gr2:#3f8a34;}
.sj-scene svg{width:100%;height:100%;display:block}
.sj-scene .sj-hill1{fill:#5fae4a}.sj-scene .sj-hill2{fill:#9ccc65}
.sj-pal-dawn{--sk1:#f7a072;--sk2:#ffe3b3;--gr1:#7cb342;--gr2:#4b7f2e}
.sj-pal-dawn .sj-hill2{fill:#c58f72}.sj-pal-dawn .sj-hill1{fill:#8d9b5a}
.sj-pal-dusk{--sk1:#3b2c6b;--sk2:#f08a5d;--gr1:#4a6b3a;--gr2:#24361f}
.sj-pal-dusk .sj-hill2{fill:#5c4a7a}.sj-pal-dusk .sj-hill1{fill:#3e5634}
.sj-pal-night{--sk1:#0d1236;--sk2:#2d3a7c;--gr1:#2f4d2b;--gr2:#162814}
.sj-pal-night .sj-hill2{fill:#26305e}.sj-pal-night .sj-hill1{fill:#203a26}
.sj-pal-brand{--sk1:var(--sj-dark,#121a3f);--sk2:var(--sj-primary,#1f2a6e);--gr1:#2a3a8f;--gr2:#18215a}
.sj-pal-brand .sj-hill2{fill:#2c3a8a}.sj-pal-brand .sj-hill1{fill:#24317a}
.sj-pal-teal{--sk1:#0e4c5f;--sk2:var(--sj-teal,#1d6f8a);--gr1:#2a8a7a;--gr2:#145a50}
.sj-pal-teal .sj-hill2{fill:#1f7a83}.sj-pal-teal .sj-hill1{fill:#17676c}
.sj-pal-maroon{--sk1:#5a0f12;--sk2:var(--sj-secondary,#d7261e);--gr1:#7a1c1c;--gr2:#4a0c0c}
.sj-no-sky .sj-sky{opacity:0}
.sj-no-extras .sj-extra{display:none}

/* Generic helpers --------------------------------------------------------- */
.sj-scene .sj-a-point,.sj-scene .sj-a-raise,.sj-scene .sj-a-wave,.sj-scene .sj-a-writearm,.sj-scene .sj-arm,.sj-scene .sj-bar,.sj-scene .sj-blade,.sj-scene .sj-blink,.sj-scene .sj-bob,.sj-scene .sj-bookspine,.sj-scene .sj-bounce,.sj-scene .sj-bucket,.sj-scene .sj-butterfly,.sj-scene .sj-clock-h,.sj-scene .sj-clock-m,.sj-scene .sj-confetti,.sj-scene .sj-drift,.sj-scene .sj-drift-sm,.sj-scene .sj-drop,.sj-scene .sj-fan,.sj-scene .sj-flag,.sj-scene .sj-flap,.sj-scene .sj-flash,.sj-scene .sj-float,.sj-scene .sj-fly,.sj-scene .sj-flybook,.sj-scene .sj-gate-l,.sj-scene .sj-gate-r,.sj-scene .sj-glow-bulb,.sj-scene .sj-grow,.sj-scene .sj-head,.sj-scene .sj-heart,.sj-scene .sj-hill1,.sj-scene .sj-hill2,.sj-scene .sj-jump,.sj-scene .sj-leaf,.sj-scene .sj-legL,.sj-scene .sj-legR,.sj-scene .sj-orbit,.sj-scene .sj-page-l,.sj-scene .sj-page-r,.sj-scene .sj-peck,.sj-scene .sj-pin-drop,.sj-scene .sj-pin-shadow,.sj-scene .sj-plane,.sj-scene .sj-pop,.sj-scene .sj-pulse-glow,.sj-scene .sj-ring,.sj-scene .sj-rise,.sj-scene .sj-run,.sj-scene .sj-shout,.sj-scene .sj-smoke,.sj-scene .sj-spin,.sj-scene .sj-spin-rev,.sj-scene .sj-spin-slow,.sj-scene .sj-stamp,.sj-scene .sj-sway,.sj-scene .sj-tassel,.sj-scene .sj-toss,.sj-scene .sj-twinkle,.sj-scene .sj-walk-in,.sj-scene .sj-walk-x,.sj-scene .sj-wave-out,.sj-scene .sj-wifi,.sj-scene .sj-window,.sj-scene .sj-write,.sj-scene .sj-write-text{transform-box:fill-box}
.sj-scene .sj-drift{animation:sjDrift calc(60s*var(--sj-speed)) linear infinite}
.sj-scene .sj-drift-sm{animation:sjDriftSm calc(20s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjDrift{from{transform:translateX(-700px)}to{transform:translateX(1900px)}}
@keyframes sjDriftSm{from{transform:translateX(-30px)}to{transform:translateX(60px)}}
.sj-scene .sj-fly{animation:sjFly calc(22s*var(--sj-speed)) linear infinite}
@keyframes sjFly{0%{transform:translate(-300px,40px)}50%{transform:translate(700px,-30px)}100%{transform:translate(1800px,20px)}}
.sj-scene .sj-flap{transform-origin:50% 100%;animation:sjFlap calc(.5s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjFlap{to{transform:scaleY(-.6)}}
.sj-scene .sj-spin{transform-origin:center;animation:sjSpin calc(40s*var(--sj-speed)) linear infinite}
.sj-scene .sj-spin-slow{transform-origin:center;animation:sjSpin calc(14s*var(--sj-speed)) linear infinite}
.sj-scene .sj-spin-rev{transform-origin:center;animation:sjSpin calc(9s*var(--sj-speed)) linear infinite reverse}
@keyframes sjSpin{to{transform:rotate(360deg)}}
.sj-scene .sj-pulse-glow{transform-origin:center;animation:sjPulse calc(4s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjPulse{50%{transform:scale(1.15);opacity:.75}}
.sj-scene .sj-sway{transform-origin:50% 100%;animation:sjSway calc(6s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjSway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.sj-scene .sj-leaf{animation:sjLeaf calc(12s*var(--sj-speed)) linear infinite;opacity:0}
@keyframes sjLeaf{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:1}50%{transform:translate(-60px,140px) rotate(220deg)}90%{opacity:1}100%{transform:translate(30px,280px) rotate(420deg);opacity:0}}
.sj-scene .sj-blade{transform-origin:50% 100%;animation:sjBlade calc(3s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjBlade{from{transform:skewX(-6deg)}to{transform:skewX(8deg)}}
.sj-scene .sj-twinkle{animation:sjTwinkle calc(3.2s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjTwinkle{0%,100%{opacity:.15}50%{opacity:1}}
.sj-scene .sj-float{animation:sjFloat calc(5s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjFloat{from{transform:translateY(-10px) rotate(-2deg)}to{transform:translateY(12px) rotate(2deg)}}
.sj-scene .sj-rise{animation:sjRise calc(9s*var(--sj-speed)) ease-in-out infinite;opacity:0}
@keyframes sjRise{0%{transform:translateY(40px);opacity:0}20%,70%{opacity:1}100%{transform:translateY(-120px);opacity:0}}
.sj-scene .sj-smoke{animation:sjSmoke calc(4s*var(--sj-speed)) ease-out infinite;opacity:0}
@keyframes sjSmoke{0%{transform:translate(0,0) scale(.4);opacity:.8}100%{transform:translate(30px,-110px) scale(2.2);opacity:0}}

/* People ------------------------------------------------------------------ */
.sj-scene .sj-arm{transform-origin:50% 0}
.sj-scene .sj-a-point{animation:sjPoint calc(2.6s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjPoint{from{transform:rotate(-8deg)}to{transform:rotate(14deg)}}
.sj-scene .sj-a-raise{animation:sjRaise calc(1.4s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjRaise{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.sj-scene .sj-a-wave{animation:sjWave calc(.7s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjWave{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
.sj-scene .sj-a-writearm{animation:sjWriteArm calc(.9s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjWriteArm{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
.sj-scene .sj-nod .sj-head{transform-origin:50% 100%;animation:sjNod calc(3s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjNod{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}60%{transform:rotate(4deg)}}
.sj-scene .sj-bob{animation:sjBob calc(3s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjBob{50%{transform:translateY(-3px)}}
.sj-scene .sj-blink{transform-origin:center;animation:sjBlink calc(4.5s*var(--sj-speed)) infinite}
@keyframes sjBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.sj-scene .sj-legL{transform-origin:50% 0;animation:sjLeg calc(.6s*var(--sj-speed)) ease-in-out infinite alternate}
.sj-scene .sj-legR{transform-origin:50% 0;animation:sjLeg calc(.6s*var(--sj-speed)) ease-in-out infinite alternate-reverse}
@keyframes sjLeg{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.sj-scene .sj-walk-x{animation:sjWalkX calc(16s*var(--sj-speed)) linear infinite}
@keyframes sjWalkX{from{transform:translateX(-260px)}to{transform:translateX(420px)}}
.sj-scene .sj-walk-in{animation:sjWalkIn calc(9s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjWalkIn{0%{transform:translateX(-200px)}80%,100%{transform:translateX(220px)}}
.sj-scene .sj-run{animation:sjRun calc(7s*var(--sj-speed)) linear infinite}
.sj-scene .sj-run .sj-legL,.sj-scene .sj-run .sj-legR{animation-duration:calc(.32s*var(--sj-speed))}
@keyframes sjRun{from{transform:translateX(-420px)}to{transform:translateX(620px)}}
.sj-scene .sj-jump{animation:sjJump calc(1.8s*var(--sj-speed)) ease-in-out infinite}
.sj-scene .sj-jump:nth-of-type(2n){animation-delay:-.6s}
@keyframes sjJump{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-26px)}}

/* Chalk writing ----------------------------------------------------------- */
.sj-scene .sj-write{stroke-dasharray:420;stroke-dashoffset:420;animation:sjWrite calc(7s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjWrite{0%{stroke-dashoffset:420}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.sj-scene .sj-write-text{animation:sjTwinkle calc(3s*var(--sj-speed)) ease-in-out infinite}

/* Objects ----------------------------------------------------------------- */
.sj-scene .sj-fan{transform-origin:center;animation:sjFan calc(.45s*var(--sj-speed)) linear infinite}
@keyframes sjFan{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.sj-scene .sj-clock-m{transform-origin:50% 100%;animation:sjSpin calc(12s*var(--sj-speed)) linear infinite}
.sj-scene .sj-clock-h{transform-origin:0 50%;animation:sjSpin calc(144s*var(--sj-speed)) linear infinite}
.sj-scene .sj-window{animation:sjWin calc(6s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjWin{0%,100%{fill:#7fb3d5}50%{fill:#ffe08a}}
.sj-scene .sj-flag{transform-origin:0 50%;animation:sjFlag calc(1.2s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjFlag{from{transform:skewY(-6deg) scaleX(.94)}to{transform:skewY(5deg) scaleX(1.04)}}
.sj-scene .sj-butterfly{animation:sjButterfly calc(9s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjButterfly{0%{transform:translate(0,0) scaleX(1)}25%{transform:translate(60px,-40px) scaleX(.3)}50%{transform:translate(120px,0) scaleX(1)}75%{transform:translate(60px,30px) scaleX(.3)}100%{transform:translate(0,0) scaleX(1)}}
.sj-scene .sj-bucket{transform-origin:50% 0;animation:sjBucket calc(3s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjBucket{from{transform:translateY(0)}to{transform:translateY(-22px)}}
.sj-scene .sj-peck{transform-origin:20% 100%;animation:sjPeck calc(1.6s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjPeck{0%,60%,100%{transform:rotate(0)}75%{transform:rotate(24deg)}}
.sj-scene .sj-flapbook .sj-page-l{transform-origin:100% 50%;animation:sjPageL calc(1.2s*var(--sj-speed)) ease-in-out infinite alternate}
.sj-scene .sj-flapbook .sj-page-r{transform-origin:0 50%;animation:sjPageR calc(1.2s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjPageL{to{transform:scaleX(.55) skewY(-8deg)}}
@keyframes sjPageR{to{transform:scaleX(.55) skewY(8deg)}}
.sj-scene .sj-flybook{animation:sjFlyBook calc(14s*var(--sj-speed)) ease-in-out infinite}
.sj-scene .sj-flybook .sj-page-l,.sj-scene .sj-flybook .sj-page-r{animation:sjPageL calc(.6s*var(--sj-speed)) ease-in-out infinite alternate}
.sj-scene .sj-flybook .sj-page-r{animation-name:sjPageR;transform-origin:0 50%}
.sj-scene .sj-flybook .sj-page-l{transform-origin:100% 50%}
@keyframes sjFlyBook{0%{transform:translate(0,0)}25%{transform:translate(-60px,-30px)}50%{transform:translate(-20px,30px)}75%{transform:translate(50px,-10px)}100%{transform:translate(0,0)}}
.sj-scene .sj-tassel{transform-origin:50% 0;animation:sjWave calc(1.4s*var(--sj-speed)) ease-in-out infinite alternate}
.sj-scene .sj-gate-l{transform-origin:0 50%;animation:sjGateL calc(8s*var(--sj-speed)) ease-in-out infinite}
.sj-scene .sj-gate-r{transform-origin:100% 50%;animation:sjGateR calc(8s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjGateL{0%,10%{transform:scaleX(1)}35%,85%{transform:scaleX(.2)}100%{transform:scaleX(1)}}
@keyframes sjGateR{0%,10%{transform:scaleX(1)}35%,85%{transform:scaleX(.2)}100%{transform:scaleX(1)}}
.sj-scene .sj-bar{transform-origin:50% 100%;animation:sjBar calc(3s*var(--sj-speed)) ease-in-out infinite alternate}
@keyframes sjBar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.sj-scene .sj-wifi{animation:sjTwinkle calc(1.8s*var(--sj-speed)) ease-in-out infinite}
.sj-scene .sj-bookspine{transform-origin:50% 100%;animation:sjSpine calc(5s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjSpine{0%,80%,100%{transform:translateY(0)}88%{transform:translateY(-12px)}}
.sj-scene .sj-heart{transform-origin:center;animation:sjHeart calc(6s*var(--sj-speed)) ease-in infinite;opacity:0}
@keyframes sjHeart{0%{transform:translateY(0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translateY(-360px) scale(1.2);opacity:0}}
.sj-scene .sj-toss{animation:sjToss calc(3s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjToss{0%,100%{transform:translateY(240px) rotate(0)}50%{transform:translateY(-40px) rotate(540deg)}}
.sj-scene .sj-confetti{animation:sjConfetti calc(6s*var(--sj-speed)) linear infinite}
@keyframes sjConfetti{0%{transform:translate(0,-40px) rotate(0)}100%{transform:translate(-40px,620px) rotate(720deg)}}
.sj-scene .sj-orbit{transform-origin:center;animation:sjSpin calc(4s*var(--sj-speed)) linear infinite}
.sj-scene .sj-glow-bulb{animation:sjBulb calc(2.4s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjBulb{0%,100%{filter:drop-shadow(0 0 0 #ffe08a)}50%{filter:drop-shadow(0 0 28px #ffe08a)}}
.sj-scene .sj-grow{transform-origin:50% 100%;animation:sjGrow calc(5s*var(--sj-speed)) ease-out infinite}
@keyframes sjGrow{0%{transform:scale(.1)}40%,100%{transform:scale(1)}}
.sj-scene .sj-drop{animation:sjDrop calc(1s*var(--sj-speed)) linear infinite}
@keyframes sjDrop{from{transform:translateY(0);opacity:1}to{transform:translateY(40px);opacity:0}}
.sj-scene .sj-bounce{animation:sjBounceBall calc(1.1s*var(--sj-speed)) cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes sjBounceBall{from{transform:translateY(0)}to{transform:translateY(-160px) rotate(180deg)}}
.sj-scene .sj-flash{opacity:0;animation:sjFlash calc(5s*var(--sj-speed)) ease-out infinite}
@keyframes sjFlash{0%,90%{opacity:0}92%{opacity:.6}100%{opacity:0}}
.sj-scene .sj-shout{transform-origin:20% 50%;animation:sjShout calc(1.6s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjShout{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.04) rotate(2deg)}}
.sj-scene .sj-wave-out{animation:sjWaveOut calc(1.6s*var(--sj-speed)) ease-out infinite;opacity:0}
@keyframes sjWaveOut{0%{opacity:0;transform:translateX(-10px)}30%{opacity:1}100%{opacity:0;transform:translateX(20px)}}
.sj-scene .sj-pop{transform-origin:center;animation:sjPop calc(4s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjPop{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.sj-scene .sj-pin-drop{animation:sjPinDrop calc(2.4s*var(--sj-speed)) cubic-bezier(.3,1.6,.6,1) infinite alternate}
@keyframes sjPinDrop{from{transform:translateY(-30px)}to{transform:translateY(0)}}
.sj-scene .sj-pin-shadow{transform-origin:center;animation:sjPinSh calc(2.4s*var(--sj-speed)) ease infinite alternate}
@keyframes sjPinSh{from{transform:scale(.5);opacity:.1}to{transform:scale(1)}}
.sj-scene .sj-plane{animation:sjPlane calc(10s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjPlane{0%{transform:translate(-200px,60px) rotate(-8deg) scale(.6);opacity:0}15%{opacity:1}50%{transform:translate(300px,-40px) rotate(6deg) scale(.9)}85%{opacity:1}100%{transform:translate(800px,20px) rotate(-4deg) scale(.6);opacity:0}}
.sj-scene .sj-ring{transform-origin:center;animation:sjRing calc(2s*var(--sj-speed)) ease-in-out infinite}
@keyframes sjRing{0%,40%,100%{transform:rotate(0)}5%,15%,25%,35%{transform:rotate(-10deg)}10%,20%,30%{transform:rotate(10deg)}}
.sj-scene .sj-stamp{transform-origin:center;animation:sjStamp calc(4s*var(--sj-speed)) cubic-bezier(.6,-.3,.4,1.4) infinite}
@keyframes sjStamp{0%{transform:scale(2.2) rotate(-30deg);opacity:0}25%,85%{transform:scale(1) rotate(-12deg);opacity:1}100%{transform:scale(1) rotate(-12deg);opacity:0}}

.sj-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.sj-scene *{animation:none!important}.sj-scene .sj-write{stroke-dashoffset:0}.sj-scene .sj-rise,.sj-scene .sj-leaf,.sj-scene .sj-heart,.sj-scene .sj-smoke{opacity:.8}}