/*-----------------------------------------------------------------------------
    Revolution Slider 4.1 Transitions - Adaptado para TVOnline
    Efectos exactos de transición del Revolution Slider
**************************/

/* Contenedor principal Revolution Slider Style */
.rev_slider_wrapper {
    position: relative;
    overflow: hidden;
}

.rev_slider {
    position: relative;
    overflow: visible;
}

/* Transiciones principales de Revolution Slider */
.slotzoom-horizontal,
.slotfade-horizontal,
.slotzoom-vertical,
.slotfade-vertical,
.curtain-1,
.curtain-2,
.curtain-3,
.boxslide,
.boxfade,
.slotslide-horizontal,
.slotslide-vertical,
.slotzoom-horizontal,
.slotzoom-vertical {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* ========== SLOTZOOM HORIZONTAL ========== */
.slotzoom-horizontal {
    animation: slotzoomHorizontal 1s ease-in-out both;
}

@keyframes slotzoomHorizontal {
    0% { 
        transform: scale(0.5) translateX(100%);
        opacity: 0;
    }
    100% { 
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

.slotzoom-horizontal-out {
    animation: slotzoomHorizontalOut 1s ease-in-out both;
}

@keyframes slotzoomHorizontalOut {
    0% { 
        transform: scale(1) translateX(0);
        opacity: 1;
    }
    100% { 
        transform: scale(0.5) translateX(-100%);
        opacity: 0;
    }
}

/* ========== SLOTZOOM VERTICAL ========== */
.slotzoom-vertical {
    animation: slotzoomVertical 1s ease-in-out both;
}

@keyframes slotzoomVertical {
    0% { 
        transform: scale(0.5) translateY(100%);
        opacity: 0;
    }
    100% { 
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.slotzoom-vertical-out {
    animation: slotzoomVerticalOut 1s ease-in-out both;
}

@keyframes slotzoomVerticalOut {
    0% { 
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% { 
        transform: scale(0.5) translateY(-100%);
        opacity: 0;
    }
}

/* ========== SLOTFADE HORIZONTAL ========== */
.slotfade-horizontal {
    animation: slotfadeHorizontal 1.2s ease-in-out both;
}

@keyframes slotfadeHorizontal {
    0% { 
        transform: translateX(100%);
        opacity: 0;
    }
    100% { 
        transform: translateX(0);
        opacity: 1;
    }
}

.slotfade-horizontal-out {
    animation: slotfadeHorizontalOut 1.2s ease-in-out both;
}

@keyframes slotfadeHorizontalOut {
    0% { 
        transform: translateX(0);
        opacity: 1;
    }
    100% { 
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* ========== SLOTFADE VERTICAL ========== */
.slotfade-vertical {
    animation: slotfadeVertical 1.2s ease-in-out both;
}

@keyframes slotfadeVertical {
    0% { 
        transform: translateY(100%);
        opacity: 0;
    }
    100% { 
        transform: translateY(0);
        opacity: 1;
    }
}

.slotfade-vertical-out {
    animation: slotfadeVerticalOut 1.2s ease-in-out both;
}

@keyframes slotfadeVerticalOut {
    0% { 
        transform: translateY(0);
        opacity: 1;
    }
    100% { 
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* ========== CURTAIN 1 ========== */
.curtain-1 {
    animation: curtain1 1.5s ease-in-out both;
}

@keyframes curtain1 {
    0% { 
        transform: scaleX(0) scaleY(0.8);
        opacity: 0;
    }
    100% { 
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
}

.curtain-1-out {
    animation: curtain1Out 1.5s ease-in-out both;
}

@keyframes curtain1Out {
    0% { 
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
    100% { 
        transform: scaleX(0) scaleY(0.8);
        opacity: 0;
    }
}

/* ========== CURTAIN 2 ========== */
.curtain-2 {
    animation: curtain2 1.3s ease-in-out both;
}

@keyframes curtain2 {
    0% { 
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity: 0;
    }
    100% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

.curtain-2-out {
    animation: curtain2Out 1.3s ease-in-out both;
}

@keyframes curtain2Out {
    0% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
    100% { 
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        opacity: 0;
    }
}

/* ========== CURTAIN 3 ========== */
.curtain-3 {
    animation: curtain3 1.4s ease-in-out both;
}

@keyframes curtain3 {
    0% { 
        clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
        opacity: 0;
    }
    100% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

.curtain-3-out {
    animation: curtain3Out 1.4s ease-in-out both;
}

@keyframes curtain3Out {
    0% { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
    100% { 
        clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
        opacity: 0;
    }
}

/* ========== BOXSLIDE ========== */
.boxslide {
    animation: boxslide 1.1s ease-in-out both;
}

@keyframes boxslide {
    0% { 
        transform: scale(0.8) rotateY(90deg);
        opacity: 0;
    }
    100% { 
        transform: scale(1) rotateY(0);
        opacity: 1;
    }
}

.boxslide-out {
    animation: boxslideOut 1.1s ease-in-out both;
}

@keyframes boxslideOut {
    0% { 
        transform: scale(1) rotateY(0);
        opacity: 1;
    }
    100% { 
        transform: scale(0.8) rotateY(-90deg);
        opacity: 0;
    }
}

/* ========== BOXFADE ========== */
.boxfade {
    animation: boxfade 1.2s ease-in-out both;
}

@keyframes boxfade {
    0% { 
        transform: scale(0.9);
        opacity: 0;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

.boxfade-out {
    animation: boxfadeOut 1.2s ease-in-out both;
}

@keyframes boxfadeOut {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    100% { 
        transform: scale(1.1);
        opacity: 0;
    }
}

/* ========== SLOTSLIDE HORIZONTAL ========== */
.slotslide-horizontal {
    animation: slotslideHorizontal 1s ease-in-out both;
}

@keyframes slotslideHorizontal {
    0% { 
        transform: translateX(100%) skewX(-15deg);
        opacity: 0;
    }
    100% { 
        transform: translateX(0) skewX(0);
        opacity: 1;
    }
}

.slotslide-horizontal-out {
    animation: slotslideHorizontalOut 1s ease-in-out both;
}

@keyframes slotslideHorizontalOut {
    0% { 
        transform: translateX(0) skewX(0);
        opacity: 1;
    }
    100% { 
        transform: translateX(-100%) skewX(15deg);
        opacity: 0;
    }
}

/* ========== SLOTSLIDE VERTICAL ========== */
.slotslide-vertical {
    animation: slotslideVertical 1s ease-in-out both;
}

@keyframes slotslideVertical {
    0% { 
        transform: translateY(100%) skewY(-10deg);
        opacity: 0;
    }
    100% { 
        transform: translateY(0) skewY(0);
        opacity: 1;
    }
}

.slotslide-vertical-out {
    animation: slotslideVerticalOut 1s ease-in-out both;
}

@keyframes slotslideVerticalOut {
    0% { 
        transform: translateY(0) skewY(0);
        opacity: 1;
    }
    100% { 
        transform: translateY(-100%) skewY(10deg);
        opacity: 0;
    }
}

/* ========== FADE ========== */
.fade {
    animation: revFade 1.5s ease-in-out both;
}

@keyframes revFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fade-out {
    animation: revFadeOut 1.5s ease-in-out both;
}

@keyframes revFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ========== SLIDE LEFT ========== */
.slideleft {
    animation: slideleft 1s ease-in-out both;
}

@keyframes slideleft {
    0% { 
        transform: translateX(-100%);
        opacity: 0;
    }
    100% { 
        transform: translateX(0);
        opacity: 1;
    }
}

.slideleft-out {
    animation: slideleftOut 1s ease-in-out both;
}

@keyframes slideleftOut {
    0% { 
        transform: translateX(0);
        opacity: 1;
    }
    100% { 
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ========== SLIDE RIGHT ========== */
.slideright {
    animation: slideright 1s ease-in-out both;
}

@keyframes slideright {
    0% { 
        transform: translateX(100%);
        opacity: 0;
    }
    100% { 
        transform: translateX(0);
        opacity: 1;
    }
}

.slideright-out {
    animation: sliderightOut 1s ease-in-out both;
}

@keyframes sliderightOut {
    0% { 
        transform: translateX(0);
        opacity: 1;
    }
    100% { 
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* ========== SLIDE UP ========== */
.slideup {
    animation: slideup 1s ease-in-out both;
}

@keyframes slideup {
    0% { 
        transform: translateY(100%);
        opacity: 0;
    }
    100% { 
        transform: translateY(0);
        opacity: 1;
    }
}

.slideup-out {
    animation: slideupOut 1s ease-in-out both;
}

@keyframes slideupOut {
    0% { 
        transform: translateY(0);
        opacity: 1;
    }
    100% { 
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* ========== SLIDE DOWN ========== */
.slidedown {
    animation: slidedown 1s ease-in-out both;
}

@keyframes slidedown {
    0% { 
        transform: translateY(-100%);
        opacity: 0;
    }
    100% { 
        transform: translateY(0);
        opacity: 1;
    }
}

.slidedown-out {
    animation: slidedownOut 1s ease-in-out both;
}

@keyframes slidedownOut {
    0% { 
        transform: translateY(0);
        opacity: 1;
    }
    100% { 
        transform: translateY(100%);
        opacity: 0;
    }
}

/* ========== ZOOM ========== */
.zoom {
    animation: revZoom 1.2s ease-in-out both;
}

@keyframes revZoom {
    0% { 
        transform: scale(0.5);
        opacity: 0;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

.zoom-out {
    animation: revZoomOut 1.2s ease-in-out both;
}

@keyframes revZoomOut {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    100% { 
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Estilos base Revolution Slider */
.rev_slider_wrapper .tp-simpleresponsive .tp-caption {
    position: absolute;
    visibility: visible;
    white-space: nowrap;
    display: inline-block;
}

/* Contenedor de medios adaptado */
.media-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Contenedor principal */
.content-transition-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Indicador de transición Revolution Style */
.rev-transition-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    z-index: 1000;
    display: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
    .slotzoom-horizontal,
    .slotzoom-vertical,
    .slotfade-horizontal,
    .slotfade-vertical,
    .curtain-1,
    .curtain-2,
    .curtain-3,
    .boxslide,
    .boxfade,
    .slotslide-horizontal,
    .slotslide-vertical {
        animation-duration: 0.8s;
    }
    
    .fade, .slideleft, .slideright, .slideup, .slidedown, .zoom {
        animation-duration: 1s;
    }
}