/* USADIGITAL v=6 — colony motion on mobile */
.about-stage {
  --sx: 0;
  --sz: 0;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(80, 170, 255, .28);
  background:
    radial-gradient(ellipse at 50% 18%, rgba(29, 80, 180, .35), transparent 48%),
    linear-gradient(180deg, #071226, #050914 70%);
  box-shadow: 0 18px 50px rgba(8, 20, 50, .45), inset 0 0 40px rgba(56, 189, 248, .08);
  transform: perspective(1200px) rotateX(calc(var(--sx) * 1deg)) translateZ(calc(var(--sz) * 1px));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  min-height: 420px;
}
.about-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(125, 211, 252, .03) 3px 4px
  );
  mix-blend-mode: screen;
}
.colony {
  display: block;
  width: 100%;
  height: auto;
}
.colony-hud {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.hud-chip, .hud-live {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 5px 8px;
  border-radius: 99px;
  border: 1px solid rgba(125, 211, 252, .25);
  color: #9eb0d0;
  background: rgba(5, 9, 20, .55);
  opacity: .35;
}
.hud-live {
  margin-left: auto;
  color: #4ade80;
  border-color: rgba(74, 222, 128, .35);
}

.stars circle { opacity: .35; }
.about-stage.is-on .stars circle {
  animation: twinkle 2.8s ease-in-out infinite;
}
.stars circle:nth-child(odd) { animation-delay: .6s; }
@keyframes twinkle {
  0%, 100% { opacity: .2; }
  50% { opacity: .9; }
}

.orbit {
  transform-origin: 268px 168px;
  transform-box: fill-box;
}
.about-stage.is-on .orbit {
  animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.colonist {
  opacity: 0;
  transform-origin: 248px 316px;
}
.about-stage.is-hit {
  box-shadow: 0 18px 50px rgba(8, 20, 50, .45), inset 0 0 40px rgba(56, 189, 248, .08), 0 0 40px rgba(56, 189, 248, .28);
}
.about-stage.is-hit .colonist {
  filter: drop-shadow(0 0 10px #38bdf8);
}
.about-stage.is-on .colonist {
  animation: colonistWalk 16s cubic-bezier(.35, .1, .2, 1) forwards;
}
.torso { transform-origin: 248px 278px; }
.about-stage.is-on .torso { animation: colonistBob 16s ease-in-out forwards; }
@keyframes colonistBob {
  0%, 26%, 38%, 51%, 64%, 100% { transform: none; }
  7%, 13%, 19%, 41%, 47% { transform: translateY(-3px) rotate(-2deg); }
  10%, 16%, 23%, 44% { transform: translateY(1px) rotate(2deg); }
  30%, 54% { transform: translateY(4px) rotate(-4deg); }
}
@keyframes colonistWalk {
  0% { opacity: 0; transform: translate(-132px, 4px); }
  4% { opacity: 1; transform: translate(-124px, 0); }
  7% { transform: translate(-108px, -4px); }
  10% { transform: translate(-92px, 0); }
  13% { transform: translate(-76px, -4px); }
  16% { transform: translate(-60px, 0); }
  19% { transform: translate(-48px, -4px); }
  23% { transform: translate(-40px, 0); }
  26% { transform: translate(-36px, 0); }
  26%, 38% { transform: translate(-36px, 0); }
  41% { transform: translate(-18px, -4px); }
  44% { transform: translate(-2px, 0); }
  47% { transform: translate(14px, -4px); }
  51% { transform: translate(30px, 0); }
  51%, 64% { transform: translate(30px, 0); }
  72%, 100% { opacity: 1; transform: translate(6px, 0); }
}

.jet path { opacity: 0; }

.leg-l, .leg-r {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}
.about-stage.is-on .leg-l { animation: strideL 16s linear forwards; }
.about-stage.is-on .leg-r { animation: strideR 16s linear forwards; }
@keyframes strideL {
  0%, 4% { transform: rotate(0deg); }
  7% { transform: rotate(24deg); }
  10% { transform: rotate(-22deg); }
  13% { transform: rotate(24deg); }
  16% { transform: rotate(-22deg); }
  19% { transform: rotate(24deg); }
  23% { transform: rotate(-20deg); }
  26%, 38% { transform: rotate(0deg); }
  41% { transform: rotate(24deg); }
  44% { transform: rotate(-22deg); }
  47% { transform: rotate(24deg); }
  51%, 100% { transform: rotate(0deg); }
}
@keyframes strideR {
  0%, 4% { transform: rotate(0deg); }
  7% { transform: rotate(-22deg); }
  10% { transform: rotate(24deg); }
  13% { transform: rotate(-22deg); }
  16% { transform: rotate(24deg); }
  19% { transform: rotate(-22deg); }
  23% { transform: rotate(20deg); }
  26%, 38% { transform: rotate(0deg); }
  41% { transform: rotate(-22deg); }
  44% { transform: rotate(24deg); }
  47% { transform: rotate(-22deg); }
  51%, 100% { transform: rotate(0deg); }
}

.head { transform-origin: 248px 248px; }
.about-stage.is-on .head {
  animation: look 16s ease-in-out forwards;
}
@keyframes look {
  0%, 24% { transform: rotate(-6deg); }
  26%, 36% { transform: rotate(-10deg); }
  40%, 50% { transform: rotate(8deg); }
  52%, 62% { transform: rotate(10deg); }
  70%, 100% { transform: rotate(0deg); }
}

.arm-l { transform-origin: 236px 268px; }
.arm-r { transform-origin: 260px 268px; }
.about-stage.is-on .arm-l { animation: plantL 16s ease-in-out forwards; }
.about-stage.is-on .arm-r { animation: plantR 16s ease-in-out forwards; }
@keyframes plantL {
  0%, 4% { transform: rotate(16deg); }
  7% { transform: rotate(-14deg); }
  10% { transform: rotate(16deg); }
  13% { transform: rotate(-14deg); }
  16% { transform: rotate(16deg); }
  19% { transform: rotate(-12deg); }
  23%, 26% { transform: rotate(8deg); }
  30% { transform: rotate(-56deg); }
  36%, 38% { transform: rotate(-12deg); }
  41% { transform: rotate(14deg); }
  44% { transform: rotate(-12deg); }
  47% { transform: rotate(12deg); }
  51%, 100% { transform: rotate(-6deg); }
}
@keyframes plantR {
  0%, 4% { transform: rotate(-16deg); }
  7% { transform: rotate(14deg); }
  10% { transform: rotate(-16deg); }
  13% { transform: rotate(14deg); }
  16% { transform: rotate(-16deg); }
  19% { transform: rotate(12deg); }
  23%, 48% { transform: rotate(10deg); }
  54% { transform: rotate(58deg); }
  62%, 100% { transform: rotate(8deg); }
}

.usa-flag, .brand-flag {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  opacity: 0;
  transform: scaleY(.08) translateY(18px);
}
.about-stage.is-on .usa-flag {
  animation: plantFlag 0.65s 4.15s cubic-bezier(.15, 1.15, .3, 1) forwards;
}
.about-stage.is-on .brand-flag {
  animation: plantFlag 0.65s 8.15s cubic-bezier(.15, 1.15, .3, 1) forwards;
}
@keyframes plantFlag {
  0% { opacity: 0; transform: scaleY(.08) translateY(18px); }
  70% { opacity: 1; transform: scaleY(1.08) translateY(0); }
  100% { opacity: 1; transform: scaleY(1) translateY(0); }
}

.cloth {
  transform-box: fill-box;
  transform-origin: 0% 40%;
}
.about-stage.is-on .usa-flag .cloth {
  animation: wave 2.2s 4.8s ease-in-out infinite;
}
.about-stage.is-on .brand-flag .cloth {
  animation: wave 2.4s 8.8s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  40% { transform: skewY(4deg) scaleX(1.05); }
  70% { transform: skewY(-2.5deg) scaleX(.98); }
}

.shock {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.about-stage.is-on .s1 { animation: boom .85s 4.2s ease-out; }
.about-stage.is-on .s2 { animation: boom .85s 8.2s ease-out; }
@keyframes boom {
  0% { opacity: .9; transform: scale(.2); }
  100% { opacity: 0; transform: scale(4.2); }
}

.pad-ring { transform-origin: 248px 316px; transform-box: fill-box; opacity: .25; }
.about-stage.is-on .r1 { animation: ring 3.4s ease-out infinite; }
.about-stage.is-on .r2 { animation: ring 3.4s .7s ease-out infinite; }
@keyframes ring {
  0% { transform: scale(.6); opacity: .7; }
  100% { transform: scale(1.55); opacity: 0; }
}
.pad-hex { transform-origin: 248px 313px; transform-box: fill-box; }
.about-stage.is-on .pad-hex {
  animation: hexPulse 2.6s ease-in-out infinite;
}
@keyframes hexPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.08); opacity: 1; }
}

.hex {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.35);
}
.about-stage.is-on .h1 { animation: claim .45s 8.9s forwards; }
.about-stage.is-on .h2 { animation: claim .45s 9.05s forwards; }
.about-stage.is-on .h3 { animation: claim .45s 9.2s forwards; }
.about-stage.is-on .h4 { animation: claim .45s 9.35s forwards; }
.about-stage.is-on .h5 { animation: claim .45s 9.5s forwards; }
.about-stage.is-on .h6 { animation: claim .45s 9.65s forwards; }
.about-stage.is-on .h7 { animation: claim .45s 9.8s forwards; }
.about-stage.is-on .h8 { animation: claim .45s 9.95s forwards; }
.about-stage.is-on .h9 { animation: claim .45s 10.1s forwards; }
.about-stage.is-on .h10 { animation: claim .45s 10.25s forwards; }
.about-stage.is-on .h11 { animation: claim .45s 10.4s forwards; }
.about-stage.is-on .h12 { animation: claim .45s 10.55s forwards; }
.about-stage.is-on .h13 { animation: claim .45s 10.7s forwards; }
.about-stage.is-on .h14 { animation: claim .45s 10.85s forwards; }
@keyframes claim {
  0% { opacity: 0; transform: scale(.3); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.beam {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  opacity: .85;
}
.about-stage.is-on .b1 { animation: drawBeam .7s 8.7s forwards; }
.about-stage.is-on .b2 { animation: drawBeam .7s 8.9s forwards; }
.about-stage.is-on .b3 { animation: drawBeam .7s 9.1s forwards; }
.about-stage.is-on .b4 { animation: drawBeam .7s 9.3s forwards; }
.about-stage.is-on .b5 { animation: drawBeam .7s 9.5s forwards; }
.about-stage.is-on .b6 { animation: drawBeam .7s 9.7s forwards; }
@keyframes drawBeam {
  to { stroke-dashoffset: 0; }
}

.node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.node circle {
  fill: #7dd3fc;
  filter: drop-shadow(0 0 4px #38bdf8);
}
.about-stage.is-on .n1 { animation: popNode .4s 8.95s forwards; }
.about-stage.is-on .n2 { animation: popNode .4s 9.2s forwards; }
.about-stage.is-on .n3 { animation: popNode .4s 9.45s forwards; }
.about-stage.is-on .n4 { animation: popNode .4s 9.7s forwards; }
.about-stage.is-on .n5 { animation: popNode .4s 9.95s forwards; }
.about-stage.is-on .n6 { animation: popNode .4s 10.2s forwards; }
@keyframes popNode {
  0% { opacity: 0; transform: scale(.4); }
  100% { opacity: 1; transform: scale(1); }
}

.pkt { opacity: 0; }
.about-stage.is-on .p1 {
  offset-path: path("M248 250 L210 150");
  animation: ride 1.5s 10.4s linear infinite;
}
.about-stage.is-on .p2 {
  offset-path: path("M248 250 L330 148");
  animation: ride 1.7s 10.7s linear infinite;
}
.about-stage.is-on .p3 {
  offset-path: path("M268 250 L340 164");
  animation: ride 1.9s 11s linear infinite;
}
@keyframes ride {
  0% { opacity: 0; offset-distance: 0%; }
  12% { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}

.status, .substatus { opacity: 0; }
.about-stage.is-on .status { animation: fadeUp .6s 11.1s forwards; }
.about-stage.is-on .substatus { animation: fadeUp .6s 11.4s forwards; }
@keyframes fadeUp {
  from { opacity: 0; }
  to { opacity: 1; }
}

.about-stage.is-on .hud-chip:nth-child(1) { animation: hudOn .3s .4s forwards; }
.about-stage.is-on .hud-chip:nth-child(2) { animation: hudOn .3s .5s forwards; }
.about-stage.is-on .hud-chip:nth-child(3) { animation: hudOn .3s 8.2s forwards; }
.about-stage.is-on .hud-live { animation: hudOn .3s .6s forwards; }
@keyframes hudOn {
  to { opacity: 1; color: #e8f2ff; box-shadow: 0 0 12px rgba(56, 189, 248, .25); }
}

@media (max-width: 900px) {
  .about-stage {
    min-height: min(70vw, 360px);
    border-radius: 18px;
  }
  .colony {
    width: 108%;
    max-width: none;
    margin-left: -4%;
    min-height: min(70vw, 360px);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .about-stage .colonist,
  .about-stage .usa-flag,
  .about-stage .brand-flag,
  .about-stage .hex,
  .about-stage .node,
  .about-stage .beam,
  .about-stage .status,
  .about-stage .substatus,
  .about-stage .hud-chip,
  .about-stage .hud-live {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}