/* The craft stays crisp; only light, depth and a few working details move. */
/* A small connected world sits behind the original handcrafted workbench. */
.ks-workbench[data-ambient]::before { content: none; }
/* Horizontal touch exploration leaves normal vertical page scrolling intact. */
.ks-workbench[data-parallax] { touch-action: pan-y pinch-zoom; }
.ks-workbench-top .ks-art-note { display: flex; gap: 1.6em; min-width: 0; }
.ks-workbench-top .ks-art-note > span { white-space: nowrap; }
.ks-workbench-bottom { gap: 16px; min-height: 32px; line-height: 1.35; transform: translateY(8px); }
.ks-workbench-bottom > span:first-child { transform: none; }
.ks-workbench-bottom .ks-art-symbol { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; }
.ks-workbench-bottom .ks-art-symbol svg { display: block; }
.ks-workbench-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 52% 48%, #243f42 0, #303d3d 52%, transparent 78%);
}
:is(.ks-orbit-scene, .ks-orbit-overlay) { display: block; width: 100%; height: 100%; overflow: visible; }
/* Separate stacking contexts keep Safari's WebGL layer below vector traffic. */
.ks-orbit-stage > .ks-orbit-scene { position: relative; z-index: 0; isolation: isolate; }
.ks-orbit-stage > .ks-orbit-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ks-workbench-top, .ks-workbench-bottom { position: relative; isolation: isolate; }
.ks-workbench-top::before, .ks-workbench-bottom::before {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
.ks-workbench-top::before {
    inset: -28px -32px -16px;
    background: linear-gradient(to bottom, #353b39 20%, #353b39e8 60%, transparent);
}
.ks-workbench-bottom::before {
    inset: -16px -32px -32px;
    background: linear-gradient(to bottom, transparent, #353b39f5 48%, #353b39 85%);
}
.ks-workbench[data-parallax] .ks-workbench-art {
    transition: none;
    aspect-ratio: 720 / 560;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ks-workbench .ks-workbench-art > svg { width: 92%; flex: 0 0 92%; }
.ks-workbench .construction-lines circle { display: none; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-orbit {
    transform-box: view-box;
    transform-origin: 360px 320px;
}
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-orbit-one { transform: rotate(48deg); }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-orbit-two { transform: rotate(224deg); }
/* Body geometry points inward; inheriting its orbit keeps the antenna Earth-facing. */
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-earth-glow,
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-earth-halo,
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-earth-map,
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-earth-clouds { animation: none; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-milkyway { opacity: .82; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-milkyway-stars { opacity: .72; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-orbit-star { transform-box: fill-box; transform-origin: center; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-orbit-meteor { opacity: 0; }
/* Quiet geographic links stay behind the workbench; only a few packets travel. */
:is(.ks-orbit-scene, .ks-orbit-overlay) :is(.ks-earth-link, .ks-earth-packet, .ks-satellite-link, .ks-satellite-packet) {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-earth-link { stroke: #9BCFBA; stroke-width: 1; opacity: .24; }
:is(.ks-orbit-scene, .ks-orbit-overlay) [data-atlantic] .ks-earth-link { stroke: #AFD6DC; opacity: .34; }
:is(.ks-orbit-scene, .ks-orbit-overlay) [data-atlantic] .ks-earth-packet { stroke: #C0E2DE; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-earth-terminal { fill: #B3DDC5; opacity: .4; }
:is(.ks-orbit-scene, .ks-orbit-overlay) :is(.ks-earth-packet, .ks-satellite-packet) {
    opacity: 0;
    visibility: hidden;
    stroke: #AEDFC8;
    stroke-width: 2;
    stroke-dasharray: 3.4 96.6;
    stroke-dashoffset: 3;
}
:is(.ks-orbit-scene, .ks-orbit-overlay) [data-traffic-route="1"] .ks-earth-packet,
:is(.ks-orbit-scene, .ks-orbit-overlay) [data-traffic-route="4"] .ks-earth-packet { stroke: #E5CF95; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-link { stroke: #ACD4C1; stroke-width: .9; opacity: .27; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-ground { fill: none; stroke: #B7DCC7; stroke-width: 1; opacity: .32; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-ground-core { fill: #C4E5D0; opacity: .6; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-packet { stroke-width: 2; stroke-dasharray: 10 90; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-orbit-two .ks-satellite-packet { stroke: #E5CF95; }

:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-orbit-two { --uplink-duration: 6.8s; --uplink-phase: -3.9s; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-wave { fill: none; stroke: #B7DCC7; stroke-width: 1; opacity: .2; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-orbit-two :is(.ks-satellite-wave, .ks-satellite-ground, .ks-satellite-link) { stroke: #D6C58F; }

/* A perspective surface follows an actual damped spring, not a long CSS lag. */
.ks-service-art[data-tilt] {
    transform: perspective(850px) translateY(var(--tilt-lift, 0px)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--tilt-scale, 1));
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    transition: box-shadow .35s, border-radius .45s var(--ks-ease);
}
.ks-service-art[data-tilt]::before,
.ks-service-art[data-tilt]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
}
.ks-service-art[data-tilt]::before {
    border: 1px solid #e2eee317;
    background: linear-gradient(145deg, #e4f1df08, transparent 45%);
}
.ks-service-art[data-tilt]::after {
    opacity: calc(var(--interaction, 0) * .8);
    background: radial-gradient(ellipse at var(--shine-x, 50%) var(--shine-y, 50%), #a6d5c222, transparent 64%);
}
.ks-service-illustration {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ks-service-illustration .ks-art-layer-back { transform: translate(calc(var(--layer-x, 0px) * -.35), calc(var(--layer-y, 0px) * -.35)); }
.ks-service-illustration .ks-art-layer-middle { transform: translate(calc(var(--layer-x, 0px) * .45), calc(var(--layer-y, 0px) * .45)); }
.ks-service-illustration .ks-art-layer-front { transform: translate(var(--layer-x, 0px), var(--layer-y, 0px)); }
.ks-service-art[data-tilt].is-interacting { box-shadow: 0 14px 30px #293d3024; }
.ks-service-art.is-springing { will-change: transform; }
.ks-service-summary:focus-visible .ks-service-art { box-shadow: 0 0 0 3px #f4f5ec, 0 0 0 5px var(--ks-teal); }

/* Inline SVGs inherit animation timing and remain sharp at every density. */
.ks-solution-art {
    display: block;
    width: 90%;
    height: 270px;
    margin: 10px auto -3px;
}
.ks-solution-art > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ks-data-packets { opacity: 0; }
.ks-solution-art .ks-software-packet { opacity: 0; }
.ks-solution-art .ks-software-check { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-orbit-one { animation: ks-satellite-one 52s linear infinite; }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-orbit-two { animation: ks-satellite-two 78s linear infinite; }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-milkyway { animation: ks-milkyway-light 28s ease-in-out infinite; }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-milkyway-stars { animation: ks-milkyway-stars 19s ease-in-out -7s infinite; }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-orbit-star { animation: ks-star-twinkle var(--star-duration, 4.6s) ease-in-out var(--star-delay, 0s) infinite; }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-beacon { animation: ks-beacon-pulse 3.6s ease-in-out infinite; }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-orbit-meteor { animation: ks-meteor-pass 13s ease-out -3s infinite; }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-orbit-meteor-two { animation-duration: 19s; animation-delay: -10s; }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-earth-packet {
        animation: ks-earth-traffic var(--traffic-duration, 9s) linear var(--traffic-delay, 0s) infinite;
        animation-play-state: paused;
    }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-packet {
        animation: ks-satellite-traffic var(--uplink-duration, 5.6s) linear var(--uplink-phase, -1.6s) infinite;
        animation-play-state: paused;
    }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-packet-return {
        animation-direction: reverse;
        animation-delay: calc(var(--uplink-phase, -1.6s) - 2.8s);
    }
    :is(.ks-orbit-scene, .ks-orbit-overlay) :is(.ks-satellite-wave, .ks-satellite-ground) {
        animation: ks-satellite-reception var(--uplink-duration, 5.6s) ease-in-out var(--uplink-phase, -1.6s) infinite;
        animation-play-state: paused;
    }
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-satellite-wave-two { animation-delay: calc(var(--uplink-phase, -1.6s) + .45s); }
    .ks-workbench.is-assembled :is(.ks-orbit-scene, .ks-orbit-overlay) :is(.ks-earth-packet, .ks-satellite-packet) { visibility: visible; }
    :is(.ks-orbit-scene, .ks-orbit-overlay) :is(.ks-satellite-orbit, .ks-satellite-beacon, .ks-orbit-star, .ks-orbit-meteor, .ks-milkyway, .ks-milkyway-stars) { animation-play-state: paused; }
    .ks-solution-art #data_systems-dashboard {
        animation: ks-panel-breathe 7s ease-in-out infinite;
        animation-play-state: paused;
    }
    .ks-solution-art .ks-data-packets {
        opacity: .8;
        stroke-dasharray: 4 110;
        animation: ks-data-flow 5.8s linear infinite;
        animation-play-state: paused;
    }
    .ks-solution-art .ks-server-leds {
        animation: ks-system-ready 4.8s ease-in-out infinite;
        animation-play-state: paused;
    }
    .ks-solution-art .ks-chart-bars {
        transform-box: fill-box;
        transform-origin: center bottom;
        animation: ks-live-bars 5.8s ease-in-out infinite;
        animation-play-state: paused;
    }
    .ks-solution-art .ks-chart-signal {
        transform-box: fill-box;
        transform-origin: center;
        animation: ks-data-signal 4.8s ease-in-out infinite;
        animation-play-state: paused;
    }
    .ks-solution-art #software-browser {
        animation: ks-panel-breathe 8s ease-in-out -2s infinite;
        animation-play-state: paused;
    }
    .ks-solution-art #software-code-editor {
        animation: ks-editor-float 6.5s ease-in-out infinite;
        animation-play-state: paused;
    }
    .ks-solution-art #software-pencil {
        transform-origin: 315.5px 174px;
        animation: ks-pencil-rest 7s ease-in-out -.8s infinite;
        animation-play-state: paused;
    }
    .ks-solution-art .ks-code-caret {
        animation: ks-caret-breathe 1.8s ease-in-out infinite;
        animation-play-state: paused;
    }
    /* A complete resting state also works without JavaScript. Code, flow and
       completion then share a quiet twelve-second cycle while in view. */
    .ks-solution-art .ks-software-motion {
        animation-duration: 12s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-play-state: paused;
    }
    .ks-solution-art .ks-software-code-line {
        transform-box: fill-box;
        transform-origin: left center;
        animation-name: ks-software-write;
        animation-delay: calc(var(--code-row, 0) * .24s);
    }
    .ks-solution-art .ks-software-packet {
        stroke-dasharray: 8 92;
        animation-name: ks-software-connect;
        animation-timing-function: linear;
    }
    .ks-solution-art :is(.ks-software-node-one, .ks-software-node-two, .ks-software-node-three) {
        transform-box: fill-box;
        transform-origin: center;
        animation-name: ks-software-stage;
    }
    .ks-solution-art .ks-software-node-two { animation-delay: 1.5s; }
    .ks-solution-art .ks-software-node-three { animation-delay: 3s; }
    .ks-solution-art .ks-software-progress {
        transform-box: fill-box;
        transform-origin: left center;
        animation-name: ks-software-progress;
    }
    .ks-solution-art .ks-software-check { animation-name: ks-software-complete; }
    .ks-workbench.is-ambient-visible:not(.is-document-hidden) :is(.ks-orbit-scene, .ks-orbit-overlay) :is(.ks-satellite-orbit, .ks-satellite-beacon, .ks-orbit-star, .ks-orbit-meteor, .ks-milkyway, .ks-milkyway-stars, .ks-earth-packet, .ks-satellite-packet, .ks-satellite-wave, .ks-satellite-ground),
    .is-ambient-visible:not(.is-document-hidden) .ks-solution-art :is(#data_systems-dashboard, .ks-data-packets, .ks-server-leds, .ks-chart-bars, .ks-chart-signal, #software-browser, #software-code-editor, #software-pencil, .ks-code-caret, .ks-software-motion) {
        animation-play-state: running;
    }
}
/* Distant starlight changes gently; the halo itself stays concentric and still. */
@keyframes ks-milkyway-light { 0%, 100% { opacity: .76; } 50% { opacity: .94; } }
@keyframes ks-milkyway-stars { 0%, 100% { opacity: .56; } 50% { opacity: .9; } }
@keyframes ks-beacon-pulse { 0%, 60%, 100% { opacity: .55; } 78% { opacity: 1; } }
@keyframes ks-satellite-one { from { transform: rotate(48deg); } to { transform: rotate(408deg); } }
@keyframes ks-satellite-two { from { transform: rotate(224deg); } to { transform: rotate(-136deg); } }
@keyframes ks-earth-traffic {
    0%, 8% { opacity: 0; stroke-dashoffset: 3; }
    15% { opacity: .78; }
    66% { opacity: .78; }
    76% { opacity: 0; stroke-dashoffset: -100; }
    100% { opacity: 0; stroke-dashoffset: -100; }
}
@keyframes ks-satellite-traffic {
    0%, 5% { opacity: 0; stroke-dashoffset: 10; }
    16%, 70% { opacity: .82; }
    85%, 100% { opacity: 0; stroke-dashoffset: -100; }
}
@keyframes ks-satellite-reception {
    0%, 12%, 80%, 100% { opacity: .12; }
    32%, 48% { opacity: .58; }
}
@keyframes ks-star-twinkle { 0%, 100% { opacity: .24; transform: scale(.78); } 46% { opacity: .4; transform: scale(.9); } 62% { opacity: 1; transform: scale(1.2); } }
@keyframes ks-meteor-pass { 0%, 82%, 100% { opacity: 0; transform: translate(0, 0); } 84% { opacity: .8; } 94% { opacity: 0; transform: translate(62px, 32px); } }
@keyframes ks-panel-breathe { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
@keyframes ks-data-flow { to { stroke-dashoffset: -114; } }
@keyframes ks-system-ready { 0%, 100% { opacity: 1; } 50% { opacity: .48; } }
@keyframes ks-live-bars { 0%, 100% { transform: scaleY(.92); } 48% { transform: scaleY(1); } }
@keyframes ks-data-signal { 0%, 65%, 100% { transform: scale(1); opacity: 1; } 80% { transform: scale(1.45); opacity: .55; } }
@keyframes ks-editor-float { 0%, 100% { transform: translate(0, 1px); } 50% { transform: translate(1px, -4px); } }
@keyframes ks-pencil-rest { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(1deg); } }
@keyframes ks-caret-breathe { 0%, 32%, 100% { opacity: 1; } 52%, 82% { opacity: .18; } }
@keyframes ks-software-write {
    0%, 5%, 32%, 100% { opacity: 1; transform: scaleX(1); }
    14% { opacity: .42; transform: scaleX(.45); }
}
@keyframes ks-software-connect {
    0%, 22% { opacity: 0; stroke-dashoffset: 100; }
    27% { opacity: .95; }
    58% { opacity: .95; stroke-dashoffset: 0; }
    64%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes ks-software-stage {
    0%, 10%, 70%, 100% { opacity: 1; transform: scale(1); }
    20%, 50% { opacity: .68; transform: scale(1); }
    34% { opacity: 1; transform: scale(1.1); }
}
@keyframes ks-software-progress {
    0%, 7%, 64%, 100% { transform: scaleX(1); }
    17% { transform: scaleX(.24); }
    40% { transform: scaleX(.62); }
}
@keyframes ks-software-complete {
    0%, 6%, 70%, 100% { stroke-dashoffset: 0; opacity: 1; }
    15%, 56% { stroke-dashoffset: 1; opacity: .3; }
    58% { stroke-dashoffset: 1; opacity: 1; }
}

@media (max-width: 900px) {
    .ks-solution-art { width: 100%; height: 220px; }
}
@media (max-width: 700px) {
    .ks-workbench-bottom { transform: translateY(6px); }
    .ks-solution-art { width: 85%; height: 235px; margin-top: 8px; }
}
/* Long translated footer labels must not widen the mobile viewport. */
@media (max-width: 380px) {
    .ks-footer-nav { flex-wrap: wrap; gap: 12px; }
}
@media (hover: none), (pointer: coarse) {
    .ks-service-art[data-tilt] { transform: none; }
    .ks-service-art[data-tilt]::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ks-service-art[data-tilt],
    .ks-service-illustration :is(.ks-art-layer-back, .ks-art-layer-middle, .ks-art-layer-front),
    .ks-solution-art > svg > g { transform: none !important; }
    .ks-service-art[data-tilt]::after, .ks-data-packets { opacity: 0; }
}

/* A slow inclined lunar orbit: CSS moves one shared, airless moon face.
   Layer changes happen beyond Earth's limb, so the far half is truly occluded.
   The distance and period are composed for this illustration, not to scale. */
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-moon-far { visibility: hidden; }
:is(.ks-orbit-scene, .ks-orbit-overlay) .ks-moon-near { visibility: visible; }
@supports (offset-path: path('M0 0L1 1')) {
    :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-moon-travel {
        transform: none;
        offset-path: path('M638.128 172.116 A315 132 -28 0 1 81.872 467.884 A315 132 -28 0 1 638.128 172.116');
        offset-anchor: 0px 0px;
        offset-position: 0px 0px;
        offset-distance: 0%;
        offset-rotate: 0deg;
    }
    @media (prefers-reduced-motion: no-preference) {
        :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-moon-travel {
            animation: ks-moon-orbit 128s linear infinite;
            animation-play-state: paused;
        }
        :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-moon-pass {
            animation-duration: 128s;
            animation-timing-function: steps(1, end);
            animation-iteration-count: infinite;
            animation-play-state: paused;
        }
        :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-moon-near { animation-name: ks-moon-near-half; }
        :is(.ks-orbit-scene, .ks-orbit-overlay) .ks-moon-far { animation-name: ks-moon-far-half; }
        .ks-workbench.is-ambient-visible:not(.is-document-hidden) :is(.ks-orbit-scene, .ks-orbit-overlay) :is(.ks-moon-travel, .ks-moon-pass) {
            animation-play-state: running;
        }
    }
}
@keyframes ks-moon-orbit { to { offset-distance: 100%; } }
@keyframes ks-moon-near-half {
    0% { visibility: visible; }
    50%, 100% { visibility: hidden; }
}
@keyframes ks-moon-far-half {
    0% { visibility: hidden; }
    50%, 100% { visibility: visible; }
}

/* Satellite imagery replaces only the vector surface after a successful draw. */
.ks-orbit-scene[data-earth-surface="ready"] [data-earth-fallback],
.ks-orbit-scene[data-earth-surface="ready"] [data-moon-static-rim] { visibility: hidden; }
.ks-earth-surface { pointer-events: none; }

/* Only the tiny front-panel indicators breathe; the server housings stay still. */
.ks-workbench .ks-cluster-status-led { opacity: .72; }
.ks-workbench .ks-cluster-port-leds { opacity: .6; }
.ks-workbench .ks-cluster-node[data-node="1"] { --cluster-led-duration: 5.8s; --cluster-led-delay: -1.2s; }
.ks-workbench .ks-cluster-node[data-node="2"] { --cluster-led-duration: 6.6s; --cluster-led-delay: -4.3s; }
.ks-workbench .ks-cluster-node[data-node="3"] { --cluster-led-duration: 5.2s; --cluster-led-delay: -2.8s; }
@media (prefers-reduced-motion: no-preference) {
    .ks-workbench :is(.ks-cluster-status-led, .ks-cluster-port-leds) {
        animation: ks-cluster-status-light var(--cluster-led-duration, 5.8s) ease-in-out var(--cluster-led-delay, 0s) infinite;
        animation-play-state: paused;
    }
    .ks-workbench .ks-cluster-port-leds {
        animation-name: ks-cluster-port-light;
        animation-delay: calc(var(--cluster-led-delay, 0s) - 1.6s);
    }
    .ks-workbench.is-ambient-visible:not(.is-document-hidden) :is(.ks-cluster-status-led, .ks-cluster-port-leds) {
        animation-play-state: running;
    }
}
@keyframes ks-cluster-status-light {
    0%, 100% { opacity: .52; }
    50% { opacity: .84; }
}
@keyframes ks-cluster-port-light {
    0%, 100% { opacity: .42; }
    50% { opacity: .72; }
}