/* ========================================
   動画レイヤーアニメーション
======================================== */

/* 初期状態：画面下から出現 */
.video-layer {
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* アクティブ時：画面に表示 */
.video-swiper-slide.active .video-layer {
  transform: translateY(0);
}

/* ========================================
   オーバーレイレイヤーアニメーション
======================================== */

/* 初期状態：画面下から出現（遅延あり） */
.overlay-layer {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

/* アクティブ時：画面に表示 */
.video-swiper-slide.active .overlay-layer {
  transform: translateY(0);
}

/* ========================================
   ケースページの背景固定
======================================== */

/* ケースページでは背景を固定 */
.video-swiper-slide.case-slide .video-layer,
.video-swiper-slide.case-slide .overlay-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* アニメーション不要（常に表示） */
  transform: none;
  transition: none;
}

/* ========================================
   動画レイヤー用パフォーマンス最適化
======================================== */

/* 動画要素の高速レンダリング */
.video-layer {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* オーバーレイの高速レンダリング */
.overlay-layer {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ========================================
   背景動画品質設定
======================================== */

/* 動画の再生品質を最適化 */
video {
  display: block;
  width: 100%;
  height: 100%;
}

/* ========================================
   グラデーション背景（テスト用・実装時は削除） 
======================================== */

/* ページ1：自己紹介 - グラデーション背景 */
.video-swiper-slide:nth-child(1) {
  background: linear-gradient(135deg, #2B7A8B 0%, #1B5E6F 100%);
}

/* ページ2：強み - グラデーション背景 */
.video-swiper-slide:nth-child(2) {
  background: linear-gradient(135deg, #1B5E6F 0%, #0D3A47 100%);
}

/* ページ3（ケース）- グラデーション背景 */
.video-swiper-slide:nth-child(3) {
  background: linear-gradient(135deg, #2B7A8B 0%, #1B5E6F 100%);
}

/* ページ4：CTA - グラデーション背景 */
.video-swiper-slide:nth-child(4) {
  background: linear-gradient(135deg, #A3D5E8 0%, #2B7A8B 100%);
}

/* ========================================
   最終CTAセクションの背景設定
======================================== */

/* 背景動画のアニメーション */
.mobile-cta-bg-video {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* オーバーレイの透過性制御 */
.mobile-cta-overlay {
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* ========================================
   動画再生制御
======================================== */

/* 動画の基本設定 */
video[muted][autoplay][playsinline] {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* ページビューイベント時の動画再生 */
.video-swiper-slide.active video {
  /* アクティブページの動画を再生 */
  animation: videoPlayTrigger 0.1s ease-out;
}

@keyframes videoPlayTrigger {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* ========================================
   モバイル表示設定
======================================== */

@media (max-width: 768px) {
  /* モバイル表示時、レイヤーアニメーションを有効化 */
  .video-layer {
    transform: translateY(100%);
  }

  .overlay-layer {
    transform: translateY(100%);
  }

  .video-swiper-slide.active .video-layer {
    transform: translateY(0);
  }

  .video-swiper-slide.active .overlay-layer {
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  /* 小さいデバイスでのレイヤー最適化 */
  .overlay-layer {
    background: rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 375px) {
  /* 極小デバイスでのレイヤー最適化 */
  .overlay-layer {
    background: rgba(0, 0, 0, 0.5);
  }
}

/* ========================================
   背景動画の低電力モード対応
======================================== */

@media (prefers-reduced-motion: reduce) {
  .video-layer,
  .overlay-layer {
    transform: none !important;
    transition: none !important;
  }

  .video-swiper-slide.active .video-layer,
  .video-swiper-slide.active .overlay-layer {
    transform: none !important;
  }
}