@charset "utf-8";

/* ===================================================
   1. sectionのスクロールフェードイン
=================================================== */
section:not(#area_about) {
  opacity: 0;
  transform: translateY(55px);
  transition: 
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), 
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

section:not(#area_about).is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================
   2. #area_about：2行のテキスト（チラつき防止＋1文字ずつ表示）
=================================================== */
#area_about .article_about > p:nth-of-type(1),
#area_about .article_about > p:nth-of-type(2) {
  visibility: hidden;
}

#area_about .article_about > p:nth-of-type(1).is-ready,
#area_about .article_about > p:nth-of-type(2).is-ready {
  visibility: visible;
}

#area_about .article_about > p:nth-of-type(1) .char,
#area_about .article_about > p:nth-of-type(2) .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}

#area_about.is-visible .article_about > p:nth-of-type(1) .char,
#area_about.is-visible .article_about > p:nth-of-type(2) .char {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================
   3. #area_about：2行のテキスト以外の要素（ページ表示と同時にフェードイン）
=================================================== */
#area_about .article_about > *:not(p:nth-of-type(1)):not(p:nth-of-type(2)) {
  opacity: 0;
  transform: translateY(45px);
  animation: aboutFadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
  will-change: opacity, transform;
}

@keyframes aboutFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(45px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================================
   4. 画像（jpg/png）の1枚ずつ順次フェードイン
=================================================== */
img.fade-img-target {
  opacity: 0 !important;
  transform: translateY(28px) !important;
  transition: 
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: var(--img-delay, 0s) !important;
  will-change: opacity, transform;
}

img.fade-img-target.is-img-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ===================================================
   5. #みらいACTION：若葉 & カウントの鼓動（パルス）
=================================================== */
#count #bud {
  display: inline-block;
  transform-origin: bottom center;
  animation: budPulse 3.2s ease-in-out infinite;
}

@keyframes budPulse {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-4px) rotate(4deg) scale(1.04);
  }
  65% {
    transform: translateY(0) rotate(-3deg) scale(0.98);
  }
}

#countnumber {
  display: inline-block;
  transform-origin: center center;
  animation: countPulse 2.8s ease-in-out infinite;
}

@keyframes countPulse {
  0%, 75%, 100% {
    transform: scale(1);
  }
  85% {
    transform: scale(1.18) rotate(-2deg);
  }
  92% {
    transform: scale(1.05) rotate(1deg);
  }
}

/* ===================================================
   6. アクション例：キャラクターのピョコピョコ跳ね
=================================================== */
#example_01 > div:nth-of-type(2) img,
#example_02 > div:nth-of-type(1) img,
#example_03 > div:nth-of-type(2) img {
  display: inline-block;
  animation: hopCharacter 3.6s ease-in-out infinite;
}

#example_01 > div:nth-of-type(2) img {
  animation-delay: 0s;
}
#example_02 > div:nth-of-type(1) img {
  animation-delay: 1.2s;
}
#example_03 > div:nth-of-type(2) img {
  animation-delay: 2.4s;
}

@keyframes hopCharacter {
  0%, 82%, 100% {
    transform: translateY(0) scale(1);
  }
  88% {
    transform: translateY(-10px) scale(1.04);
  }
  94% {
    transform: translateY(2px) scale(0.98);
  }
}

/* ===================================================
   出演者枠の斜め線を画像より前面に表示
=================================================== */
ul#bousai_appearance > li > p:nth-of-type(1),
ul.dinosaur_appearance > li > p:nth-of-type(1) {
  position: relative;
  z-index: 1;
}

/* 斜め線（::before と ::after）を前面に配置 */
ul#bousai_appearance > li > p:nth-of-type(1)::before,
ul#bousai_appearance > li > p:nth-of-type(1)::after,
ul.dinosaur_appearance > li > p:nth-of-type(1)::before,
ul.dinosaur_appearance > li > p:nth-of-type(1)::after {
  z-index: 2 !important;
  pointer-events: none; /* マウス操作を邪魔しないようにする */
}