/* ==========================================================================
   1. トップページ（index.html）のメインコンテンツ制御
   ========================================================================== */
/* スプラッシュがアクティブな時だけ、コンテンツを一瞬隠して1.5秒後に表示 */
body.home.is-splash-active header,
body.home.is-splash-active main {
  opacity: 0;
  animation: fadeInContentsInstant 0s linear 1.5s forwards;
}

@keyframes fadeInContentsInstant {
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   2. スプラッシュ画面全体（Japandiスタイル）
   ========================================================================== */
.custom-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 1.5s ease;
  background: radial-gradient(circle at 50% 40%, #2f84bd 0%, #1e5987 55%, #103356 100%);
}
.custom-splash.is-visible {
  opacity: 1;
}

/* 切り替わり（フェードアウト時） */
.custom-splash.is-hidden {
  opacity: 0 !important;
  transition: opacity 2s cubic-bezier(0.25, 1, 0.5, 1) !important;
  pointer-events: none;
}

/* ==========================================================================
   3. 背景の回転する光（アウラ）
   ========================================================================== */
.custom-splash::before {
  content: "";
  position: absolute;
  width: 180vh;
  height: 180vh;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
  pointer-events: none;
  animation: auraRotate 25s linear infinite;
}

@keyframes auraRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   4. コンテンツ配置 & ロゴアニメーション
   ========================================================================== */
.splash-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.collab-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 45px;
  height: 60px;
}

.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 40px;
  opacity: 0;
}

.logo-box.left-side {
  animation: slideToLeft 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.logo-box.right-side {
  animation: slideToRight 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.logo-box img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes slideToLeft {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideToRight {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   5. 中央の「×」マーク
   ========================================================================== */
.collab-intersection {
  width: 70px;
  height: 70px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.3);
  animation: popCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s forwards;
}

.collab-intersection::before,
.collab-intersection::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
}

.collab-intersection::before {
  transform: translateY(-50%) rotate(45deg);
}
.collab-intersection::after {
  transform: translateY(-50%) rotate(-45deg);
}

@keyframes popCenter {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   6. 下部のタイマーライン（進行状況バー）
   ========================================================================== */
.timer-line-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.03);
}

.timer-line-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #555c64, #8e969e);
  animation: progressFill 2s linear 0s forwards;
}

@keyframes progressFill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* ==========================================================================
   7. レスポンシブ対応（スマホ用の左右余白）
   ========================================================================== */
@media (max-width: 767px) {
  .splash-container {
    width: 100%;
    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box;
  }

  .collab-row {
    width: 100%;
    gap: 20px;
  }
}