/* Mission trajectory selector, selected 2026-07-30. */
.mission-control-selector {
  position: relative;
  padding: 1rem 1.15rem 1.15rem;
  overflow: hidden;
  border-color: rgba(126, 174, 241, .2);
  background:
    radial-gradient(circle at 50% 52%, rgba(57, 120, 207, .16), transparent 27%),
    linear-gradient(145deg, rgba(8, 15, 25, .84), rgba(2, 5, 9, .7));
}

.mission-control-selector::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .34;
  background-image:
    linear-gradient(rgba(128, 170, 227, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 170, 227, .08) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 52%, #000 0%, transparent 74%);
  pointer-events: none;
}

.mission-control-selector > p {
  position: relative;
  z-index: 5;
  margin: 0;
}

.mission-control-options {
  position: relative;
  height: clamp(330px, 39vw, 410px);
  isolation: isolate;
}

.mission-control-core {
  position: absolute;
  z-index: 2;
  top: 52%;
  left: 50%;
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  translate: -50% -50%;
  border: 1px solid rgba(136, 185, 255, .38);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(90, 151, 238, .3) 0 6%, transparent 7% 30%, rgba(63, 123, 207, .12) 31% 42%, transparent 43%),
    rgba(3, 8, 15, .88);
  box-shadow:
    0 0 0 9px rgba(91, 151, 235, .035),
    0 0 45px rgba(67, 135, 230, .2),
    inset 0 0 24px rgba(79, 143, 232, .12);
}

.mission-control-core::before,
.mission-control-core::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}

.mission-control-core::before {
  inset: -18px;
  border: 1px dashed rgba(139, 185, 247, .22);
  animation: mission-orbit 24s linear infinite;
}

.mission-control-core::after {
  top: -21px;
  left: 50%;
  width: 7px;
  height: 7px;
  translate: -50% 0;
  background: #8fbaff;
  box-shadow: 0 0 16px rgba(112, 171, 255, .9);
}

.mission-control-core span {
  display: none;
  max-width: 7ch;
  color: rgba(229, 239, 255, .84);
  font-size: .66rem;
  font-weight: 820;
  line-height: 1.15;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

html:lang(en) .mission-control-core [lang="en"],
html:lang(es) .mission-control-core [lang="es"],
html:lang(pt) .mission-control-core [lang="pt"] {
  display: block;
}

.mission-control-route {
  --route-angle: 0deg;
  --route-length: 40%;
  position: absolute;
  z-index: 1;
  top: 52%;
  left: 50%;
  width: var(--route-length);
  height: 1px;
  overflow: visible;
  transform: rotate(var(--route-angle));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(108, 159, 224, .26), rgba(108, 159, 224, .08));
  transition: background 260ms ease, box-shadow 260ms ease;
  pointer-events: none;
}

.mission-control-route::before {
  position: absolute;
  top: -2px;
  right: 0;
  width: 5px;
  height: 5px;
  content: "";
  border: 1px solid rgba(144, 188, 247, .34);
  border-radius: 50%;
  background: #08111c;
}

.mission-control-route::after {
  position: absolute;
  top: -2px;
  left: 100%;
  width: 5px;
  height: 5px;
  content: "";
  opacity: 0;
  border-radius: 50%;
  background: #a8caff;
  box-shadow: 0 0 13px rgba(112, 171, 255, .95);
}

.mission-control-route[data-mission-route="0"] {
  --route-angle: -139deg;
  --route-length: 42%;
}

.mission-control-route[data-mission-route="1"] {
  --route-angle: -49deg;
  --route-length: 46%;
}

.mission-control-route[data-mission-route="2"] {
  --route-angle: 130deg;
  --route-length: 44%;
}

.mission-control-route[data-mission-route="3"] {
  --route-angle: 41deg;
  --route-length: 41%;
}

.mission-control-options:has([data-mission-scene="0"].is-active) [data-mission-route="0"],
.mission-control-options:has([data-mission-scene="1"].is-active) [data-mission-route="1"],
.mission-control-options:has([data-mission-scene="2"].is-active) [data-mission-route="2"],
.mission-control-options:has([data-mission-scene="3"].is-active) [data-mission-route="3"] {
  height: 2px;
  background: linear-gradient(90deg, rgba(126, 181, 255, .92), rgba(89, 150, 235, .34));
  box-shadow: 0 0 13px rgba(89, 150, 235, .35);
}

.mission-control-options:has([data-mission-scene="0"].is-active) [data-mission-route="0"]::after,
.mission-control-options:has([data-mission-scene="1"].is-active) [data-mission-route="1"]::after,
.mission-control-options:has([data-mission-scene="2"].is-active) [data-mission-route="2"]::after,
.mission-control-options:has([data-mission-scene="3"].is-active) [data-mission-route="3"]::after {
  opacity: 1;
  animation: mission-insertion 1.8s cubic-bezier(.2, .65, .4, 1) infinite;
}

