/* ページ表示・スクロール時の軽いモーション（!important は使いません） */

/* --- Hero（初回のみ） --- */
.hero-text h1 {
  opacity: 0;
  animation: motion-hero-title 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.14s forwards;
}

.hero-text .jp-name {
  opacity: 0;
  animation: motion-hero-jpname 0.66s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
}

.hero .hero-image {
  opacity: 0;
  animation: motion-hero-visual 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.46s forwards;
}

@keyframes motion-hero-title {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motion-hero-jpname {
  from {
    opacity: 0;
    transform: translateY(12px);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes motion-hero-visual {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- セクション見出し（ビューポート進入時） --- */
.section-title {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.62s ease-out,
    transform 0.62s ease-out;
  transition-delay: 0s;
}

.section-title.motion-in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* --- PROFILE メイン（カード全体） --- */
#profile .profile-card {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.62s ease-out,
    transform 0.62s ease-out;
  transition-delay: 0s;
}

#profile .profile-card.motion-in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* --- SCHEDULE カレンダー枠 --- */
#schedule .calendar-container {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.62s ease-out,
    transform 0.62s ease-out;
  transition-delay: 0s;
}

#schedule .calendar-container.motion-in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* --- FANCLUB カード --- */
.fanclub-card {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.62s ease-out,
    transform 0.62s ease-out;
  transition-delay: 0s;
}

.fanclub-card.motion-in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* --- NEWS リスト（描画後に先頭のみ段階表示、最大8段） --- */
#news-list.news-motion-ready .news-item {
  opacity: 0;
  animation: motion-news-row 0.5s ease-out forwards;
}

#news-list.news-motion-ready .news-item:nth-child(1) {
  animation-delay: 0ms;
}
#news-list.news-motion-ready .news-item:nth-child(2) {
  animation-delay: 70ms;
}
#news-list.news-motion-ready .news-item:nth-child(3) {
  animation-delay: 140ms;
}
#news-list.news-motion-ready .news-item:nth-child(4) {
  animation-delay: 210ms;
}
#news-list.news-motion-ready .news-item:nth-child(5) {
  animation-delay: 280ms;
}
#news-list.news-motion-ready .news-item:nth-child(6) {
  animation-delay: 350ms;
}
#news-list.news-motion-ready .news-item:nth-child(7) {
  animation-delay: 420ms;
}
#news-list.news-motion-ready .news-item:nth-child(8) {
  animation-delay: 490ms;
}
#news-list.news-motion-ready .news-item:nth-child(n + 9) {
  animation-delay: 490ms;
}

@keyframes motion-news-row {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- アクセシビリティ：動きを減らす設定 --- */
@media (prefers-reduced-motion: reduce) {
  .hero-text h1,
  .hero-text .jp-name,
  .hero .hero-image {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .section-title {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  #profile .profile-card,
  #schedule .calendar-container,
  .fanclub-card {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  #news-list.news-motion-ready .news-item {
    animation: none;
    opacity: 1;
  }
}

html.motion-reduced .hero-text h1,
html.motion-reduced .hero-text .jp-name,
html.motion-reduced .hero .hero-image {
  animation: none;
  opacity: 1;
  transform: none;
  clip-path: none;
}

html.motion-reduced .section-title {
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 0s;
}

html.motion-reduced #profile .profile-card,
html.motion-reduced #schedule .calendar-container {
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 0s;
}

html.motion-reduced #news-list.news-motion-ready .news-item {
  animation: none;
  opacity: 1;
}