/**
 * 背景動画コンポーネント
 * デザインモックに基づく固定背景動画システム
 */

/* 背景設定の土台 (動画背景対応) */
.site-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background-color: #000000; /* 黒背景を設定してフラッシュを防ぐ */
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1.5s ease-in-out;
    /* パフォーマンス最適化 */
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* フェードアウト用クラス */
.bg-video.fade-out {
    opacity: 0;
}

/* ダークオーバーレイ (セクション遷移用) */
.dark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0);
    z-index: 0;
    pointer-events: none;
    transition: background-color 0.4s ease-out;
}

/* パーティクルオーバーレイ (PC版のみ、ページ下部) */
.particles-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh; /* 画面下部40% */
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.particles-video {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6; /* 少し透明にして背景と馴染ませる */
}

/* デフォルトではPC用を表示、SP用を非表示 */
.pc-video {
    display: block;
}

.sp-video {
    display: none;
}

/* モバイル用背景切り替え (767px以下) */
@media (max-width: 767px) {
    .pc-video {
        display: none;
    }
    
    .sp-video {
        display: block;
    }
    
    /* モバイルではパーティクルを非表示 */
    .particles-overlay {
        display: none;
    }
    
    /* モバイル用動画の最適化 */
    .bg-video {
        object-fit: cover;
        object-position: center;
    }
}

/* デスクトップ用背景 (768px以上) */
@media (min-width: 768px) {
    .pc-video {
        display: block;
    }
    
    .sp-video {
        display: none;
    }
}