/* Hero Stage — immersive, cursor-reactive constellation. */

.stage {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  --mx: 50%;
  --my: 50%;
  --px: 0;
  --py: 0;
}
@media (hover: hover) {
  .stage { cursor: none; }
  .stage a, .stage button { cursor: none; }
}

/* Aurora background that follows cursor */
.stage-aurora {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(45% 35% at var(--mx) var(--my), rgba(91, 140, 255, 0.45), transparent 60%),
    radial-gradient(35% 30% at calc(100% - var(--mx)) calc(100% - var(--my)), rgba(160, 107, 255, 0.4), transparent 65%),
    radial-gradient(40% 30% at var(--mx) 100%, rgba(75, 227, 208, 0.3), transparent 60%);
  filter: blur(60px);
  transition: background 80ms linear;
}

/* Subtle grain overlay */
.stage-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(1px 1px at 12% 32%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 78% 18%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 36% 78%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 88% 64%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 54% 8%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 22% 92%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 68% 88%, rgba(255,255,255,0.3), transparent);
}

/* Faint conic ring for depth */
.stage-ring {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(1200px, 110vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      rgba(91, 140, 255, 0) 0deg,
      rgba(91, 140, 255, 0.25) 40deg,
      rgba(160, 107, 255, 0.18) 110deg,
      rgba(75, 227, 208, 0.15) 200deg,
      rgba(255, 107, 208, 0.1) 280deg,
      rgba(91, 140, 255, 0) 360deg
    );
  mask: radial-gradient(closest-side, transparent 56%, black 60%, black 64%, transparent 70%);
  -webkit-mask: radial-gradient(closest-side, transparent 56%, black 60%, black 64%, transparent 70%);
  opacity: 0.7;
  animation: ringSpin 60s linear infinite;
}
@keyframes ringSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Bigger faint outer ring */
.stage-ring.outer {
  width: min(1700px, 160vw);
  opacity: 0.35;
  animation-duration: 90s;
  animation-direction: reverse;
}

/* Content layer */
.stage-content {
  position: relative;
  z-index: 5;
  max-width: var(--container);
  margin: 0 auto;
  padding: 110px 28px 60px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: 88vh;
}
@media (max-width: 1080px) {
  .stage-content {
    grid-template-columns: 1fr;
    padding: 100px 24px 40px;
    gap: 24px;
    min-height: auto;
  }
}
@media (max-width: 640px) {
  .stage-content {
    padding: 90px 18px 30px;
    gap: 18px;
  }
  .stage-eyebrow { font-size: 12px; margin-bottom: 22px; padding: 5px 12px; }
  .stage-cta { gap: 10px; margin-top: 28px; flex-direction: column; align-items: stretch; }
  .stage-cta .stage-cta-primary,
  .stage-cta .stage-cta-ghost {
    width: 100%;
    justify-content: center;
    height: 54px;
    font-size: 15px;
  }
  .stage-sub { margin-top: 20px; font-size: 15px; }
  .stage-scroll-cue { display: none; }
}
@media (max-width: 640px) {
  .stage-orbit { max-width: 320px; margin-top: 8px; }
  .stage-hub { width: 130px; }
  .stage-hub-core .ttl { font-size: 15px; }
}

/* Left text column */
.stage-text {
  position: relative;
  z-index: 6;
}

.stage-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-1);
  margin-bottom: 32px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.stage-eyebrow .live {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(91,140,255,0.3), rgba(160,107,255,0.3));
  color: #cfd9ff;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(91,140,255,0.4);
  display: inline-flex; align-items: center; gap: 6px;
}
.stage-eyebrow .live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(75,227,208,1);
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.stage-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}
.stage-headline .l1, .stage-headline .l2 {
  display: block;
}
.stage-headline .word {
  background: linear-gradient(180deg, #fff 0%, #d6dffb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stage-headline .accent {
  background: linear-gradient(100deg, #5b8cff 0%, #a06bff 50%, #4be3d0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: huerun 8s linear infinite;
}
.stage-headline .swap {
  display: inline-block;
  position: relative;
  min-width: 0;
}
.stage-headline .swap-word {
  background: linear-gradient(100deg, #5b8cff 0%, #a06bff 50%, #4be3d0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: huerun 8s linear infinite;
  display: inline-block;
  transition: opacity 500ms cubic-bezier(.2,.7,.2,1), transform 500ms cubic-bezier(.2,.7,.2,1), filter 500ms ease;
}
.stage-headline .swap-word.out {
  opacity: 0;
  transform: translateY(-30%);
  filter: blur(4px);
  position: absolute;
  inset: 0;
}
.stage-headline .swap-word.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@keyframes huerun {
  to { background-position: 200% 0; }
}

.stage-sub {
  margin-top: 28px;
  max-width: 520px;
  font-size: clamp(15px, 1.4vw, 18.5px);
  line-height: 1.55;
  color: var(--ink-1);
  text-wrap: pretty;
}

.stage-cta {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
  align-items: center;
}
.stage-cta-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 28px 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(180deg, #6e9bff 0%, #4f7af0 100%);
  box-shadow:
    0 14px 50px rgba(91,140,255,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease;
}
.stage-cta-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
  z-index: -1;
}
.stage-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 60px rgba(91,140,255,0.65), inset 0 1px 0 rgba(255,255,255,0.3);
}
.stage-cta-primary:hover::after { transform: translateX(100%); }

.stage-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  color: var(--ink-0);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.stage-cta-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}
.stage-cta-ghost .pl {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
}

.stage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 36px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.stage-meta-item { display: flex; align-items: center; gap: 8px; }
.stage-meta-item .px {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(75,227,208,0.15);
  border: 1px solid rgba(75,227,208,0.45);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-cyan);
  font-size: 9px;
}