.mission-control-option {
  position: absolute;
  z-index: 3;
  width: min(42%, 194px);
  grid-template-columns: 54px minmax(0, 1fr);
  gap: .65rem;
  padding: .42rem;
  border-color: rgba(133, 174, 229, .12);
  background: rgba(4, 9, 16, .78);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  backdrop-filter: blur(9px);
}

.mission-control-option::after {
  position: absolute;
  top: -.65rem;
  right: .45rem;
  content: "ATLAS CARRY";
  opacity: 0;
  color: #a9caff;
  font-size: .5rem;
  font-weight: 850;
  letter-spacing: .12em;
  transition: opacity 220ms ease, translate 320ms cubic-bezier(.16, 1, .3, 1);
  translate: 0 4px;
  pointer-events: none;
}

.mission-control-option.is-active::after {
  opacity: .86;
  translate: 0 0;
}

.mission-control-option[data-mission-scene="0"] {
  top: 14%;
  left: 0;
}

.mission-control-option[data-mission-scene="1"] {
  top: 1%;
  right: 0;
}

.mission-control-option[data-mission-scene="2"] {
  bottom: 1%;
  left: 2%;
}

.mission-control-option[data-mission-scene="3"] {
  right: -1%;
  bottom: 11%;
}

.mission-control-option:hover,
.mission-control-option:focus-visible {
  border-color: rgba(139, 187, 252, .4);
  background: rgba(17, 31, 51, .88);
  transform: translateY(-2px);
}

.mission-control-option:active {
  transform: translateY(1px) scale(.985);
}

.mission-control-option.is-active {
  border-color: rgba(117, 176, 255, .72);
  background: linear-gradient(135deg, rgba(51, 107, 184, .38), rgba(12, 26, 45, .88));
  box-shadow: 0 0 0 1px rgba(108, 170, 255, .08), 0 16px 34px rgba(0, 0, 0, .26);
}

.mission-control-option img {
  width: 54px;
  aspect-ratio: 1;
  border-radius: 6px;
}

.mission-control-option b {
  font-size: .78rem;
}

.mission-control-option small {
  font-size: .6rem;
}

@keyframes mission-orbit {
  to {
    rotate: 360deg;
  }
}

@keyframes mission-insertion {
  0% {
    left: 100%;
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    left: 0;
    opacity: 0;
  }
}

@media (max-width: 1000px) {
  .mission-control-selector {
    width: min(100%, 720px);
  }

  .mission-control-options {
    height: 300px;
    overflow: visible;
  }

  .mission-control-option {
    width: min(35%, 190px);
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .mission-control-option img {
    width: 48px;
  }

  .mission-control-option[data-mission-scene="0"] {
    top: 13%;
  }

  .mission-control-option[data-mission-scene="1"] {
    top: 0;
  }

  .mission-control-option[data-mission-scene="2"] {
    bottom: 0;
  }

  .mission-control-option[data-mission-scene="3"] {
    bottom: 10%;
  }
}

@media (max-width: 700px) {
  .mission-control-grid {
    gap: .75rem;
  }

  .mission-control-selector {
    padding: .35rem .4rem .5rem;
  }

  .mission-control-options {
    height: 164px;
    padding: 0;
    overflow: visible;
  }

  .mission-control-core {
    top: 50%;
    width: 62px;
  }

  .mission-control-core::before {
    inset: -9px;
  }

  .mission-control-core::after {
    top: -12px;
    width: 5px;
    height: 5px;
  }

  .mission-control-core span {
    font-size: .52rem;
  }

  .mission-control-route {
    top: 50%;
  }

  .mission-control-route[data-mission-route="0"] {
    --route-angle: -159deg;
    --route-length: 41%;
  }

  .mission-control-route[data-mission-route="1"] {
    --route-angle: -21deg;
    --route-length: 41%;
  }

  .mission-control-route[data-mission-route="2"] {
    --route-angle: 159deg;
    --route-length: 41%;
  }

  .mission-control-route[data-mission-route="3"] {
    --route-angle: 21deg;
    --route-length: 41%;
  }

  .mission-control-option {
    width: 126px;
    min-height: 40px;
    grid-template-columns: 1fr;
    padding: .42rem .5rem;
  }

  .mission-control-option::after,
  .mission-control-option img,
  .mission-control-option small {
    display: none;
  }

  .mission-control-option b {
    overflow: hidden;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mission-control-option[data-mission-scene="0"] {
    top: 3%;
    left: 0;
  }

  .mission-control-option[data-mission-scene="1"] {
    top: 3%;
    right: 0;
  }

  .mission-control-option[data-mission-scene="2"] {
    bottom: 3%;
    left: 0;
  }

  .mission-control-option[data-mission-scene="3"] {
    right: 0;
    bottom: 3%;
  }
}

@media (max-width: 370px) {
  .mission-control-option {
    width: 112px;
  }

  .mission-control-option b {
    font-size: .62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission-control-core::before,
  .mission-control-route::after {
    animation: none;
  }
}