/* ===========================
  ローディング画面（通常時）
=========================== */
  .loading-screen {
    /* 3.6s後に開始 0.6s間動作 */
    animation: fadeOut 0.8s ease-in-out 4.1s forwards;
  }

/* ===========================
  ローディングテキスト
=========================== */
  .loading-text {
    /* 1.6s後にフェードアウト開始 */
    animation: textFadeOut 0.4s ease-in-out 2.2s forwards;
  }
  .loading-char {
    opacity: 0;
    animation: wave 0.6s ease-in-out forwards;
  }


/* ===========================
  ローディングロゴ
=========================== */
  .loading-logo {
    opacity: 0;
    /* 2.1s後にブラーフェードイン開始 */
    animation: blurFadeIn 0.8s ease-out 2.7s forwards;
  }

  /* 文字の波打ち */
  @keyframes wave {
    0% {
      opacity: 0;
      transform: translateY(18px);
    }
    50% {
      opacity: 1;
      transform: translateY(-6px);
    }
    75% {
      transform: translateY(3px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* テキストフェードアウト */
  @keyframes textFadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  /* ロゴのブラーフェードイン */
  @keyframes blurFadeIn {
    0% {
      opacity: 0;
      filter: blur(16px);
      transform: translate(-50%, -50%) scale(1.04);
    }
    100% {
      opacity: 1;
      filter: blur(0px);
      transform: translate(-50%, -50%) scale(1);
    }
  }

/* ===========================
  ページ遷移オーバーレイ
=========================== */
  /* 初期設定では非表示 */
  .page-transition {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
  }
  /* フェードアウト開始（現在ページを覆う） */
  .page-transition.is-leave {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
  }
  /* 遷移先ページ：最初からオーバーレイで覆った状態で始まる */
  .page-transition.is-enter {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none; /* 即座に表示 */
  }
  /* フェードイン（遷移先ページのオーバーレイを消す） */
  .page-transition.is-enter.is-fadeIn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.9s ease-in-out, visibility 0.9s ease-in-out;
  }


/* =========================================================
  Header
========================================================= */
  /* ヘッダー（全ページ共通ベース） */
  .header {
    opacity: 0;
    animation: fadeIn 0.8s ease-in-out 0.3s forwards;
  }

/* ===========================
  フロントページのみ
  ローディング完了まで待機
=========================== */
  .home .header {
    /* ローディング完了後（5s）にフェードイン */
    animation: fadeIn 0.8s ease-out 5.0s forwards;
  }
  /* フロントページでも、サイト内遷移時は即時表示 */
  .home .header.skip {
    animation: fadeIn 0.8s ease-in-out 0.3s forwards;
  }

  /* サイト内遷移時は即時表示 */
  /* main.jsでskipクラスを付与 */
  .header.skip {
    animation: fadeIn 0.8s ease-in-out 0.3s forwards;
  }

/* ===========================
  メインコンテンツ（全ページ共通ベース）
  フロントページ以外は即時フェードイン
=========================== */
  .main {
    opacity: 0;
    /* ローディング完了後（4.4s）にフェードイン */
    animation: fadeIn 0.8s ease-out 0.3s forwards;
  }

  /* フロントページのみローディング完了まで待機 */
  .home .main {
    animation: fadeIn 0.8s ease-out 5.0s forwards;
  }
  /* サイト内遷移時はローディングスキップ・即時表示 */
  .home .loading-screen.skip ~ * .main,
  .home .loading-screen.skip + .main {
    animation: fadeIn 0.8s ease-out 0.3s forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      /* transform: translateY(8px); */
    }
    to {
      opacity: 1;
      /* transform: translateY(0); */
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
      visibility: visible;
    }
    to {
      opacity: 0;
      visibility: hidden;
    }
  }