.home-extra-section__inner {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0c0c12 0%, #06060a 50%, #000000 100%);
  width: 100%;
  margin: 0;
}

.space-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #0c0c12 0%, #06060a 50%, #000000 100%);
  overflow: visible;
  -webkit-mask-image: linear-gradient(
    to right,
    black 20%,
    black 40%,
    black 60%,
    black 80%
  );
  mask-image: linear-gradient(
    to right,
    black 20%,
    black 40%,
    black 60%,
    black 80%
  );
}

/* Static star field; stars use icon via .blink-star */
.space-background__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.static-star {
  position: absolute;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  animation: static-star-blink ease-in-out infinite;
  transform: translate(-50%, -50%);
  will-change: opacity, transform;
}

@keyframes static-star-blink {
  0% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

.blink-star {
  position: absolute;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M10 0L11.4142 8.58579L20 10L11.4142 11.4142L10 20L8.58579 11.4142L0 10L8.58579 8.58579L10 0Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
  animation: blink-star linear infinite;
  transform: translate(-50%, -50%);
  will-change: opacity;
  z-index: 5;
}

@keyframes blink-star {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

.meteor {
  position: absolute;
  width: 300px;
  height: 1px;
  z-index: 15;
  pointer-events: none;
  transform: rotate(-45deg);
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  opacity: 0;
  animation: meteor 5s linear infinite;
  will-change: margin, opacity;
}
.meteor:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  margin-top: -2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 15px 3px #fff;
}

.meteor-trail {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

@keyframes meteor {
  0% {
    opacity: 1;
    margin-top: -300px;
    margin-right: -300px;
    margin-left: 0;
  }
  12% {
    opacity: 0;
  }
  15% {
    margin-top: 300px;
    margin-left: -600px;
    margin-right: 0;
    opacity: 0;
  }
  100% {
    margin-top: 300px;
    margin-left: -600px;
    margin-right: 0;
    opacity: 0;
  }
}

.planet-arc {
  position: absolute;
  z-index: 1;
  width: 130vw;
  height: 100vw;
  left: -25vw;
  bottom: -80vw;
  pointer-events: none;
}

.planet-arc__circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 150vw;
  height: 100vw;
  border-radius: 50%;
  border: none;
  outline: none;
  pointer-events: none;
  transform-origin: 50% 100%;
}

.planet-arc__circle--outer {
  transform: scale(0.945);
  background: var(--planet-arc-outer, rgba(65, 105, 225, 0.85));
  transition:
    background 0.6s ease-in-out,
    box-shadow 0.6s ease-in-out;
}

.planet-arc__circle--outer-inner {
  transform: scale(0.944);
  background: var(--planet-arc-outer, rgba(65, 105, 225, 0.85));
  transition: background 0.6s ease-in-out;
}

.planet-arc__circle--inner {
  transform: scale(0.943);
  background: var(--planet-arc-inner, rgba(135, 206, 250, 0.9));
  transition: background 0.6s ease-in-out;
}

.planet-arc__circle--white {
  transform: scale(0.942);
  background: rgba(255, 255, 255, 0.98);
}

.planet-arc__circle--black {
  transform: scale(0.94);
  background: radial-gradient(
    ellipse 100% 70% at 50% 15%,
    #1c2438 0%,
    #12182a 15%,
    #0a0e16 30%,
    #040508 50%,
    #010102 70%,
    #000000 100%
  );
}

.home-extra-section__content {
  transform: translateY(-8vh);
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.home-extra-section__content * {
  pointer-events: auto;
}

.planet-arc.state-design .planet-arc__circle--inner {
  background: rgba(135, 206, 250, 0.9);
}
.planet-arc.state-design .planet-arc__circle--outer,
.planet-arc.state-design .planet-arc__circle--outer-inner {
  background: rgba(65, 105, 225, 0.85);
}
.planet-arc.state-design .planet-arc__circle--outer {
  box-shadow:
    0 -4px 16px rgba(173, 216, 230, 0.3),
    0 -8px 28px rgba(135, 206, 250, 0.25),
    0 -16px 44px rgba(65, 105, 225, 0.2),
    0 -24px 60px rgba(65, 105, 225, 0.14),
    0 -36px 80px rgba(30, 60, 200, 0.08),
    0 -48px 100px rgba(30, 60, 200, 0.05);
}

.planet-arc.state-develop .planet-arc__circle--inner {
  background: rgba(180, 80, 230, 0.85);
}
.planet-arc.state-develop .planet-arc__circle--outer,
.planet-arc.state-develop .planet-arc__circle--outer-inner {
  background: rgba(138, 43, 226, 0.8);
}
.planet-arc.state-develop .planet-arc__circle--outer {
  box-shadow:
    0 -4px 16px rgba(213, 100, 249, 0.3),
    0 -8px 28px rgba(180, 80, 230, 0.25),
    0 -16px 44px rgba(138, 43, 226, 0.2),
    0 -24px 60px rgba(138, 43, 226, 0.14),
    0 -36px 80px rgba(100, 20, 200, 0.08),
    0 -48px 100px rgba(100, 20, 200, 0.05);
}

.planet-arc.state-deliver .planet-arc__circle--inner {
  background: rgba(255, 99, 71, 0.85);
}
.planet-arc.state-deliver .planet-arc__circle--outer,
.planet-arc.state-deliver .planet-arc__circle--outer-inner {
  background: rgba(255, 69, 0, 0.8);
}
.planet-arc.state-deliver .planet-arc__circle--outer {
  box-shadow:
    0 -4px 16px rgba(255, 150, 120, 0.3),
    0 -8px 28px rgba(255, 99, 71, 0.25),
    0 -16px 44px rgba(255, 69, 0, 0.2),
    0 -24px 60px rgba(255, 69, 0, 0.14),
    0 -36px 80px rgba(220, 50, 0, 0.08),
    0 -48px 100px rgba(220, 50, 0, 0.05);
}

.home-extra-section__inner h1 {
  font-weight: 400;
  font-size: clamp(28px, 2vw + 22px, 46px);
  line-height: 1.2;
}

.home-extra-section__scroll-text {
  font-weight: 300;
  font-size: clamp(20px, 1.7vw + 14px, 35px);
  line-height: 1.6;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .home-extra-section__inner {
    min-height: 100vh;
  }

  .planet-arc {
    bottom: -70vw;
  }
}

@media (max-width: 768px) {
  .planet-arc {
    bottom: -70vw;
  }

  /* Lower star concentration on mobile */
  .space-background .static-star:nth-child(2n) {
    display: none;
  }
  .space-background .blink-star:nth-child(2n) {
    display: none;
  }
}

.active-highlight {
  font-weight: 500;
  transform: scale(1.1);
  letter-spacing: 1px;
}

.gradient-text-1 {
  background: linear-gradient(90deg, #0080ef, #00a5a8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-2 {
  background: linear-gradient(90deg, #8026c6, #ef0589);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-3 {
  background: linear-gradient(90deg, #fa504a, #f9bb2c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-extra-section__scroll-text .scroll-letter {
  display: inline-block;
  opacity: 0.25;
}

.home-extra-section__scroll-text .word-span > span {
  font-weight: normal;
}

.word-span {
  display: inline-block;
  white-space: nowrap;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.heading-entrance {
  animation: fade-in-up 1s ease-out 0.3s both;
}