/* ─────────────────────────────────────────────────────────────────────────
   Ardent — the front door.
   The one page in fixed mode. Everything here is the centrepiece: the orb,
   its halo, two orbital rings, and the wordmark.
   ───────────────────────────────────────────────────────────────────────── */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}
/* The stage itself is inert so the pointer reaches the sky; only the pieces
   that do something take events back. */
.stage a,
.stage button,
.stage .orb-wrap {
  pointer-events: auto;
}

.centerpiece {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-2vh);
}

/* Ambient halo behind the orb, filling the middle of the frame. */
.centerpiece::before {
  content: "";
  position: absolute;
  top: 38%;
  left: 50%;
  width: 148%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(126, 116, 255, 0.17) 0%,
    rgba(92, 122, 255, 0.07) 32%,
    transparent 62%
  );
  pointer-events: none;
  z-index: -1;
  animation: halo 9s ease-in-out 1.8s infinite;
}
@keyframes halo {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

.orb-wrap {
  width: var(--orb-size);
  height: var(--orb-size);
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 50%;
  animation: orb-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) both,
    breathe 9s ease-in-out 1.8s infinite;
}
.orb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 70px rgba(126, 116, 255, 0.45))
    drop-shadow(0 0 140px rgba(92, 130, 255, 0.22));
}
@keyframes orb-in {
  from { opacity: 0; transform: translateY(3%) scale(0.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Two rings at different tilts and speeds. One ring reads as a diagram; two
   at odds with each other read as orbits. */
.orbit {
  position: absolute;
  top: 38%;
  left: 50%;
  border: 1px solid rgba(190, 180, 255, 0.13);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.orbit--a {
  width: calc(var(--orb-size) * 1.34);
  height: calc(var(--orb-size) * 1.34);
  margin: calc(var(--orb-size) * -0.67) 0 0 calc(var(--orb-size) * -0.67);
  animation: orbit-a 46s linear infinite, fade-in 2s ease 1.2s both;
}
.orbit--b {
  width: calc(var(--orb-size) * 1.72);
  height: calc(var(--orb-size) * 1.72);
  margin: calc(var(--orb-size) * -0.86) 0 0 calc(var(--orb-size) * -0.86);
  border-color: rgba(190, 180, 255, 0.07);
  animation: orbit-b 78s linear infinite reverse, fade-in 2s ease 1.5s both;
}
@keyframes orbit-a {
  from { transform: rotateX(72deg) rotateZ(0deg); }
  to { transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes orbit-b {
  from { transform: rotateX(64deg) rotateZ(24deg); }
  to { transform: rotateX(64deg) rotateZ(384deg); }
}

.wordmark {
  margin-top: clamp(0rem, 1.5vmin, 1rem);
  font-family: var(--tn-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 7.2vmin, 4.15rem);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--tn-hi);
  text-shadow: 0 0 26px rgba(150, 150, 255, 0.32);
  line-height: 1;
  animation: word-in 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
@keyframes word-in {
  from {
    opacity: 0;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    transform: translateY(0);
  }
}

/* The bottom bar carries three items on a wide screen. On a narrow one the
   coordinates are the first thing to go: they are the least useful and the
   longest. */
@media (max-width: 640px) {
  .botbar [data-coords] { display: none; }
}
@media (max-width: 400px) {
  .botbar .established { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit { animation: fade-in 0.001ms both; }
}