/* index.php統合用CSS - 数学背景アニメーション */

/* 背景コンテナ */
#background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
}

/* フォールバック背景 */
.fallback-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: opacity 0.5s ease-in-out;
}

/* 時間帯別フォールバック背景 */
.fallback-morning {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    animation: morningGlow 10s ease-in-out infinite alternate;
}

.fallback-afternoon {
    background: linear-gradient(135deg, #87CEEB 0%, #4169E1 50%, #1E90FF 100%);
    animation: afternoonFlow 12s ease-in-out infinite alternate;
}

.fallback-evening {
    background: linear-gradient(135deg, #FF6347 0%, #FF4500 50%, #DC143C 100%);
    animation: eveningFlicker 8s ease-in-out infinite alternate;
}

.fallback-night {
    background: linear-gradient(135deg, #9370DB 0%, #8A2BE2 50%, #4B0082 100%);
    animation: nightPulse 15s ease-in-out infinite alternate;
}

/* アニメーション */
@keyframes morningGlow {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.02); }
}

@keyframes afternoonFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes eveningFlicker {
    0% { opacity: 0.9; filter: brightness(1); }
    100% { opacity: 1; filter: brightness(1.1); }
}

@keyframes nightPulse {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.01); }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    #background-container {
        /* モバイルでは軽量化 */
        transform: scale(1.1);
    }
    
    .fallback-background {
        /* モバイルではアニメーションを軽量化 */
        animation-duration: 20s;
    }
}

@media (max-width: 480px) {
    #background-container {
        /* 小画面ではさらに軽量化 */
        transform: scale(1.2);
    }
    
    .fallback-background {
        /* 小画面ではアニメーションを無効化 */
        animation: none;
    }
}

/* 低品質設定 */
.quality-low #background-container {
    transform: scale(1.1);
    filter: blur(1px);
}

.quality-minimal #background-container {
    transform: scale(1.2);
    filter: blur(2px);
}

/* パフォーマンス最適化 */
.performance-mode #background-container {
    will-change: transform;
    transform: translateZ(0);
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
    .fallback-background {
        animation: none;
    }
    
    #background-container {
        transform: none;
    }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .fallback-morning {
        background: linear-gradient(135deg, #B8860B 0%, #CD853F 50%, #D2691E 100%);
    }
    
    .fallback-afternoon {
        background: linear-gradient(135deg, #4682B4 0%, #191970 50%, #0000CD 100%);
    }
    
    .fallback-evening {
        background: linear-gradient(135deg, #CD5C5C 0%, #B22222 50%, #8B0000 100%);
    }
    
    .fallback-night {
        background: linear-gradient(135deg, #663399 0%, #4B0082 50%, #2F004F 100%);
    }
}

/* 印刷時は非表示 */
@media print {
    #background-container {
        display: none;
    }
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
    .fallback-background {
        filter: contrast(1.5) brightness(0.8);
    }
}

/* フォーカス時の調整 */
body:focus-within #background-container {
    opacity: 0.9;
}

/* ローディング状態 */
.loading #background-container {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* エラー状態 */
.error #background-container {
    opacity: 0.3;
    filter: grayscale(1);
}