/* Mission section: recognition-focused storytelling */
.mission-section{
  position:relative;
  overflow:hidden;
  padding:8rem 1.5rem;
  background:
    radial-gradient(circle at 18% 20%,rgba(0,191,255,.18),transparent 30%),
    radial-gradient(circle at 82% 72%,rgba(75,108,255,.12),transparent 34%),
    linear-gradient(145deg,rgba(244,251,255,.92),rgba(222,246,255,.72));
  border-top:1px solid rgba(0,191,255,.14);
  border-bottom:1px solid rgba(0,191,255,.14);
}

@media(min-width:768px){.mission-section{padding:9rem 2.5rem}}

.mission-inner{
  position:relative;
  z-index:1;
  max-width:80rem;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
}

.mission-copy h2{
  margin-top:1rem;
  font-size:clamp(3rem,7vw,6.2rem);
}

.mission-copy p{
  margin-top:1.5rem;
  max-width:36rem;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.75;
}

.mission-orbit{
  position:relative;
  min-height:27rem;
  border:1px solid rgba(0,191,255,.18);
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 34px 100px rgba(0,191,255,.12);
  isolation:isolate;
}

@media(min-width:768px) and (prefers-reduced-motion:no-preference){
  .mission-orbit.depth-layer{transform:translate3d(0,var(--depth-y,0px),0)}
}

.mission-orbit::before{
  content:"";
  position:absolute;
  inset:2.2rem;
  border:1px dashed rgba(0,191,255,.28);
  border-radius:50%;
  animation:missionSpin 18s linear infinite;
}

.mission-core{
  position:absolute;
  inset:50% auto auto 50%;
  width:min(15rem,58vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  text-align:center;
  padding:2rem;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,191,255,.24),rgba(75,108,255,.12) 58%,rgba(255,255,255,.2));
  box-shadow:0 0 65px rgba(0,191,255,.24),inset 0 0 0 1px rgba(255,255,255,.3);
}

.mission-core strong{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:400;
  line-height:1;
}

.mission-node{
  position:absolute;
  width:min(13rem,44vw);
  padding:1rem 1.1rem;
  border:1px solid rgba(0,191,255,.18);
  background:rgba(244,251,255,.72);
  box-shadow:0 18px 45px rgba(6,17,31,.08);
  color:var(--foreground);
  transform:translateY(18px);
  opacity:0;
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .8s ease;
}

.mission-node.is-visible{transform:translateY(0);opacity:1}
.mission-node span{display:block;color:var(--accent);font-size:.76rem;text-transform:uppercase;letter-spacing:.18em;margin-bottom:.35rem}
.mission-node p{color:var(--muted);font-size:.92rem;line-height:1.5}
.mission-node.one{top:2rem;left:2rem}
.mission-node.two{top:2rem;right:2rem}
.mission-node.three{bottom:2rem;left:50%;transform:translate(-50%,18px)}
.mission-node.three.is-visible{transform:translate(-50%,0)}

html[data-theme="dark"] .mission-section{
  background:
    radial-gradient(circle at 18% 20%,rgba(0,200,255,.2),transparent 30%),
    radial-gradient(circle at 82% 72%,rgba(75,108,255,.16),transparent 34%),
    linear-gradient(145deg,rgba(2,7,19,.96),rgba(7,24,42,.9));
  border-color:rgba(122,226,255,.18);
}
html[data-theme="dark"] .mission-copy h2,
html[data-theme="dark"] .mission-core strong{
  color:#effbff;
  text-shadow:0 0 28px rgba(0,200,255,.18);
}
html[data-theme="dark"] .mission-copy p{
  color:#b9d1df;
}
html[data-theme="dark"] .mission-orbit{
  background:rgba(7,24,42,.6);
  border-color:rgba(122,226,255,.2);
  box-shadow:0 34px 100px rgba(0,0,0,.28),0 0 70px rgba(0,200,255,.12);
}
html[data-theme="dark"] .mission-core{
  background:radial-gradient(circle,rgba(0,200,255,.3),rgba(75,108,255,.16) 58%,rgba(2,7,19,.72));
  box-shadow:0 0 70px rgba(0,200,255,.22),inset 0 0 0 1px rgba(122,226,255,.22);
}
html[data-theme="dark"] .mission-node{
  background:rgba(7,24,42,.88);
  border-color:rgba(122,226,255,.22);
  color:#effbff;
  box-shadow:0 18px 52px rgba(0,0,0,.26);
}
html[data-theme="dark"] .mission-node p{
  color:#b9d1df;
}

.mission-signal{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 22px rgba(0,191,255,.72);
  animation:missionPulse 2.4s ease-in-out infinite;
}
.mission-signal.a{top:24%;left:48%}
.mission-signal.b{top:68%;left:23%;animation-delay:.45s}
.mission-signal.c{top:58%;right:20%;animation-delay:.9s}

@keyframes missionSpin{to{transform:rotate(360deg)}}
@keyframes missionPulse{0%,100%{transform:scale(.7);opacity:.4}50%{transform:scale(1.45);opacity:1}}

@media(max-width:900px){
  .mission-inner{grid-template-columns:1fr}
  .mission-orbit{min-height:34rem}
}

@media(max-width:620px){
  .mission-section{padding:6rem 1.5rem}
  .mission-orbit{min-height:auto;padding:1rem;display:grid;gap:.85rem}
  .mission-orbit::before,.mission-signal{display:none}
  .mission-core,.mission-node,.mission-node.one,.mission-node.two,.mission-node.three{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
    border-radius:0;
    transform:none;
  }
  .mission-core{aspect-ratio:auto;min-height:10rem}
  .mission-node.three.is-visible,.mission-node.three{transform:none}
}
