.space-hero {
  position: relative;
  overflow: hidden;
}

.space-hero > * {
  position: relative;
  z-index: 2;
}

.space-hero::before,
.space-hero::after {
  content: none !important;
}

.space-hero .shared-motion-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.space-hero .shared-cosmos-bg {
  position: absolute;
  inset: -12% -8%;
  background:
    radial-gradient(120% 90% at 12% 18%, rgba(255, 192, 126, 0.08) 0%, rgba(255, 192, 126, 0.025) 46%, transparent 66%),
    radial-gradient(90% 70% at 84% 22%, rgba(155, 192, 246, 0.22) 0%, rgba(155, 192, 246, 0.08) 42%, transparent 68%),
    radial-gradient(80% 65% at 78% 80%, rgba(178, 206, 247, 0.2) 0%, rgba(178, 206, 247, 0.06) 48%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.4;
  animation: cosmosDrift 22s ease-in-out infinite alternate;
}

.space-hero .shared-aurora {
  position: absolute;
  inset: -20% -10%;
  background: linear-gradient(120deg, rgba(255, 186, 117, 0.1), rgba(255, 224, 182, 0.07), rgba(171, 203, 250, 0.16), rgba(255, 196, 135, 0.08));
  background-size: 220% 220%;
  opacity: 0.5;
  filter: blur(24px);
  animation: heroAuroraFlow 14s ease-in-out infinite alternate;
}

.space-hero .shared-warm-flow {
  position: absolute;
  inset: -30% -24%;
  background:
    radial-gradient(34% 30% at 8% 26%, rgba(255, 165, 82, 0.05) 0%, rgba(255, 165, 82, 0.018) 36%, transparent 74%),
    radial-gradient(34% 30% at 30% 72%, rgba(255, 186, 112, 0.09) 0%, rgba(255, 186, 112, 0.032) 36%, transparent 74%),
    radial-gradient(38% 32% at 66% 20%, rgba(255, 162, 78, 0.09) 0%, rgba(255, 162, 78, 0.032) 34%, transparent 72%),
    radial-gradient(34% 28% at 94% 64%, rgba(255, 204, 140, 0.08) 0%, rgba(255, 204, 140, 0.028) 36%, transparent 74%),
    radial-gradient(30% 26% at 52% 44%, rgba(255, 176, 96, 0.07) 0%, rgba(255, 176, 96, 0.02) 36%, transparent 72%);
  background-size: 188% 156%, 176% 148%, 192% 160%, 172% 144%, 184% 152%;
  will-change: transform, background-position, opacity;
  transform-origin: 50% 50%;
  opacity: 0.16;
  filter: blur(3px);
  mix-blend-mode: screen;
  mask-image: radial-gradient(130% 112% at 56% 60%, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.8) 56%, rgba(0, 0, 0, 0.58) 76%, transparent 100%);
  -webkit-mask-image: radial-gradient(130% 112% at 56% 60%, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.8) 56%, rgba(0, 0, 0, 0.58) 76%, transparent 100%);
  animation: heroWarmFlow 16s ease-in-out infinite alternate, heroWarmPulse 9s ease-in-out infinite;
}

.space-hero .shared-warm-flow::before {
  content: "";
  position: absolute;
  inset: -28% -24%;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 16% 14%, rgba(255, 176, 98, 0.08) 0%, rgba(255, 176, 98, 0.026) 36%, transparent 74%),
    radial-gradient(36% 30% at 50% 50%, rgba(255, 160, 74, 0.07) 0%, rgba(255, 160, 74, 0.022) 36%, transparent 74%),
    radial-gradient(34% 28% at 84% 86%, rgba(255, 198, 132, 0.07) 0%, rgba(255, 198, 132, 0.022) 36%, transparent 74%);
  background-size: 192% 162%, 182% 156%, 172% 148%;
  opacity: 0.11;
  filter: blur(9px);
  animation: heroWarmBlobDriftA 18s ease-in-out infinite alternate;
}

