/* =============================================
   top.css - Atlas Intelligence トップページ固有スタイル
   ============================================= */

/* =============================================
   Hero Section (HeroB)
   ============================================= */
.hero-section__atlas {
  width: 76%;
  height: 60%;
  left: 12%;
  top: 62%;
}

.hero-section__sphere {
  perspective: 1000px;
  width: 64%;
  height: 64%;
  left: 18%;
  top: 10%;
}

.hero-section__word {
  opacity: 0;
  transform: translateY(24px);
}

.hero-section.is-animated .hero-section__word {
  animation: heroWordIn 0.8s ease-out forwards;
}

.hero-section.is-animated .hero-section__text .hero-section__word:nth-child(1) { animation-delay: 0.5s; }
.hero-section.is-animated .hero-section__text .hero-section__word:nth-child(2) { animation-delay: 0.6s; }
.hero-section.is-animated .hero-section__text .hero-section__word:nth-child(3) { animation-delay: 0.7s; }
.hero-section.is-animated .hero-section__text p .hero-section__word:nth-child(1) { animation-delay: 0.8s; }
.hero-section.is-animated .hero-section__text p .hero-section__word:nth-child(2) { animation-delay: 0.9s; }

.hero-section__visual {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
}

.hero-section.is-animated .hero-section__visual {
  animation: heroVisualIn 1.5s ease-out forwards;
}

@keyframes heroWordIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroVisualIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* =============================================
   Sphere ring CSS classes
   ============================================= */

/* Latitude rings */
.sphere-ring--lat-0  { transform: rotateX(0deg);   border: 1px solid rgba(30,58,138,0.2); }
.sphere-ring--lat-30 { transform: rotateX(30deg);  border: 1px solid rgba(30,58,138,0.2); }
.sphere-ring--lat-60 { transform: rotateX(60deg);  border: 1px solid rgba(30,58,138,0.2); }
.sphere-ring--lat-90 { transform: rotateX(90deg);  border: 1px solid rgba(30,58,138,0.2); }
.sphere-ring--lat-120{ transform: rotateX(120deg); border: 1px solid rgba(30,58,138,0.2); }
.sphere-ring--lat-150{ transform: rotateX(150deg); border: 1px solid rgba(30,58,138,0.2); }

/* Longitude rings */
.sphere-ring--lon-0  { transform: rotateY(0deg);   border: 1px solid rgba(30,58,138,0.25); }
.sphere-ring--lon-30 { transform: rotateY(30deg);  border: 1px solid rgba(30,58,138,0.25); }
.sphere-ring--lon-60 { transform: rotateY(60deg);  border: 1px solid rgba(30,58,138,0.25); }
.sphere-ring--lon-90 { transform: rotateY(90deg);  border: 1px solid rgba(30,58,138,0.25); }
.sphere-ring--lon-120{ transform: rotateY(120deg); border: 1px solid rgba(30,58,138,0.25); }
.sphere-ring--lon-150{ transform: rotateY(150deg); border: 1px solid rgba(30,58,138,0.25); }

/* Diagonal orbit ring */
.sphere-ring--orbit {
  transform: rotateX(45deg) rotateY(45deg);
  border: 1px solid rgba(43,76,157,0.3);
  width: 110%;
  height: 110%;
  left: -5%;
  top: -5%;
}

.sphere-dot--lat {
  top: 10%;
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: #1e3a8a;
  transform: translateX(-50%);
}

.sphere-dot--lon {
  top: 50%;
  left: -2px;
  width: 6px;
  height: 6px;
  background-color: #1e3a8a;
  transform: translateY(-50%);
}

.sphere-dot--orbit {
  top: 20%;
  right: 20%;
  width: 8px;
  height: 8px;
  background-color: #2b4c9d;
  box-shadow: 0 0 10px rgba(43,76,157,0.6);
}