/* Hero scenes for the solution pages (markup in tmpl/landing/sky_scenes.php). One animated
   drawing per page, switched on by the page's hero_scene row. Loaded only where one is used.
   Drawn with the site's ink line and blues; with movement off, each rests in its finished state. */
.sky-scene__art { position: absolute; inset: 4% 2%; }
.sky-scene--art .sc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
.sky-scene--art:hover .sc-svg { transform: rotate(-2deg) scale(1.03); }

.sc-svg { --ink: #12365c; --ocean: #1066af; --cerulean: #1f8ccb; --pop: #a9dcff; }
.sc-svg .k, .sc-svg .o, .sc-svg .c, .sc-svg .p, .sc-svg .s { stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.sc-svg .k { fill: #fff; } .sc-svg .o { fill: var(--ocean); } .sc-svg .c { fill: var(--cerulean); } .sc-svg .p { fill: var(--pop); } .sc-svg .s { fill: #f4f6f8; }
.sc-svg .n { fill: var(--ink); } .sc-svg .w { fill: #fff; }
.sc-svg .l, .sc-svg .li, .sc-svg .lw, .sc-svg .lo, .sc-svg .lp, .sc-svg .lg, .sc-svg .ld { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sc-svg .l { stroke: #b9d4ee; stroke-width: 8; }
.sc-svg .li { stroke: var(--ink); stroke-width: 5; }
.sc-svg .lw { stroke: #fff; stroke-width: 6; }
.sc-svg .lo { stroke: var(--ocean); stroke-width: 9; }
.sc-svg .lp { stroke: var(--pop); stroke-width: 14; }
.sc-svg .lg { stroke: #cfe2f3; stroke-width: 4; }
.sc-svg .ld { stroke: var(--ink); stroke-width: 4; stroke-dasharray: 2 12; }
.sc-svg .beam { fill: var(--cerulean); opacity: 0.55; }
.sc-svg .ping { fill: none; stroke: var(--cerulean); stroke-width: 4; }
.sc-svg .gear { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 11 11.6; }
.sc-svg .gear--ink { stroke: var(--ink); stroke-width: 10; stroke-dasharray: 7 8.7; }
.sc-svg .glass { fill: rgba(169, 220, 255, 0.45); stroke: var(--ink); stroke-width: 7; }
.sc-svg .arm { fill: none; stroke: var(--ink); stroke-width: 26; stroke-linecap: round; }
.sc-svg .arm--p { stroke: var(--pop); stroke-width: 16; } .sc-svg .arm--o { stroke: var(--ocean); stroke-width: 16; } .sc-svg .arm--c { stroke: var(--cerulean); stroke-width: 16; }
.sc-svg .handle { fill: none; stroke: var(--ink); stroke-width: 14; stroke-linecap: round; }
.sc-svg text { font: 600 28px/1 var(--sky-font-display, "Fredoka", system-ui, sans-serif); text-anchor: middle; }
.sc-svg .t { fill: var(--ink); } .sc-svg .tw { fill: #fff; } .sc-svg .tb { font-size: 46px; } .sc-svg .ts { font-size: 22px; }

/* ---- movement ---- */
.sc-svg [class*="a-"] { transform-box: fill-box; transform-origin: center; }
.sc-svg .d1 { animation-delay: 0.5s; } .sc-svg .d2 { animation-delay: 1s; } .sc-svg .d3 { animation-delay: 1.5s; }
.sc-svg .d4 { animation-delay: 2s; } .sc-svg .d5 { animation-delay: 2.5s; } .sc-svg .d6 { animation-delay: 3s; }

.sc-svg .a-bob { animation: sc-bob 1.7s ease-in-out infinite alternate; }
.sc-svg .a-pop { animation: sc-pop 1.1s ease-in-out infinite alternate; }
.sc-svg .a-blink { animation: sc-blink 1.4s ease-in-out infinite alternate; }
.sc-svg .a-twinkle { animation: sc-twinkle 1.6s ease-in-out infinite alternate; }
.sc-svg .a-spin { animation: sc-spin 16s linear infinite; }
.sc-svg .a-wheel { animation: sc-wheel 6s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }
.sc-svg .a-sway { transform-origin: 50% 0; animation: sc-sway 3.2s ease-in-out infinite alternate; }
.sc-svg .a-ring { transform-origin: 50% 0; animation: sc-ring 2.4s ease-in-out infinite; }
.sc-svg .a-wave { transform-origin: 0 100%; animation: sc-wave 0.55s ease-in-out infinite alternate; }
.sc-svg .a-wave-l { transform-origin: 100% 100%; animation: sc-wave-l 0.55s ease-in-out infinite alternate; }
.sc-svg .a-press { animation: sc-press 0.7s ease-in-out infinite alternate; }
.sc-svg .a-scan { animation: sc-scan 1.6s ease-in-out infinite alternate; }
.sc-svg .a-flow { animation: sc-flow 0.9s linear infinite; }
.sc-svg .a-ping { animation: sc-ping 2.2s ease-out infinite; }
.sc-svg .a-needle { transform-origin: 50% 100%; animation: sc-needle 2.6s ease-in-out infinite alternate; }
.sc-svg .a-roll { animation: sc-roll 2.4s ease-in-out infinite; }
.sc-svg .a-fall { animation: sc-fall 3s ease-in infinite; }
.sc-svg .a-rise { animation: sc-rise 1.4s ease-out infinite; }
.sc-svg .a-unlock { animation: sc-unlock 3.4s ease-in-out infinite; }
.sc-svg .a-feed { animation: sc-feed 4s ease-in-out infinite; }
.sc-svg .a-type { transform-origin: 0 50%; animation: sc-type 4.5s steps(14) infinite; }
.sc-svg .a-pan { animation: sc-pan 6s ease-in-out infinite; }
.sc-svg .a-flyx { animation: sc-flyx 1.8s ease-in-out infinite; }
.sc-svg .a-arc { animation: sc-arc 3s ease-in-out infinite; }
.sc-svg .a-in { animation: sc-in 4s ease-in-out infinite; }
.sc-svg .a-drop { animation: sc-drop 3.6s cubic-bezier(0.3, 1.3, 0.5, 1) infinite; }
.sc-svg .a-stamp { animation: sc-stamp 3.4s cubic-bezier(0.3, 1.5, 0.5, 1) infinite; }
.sc-svg .a-hop { animation: sc-hop 6s ease-in-out infinite; }
.sc-svg .a-drive { animation: sc-drive 7s ease-in-out infinite; }
.sc-svg .a-open-l { transform-origin: 0 50%; transform: scaleX(0.22); animation: sc-open 7s ease-in-out infinite; }
.sc-svg .a-open-r { transform-origin: 100% 50%; transform: scaleX(0.22); animation: sc-open 7s ease-in-out infinite; }
.sc-svg .a-growy { transform-origin: 50% 100%; animation: sc-growy 6s ease-in-out infinite both; }
.sc-svg .a-growx { transform-origin: 0 50%; animation: sc-growx 7s ease-in-out infinite both; }
.sc-svg .a-seq { animation: sc-seq 7s cubic-bezier(0.3, 1.4, 0.5, 1) infinite both; }
.sc-svg .a-send { animation: sc-from 4s ease-out infinite both; }
.sc-svg .a-from { animation: sc-from 7s cubic-bezier(0.3, 1.3, 0.5, 1) infinite both; }
.sc-svg .v1 { --fx: -110px; --fy: 90px; } .sc-svg .v2 { --fx: -120px; --fy: 0px; } .sc-svg .v3 { --fx: -110px; --fy: -90px; }
.sc-svg .v-tl { --fx: -60px; --fy: -50px; } .sc-svg .v-tr { --fx: 60px; --fy: -50px; } .sc-svg .v-bl { --fx: -60px; --fy: 50px; } .sc-svg .v-br { --fx: 60px; --fy: 50px; }
.sc-svg .a-route { display: none; }
@supports (offset-path: path("M0 0")) {
  .sc-svg .a-route { display: inline; transform-box: view-box; transform-origin: 0 0; offset-path: path("M44 262C110 130 170 300 236 176S330 86 356 70"); offset-rotate: 0deg; offset-distance: 52%; animation: sc-route 8s ease-in-out infinite; }
}

@keyframes sc-bob { to { transform: translateY(-10px); } }
@keyframes sc-pop { to { transform: scale(1.14); } }
@keyframes sc-blink { to { opacity: 0.35; } }
@keyframes sc-twinkle { from { transform: scale(0.6) rotate(-12deg); opacity: 0.5; } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-wheel { 0% { transform: rotate(0); } 70%, 100% { transform: rotate(1125deg); } }
@keyframes sc-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes sc-ring { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } }
@keyframes sc-wave { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
@keyframes sc-wave-l { from { transform: rotate(12deg); } to { transform: rotate(-14deg); } }
@keyframes sc-press { to { transform: translateY(12px); } }
@keyframes sc-scan { to { transform: translateY(56px); } }
@keyframes sc-flow { to { stroke-dashoffset: -28; } }
@keyframes sc-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }
@keyframes sc-needle { from { transform: rotate(-58deg); } to { transform: rotate(52deg); } }
@keyframes sc-roll { 0%, 60%, 100% { transform: none; opacity: 1; } 12%, 36% { transform: translateY(-16px); opacity: 0.3; } 24%, 48% { transform: translateY(16px); opacity: 0.3; } }
@keyframes sc-fall { 0% { transform: translateY(-250px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(60px) rotate(300deg); opacity: 0; } }
@keyframes sc-rise { from { transform: translateY(26px); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(-20px); opacity: 0; } }
@keyframes sc-unlock { 0%, 30%, 100% { transform: none; } 45%, 85% { transform: translateY(-13px); } }
@keyframes sc-feed { 0%, 100% { transform: translateY(86px); } 40%, 85% { transform: none; } }
@keyframes sc-type { 0% { transform: scaleX(0.04); } 55%, 100% { transform: none; } }
@keyframes sc-pan { 0%, 100% { transform: none; } 30% { transform: translate(-90px, -60px); } 60% { transform: translate(-20px, -90px); } }
@keyframes sc-flyx { from { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateX(44px); opacity: 0; } }
@keyframes sc-arc { 0% { transform: translate(-150px, -40px) scale(0.7); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(-60px, -90px) scale(0.9); } 80%, 100% { transform: none; opacity: 1; } }
@keyframes sc-in { 0% { transform: translateX(-40px); opacity: 0; } 25%, 100% { transform: none; opacity: 1; } }
@keyframes sc-drop { 0% { transform: translateY(-110px); opacity: 0; } 30%, 100% { transform: none; opacity: 1; } }
@keyframes sc-stamp { 0% { transform: scale(1.7) rotate(-14deg); opacity: 0; } 22%, 100% { transform: none; opacity: 1; } }
@keyframes sc-hop { 0%, 18% { transform: translateX(-232px); } 30%, 50% { transform: translateX(-116px); } 62%, 100% { transform: none; } }
@keyframes sc-drive { 0%, 14% { transform: translateX(-120px); } 30%, 52% { transform: none; } 68%, 92% { transform: translateX(120px); } 100% { transform: translateX(-120px); } }
@keyframes sc-open { 0%, 8% { transform: scaleX(1); } 30%, 88% { transform: scaleX(0.22); } 100% { transform: scaleX(1); } }
@keyframes sc-growy { 0%, 100% { transform: scaleY(0.08); } 18%, 86% { transform: none; } }
@keyframes sc-growx { 0%, 100% { transform: scaleX(0.06); } 16%, 88% { transform: none; } }
@keyframes sc-seq { 0% { opacity: 0; transform: translateY(10px) scale(0.6); } 9%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scale(0.8); } }
@keyframes sc-from { 0% { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(0.7); } 22%, 84% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes sc-route { 0%, 6% { offset-distance: 0%; } 44%, 56% { offset-distance: 52%; } 94%, 100% { offset-distance: 100%; } }

/* The same drawings outside a hero, for example beside the company story on the homepage. */
.sky-about__scene { justify-self: end; width: min(100%, 440px); }
.sky-about__scene .sc-svg { display: block; width: 100%; height: auto; overflow: visible; }

@media (max-width: 991.98px) {
  .sky-about__scene { justify-self: center; width: min(100%, 320px); }
  .sky-scene--art .sc-svg { position: relative; inset: auto; display: block; width: min(100%, 340px); height: auto; margin: 12px auto 28px; }
  .sky-scene__art { position: static; }
  .sky-scene--art:hover .sc-svg { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-svg [class*="a-"] { animation: none; }
  .sky-scene--art .sc-svg { transition: none; }
}