/*
 * ============================================================
 * MEDIA HOVER POR ELEMENTO V1
 * ============================================================
 */

.ir-media-hover-v1{
    --ir-hover-duration:.4s;
    --ir-hover-scale:1.07;
    --ir-hover-up:-6px;
    --ir-hover-rotate:3deg;

    perspective:900px;
}


/*
 * SOLO el contenido visual.
 * No cambia x/y/ancho/alto del bloque.
 */

.ir-media-hover-v1
.ir-media-hover-target-v1{
    transition:
        transform var(--ir-hover-duration) cubic-bezier(.2,.8,.2,1),
        filter var(--ir-hover-duration) ease,
        box-shadow var(--ir-hover-duration) ease;

    transform-origin:center center;
    backface-visibility:hidden;
    will-change:transform;
}


/* =============================
   ZOOM
   ============================= */

.ir-media-hover-v1[data-hover-effect="zoom"]:hover
.ir-media-hover-target-v1,

.ir-media-hover-v1[data-hover-effect="zoom"].ir-media-hover-touch-v1
.ir-media-hover-target-v1{
    transform:
        scale(
            var(--ir-hover-scale)
        );
}


/* =============================
   FLOTAR
   ============================= */

.ir-media-hover-v1[data-hover-effect="float"]:hover
.ir-media-hover-target-v1,

.ir-media-hover-v1[data-hover-effect="float"].ir-media-hover-touch-v1
.ir-media-hover-target-v1{
    transform:
        translateY(
            var(--ir-hover-up)
        )
        scale(
            var(--ir-hover-scale)
        );

    filter:
        brightness(1.04);

    box-shadow:
        0 12px 24px
        rgba(0,0,0,.18);
}


/* =============================
   3D
   ============================= */

.ir-media-hover-v1[data-hover-effect="tilt"]:hover
.ir-media-hover-target-v1,

.ir-media-hover-v1[data-hover-effect="tilt"].ir-media-hover-touch-v1
.ir-media-hover-target-v1{
    transform:
        perspective(800px)
        rotateX(
            var(--ir-hover-rotate)
        )
        rotateY(
            calc(
                var(--ir-hover-rotate) * -1
            )
        )
        translateY(
            var(--ir-hover-up)
        )
        scale(
            var(--ir-hover-scale)
        );

    box-shadow:
        0 14px 28px
        rgba(0,0,0,.20);
}


/* =============================
   GIRO SUAVE
   ============================= */

.ir-media-hover-v1[data-hover-effect="rotate"]:hover
.ir-media-hover-target-v1,

.ir-media-hover-v1[data-hover-effect="rotate"].ir-media-hover-touch-v1
.ir-media-hover-target-v1{
    transform:
        rotate(
            var(--ir-hover-rotate)
        )
        scale(
            var(--ir-hover-scale)
        );
}


/* =============================
   PULSO
   ============================= */

@keyframes irMediaHoverPulseV1{

    0%{
        transform:
            scale(1);
    }

    50%{
        transform:
            scale(
                var(--ir-hover-scale)
            );
    }

    100%{
        transform:
            scale(1);
    }
}


.ir-media-hover-v1[data-hover-effect="pulse"]:hover
.ir-media-hover-target-v1,

.ir-media-hover-v1[data-hover-effect="pulse"].ir-media-hover-touch-v1
.ir-media-hover-target-v1{
    animation:
        irMediaHoverPulseV1
        .85s
        ease-in-out
        infinite;
}


/*
 * Accesibilidad.
 */

@media (prefers-reduced-motion:reduce){

    .ir-media-hover-v1
    .ir-media-hover-target-v1{
        transition:none !important;
        animation:none !important;
    }
}


/*
 * Inspector.
 */

.media-hover-editor-v1{
    margin-top:14px;
    padding:14px;

    border:
        1px solid
        rgba(125,95,255,.30);

    border-radius:14px;

    background:
        rgba(125,95,255,.06);
}


.media-hover-editor-v1
.media-hover-title-v1{
    display:block;

    margin-bottom:10px;

    font-size:13px;
    font-weight:800;
}


.media-hover-switch-v1{
    display:flex;
    align-items:center;
    gap:9px;

    margin-bottom:12px;
}


.media-hover-switch-v1 input{
    width:18px;
    height:18px;
}


.media-hover-editor-v1
.prop-field{
    margin-top:10px;
}