/**
 * 動画遅延読み込み機能 CSS - リファクタリング版
 * E-Learning Drip Content with Confetti プラグイン連携
 *
 * @version 2.0
 * @author E-Learning Plugin Team
 */

/* ==============================================
 * 基本スタイル
 * ============================================== */

/**
 * 遅延読み込み対象の動画
 * 初期状態では非表示、スムーズなトランジションで表示
 */
.course01-lazy-video {
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* GPUアクセラレーションを有効化 */
    transform: translateZ(0);
    will-change: opacity;
}

/**
 * 読み込み完了状態
 * アニメーション付きでスムーズに表示
 */
.course01-video-loaded {
    opacity: 0;
    animation: course01-fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==============================================
 * アニメーション定義
 * ============================================== */

/**
 * フェードインアニメーション
 * スムーズな表示でUXを向上
 */
@keyframes course01-fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* ==============================================
 * アクセシビリティ対応
 * ============================================== */

/**
 * モーションを減らす設定のユーザーに対する配慮
 * アニメーションを無効化して即座表示
 */
@media (prefers-reduced-motion: reduce) {
    .course01-lazy-video,
    .course01-video-loaded {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
        will-change: auto;
    }
}

/* ==============================================
 * パフォーマンス最適化
 * ============================================== */

/**
 * ハードウェアアクセラレーションを活用
 * GPUで処理されるプロパティのみを使用
 */
.course01-lazy-video[data-loading="true"] {
    /* 読み込み中の表示 */
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

/**
 * 高解像度ディスプレイ対応
 * アニメーションの滑らかさを向上
 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .course01-video-loaded {
        animation-duration: 0.4s;
    }
}

/* ==============================================
 * レスポンシブ対応
 * ============================================== */

/**
 * モバイルデバイスでのパフォーマンス最適化
 */
@media (max-width: 768px) {
    .course01-lazy-video,
    .course01-video-loaded {
        /* モバイルではアニメーションを短縮 */
        animation-duration: 0.3s;
        transition-duration: 0.2s;
    }
}

/**
 * タブレットデバイス対応
 */
@media (min-width: 769px) and (max-width: 1024px) {
    .course01-video-loaded {
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}