.orbit-scene {
  --scene-base-height: 472px;
  --orbit-distance-scale: 1.3225;
  --orbit-base-radius: 165.2px;
  --orbit-radius: calc(var(--orbit-base-radius) * var(--orbit-distance-scale));
  --satellite-base-size: 66px;
  --satellite-size-scale: 1.15;
  --satellite-enlarge: 1.52;
  --satellite-size: calc(var(--satellite-base-size) * var(--satellite-size-scale) * var(--satellite-enlarge));
  --satellite-perspective: 1064px;
  --orbit-radius-y: var(--orbit-radius);
  --satellite-edge-scale: .65;
  --satellite-cube-edge: calc(var(--satellite-size) * var(--satellite-edge-scale));
  --satellite-cube-half: calc(var(--satellite-cube-edge) / 2);
  --satellite-corner-radius: calc(var(--satellite-cube-edge) * .21);
  height: calc(var(--scene-base-height) + 132px);
  max-height: none;
}
.ribbon-mask { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; mask-mode: alpha; mask-composite: intersect; -webkit-mask-composite: source-in; }
.orbit-satellites { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.satellite-label-fallback { position: absolute; left: 50%; top: -10px; transform: translate(-50%, -100%); white-space: nowrap; color: #d7eeff; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-shadow: 0 1px 4px #020b18; pointer-events: none; }
.labels-enabled .satellite-label-fallback { display: none; }
.orbit-labels { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; overflow: hidden; pointer-events: none; opacity: .96; }
.orbit-label { fill: #d7eeff; stroke: #031020; stroke-width: 3px; paint-order: stroke fill; font-family: Manrope, sans-serif; font-size: var(--orbit-label-font, 13px); font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; }
.intro-enabled:not([data-intro="orbit"]) .orbit-labels { visibility: hidden; }
@media (max-width: 1000px) { .orbit-label { letter-spacing: .85px; } }
.flight-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; mask-image: radial-gradient(ellipse at center, #000 0%, #000 64%, transparent 98%); -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 64%, transparent 98%); }
@media (prefers-reduced-motion: reduce) { .flight-canvas { display: none; } }
.orbit-satellite {
  --ball-x: 0px;
  --ball-y: calc(-1 * var(--orbit-radius));
  position: absolute;
  left: 50%; top: 50%;
  width: var(--satellite-size); height: var(--satellite-size);
  display: grid; place-items: center;
  transform: translate3d(var(--ball-x), var(--ball-y), 0) translate(-50%, -50%);
  border: 0;
  border-radius: 3px;
  background: none;
  box-shadow: none;
  perspective: var(--satellite-perspective);
  perspective-origin: 50% 50%;
  pointer-events: auto;
  color: #ecf8ff;
  isolation: isolate;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.satellite-cube { position: relative; display: block; width: var(--satellite-cube-edge); height: var(--satellite-cube-edge); transform-style: preserve-3d; transform-origin: 50% 50%; transform: var(--satellite-transform, rotateY(var(--satellite-yaw, 25deg)) rotateX(var(--satellite-pitch, 0deg)) rotateZ(var(--satellite-roll, 0deg))); will-change: transform; }
.satellite-cube__face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; border: 1px solid #acd9ffdd; border-radius: 0; background: linear-gradient(140deg, #517898, #123654 17%, #0a2343 76%, #335b7e); box-shadow: inset 0 0 0 1px #02172ca6, inset 2px 2px 3px #cbeeff38, inset -2px -2px 3px #020d1b99, 0 0 7px #3b9cff33; }
.satellite-cube__face::after { content: ''; position: absolute; z-index: 2; inset: 3px; border: 1px solid #b6dcff26; border-radius: max(1px, calc(var(--satellite-corner-radius) - 3px)); pointer-events: none; }
.satellite-cube__face::before { content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 20%, #e8faffb3, #63baff77 65%, #227dff66); opacity: var(--hit-strength, 0); pointer-events: none; }
.satellite-cube__image { position: relative; z-index: 0; display: block; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; border-radius: max(1px, calc(var(--satellite-corner-radius) - 4px)); pointer-events: none; user-select: none; }
.satellite-front { transform: translateZ(var(--satellite-cube-half)); }
.satellite-back { transform: rotateY(180deg) translateZ(var(--satellite-cube-half)); }
.satellite-right { transform: rotateY(90deg) translateZ(var(--satellite-cube-half)); }
.satellite-left { transform: rotateY(-90deg) translateZ(var(--satellite-cube-half)); }
.satellite-top { transform: rotateX(90deg) translateZ(var(--satellite-cube-half)); background: linear-gradient(135deg, #6e97b6, #23618e); }
.satellite-bottom { transform: rotateX(-90deg) translateZ(var(--satellite-cube-half)); background: #081c35; }
.orbit-satellite svg { width: 69%; height: 69%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #cceaff55); }
.orbit-satellite:hover { color: #fff; }
.orbit-satellite:hover .satellite-cube__face { border-color: #e6f6ff; }
.satellite-mask-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.orbit-satellite:focus-visible { outline: 2px solid #bfe5ff; outline-offset: 5px; }
.ribbon-mask {
  mask-image: radial-gradient(circle at calc(50% + var(--orbit-radius) * 0.0) calc(50% + var(--orbit-radius) * -1.0), #0000000f 0 calc(var(--satellite-size) * .45), #000 calc(var(--satellite-size) * .58)),
    radial-gradient(circle at calc(50% + var(--orbit-radius) * 0.70710678) calc(50% + var(--orbit-radius) * -0.70710678), #0000000f 0 calc(var(--satellite-size) * .45), #000 calc(var(--satellite-size) * .58)),
    radial-gradient(circle at calc(50% + var(--orbit-radius) * 1.0) calc(50% + var(--orbit-radius) * 0.0), #0000000f 0 calc(var(--satellite-size) * .45), #000 calc(var(--satellite-size) * .58)),
    radial-gradient(circle at calc(50% + var(--orbit-radius) * 0.70710678) calc(50% + var(--orbit-radius) * 0.70710678), #0000000f 0 calc(var(--satellite-size) * .45), #000 calc(var(--satellite-size) * .58)),
    radial-gradient(circle at calc(50% + var(--orbit-radius) * 0.0) calc(50% + var(--orbit-radius) * 1.0), #0000000f 0 calc(var(--satellite-size) * .45), #000 calc(var(--satellite-size) * .58)),
    radial-gradient(circle at calc(50% + var(--orbit-radius) * -0.70710678) calc(50% + var(--orbit-radius) * 0.70710678), #0000000f 0 calc(var(--satellite-size) * .45), #000 calc(var(--satellite-size) * .58)),
    radial-gradient(circle at calc(50% + var(--orbit-radius) * -1.0) calc(50% + var(--orbit-radius) * 0.0), #0000000f 0 calc(var(--satellite-size) * .45), #000 calc(var(--satellite-size) * .58)),
    radial-gradient(circle at calc(50% + var(--orbit-radius) * -0.70710678) calc(50% + var(--orbit-radius) * -0.70710678), #0000000f 0 calc(var(--satellite-size) * .45), #000 calc(var(--satellite-size) * .58));
}
@media (min-width: 1600px) { .orbit-scene { --scene-base-height: 510px; --orbit-base-radius: 178.5px; --satellite-base-size: 72px; } }
@media (min-width: 1001px) and (max-width: 1220px) { .orbit-scene { --scene-base-height: 414px; --orbit-base-radius: 144.9px; --satellite-base-size: 60px; } }
@media (max-width: 1000px) { .orbit-scene { --scene-base-height: 305px; --orbit-base-radius: 106.75px; --satellite-base-size: 48px; height: calc(var(--scene-base-height) + 144px); } }
@media (min-width: 600px) and (max-width: 1000px) { .orbit-scene { --scene-base-height: 360px; --orbit-base-radius: 126px; --satellite-base-size: 56px; } }
@media (max-width: 370px) { .orbit-scene { --scene-base-height: 265px; --orbit-base-radius: 92.75px; --satellite-base-size: 44px; } }
@media (prefers-reduced-motion: reduce) { .orbit-satellite, .satellite-cube { will-change: auto; } }

.orbit-satellite[data-satellite="0"] { --ball-x: calc(var(--orbit-radius) * 0.0); --ball-y: calc(var(--orbit-radius-y) * -1.0); }
.orbit-satellite[data-satellite="1"] { --ball-x: calc(var(--orbit-radius) * 0.70710678); --ball-y: calc(var(--orbit-radius-y) * -0.70710678); }
.orbit-satellite[data-satellite="2"] { --ball-x: calc(var(--orbit-radius) * 1.0); --ball-y: calc(var(--orbit-radius-y) * 0.0); }
.orbit-satellite[data-satellite="3"] { --ball-x: calc(var(--orbit-radius) * 0.70710678); --ball-y: calc(var(--orbit-radius-y) * 0.70710678); }
.orbit-satellite[data-satellite="4"] { --ball-x: calc(var(--orbit-radius) * 0.0); --ball-y: calc(var(--orbit-radius-y) * 1.0); }
.orbit-satellite[data-satellite="5"] { --ball-x: calc(var(--orbit-radius) * -0.70710678); --ball-y: calc(var(--orbit-radius-y) * 0.70710678); }
.orbit-satellite[data-satellite="6"] { --ball-x: calc(var(--orbit-radius) * -1.0); --ball-y: calc(var(--orbit-radius-y) * 0.0); }
.orbit-satellite[data-satellite="7"] { --ball-x: calc(var(--orbit-radius) * -0.70710678); --ball-y: calc(var(--orbit-radius-y) * -0.70710678); }
@media (min-width: 1001px) { .orbit-scene .motion-toggle { right: 0; } }
@media (max-width: 1000px) { .orbit-scene.motion-enabled { margin-bottom: 30px; } .orbit-scene .motion-toggle { bottom: -28px; } }

/* The ribbons remain available for a later composition, without draw calls now. */
.orbit-scene[data-ribbons="off"] .ribbon-mask, .orbit-scene[data-ribbons="off"] .orbit-ground, .orbit-scene[data-ribbons="off"] .satellite-mask-defs { display: none; }
.electric-discharge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; overflow: hidden; pointer-events: none; opacity: 0; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cube-impact-lights { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cube-impact-light { position: absolute; left: 0; top: 0; width: var(--impact-light-size, 0px); height: var(--impact-light-size, 0px); border-radius: 50%; opacity: 0; background: radial-gradient(circle closest-side, #b5e9ff66 0%, #55b5ff4d 24%, #2489ed29 44%, #1674ca0d 62%, transparent 78%); will-change: transform, opacity; }
.discharge-halo { stroke: #1989ff; stroke-width: 12; filter: url(#electric-glow); }
.discharge-body { stroke: #73caff; stroke-width: 4; }
.discharge-core { stroke: #f5fcff; stroke-width: 1.5; }
.discharge-branches { stroke: #b9e8ff; stroke-width: 1.2; opacity: .85; }
.discharge-impact { fill: #d7f5ff; stroke: #55adff; stroke-width: 2; filter: url(#electric-glow); }
.discharge-rays { stroke: #e6f8ff; stroke-width: 1.4; }
.lightning-hit .satellite-cube__face { border-color: rgb(240 251 255 / calc(.35 + var(--hit-strength, 0) * .65)); box-shadow: inset 0 0 12px rgb(184 234 255 / calc(var(--hit-strength, 0) * .6)), 0 0 22px rgb(98 186 255 / calc(var(--hit-strength, 0) * .73)); }
@media (max-width: 599px) { .orbit-scene { --orbit-radius: min(calc(var(--orbit-base-radius) * var(--orbit-distance-scale)), calc(50vw - var(--satellite-cube-edge) * .87 - 6px)); --orbit-radius-y: calc(var(--orbit-base-radius) * var(--orbit-distance-scale) * 1.15); } }
@media (prefers-reduced-motion: reduce) { .electric-discharge, .cube-impact-lights { display: none; } }
.pile-floor { position: absolute; z-index: 0; left: 12%; width: 76%; top: calc(var(--pile-floor, 95%) - 12px); height: 30px; pointer-events: none; opacity: var(--pile-shadow, 0); background: radial-gradient(ellipse at center, #2b81c836, #06142122 58%, transparent 74%); }
.orbit-satellite::after { content: ''; position: absolute; z-index: -1; left: 15%; width: 70%; top: calc(50% + var(--rest-base, 30px)); height: 9px; pointer-events: none; opacity: var(--rest-shadow, 0); background: radial-gradient(ellipse at center, #01060cca, #00152a33 56%, transparent 72%); }
.intro-trigger { position: absolute; z-index: 6; bottom: 0; left: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #337ab766; border-radius: 20px; background: #061628aa; color: #cceaff; font: inherit; font-size: 11px; cursor: pointer; }
.intro-trigger svg { width: 14px; height: 14px; fill: #79c7ff22; stroke: #85ccff; stroke-width: 1.5; }
.intro-trigger[hidden] { display: none; }
.intro-trigger:hover { border-color: #83caff; color: white; }
.intro-trigger:focus-visible { outline: 2px solid #bfe5ff; outline-offset: 3px; }
.intro-discharges { opacity: 0; }
@media (max-width: 1000px) { .intro-trigger { left: 18px; bottom: -28px; } }

/* A single, closed rounded volume replaces the 48 separated CSS face layers. */
.rounded-satellites-canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.closed-satellites-ready .rounded-satellites-canvas { display: block; }
.closed-satellites-ready .satellite-cube__face { display: none; }
.closed-satellites-ready .satellite-cube { will-change: auto; transform: none; }