.space-hero .shared-warm-flow::after {
  content: "";
  position: absolute;
  inset: -26% -22%;
  pointer-events: none;
  background:
    radial-gradient(40% 32% at 10% 78%, rgba(255, 182, 106, 0.07) 0%, rgba(255, 182, 106, 0.022) 38%, transparent 74%),
    radial-gradient(36% 28% at 44% 16%, rgba(255, 168, 84, 0.07) 0%, rgba(255, 168, 84, 0.022) 36%, transparent 72%),
    radial-gradient(42% 34% at 78% 54%, rgba(255, 205, 143, 0.07) 0%, rgba(255, 205, 143, 0.022) 36%, transparent 72%);
  background-size: 182% 154%, 170% 146%, 194% 162%;
  opacity: 0.09;
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: heroWarmBlobDriftB 14s ease-in-out infinite alternate-reverse;
}

.space-hero .shared-warm-floor {
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: -22%;
  height: 62%;
  pointer-events: none;
  background:
    radial-gradient(34% 46% at 10% 74%, rgba(255, 178, 98, 0.07) 0%, rgba(255, 178, 98, 0.022) 42%, transparent 76%),
    radial-gradient(30% 40% at 34% 82%, rgba(255, 162, 76, 0.07) 0%, rgba(255, 162, 76, 0.022) 40%, transparent 74%),
    radial-gradient(36% 44% at 62% 78%, rgba(255, 194, 128, 0.07) 0%, rgba(255, 194, 128, 0.022) 40%, transparent 74%),
    radial-gradient(32% 40% at 88% 72%, rgba(255, 169, 84, 0.07) 0%, rgba(255, 169, 84, 0.022) 40%, transparent 74%);
  background-size: 186% 168%, 174% 162%, 182% 166%, 176% 160%;
  filter: blur(9px);
  opacity: 0.1;
  mix-blend-mode: screen;
  will-change: transform, background-position, opacity;
  animation: heroWarmFloorFlow 18s ease-in-out infinite alternate;
}

.space-hero .shared-starfield {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.88) 0 6px, transparent 7.6px),
    radial-gradient(circle at 16% 72%, rgba(255, 255, 255, 0.7) 0 5.2px, transparent 6.8px),
    radial-gradient(circle at 24% 42%, rgba(255, 229, 204, 0.85) 0 5.4px, transparent 7px),
    radial-gradient(circle at 34% 16%, rgba(255, 255, 255, 0.78) 0 5.4px, transparent 7px),
    radial-gradient(circle at 42% 82%, rgba(255, 255, 255, 0.8) 0 5.4px, transparent 7px),
    radial-gradient(circle at 56% 26%, rgba(255, 255, 255, 0.75) 0 5.2px, transparent 6.8px),
    radial-gradient(circle at 64% 60%, rgba(255, 228, 197, 0.82) 0 5.8px, transparent 7.4px),
    radial-gradient(circle at 76% 14%, rgba(255, 255, 255, 0.74) 0 5.2px, transparent 6.8px),
    radial-gradient(circle at 84% 48%, rgba(255, 255, 255, 0.83) 0 5.8px, transparent 7.4px),
    radial-gradient(circle at 92% 78%, rgba(255, 255, 255, 0.76) 0 5.2px, transparent 6.8px);
  opacity: 0.52;
  animation: starTwinkle 5.6s ease-in-out infinite;
}

.space-hero .shared-ring {
  position: absolute;
  border-radius: 9999px;
  border: 1px solid rgba(245, 112, 17, 0.34);
  opacity: 0.45;
  will-change: transform, opacity;
}

.space-hero .shared-ring-1 {
  width: clamp(170px, 20vw, 280px);
  height: clamp(170px, 20vw, 280px);
  left: clamp(-90px, -3vw, -20px);
  top: clamp(20px, 5vw, 80px);
  animation: heroRingPulse 8.5s ease-in-out infinite;
}

.space-hero .shared-ring-2 {
  width: clamp(145px, 16vw, 230px);
  height: clamp(145px, 16vw, 230px);
  right: clamp(8px, 4vw, 80px);
  top: clamp(24px, 4vw, 70px);
  border-color: rgba(0, 33, 71, 0.28);
  animation: heroRingPulse 10s ease-in-out infinite reverse;
}

