/* Sideral space background + starfield (DOM layer so it always paints) */
body {
  background: #090a0ee2 !important;
  position: relative;
}
/* Starfield: stars towards camera, seamless loop (inspired by codepen.io/ArneSava/pen/BaWxOaR)
   Three layers; each fades in at back, moves to camera, fades out past camera so reset is invisible. */
.starfield-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  perspective: 700px;
  transform-style: preserve-3d;
}
.starfield-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200vw;
  height: 200vh;
  margin-left: -100vw;
  margin-top: -100vh;
  background-repeat: repeat;
  background-size: 300px 300px;
  background-position: center center;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 40px 70px, #eee, transparent),
    radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 130px 80px, #e8f4ff, transparent),
    radial-gradient(1px 1px at 160px 120px, #ddd, transparent),
    radial-gradient(1px 1px at 200px 50px, #fff, transparent),
    radial-gradient(2px 2px at 250px 180px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 280px 90px, #eee, transparent),
    radial-gradient(1.5px 1.5px at 30px 200px, #e0e8ff, transparent),
    radial-gradient(1px 1px at 100px 220px, #fff, transparent),
    radial-gradient(1px 1px at 180px 20px, #ddd, transparent),
    radial-gradient(1.5px 1.5px at 240px 140px, #eee, transparent);
  transform-origin: center center;
  animation: starfield-towards 28s linear infinite;
}
.starfield-layer--2 { animation-delay: -9.33s; }
.starfield-layer--3 { animation-delay: -18.67s; }
@keyframes starfield-towards {
  0% {
    transform: translateZ(-1200px) scale(0.12);
    opacity: 0;
  }
  8% {
    opacity: 0.25;
  }
  75% {
    transform: translateZ(0) scale(1);
    opacity: 0.85;
  }
  92% {
    transform: translateZ(80px) scale(1);
    opacity: 0.4;
  }
  100% {
    transform: translateZ(120px) scale(1);
    opacity: 0;
  }
}
#app {
  background: transparent !important;
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* Spiral orbs: fixed positions (vmin-based transforms) */
.front-page__orb--1  { transform: translate(-50%, -50%) translate(0, -20vmin) rotate(-5deg); }
.front-page__orb--2  { transform: translate(-50%, -50%) translate(11.8vmin, -16.2vmin) rotate(8deg); }
.front-page__orb--3  { transform: translate(-50%, -50%) translate(19vmin, -6.2vmin) rotate(-12deg); }
.front-page__orb--4  { transform: translate(-50%, -50%) translate(19vmin, 6.2vmin) rotate(6deg); }
.front-page__orb--5  { transform: translate(-50%, -50%) translate(11.8vmin, 16.2vmin) rotate(-8deg); }
.front-page__orb--6  { transform: translate(-50%, -50%) translate(0, 20vmin) rotate(10deg); }
.front-page__orb--7  { transform: translate(-50%, -50%) translate(-11.8vmin, 16.2vmin) rotate(-6deg); }
.front-page__orb--8  { transform: translate(-50%, -50%) translate(-19vmin, 6.2vmin) rotate(7deg); }
.front-page__orb--9  { transform: translate(-50%, -50%) translate(-19vmin, -6.2vmin) rotate(-9deg); }
.front-page__orb--10 { transform: translate(-50%, -50%) translate(-11.8vmin, -16.2vmin) rotate(5deg); }

/* Join us button: center in spiral, bold with soft lines above/below */
#join-us-btn {
  transform: translate(-50%, -50%);
}
.join-us-cta {
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 0.6em 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.join-us-cta:hover {
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

/* Join modal: tab/panel visibility */
.join-modal__panel {
  display: none;
}
.join-modal__panel--active {
  display: block;
}
.join-modal__tab {
  color: #6b7280;
}
.join-modal__tab:hover {
  color: #a2a5a5;
}
.join-modal__tab--active {
  color: #e8e8e8;
  border-bottom-color: rgba(255, 255, 255, 0.3);
}
.join-modal[hidden] {
  display: none !important;
}

/* Modal input autofill: match dark input */
.join-modal__input:-webkit-autofill,
.join-modal__input:-webkit-autofill:hover,
.join-modal__input:-webkit-autofill:focus,
.join-modal__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #2a2a2e inset;
  -webkit-text-fill-color: #e8e8e8;
  caret-color: #e8e8e8;
  transition: background-color 5000s ease-in-out 0s;
}