/* RIGHT: constellation */
.stage-orbit {
  position: relative;
  z-index: 4;
  width: 100%;
  aspect-ratio: 1;
  max-width: 600px;
  margin: 0 auto;
  pointer-events: none;
}
@media (max-width: 1080px) {
  .stage-orbit { max-width: 420px; margin-top: 24px; }
}

.stage-orbit svg.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Orbit ring — visible reference circle */
.stage-orbit-ring {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.07);
  pointer-events: none;
}
.stage-orbit-ring.inner {
  width: 62%;
  border-color: rgba(91,140,255,0.12);
  border-style: solid;
}

/* Center hub */
.stage-hub {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 210px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
}
@media (max-width: 1080px) {
  .stage-hub { width: 150px; }
}
.stage-hub::before {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,140,255,0.55), transparent 70%);
  filter: blur(32px);
  z-index: -1;
}
.stage-hub-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55) 0%, transparent 40%),
    linear-gradient(135deg, #5b8cff 0%, #a06bff 55%, #4be3d0 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.35),
    inset 0 -20px 50px rgba(0,0,0,0.3),
    0 30px 80px rgba(91,140,255,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-display);
  color: #fff;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 250ms cubic-bezier(.2,.7,.2,1);
  padding: 12px;
}
.stage-hub-core .lbl {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-mono);
  font-weight: 500;
}
.stage-hub-core .ttl {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
@media (max-width: 1080px) {
  .stage-hub-core .ttl { font-size: 17px; }
  .stage-hub-core .lbl { font-size: 9px; }
}

.stage-hub-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(91,140,255,0.45);
  animation: pulseRing 3s ease-out infinite;
  pointer-events: none;
}
.stage-hub-pulse:nth-child(2) { animation-delay: 1s; }
.stage-hub-pulse:nth-child(3) { animation-delay: 2s; }
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Orbiting model planets — now compact pills */
.stage-planet {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  --tx: 0;
  --ty: 0;
  --depth: 0.5;
  z-index: 4;
}
.stage-planet-inner {
  position: relative;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

.stage-planet-card {
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: rgba(14,16,26,0.78);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
.stage-planet-card:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(20,24,38,0.9);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 50px rgba(91,140,255,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.stage-planet-card .badge {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stage-planet-card .nm {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.005em;
}
@media (max-width: 1080px) {
  .stage-planet-card { padding: 8px 12px 8px 8px; gap: 8px; }
  .stage-planet-card .nm { font-size: 12px; }
  .stage-planet-card .badge { width: 26px; height: 26px; }
}

/* Ticker strip beneath hero */
.stage-ticker {
  position: relative;
  z-index: 5;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(7,9,14,0.5);
  backdrop-filter: blur(20px);
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
}
.stage-ticker-track {
  display: inline-flex;
  gap: 56px;
  animation: tickerScroll 40s linear infinite;
  padding-left: 56px;
}
.stage-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stage-ticker-item .dotc {
  width: 6px; height: 6px;
  border-radius: 50%;
}
@keyframes tickerScroll {
  to { transform: translateX(-50%); }
}

/* Scroll cue */
.stage-scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
}
.stage-scroll-cue .bar {
  width: 1.5px;
  height: 30px;
  background: linear-gradient(to bottom, transparent, var(--ink-2));
  position: relative;
  overflow: hidden;
}
.stage-scroll-cue .bar::after {
  content: '';
  position: absolute;
  top: -30px;
  left: 0; right: 0;
  height: 30px;
  background: linear-gradient(to bottom, transparent, var(--accent-cyan));
  animation: scrollCue 2s ease-in-out infinite;
}
@keyframes scrollCue {
  0% { transform: translateY(0); }
  100% { transform: translateY(60px); }
}

/* Reveal on scroll utility (applied to sections) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Cursor follower (subtle dot that trails on hero) */
.stage-cursor {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(91,140,255,0.7);
  background: rgba(91,140,255,0.1);
  pointer-events: none;
  z-index: 7;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: width 200ms ease, height 200ms ease, opacity 200ms ease;
  opacity: 0;
}
.stage-cursor.in { opacity: 1; }
.stage-cursor.over-planet {
  width: 64px; height: 64px;
  background: rgba(160,107,255,0.15);
  border-color: rgba(160,107,255,0.6);
}

@media (hover: none) {
  .stage-cursor { display: none; }
}