.space-hero .shared-ring-3 {
  width: clamp(130px, 14vw, 210px);
  height: clamp(130px, 14vw, 210px);
  right: clamp(-50px, 1vw, 24px);
  bottom: clamp(8px, 2vw, 36px);
  border-color: rgba(245, 112, 17, 0.28);
  animation: heroRingPulse 11.5s ease-in-out infinite;
}

.space-hero .shared-dot {
  position: absolute;
  border-radius: 9999px;
  opacity: 0.7;
  filter: blur(0.6px);
  box-shadow: 0 0 22px currentColor;
  will-change: transform, opacity;
}

.space-hero .shared-dot-1 {
  width: 16px;
  height: 16px;
  left: 8%;
  top: 22%;
  color: rgba(245, 112, 17, 0.65);
  background: currentColor;
  animation: heroDotDriftA 9s ease-in-out infinite;
}

.space-hero .shared-dot-2 {
  width: 18px;
  height: 18px;
  left: 86%;
  top: 22%;
  color: rgba(0, 33, 71, 0.5);
  background: currentColor;
  animation: heroDotDriftB 10.5s ease-in-out infinite;
}

.space-hero .shared-dot-3 {
  width: 12px;
  height: 12px;
  left: 90%;
  top: 62%;
  color: rgba(245, 112, 17, 0.52);
  background: currentColor;
  animation: heroDotDriftC 8.6s ease-in-out infinite;
}

.space-hero .shared-dot-4 {
  width: 14px;
  height: 14px;
  left: 16%;
  top: 78%;
  color: rgba(0, 33, 71, 0.42);
  background: currentColor;
  animation: heroDotDriftD 11.2s ease-in-out infinite;
}

@keyframes heroDotDriftA {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.38; }
  50% { transform: translate3d(18px, -16px, 0); opacity: 0.64; }
}

@keyframes heroDotDriftB {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.34; }
  50% { transform: translate3d(-20px, 14px, 0); opacity: 0.56; }
}

@keyframes heroDotDriftC {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.3; }
  50% { transform: translate3d(12px, -12px, 0); opacity: 0.52; }
}

@keyframes heroDotDriftD {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.28; }
  50% { transform: translate3d(-14px, -10px, 0); opacity: 0.48; }
}

@keyframes heroAuroraFlow {
  0% {
    transform: translate3d(-4%, -2%, 0) scale(1);
    background-position: 0% 50%;
  }
  100% {
    transform: translate3d(4%, 2%, 0) scale(1.05);
    background-position: 100% 50%;
  }
}

@keyframes cosmosDrift {
  0% {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
    opacity: 0.45;
  }
  100% {
    transform: translate3d(1.8%, 1.3%, 0) scale(1.04);
    opacity: 0.65;
  }
}

@keyframes heroWarmFlow {
  0% {
    transform: translate3d(-9%, -4%, 0) scale(1.01) rotate(-0.9deg);
    background-position: 8% 22%, 14% 74%, 72% 18%, 94% 68%, 52% 42%;
  }
  23% {
    transform: translate3d(4%, 2%, 0) scale(1.05) rotate(0.45deg);
    background-position: 18% 30%, 34% 66%, 62% 30%, 82% 60%, 42% 56%;
  }
  47% {
    transform: translate3d(-2%, 7%, 0) scale(1.08) rotate(-0.2deg);
    background-position: 30% 40%, 48% 56%, 52% 42%, 64% 48%, 58% 62%;
  }
  69% {
    transform: translate3d(8%, 1%, 0) scale(1.06) rotate(0.7deg);
    background-position: 44% 24%, 62% 64%, 40% 36%, 52% 62%, 34% 50%;
  }
  100% {
    transform: translate3d(3%, -6%, 0) scale(1.04) rotate(-0.6deg);
    background-position: 24% 14%, 72% 72%, 26% 44%, 46% 66%, 62% 52%;
  }
}

