/* ------------------------------------------------------------ scenes (illustrations) */
.sg-scene-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sg-hero, .sg-banner { --a: hsl(var(--h, 152) 85% 68%); --as: hsl(var(--h, 152) 85% 68% / .17); }
.sg-scene-svg .sc-glow { fill: var(--as); filter: blur(26px); opacity: .9; }
.sg-scene-svg .sc-g { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.sg-scene-svg .sc-road { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 16; stroke-linecap: round; }
.sg-scene-svg .sc-ln { fill: none; stroke: rgba(255, 255, 255, .3); }
.sg-scene-svg .sc-sa { fill: none; stroke: var(--a); }
.sg-scene-svg .sc-fa { fill: var(--a); }
.sg-scene-svg .sc-fs { fill: none; }
.sg-scene-svg .sc-fs2 { fill: var(--as); }
.sg-scene-svg .sc-fw { fill: rgba(255, 255, 255, .92); }
.sg-scene-svg .sc-fd { fill: rgba(255, 255, 255, .09); }
.sg-scene-svg .sc-fd2 { fill: rgba(255, 255, 255, .22); }
.sg-scene-svg .sc-track { fill: none; stroke: rgba(255, 255, 255, .12); stroke-linecap: round; }
.sg-scene-svg .sc-car { fill: #fff; stroke: var(--a); stroke-width: 3.5; }
.sg-scene-svg .sc-halo { fill: var(--a); opacity: .25; transform-box: fill-box; transform-origin: center; animation: sc-halo 2.2s ease-in-out infinite; }
.sg-scene-svg .sc-dash { stroke-dasharray: 6 10; animation: sc-dash 1.6s linear infinite; }
.sg-scene-svg .sc-dash2 { stroke-dasharray: 4 8; }
.sg-scene-svg .sc-ring { fill: none; stroke: var(--a); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: sc-ring 2.8s ease-out infinite; }
.sg-scene-svg .sc-d1 { animation-delay: .9s; }
.sg-scene-svg .sc-d2 { animation-delay: 1.8s; }
.sg-scene-svg .sc-ring.sc-at1 { animation: sc-at 8s ease-out 3s infinite; }
.sg-scene-svg .sc-ring.sc-at2 { animation: sc-at 8s ease-out 6.4s infinite; }
.sg-scene-svg .sc-poly { fill: var(--as); stroke: var(--a); stroke-width: 3; stroke-dasharray: 8 8; animation: sc-lit 8s ease-in-out infinite; }
.sg-scene-svg .sc-bob { animation: sc-bob 3.2s ease-in-out infinite alternate; }
.sg-scene-svg .sc-slide { animation: sc-slide 6s ease-in-out infinite; }
.sg-scene-svg .sc-pop1 { animation: sc-slide 5s ease-in-out infinite; }
.sg-scene-svg .sc-pop2 { animation: sc-slide 5s ease-in-out 1.4s infinite; }
.sg-scene-svg .sc-swing { animation: sc-swing 1.5s ease-in-out infinite alternate; }
.sg-scene-svg .sc-wiggle { animation: sc-swing 4s ease-in-out infinite alternate; }
.sg-scene-svg .sc-gauge { stroke-dasharray: 151; animation: sc-gauge 5s ease-in-out infinite alternate; }
.sg-scene-svg .sc-bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-barp 2.6s ease-in-out infinite alternate; }
.sg-scene-svg .sc-bars .sc-b2 { animation-delay: -.6s; }
.sg-scene-svg .sc-bars .sc-b3 { animation-delay: -1.2s; }
.sg-scene-svg .sc-bars .sc-b4 { animation-delay: -1.8s; }
.sg-scene-svg .sc-level { animation: sc-level 7s ease-in-out infinite; }
.sg-scene-svg .sc-wave { animation: sc-wave 3.4s linear infinite; }
.sg-scene-svg .sc-wave2 { animation: sc-wave 5.2s linear infinite reverse; }
.sg-scene-svg .sc-fall { animation: sc-fall 3s ease-in infinite; }
.sg-scene-svg .sc-draw { stroke-dasharray: 320; animation: sc-draw 5s ease-in-out infinite; }
.sg-scene-svg .sc-box { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-boxin 7s ease-out infinite backwards; }
.sg-scene-svg .sc-bx2 { animation-delay: .45s; }
.sg-scene-svg .sc-bx3 { animation-delay: .9s; }
.sg-scene-svg .sc-bx4 { animation-delay: 1.35s; }
.sg-scene-svg .sc-bx5 { animation-delay: 1.8s; }
.sg-scene-svg .sc-wheel { animation: sc-spin 1.4s linear infinite; }
.sg-scene-svg .sc-needle { animation: sc-needle 4s ease-in-out infinite alternate; }
.sg-scene-svg .sc-hand { animation: sc-spin 8s linear infinite; }
.sg-scene-svg .sc-spin { animation: sc-spin 20s linear infinite; }
.sg-scene-svg .sc-spin.sc-rev { animation: sc-spin 12s linear infinite reverse; }
.sg-scene-svg .sc-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-barg 5.5s cubic-bezier(.2, .8, .2, 1) infinite; animation-delay: calc(var(--n) * .16s); }
.sg-scene-svg .sc-donut { stroke-dasharray: 151; animation: sc-gauge 5s ease-in-out infinite alternate; }
.sg-scene-svg .sc-led { animation: sc-led 1.6s steps(1) infinite; }
.sg-scene-svg .sc-l2 { animation-delay: .4s; }
.sg-scene-svg .sc-l3 { animation-delay: .8s; }
.sg-scene-svg .sc-tick { fill: none; stroke: #fff; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 110; animation: sc-tick 4.2s ease-in-out infinite; }

@keyframes sc-halo { 0%, 100% { transform: scale(.85); opacity: .35; } 50% { transform: scale(1.5); opacity: .08; } }
@keyframes sc-dash { to { stroke-dashoffset: -64; } }
@keyframes sc-ring { 0% { transform: scale(1); opacity: .9; } 85%, 100% { transform: scale(4.2); opacity: 0; } }
@keyframes sc-at { 0% { transform: scale(.6); opacity: .95; } 14%, 100% { transform: scale(4); opacity: 0; } }
@keyframes sc-lit {
	0%, 36% { fill: hsl(var(--h, 152) 85% 68% / .03); stroke-opacity: .45; }
	41%, 78% { fill: hsl(var(--h, 152) 85% 68% / .3); stroke-opacity: 1; }
	83%, 100% { fill: hsl(var(--h, 152) 85% 68% / .03); stroke-opacity: .45; }
}
@keyframes sc-bob { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
@keyframes sc-slide { 0%, 8% { transform: translateX(34px); opacity: 0; } 22%, 78% { transform: none; opacity: 1; } 94%, 100% { transform: translateX(-12px); opacity: 0; } }
@keyframes sc-swing { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
@keyframes sc-gauge { from { stroke-dashoffset: 151; } to { stroke-dashoffset: 38; } }
@keyframes sc-barp { from { transform: scaleY(.4); } to { transform: scaleY(1.7); } }
@keyframes sc-level { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-24px); } 70% { transform: translateY(10px); } }
@keyframes sc-wave { to { transform: translateX(-88px); } }
@keyframes sc-fall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(64px); opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
@keyframes sc-draw { 0% { stroke-dashoffset: 320; opacity: 1; } 55%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sc-boxin { 0%, 4% { transform: scale(0); opacity: 0; } 14% { transform: scale(1.12); opacity: 1; } 20%, 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-needle { from { transform: rotate(-52deg); } to { transform: rotate(48deg); } }
@keyframes sc-barg { 0% { transform: scaleY(0); } 22%, 80% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes sc-led { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
@keyframes sc-tick { 0%, 8% { stroke-dashoffset: 110; } 34%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 110; } }

@media (prefers-reduced-motion: reduce) {
	.sg-scene-svg * { animation: none !important; }
	.sg-scene-svg .sc-tick, .sg-scene-svg .sc-draw { stroke-dashoffset: 0; }
	.sg-scene-svg .sc-box, .sg-scene-svg .sc-bar { transform: none; opacity: 1; }
}