/* ==========================================================================
   STRATUM MOTION
   Replaces the shipped motion.css.

   The shipped file contained only geometry. Every rule that would have
   carried animation was an empty block: .sphere-texture { }, and the
   hover/focus/data-motion rule { }. The elements those rules target
   (.hero-visual, .sphere, .orbit-0..4, .orbit-path) had also been removed
   from the HTML, so all twelve selectors matched nothing.

   All original geometry below is preserved to the pixel at all four
   breakpoints. Motion is added, nothing is repositioned.
   ========================================================================== */

/* ---------- STAGE ---------- */

.hero-visual {
  width: 654px;
  height: 680px;
  position: relative;
  flex-shrink: 0;
  isolation: isolate;
}

/* ---------- ORBIT PATHS ---------- */

.orbit-path {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
  opacity: 0;
  animation: path-in 900ms cubic-bezier(.2,.7,.2,1) forwards;
  pointer-events: none;
}
.orbit-path.outer { left: 89px;  top: 40px; width: 476px; height: 600px; animation-delay: 120ms; }
.orbit-path.inner { left: 124px; top: 75px; width: 406px; height: 530px; animation-delay: 260ms; }

@keyframes path-in { from { opacity: 0; transform: scale(.94); } to { opacity: .9; transform: none; } }

/* The revolving element. Travels the ellipse the path itself describes. */
.orbit-satellite {
  position: absolute;
  left: 0; top: 0;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(3,105,161,.14), 0 0 14px 2px rgba(3,105,161,.45);
  opacity: 0;
}

@supports (offset-path: border-box) {
  .orbit-satellite {
    margin: 0;
    offset-path: border-box;
    offset-rotate: 0deg;
    offset-distance: 0%;
    animation: sat-travel 60s linear infinite, sat-in 800ms ease 700ms forwards;
  }
  .sat-b { animation-duration: 60s, 800ms; animation-direction: reverse, normal; offset-distance: 50%; }
}

@keyframes sat-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
@keyframes sat-in { to { opacity: 1; } }

/* ---------- THE SPHERE ---------- */

.sphere {
  position: absolute;
  left: 227px; top: 240px;
  width: 200px; height: 200px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, #1c4e86 0%, #123a63 38%, var(--deep-blue) 72%, #08182c 100%);
  box-shadow:
    inset 0 0 40px 6px rgba(3,105,161,.28),
    inset -8px -10px 34px 0 rgba(0,0,0,.45),
    0 18px 48px -12px rgba(12,35,64,.45),
    0 0 0 1px rgba(255,255,255,.06);
  opacity: 0;
  transform: scale(.9);
  animation: sphere-in 1000ms cubic-bezier(.2,.7,.2,1) 80ms forwards;
}

@keyframes sphere-in { to { opacity: 1; transform: none; } }

/* The rotating surface. This is the part that reads as revolving. */
.sphere-texture {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.085) 0 1px,
      transparent 1px 34px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 26px
    );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 32%, rgba(0,0,0,.45) 62%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 50%, #000 32%, rgba(0,0,0,.45) 62%, transparent 78%);
  animation: sphere-spin 34s linear infinite;
  will-change: transform;
  pointer-events: none;
}

@keyframes sphere-spin { to { transform: rotate(360deg); } }

.sphere-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: .01em;
}
.sphere-brand .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sphere-brand img { width: 44px; height: 47px; margin-right: -1px; }

/* ---------- ORBIT CARDS ---------- */

.orbit-card {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(12,35,64,.04), 0 10px 26px -8px rgba(12,35,64,.14);
  opacity: 0;
  transform: translateY(14px);
  /* Two <time> values maximum per animation shorthand: duration, then delay.
     The float offset is folded into --float-delay. */
  animation:
    card-in 620ms cubic-bezier(.2,.7,.2,1) var(--in-delay, 0ms) forwards,
    card-float 7.5s ease-in-out var(--float-delay, 1400ms) infinite;
  transition: box-shadow .28s ease, border-color .28s ease;
  will-change: transform;
}
.orbit-card:hover,
.orbit-card:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 2px 4px rgba(12,35,64,.06), 0 18px 38px -10px rgba(12,35,64,.22);
}

@keyframes card-in    { to { opacity: 1; transform: none; } }
@keyframes card-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.orbit-heading { flex: none; }
.orbit-description { flex: 1 1 auto; min-height: 0; }

.orbit-heading {
  display: block;
  margin: 0 0 2px;
  font-size: var(--text-sm);
  line-height: 1.2;
  font-weight: 700;
  color: var(--navy);
}
.orbit-description {
  display: block;
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--muted);
}

/* Original positions, unchanged. Phases added. */
.orbit-0 { left: 227px;     top: 8px;       width: 200px; height: 104px; --in-delay: 420ms; --float-delay: 1400ms; }
.orbit-1 { left: 19.6697px; top: 201.475px; width: 200px; height: 104px; --in-delay: 520ms; --float-delay: 2300ms; }
.orbit-2 { left: 434.33px;  top: 201.475px; width: 200px; height: 104px; --in-delay: 620ms; --float-delay: 3200ms; }
.orbit-3 { left: 98.8628px; top: 514.525px; width: 200px; height: 104px; --in-delay: 720ms; --float-delay: 4100ms; }
.orbit-4 { left: 355.137px; top: 514.525px; width: 200px; height: 104px; --in-delay: 820ms; --float-delay: 5000ms; }

