/* =====================================
   Utility: fadeIn animation
   ===================================== */
/* 初期状態：非表示＋少し下げておく */
.fadeIn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Intersection Observer が .is-visible を付与したら発火 */
.fadeIn.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* =====================================
   Hero animation
   ===================================== */

@keyframes fadeUp {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 初期状態を非表示に */
.hero__decor-text__tsuki {
  opacity: 0;
}
.hero__decor-text__no {
  opacity: 0;
  transform: translateX(0) translateY(-10px);
}
.hero__decor-text__shizuku {
  opacity: 0;
  transform: translateX(10px) translateY(-20px);
}

.tagline-part,
.hero__image {
  opacity: 0;
}

/* .is-animated が付いたら順番に再生 */
.hero.is-animated .hero__decor-text__tsuki {
  animation: fadeUp 0.6s 0s forwards;
}
.hero.is-animated .hero__decor-text__no {
  animation: fadeUp 0.6s 0.4s forwards;
}
.hero.is-animated .hero__decor-text__shizuku {
  animation: fadeUp 0.6s 0.8s forwards;
}

.hero.is-animated .tagline-part.l1 {
  animation: fadeUp 0.6s 1s forwards;
}
.hero.is-animated .tagline-part.l2 {
  animation: fadeUp 0.6s 1.4s forwards;
}
.hero.is-animated .tagline-part.l3 {
  animation: fadeUp 0.6s 1.8s forwards;
}

.hero.is-animated .hero__image {
  animation: fadeUp 0.6s 0s forwards;
}