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

@layer base {
  /* =========================
     全体ベース設定 (Noto Sans JP)
     ========================= */
  html, body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px; /* モバイル基準 */
    line-height: 1.7; /* 読みやすさ重視の行間 */
    color: #222222; /* 濃いグレーで高級感を演出 */
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.03em;
  }

  @media (min-width: 768px) {
    body {
      font-size: 17px; /* PCでは少し大きくして視認性アップ */
    }
  }

  /* =========================
     見出し設定 (Noto Serif JP)
     ========================= */
  h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    color: #111111;
    letter-spacing: 0.05em; /* 見出しは少し字間を広げる */
  }

  h2 {
    font-size: 32px;
    line-height: 1.4;
  }

  h3 {
    font-size: 24px;
    line-height: 1.4;
  }

  /* 強調テキスト */
  strong, b {
    font-weight: 700;
  }
}

/* ここからカスタムアニメーション */
@layer utilities {
  /* 初期状態 */
  .scroll-trigger {
    opacity: 0 !important; /* 初期は強制的に消す */
    transform: translateY(30px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    will-change: opacity, transform;
  }

  /* JSによってクラスが操作された時（!importantで上書き） */
  .scroll-trigger.opacity-100 {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  @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; }

    /* 補助用のユーティリティクラス */
  .font-serif-jp {
    font-family: "Noto Serif JP", serif;
  }
  .font-sans-jp {
    font-family: "Noto Sans JP", sans-serif;
  }
  /* UI・ボタン用（太字で視認性を高める） */
  .font-ui {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
  }
}