@keyframes heroWarmPulse {
  0%, 100% { opacity: 0.58; }
  24% { opacity: 0.72; }
  52% { opacity: 0.62; }
  76% { opacity: 0.76; }
}

@keyframes heroWarmBlobDriftA {
  0% {
    transform: translate3d(-16%, 8%, 0) scale(1);
    background-position: 8% 16%, 54% 48%, 94% 82%;
    opacity: 0.3;
  }
  52% {
    transform: translate3d(2%, -6%, 0) scale(1.12);
    background-position: 34% 26%, 46% 58%, 76% 60%;
    opacity: 0.52;
  }
  100% {
    transform: translate3d(16%, 6%, 0) scale(1.08);
    background-position: 58% 22%, 36% 62%, 58% 52%;
    opacity: 0.38;
  }
}

@keyframes heroWarmBlobDriftB {
  0% {
    transform: translate3d(18%, -8%, 0) scale(1);
    background-position: 12% 76%, 38% 18%, 82% 58%;
    opacity: 0.24;
  }
  48% {
    transform: translate3d(-4%, 6%, 0) scale(1.1);
    background-position: 36% 56%, 60% 26%, 66% 42%;
    opacity: 0.46;
  }
  100% {
    transform: translate3d(-18%, 8%, 0) scale(1.07);
    background-position: 58% 64%, 78% 32%, 42% 38%;
    opacity: 0.34;
  }
}

@keyframes heroWarmFloorFlow {
  0% {
    transform: translate3d(-10%, 5%, 0) scale(1);
    background-position: 6% 72%, 24% 84%, 58% 78%, 92% 70%;
    opacity: 0.4;
  }
  34% {
    transform: translate3d(2%, -2%, 0) scale(1.08);
    background-position: 26% 76%, 42% 80%, 50% 74%, 76% 68%;
    opacity: 0.62;
  }
  68% {
    transform: translate3d(9%, 4%, 0) scale(1.04);
    background-position: 46% 70%, 58% 84%, 36% 80%, 60% 72%;
    opacity: 0.7;
  }
  100% {
    transform: translate3d(-4%, -1%, 0) scale(1.06);
    background-position: 32% 74%, 70% 82%, 24% 76%, 48% 70%;
    opacity: 0.48;
  }
}

@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.38;
    filter: brightness(0.9);
  }
  50% {
    opacity: 0.72;
    filter: brightness(1.2);
  }
}

@keyframes heroRingPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.28;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-hero .shared-cosmos-bg,
  .space-hero .shared-aurora,
  .space-hero .shared-warm-flow,
  .space-hero .shared-warm-flow::before,
  .space-hero .shared-warm-flow::after,
  .space-hero .shared-warm-floor,
  .space-hero .shared-starfield,
  .space-hero .shared-ring,
  .space-hero .shared-dot {
    animation: none !important;
  }
}

/* Mobile: disable hero motion, keep static layers */
@media (max-width: 767px) {
  .space-hero .shared-cosmos-bg,
  .space-hero .shared-aurora,
  .space-hero .shared-warm-flow,
  .space-hero .shared-warm-flow::before,
  .space-hero .shared-warm-flow::after,
  .space-hero .shared-warm-floor,
  .space-hero .shared-starfield,
  .space-hero .shared-ring,
  .space-hero .shared-dot {
    animation: none !important;
  }
  .space-hero .shared-cosmos-bg { opacity: 0.34; }
  .space-hero .shared-aurora { opacity: 0.4; filter: blur(18px); }
  .space-hero .shared-warm-flow { opacity: 0.11; }
  .space-hero .shared-warm-flow::before,
  .space-hero .shared-warm-flow::after,
  .space-hero .shared-warm-floor { opacity: 0.08; }
  .space-hero .shared-starfield { opacity: 0.28; }
  .space-hero .shared-ring { opacity: 0.28; }
  .space-hero .shared-dot { opacity: 0.38; }
  .space-hero .shared-ring-3,
  .space-hero .shared-dot-3,
  .space-hero .shared-dot-4 {
    display: none;
  }
}