/* ---------- BREAKPOINTS. GEOMETRY UNCHANGED FROM THE ORIGINAL FILE. ---------- */

@container page (min-width: 834px) and (max-width: 1279px) {
  .hero-visual { width: 738px; height: 624px; }
  .sphere { left: 289px; top: 232px; width: 160px; height: 160px; }
  .orbit-0 { left: 269px;     top: 8px;       width: 200px; height: 128px; }
  .orbit-1 { left: 516.275px; top: 173.836px; width: 200px; height: 128px; }
  .orbit-2 { left: 421.824px; top: 442.164px; width: 200px; height: 128px; }
  .orbit-3 { left: 116.176px; top: 442.164px; width: 200px; height: 128px; }
  .orbit-4 { left: 21.7253px; top: 173.836px; width: 200px; height: 128px; }
  .orbit-path.outer { left: 109px; top: 72px; width: 520px; height: 480px; }
  .orbit-path.inner { left: 122px; top: 85px; width: 494px; height: 454px; }

  .orbit-description { font-size: var(--text-xs); line-height: 18px; }
  .sphere-brand { font-size: var(--text-base); }
  .sphere-brand img { width: 36px; height: 38px; margin-right: -1px; }
}

@container page (min-width: 390px) and (max-width: 833px) {
  .hero-visual { width: 358px; height: 408px; }
  .sphere { left: 116px; top: 141px; width: 126px; height: 126px; }
  .orbit-0 { left: 131px;    top: 8px;       width: 96px; height: 64px; }
  .orbit-1 { left: 247.98px; top: 121.321px; width: 96px; height: 64px; }
  .orbit-2 { left: 203.298px; top: 304.679px; width: 96px; height: 64px; }
  .orbit-3 { left: 58.7024px; top: 304.679px; width: 96px; height: 64px; }
  .orbit-4 { left: 14.02px;   top: 121.321px; width: 96px; height: 64px; }
  .orbit-path.outer { left: 56px; top: 40px; width: 246px; height: 328px; }
  .orbit-path.inner { left: 66px; top: 53px; width: 226px; height: 302px; }

  .orbit-card { padding: 8px 10px; }
  .sphere-brand img { width: 28px; height: 30px; margin-right: -1px; }
}

@container page (max-width: 389px) {
  .hero-visual { width: 288px; height: 372px; }
  .sphere { left: 99px; top: 141px; width: 90px; height: 90px; }
  .orbit-0 { left: 104px;     top: 8px;       width: 80px; height: 56px; }
  .orbit-1 { left: 195.301px; top: 111.647px; width: 80px; height: 56px; }
  .orbit-2 { left: 160.427px; top: 279.353px; width: 80px; height: 56px; }
  .orbit-3 { left: 47.5726px; top: 279.353px; width: 80px; height: 56px; }
  .orbit-4 { left: 12.6986px; top: 111.647px; width: 80px; height: 56px; }
  .orbit-path.outer { left: 48px; top: 36px; width: 192px; height: 300px; }
  .orbit-path.inner { left: 58px; top: 49px; width: 172px; height: 274px; }

  .orbit-card { padding: 7px 9px; }
  .orbit-description { display: none; }
  .sphere-brand img { width: 22px; height: 24px; margin-right: -1px; }
}

/* ---------- TITLE SWAP. UNCHANGED FROM THE ORIGINAL FILE. ---------- */

.short-title { display: none; }

@container page (max-width: 833px) {
  .orbit-heading .full-title { display: none; }
  .orbit-heading .short-title { display: block; font-size: var(--text-sm); line-height: 17px; font-weight: 700; }
  .hero-visual { flex-shrink: 0; }
  .mobile-capabilities { grid-column: 1 / -1; }
}

/* ---------- PAUSE STATES ----------
   This is the rule the shipped file left empty. Hovering or keyboard-focusing
   the visual stops the drift so the cards can be read. data-motion="off"
   stops it permanently. */

body[data-motion="off"] .orbit-card,
body[data-motion="off"] .sphere-texture,
body[data-motion="off"] .orbit-satellite,
.hero-visual:focus-within .orbit-card,
.hero-visual:focus-within .sphere-texture,
.hero-visual:focus-within .orbit-satellite,
.hero-visual:hover .orbit-card,
.hero-visual:hover .sphere-texture,
.hero-visual:hover .orbit-satellite {
  animation-play-state: paused;
}

/* ---------- REDUCED MOTION. SCOPED, NOT GLOBAL. ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-visual .sphere,
  .hero-visual .sphere-texture,
  .hero-visual .orbit-card,
  .hero-visual .orbit-path,
  .hero-visual .orbit-satellite {
    animation-play-state: paused !important;
    opacity: 1;
    transform: none;
  }
  .orbit-path { opacity: .9; }
  .orbit-satellite { opacity: 1; }
}