/**
 * ============================================================
 *  전환 효과 모듈 15종
 * ============================================================
 *  각 모듈은 [data-mv-slide].active / :not(.active) 에 반응.
 *  레이아웃과 완전히 독립적으로 동작.
 *
 *  사용법: data-mv-transition="fade" 를 슬라이더에 추가하면
 *         해당 전환이 적용됨.
 *
 *  목록:
 *   1. fade          — 단순 페이드
 *   2. slide-right   — 우→좌 슬라이딩
 *   3. slide-up      — 아래→위 슬라이딩
 *   4. curtain       — 커튼 스위프 (9~18 공통)
 *   5. curtain-dual  — 이중 커튼 시차 (18번)
 *   6. zoom-in       — 확대하며 페이드인
 *   7. zoom-out      — 축소하며 페이드인
 *   8. clip-circle   — 중앙 원형 클리핑
 *   9. clip-diagonal — 대각선 클리핑
 *  10. clip-diamond  — 마름모 클리핑
 *  11. blur          — 블러→선명 전환
 *  12. split-h       — 좌우 반으로 열림
 *  13. split-v       — 상하 반으로 열림
 *  14. flip-x        — X축 3D 회전
 *  15. kenburns      — 켄번스 (서서히 확대/이동)
 * ============================================================
 */


/* ═══════════════════════════════════════════
   1. FADE — 단순 페이드
   ═══════════════════════════════════════════ */
[data-mv-transition="fade"] [data-mv-slide] {
    transition: none;
}

[data-mv-transition="fade"] [data-mv-slide].mv-leaving {
    animation: mv-fadeOut 2.5s ease forwards;
}


/* ═══════════════════════════════════════════
   2. SLIDE-RIGHT — 우→좌 슬라이딩 배경
   출처: main_content_9~18 배경 진입 패턴
   ═══════════════════════════════════════════ */
@keyframes mv-t-slideRight {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}
@keyframes mv-t-slideRightOut {
    0% { transform: translateX(0); }
    100% { transform: translateX(-30%); opacity: 0; }
}

[data-mv-transition="slide-right"] [data-mv-slide] {
    opacity: 1;
    transition: none;
}

[data-mv-transition="slide-right"] [data-mv-slide]:not(.active) {
    opacity: 0;
    z-index: 1;
}

[data-mv-transition="slide-right"] [data-mv-slide].active .mv-bg {
    animation: mv-t-slideRight 1.7s cubic-bezier(0.09, 0.69, 0.03, 0.97) both;
}

[data-mv-transition="slide-right"] [data-mv-slide]:not(.active) .mv-bg {
    animation: none;
}


/* ═══════════════════════════════════════════
   3. SLIDE-UP — 아래→위 슬라이딩
   ═══════════════════════════════════════════ */
