@tailwind base;
@tailwind components;
@tailwind utilities;

/* ここからカスタムアニメーション */
@layer utilities {
  @keyframes scroll-down {
    0% { transform: translateY(-100%); }
    70% { transform: translateY(100%); }
    100% { transform: translateY(100%); }
  }
  .animate-scroll-down {
    animation: scroll-down 2s infinite;
  }
  
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-fadeInUp {
    animation: fadeInUp 1.5s ease-out forwards;
  }

  .delay-700 {
    animation-delay: 0.7s;
  }

  /* 👇 テキストのフェードイン・フェードアウト切り替え用アニメーションを追加 */
  @keyframes textFadeInOut {
    0%, 100% { opacity: 0; transform: translateY(10px); }
    10%, 90% { opacity: 1; transform: translateY(0); }
  }

  .animate-text-fade-in-out {
    animation: textFadeInOut 5s ease-in-out infinite;
  }

  /* hidden/activeの見た目を制御 */
  .text-set.hidden { opacity: 0; display: none; }
  .text-set.active { opacity: 1; display: block; }
}