/* --- 初期状態 --- */
[data-cineui] {
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity, filter;
}

/* --- ホラー：グリッチ・点滅 --- */
[data-cineui="horror-glitch"].is-visible {
    visibility: visible;
    animation: cineui-glitch 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes cineui-glitch {
    0% { opacity: 0; transform: scale(1.05); filter: contrast(150%) blur(5px); }
    10% { opacity: 1; filter: contrast(100%) blur(0); }
    15% { opacity: 0.2; }
    20% { opacity: 1; transform: translateX(-5px); }
    25% { transform: translateX(5px); }
    30% { transform: translateX(0); }
    100% { opacity: 1; transform: scale(1); filter: contrast(100%) blur(0); }
}

/* --- アクション：高速ズームイン・ブラー --- */
[data-cineui="action-zoom"].is-visible {
    visibility: visible;
    animation: cineui-zoom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes cineui-zoom {
    0% { opacity: 0; transform: scale(0.8) translateZ(0); filter: blur(10px); }
    100% { opacity: 1; transform: scale(1) translateZ(0); filter: blur(0); }
}

/* --- 人間ドラマ：滑らかなフェードアップ --- */
[data-cineui="drama-fade"].is-visible {
    visibility: visible;
    animation: cineui-fade 1.2s ease-out forwards;
}

@keyframes cineui-fade {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- ミステリー・サスペンス：ブラーから鮮明化 --- */
[data-cineui="mystery-focus"].is-visible {
    visibility: visible;
    /* 変化をじっくり見せるため、少し長めのイージングを設定 */
    animation: cineui-focus 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes cineui-focus {
    0% { 
        opacity: 0; 
        /* GPUハードウェアアクセラレーションを強制し、描画バグを抑制 */
        transform: translateZ(0) scale(1.02); 
        filter: blur(15px); 
    }
    100% { 
        opacity: 1; 
        transform: translateZ(0) scale(1); 
        filter: blur(0); 
    }
}