@keyframes mv-t-slideUp {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

[data-mv-transition="slide-up"] [data-mv-slide].active .mv-bg {
    animation: mv-t-slideUp 1.5s cubic-bezier(0.09, 0.69, 0.03, 0.97) both;
}

[data-mv-transition="slide-up"] [data-mv-slide]:not(.active) .mv-bg {
    animation: none;
}


/* ═══════════════════════════════════════════
   4. CURTAIN — 커튼 스위프 (우→좌)
   출처: main_content_9~17 공통 커튼
   ═══════════════════════════════════════════ */
@keyframes mv-t-curtain {
    0%   { transform: translateX(100%); }
    40%  { transform: translateX(0); }
    60%  { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

[data-mv-transition="curtain"] [data-mv-slide].active .mv-curtain {
    animation: mv-t-curtain 2.4s cubic-bezier(0.87, 0.24, 0.81, 0.74) both;
}

[data-mv-transition="curtain"] [data-mv-slide]:not(.active) .mv-curtain {
    animation: none;
    opacity: 0;
}


/* ═══════════════════════════════════════════
   5. CURTAIN-DUAL — 이중 커튼 시차
   출처: main_content_18
   ═══════════════════════════════════════════ */
@keyframes mv-t-curtainDual1 {
    0%   { transform: translateX(0); }
    60%  { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@keyframes mv-t-curtainDual2 {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

[data-mv-transition="curtain-dual"] [data-mv-slide].active .mv-curtain:first-child {
    opacity: 1;
    animation: mv-t-curtainDual1 2s cubic-bezier(0.87, 0.24, 0.81, 0.74) both;
}

[data-mv-transition="curtain-dual"] [data-mv-slide].active .mv-curtain:nth-child(2) {
    opacity: 1;
    animation: mv-t-curtainDual2 1.2s cubic-bezier(0.04, 0.73, 0.26, 0.98) 2s both;
}

[data-mv-transition="curtain-dual"] [data-mv-slide]:not(.active) .mv-curtain {
    animation: none;
    opacity: 0;
}


/* ═══════════════════════════════════════════
   6. ZOOM-IN — 확대하며 페이드인
   ═══════════════════════════════════════════ */
@keyframes mv-t-zoomIn {
    0%   { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

[data-mv-transition="zoom-in"] [data-mv-slide] {
    transition: none;
}

[data-mv-transition="zoom-in"] [data-mv-slide].active .mv-bg {
    animation: mv-t-zoomIn 1.8s ease both;
}

[data-mv-transition="zoom-in"] [data-mv-slide]:not(.active) .mv-bg {
    animation: none;
    opacity: 0;
}


/* ═══════════════════════════════════════════
   7. ZOOM-OUT — 축소하며 페이드인
   ═══════════════════════════════════════════ */
@keyframes mv-t-zoomOut {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

[data-mv-transition="zoom-out"] [data-mv-slide].active .mv-bg {
    animation: mv-t-zoomOut 1.8s ease both;
}

[data-mv-transition="zoom-out"] [data-mv-slide]:not(.active) .mv-bg {
    animation: none;
    opacity: 0;
}


/* ═══════════════════════════════════════════
   8. CLIP-CIRCLE — 중앙 원형 클리핑
   출처: main_content_18 V5
   ═══════════════════════════════════════════ */
@keyframes mv-t-clipCircle {
    0%   { clip-path: circle(0% at 50% 50%); }
    100% { clip-path: circle(80% at 50% 50%); }
}

[data-mv-transition="clip-circle"] [data-mv-slide] {
    transition: none;
    opacity: 1;
}

[data-mv-transition="clip-circle"] [data-mv-slide]:not(.active) {
    z-index: 1;
}

[data-mv-transition="clip-circle"] [data-mv-slide].active {
    animation: mv-t-clipCircle 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

[data-mv-transition="clip-circle"] [data-mv-slide]:not(.active) {
    animation: none;
    clip-path: circle(0% at 50% 50%);
}


/* ═══════════════════════════════════════════
   9. CLIP-DIAGONAL — 대각선 클리핑
   출처: main_content_18 V3
   ═══════════════════════════════════════════ */
@keyframes mv-t-clipDiag {
    0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

[data-mv-transition="clip-diagonal"] [data-mv-slide] {
    transition: none;
    opacity: 1;
}

[data-mv-transition="clip-diagonal"] [data-mv-slide].active {
    animation: mv-t-clipDiag 1.2s cubic-bezier(0.65, 0, 0.35, 1) both;
}

[data-mv-transition="clip-diagonal"] [data-mv-slide]:not(.active) {
    animation: none;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    z-index: 1;
}


/* ═══════════════════════════════════════════
   10. CLIP-DIAMOND — 마름모 클리핑
   ═══════════════════════════════════════════ */
@keyframes mv-t-clipDiamond {
    0%   { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
    100% { clip-path: polygon(50% -20%, 120% 50%, 50% 120%, -20% 50%); }
}

[data-mv-transition="clip-diamond"] [data-mv-slide] {
    transition: none;
    opacity: 1;
}

[data-mv-transition="clip-diamond"] [data-mv-slide].active {
    animation: mv-t-clipDiamond 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

[data-mv-transition="clip-diamond"] [data-mv-slide]:not(.active) {
    animation: none;
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    z-index: 1;
}


/* ═══════════════════════════════════════════
   11. BLUR — 블러→선명 전환
   ═══════════════════════════════════════════ */
@keyframes mv-t-blur {
    0%   { filter: blur(20px) brightness(0.5); opacity: 0; }
    100% { filter: blur(0) brightness(1); opacity: 1; }
}

[data-mv-transition="blur"] [data-mv-slide] {
    transition: none;
}

[data-mv-transition="blur"] [data-mv-slide].active .mv-bg {
    animation: mv-t-blur 1.5s ease both;
}

[data-mv-transition="blur"] [data-mv-slide]:not(.active) .mv-bg {
    animation: none;
    opacity: 0;
}


/* ═══════════════════════════════════════════
   12. SPLIT-H — 좌우 반으로 열림
   ═══════════════════════════════════════════ */
@keyframes mv-t-splitHL {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@keyframes mv-t-splitHR {
    0%   { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

[data-mv-transition="split-h"] [data-mv-slide].active .mv-split-left {
    animation: mv-t-splitHL 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
}

[data-mv-transition="split-h"] [data-mv-slide].active .mv-split-right {
    animation: mv-t-splitHR 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
}

[data-mv-transition="split-h"] [data-mv-slide]:not(.active) .mv-split-left,
[data-mv-transition="split-h"] [data-mv-slide]:not(.active) .mv-split-right {
    animation: none;
}


/* ═══════════════════════════════════════════
   13. SPLIT-V — 상하 반으로 열림
   ═══════════════════════════════════════════ */
@keyframes mv-t-splitVT {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}
@keyframes mv-t-splitVB {
    0%   { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

[data-mv-transition="split-v"] [data-mv-slide].active .mv-split-top {
    animation: mv-t-splitVT 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
}

[data-mv-transition="split-v"] [data-mv-slide].active .mv-split-bottom {
    animation: mv-t-splitVB 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
}

[data-mv-transition="split-v"] [data-mv-slide]:not(.active) .mv-split-top,
[data-mv-transition="split-v"] [data-mv-slide]:not(.active) .mv-split-bottom {
    animation: none;
}


/* ═══════════════════════════════════════════
   14. FLIP-X — X축 3D 회전
   ═══════════════════════════════════════════ */
@keyframes mv-t-flipIn {
    0%   { transform: perspective(1200px) rotateX(-90deg); opacity: 0; }
    100% { transform: perspective(1200px) rotateX(0); opacity: 1; }
}

[data-mv-transition="flip-x"] [data-mv-slide] {
    transition: none;
    backface-visibility: hidden;
}

[data-mv-transition="flip-x"] [data-mv-slide].active {
    animation: mv-t-flipIn 1.2s ease both;
}

[data-mv-transition="flip-x"] [data-mv-slide]:not(.active) {
    animation: none;
    opacity: 0;
}


/* ═══════════════════════════════════════════
   15. KENBURNS — 켄번스 (서서히 확대/이동)
   ═══════════════════════════════════════════ */
@keyframes mv-t-kb1 {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -1%); }
}
@keyframes mv-t-kb2 {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(2%, 1%); }
}
@keyframes mv-t-kb3 {
    0%   { transform: scale(1.1) translate(-1%, 1%); }
    100% { transform: scale(1) translate(0, 0); }
}

[data-mv-transition="kenburns"] [data-mv-slide] {
    transition: none;
}

[data-mv-transition="kenburns"] [data-mv-slide].mv-leaving {
    animation: mv-fadeOut 2.5s ease forwards;
}

[data-mv-transition="kenburns"] [data-mv-slide]:nth-child(3n+1).active .mv-bg {
    animation: mv-t-kb1 8s ease-in-out both;
}
[data-mv-transition="kenburns"] [data-mv-slide]:nth-child(3n+2).active .mv-bg {
    animation: mv-t-kb2 8s ease-in-out both;
}
[data-mv-transition="kenburns"] [data-mv-slide]:nth-child(3n+3).active .mv-bg {
    animation: mv-t-kb3 8s ease-in-out both;
}
[data-mv-transition="kenburns"] [data-mv-slide]:not(.active) .mv-bg {
    animation: none;
}
/* 비디오 배경은 kenburns 확대 비활성화 */
[data-mv-transition="kenburns"] .mv-bg-video {
    animation: none !important;
}


/* ═══════════════════════════════════════════
   공통: 텍스트 진입 애니메이션
   레이아웃 모듈에서 사용하는 공통 텍스트 전환
   ═══════════════════════════════════════════ */
@keyframes mv-text-up {
    0%   { transform: translateY(40px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes mv-text-left {
    0%   { transform: translateX(-60px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes mv-text-right {
    0%   { transform: translateX(60px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes mv-text-scale {
    0%   { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes mv-text-fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* 텍스트 진입 유틸 클래스 */
.mv-anim-up    { opacity: 0; transform: translateY(40px); }
.mv-anim-left  { opacity: 0; transform: translateX(-60px); }
.mv-anim-right { opacity: 0; transform: translateX(60px); }
.mv-anim-scale { opacity: 0; transform: scale(0.9); }
.mv-anim-fade  { opacity: 0; }

[data-mv-slide].active .mv-anim-up    { animation: mv-text-up    0.7s ease both; }
[data-mv-slide].active .mv-anim-left  { animation: mv-text-left  0.7s ease both; }
[data-mv-slide].active .mv-anim-right { animation: mv-text-right 0.7s ease both; }
[data-mv-slide].active .mv-anim-scale { animation: mv-text-scale 0.7s ease both; }
[data-mv-slide].active .mv-anim-fade  { animation: mv-text-fade  0.7s ease both; }

[data-mv-slide]:not(.active) .mv-anim-up,
[data-mv-slide]:not(.active) .mv-anim-left,
[data-mv-slide]:not(.active) .mv-anim-right,
[data-mv-slide]:not(.active) .mv-anim-scale,
[data-mv-slide]:not(.active) .mv-anim-fade {
    animation: none;
}

/* 딜레이 유틸: data-mv-delay="1" ~ "10" (× 0.2s) */
[data-mv-slide].active [data-mv-delay="1"]  { animation-delay: 0.2s; }
[data-mv-slide].active [data-mv-delay="2"]  { animation-delay: 0.4s; }
[data-mv-slide].active [data-mv-delay="3"]  { animation-delay: 0.6s; }
[data-mv-slide].active [data-mv-delay="4"]  { animation-delay: 0.8s; }
[data-mv-slide].active [data-mv-delay="5"]  { animation-delay: 1.0s; }
[data-mv-slide].active [data-mv-delay="6"]  { animation-delay: 1.2s; }
[data-mv-slide].active [data-mv-delay="7"]  { animation-delay: 1.4s; }
[data-mv-slide].active [data-mv-delay="8"]  { animation-delay: 1.6s; }
[data-mv-slide].active [data-mv-delay="9"]  { animation-delay: 1.8s; }
[data-mv-slide].active [data-mv-delay="10"] { animation-delay: 2.0s; }
[data-mv-slide].active [data-mv-delay="12"] { animation-delay: 2.4s; }
[data-mv-slide].active [data-mv-delay="14"] { animation-delay: 2.8s; }
[data-mv-slide].active [data-mv-delay="15"] { animation-delay: 3.0s; }

/* ── 영상 고정 모드: 모든 전환 효과에서 비활성 슬라이드 숨김 ── */
[data-mv-fixed-video="true"] [data-mv-slide]:not(.active):not(.mv-leaving) {
    opacity: 0 !important;
    visibility: hidden !important;
    clip-path: none !important;
}
[data-mv-fixed-video="true"] .mv-bg-video {
    animation: none !important;
}