/* ADCS demo — CSS 3D satellite view */

.sat-stage {
  position: relative;
  display: grid;
  place-items: center;
  block-size: clamp(260px, 40vw, 380px);
  overflow: hidden;
}

.sat-stage__ref {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: var(--c-line-strong);
  stroke-width: 1;
}

.sat-stage__tag {
  position: absolute;
}

.sat-stage__tag--tl {
  inset-block-start: 0;
  inset-inline-start: 0;
}

.sat-stage__tag--br {
  inset-block-end: 0;
  inset-inline-end: 0;
}

/* Fixed viewing angle; the satellite rotates inside it */
.sat-view {
  perspective: 900px;
  transform-style: preserve-3d;
}

.sat {
  --size: clamp(80px, 12vw, 120px);
  position: relative;
  inline-size: var(--size);
  block-size: var(--size);
  transform-style: preserve-3d;
  will-change: transform;
}

.sat__face {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--c-line) 1px, transparent 1px) 0 0 / 25% 25%,
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px) 0 0 / 25% 25%,
    var(--c-surface-2);
  border: var(--hair) solid var(--c-line-strong);
  backface-visibility: visible;
}

.sat__face--front  { transform: translateZ(calc(var(--size) / 2)); }
.sat__face--back   { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
.sat__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
.sat__face--right  { transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); }
.sat__face--top    { transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); }
.sat__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }

.sat__face--front {
  display: grid;
  place-items: center;
  border-color: var(--c-accent);
}

.sat__lens {
  inline-size: 30%;
  block-size: 30%;
  border: var(--hair) solid var(--c-accent);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-accent-fill) 0 18%, transparent 20%);
}

/* Deployable solar wings */
.sat__wing {
  position: absolute;
  inset-block-start: 15%;
  inline-size: 130%;
  block-size: 70%;
  background:
    linear-gradient(90deg, var(--c-line-strong) 1px, transparent 1px) 0 0 / 16.66% 100%,
    linear-gradient(var(--c-line-strong) 1px, transparent 1px) 0 0 / 100% 50%,
    var(--c-bg-2);
  border: var(--hair) solid var(--c-line-strong);
}

.sat__wing--l {
  inset-inline-end: 100%;
  transform-origin: right center;
  transform: translateX(-6px);
}

.sat__wing--r {
  inset-inline-start: 100%;
  transform-origin: left center;
  transform: translateX(6px);
}

/* Boresight axis sticking out of the front face */
.sat__axis {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 2px;
  block-size: 2px;
  transform-style: preserve-3d;
}

.sat__axis::before {
  content: "";
  position: absolute;
  inline-size: calc(var(--size) * 1.1);
  block-size: 1px;
  background: var(--c-accent);
  transform-origin: left center;
  transform: rotateY(-90deg);
}