/* Loading Animation CSS */

/* アニメーションコンテナのスタイル */
#animation,
#animation-sakura {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
}

/* アニメーション用の背景 */
#animation {
  background-color: transparent;
  z-index: 9999;
  display: none;
  /* 確実に画面全体を覆う */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

#animation-sakura {
  z-index: 10000;
  display: none;
}

/* オプション: アニメーション中にスクロールを無効化したい場合 */
body.loading-animation-active {
  overflow: hidden;
}

/* オプション: フェードイン・フェードアウト効果 */
#animation,
#animation-sakura {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

#animation.fade-out,
#animation-sakura.fade-out {
  opacity: 0;
}

/* Barba.js のページ遷移時のコンテナスタイル */
.barba-container {
  position: relative;
}

/* オプション: ローディング中のコンテンツの非表示 */
[data-barba="container"] {
  transition: opacity 0.3s ease-in-out;
}

[data-barba="container"].is-loading {
  opacity: 0;
}

/* モバイル対応 */
@media (max-width: 768px) {
  #animation,
  #animation-sakura {
    /* モバイルでの調整が必要な場合はここに追加 */
  }
}

/* アクセシビリティ: アニメーションを減らす設定の場合 */
@media (prefers-reduced-motion: reduce) {
  #animation,
  #animation-sakura {
    animation: none !important;
    transition: none !important;
  }
}

/* Z-indexの管理（他の要素との競合を避けるため） */
/* 必要に応じて調整してください */
/*
.header { z-index: 100; }
.modal { z-index: 2000; }
#animation, #animation-sakura { z-index: 1000; }
*/