/* ==========================================================================
   Mixx'd Media — Tilted Frame Image for WPBakery
   ========================================================================== */

/* Wrapper — relative positioning context */
.mixxd-tilted-frame {
    position: relative;
    display: inline-block;
    width: 100%;
    /* breathing room for rotated frame overflow */
    padding: 20px;
}

/* ---- Colored frame (behind the image) ---- */
.mixxd-tf__frame {
    position: absolute;
    /* inset is overridden inline; this is the fallback */
    inset: 17px;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Image wrapper (sits on top) ---- */
.mixxd-tf__image-wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mixxd-tf__link {
    display: block;
    line-height: 0;
}

.mixxd-tf__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Shadows ---- */
.mixxd-tf--shadow-small .mixxd-tf__image-wrap {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mixxd-tf--shadow-medium .mixxd-tf__image-wrap {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.mixxd-tf--shadow-large .mixxd-tf__image-wrap {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

/* ---- Hover: Straighten ---- */
.mixxd-tf--hover-straighten:hover .mixxd-tf__frame {
    transform: rotate(var(--mixxd-tf-hover-frame-rot, 0deg)) !important;
}

.mixxd-tf--hover-straighten:hover .mixxd-tf__image-wrap {
    transform: rotate(var(--mixxd-tf-hover-img-rot, 0deg)) !important;
}

/* ---- Hover: Increase tilt ---- */
.mixxd-tf--hover-increase:hover .mixxd-tf__frame {
    transform: rotate(var(--mixxd-tf-hover-frame-rot)) !important;
}

.mixxd-tf--hover-increase:hover .mixxd-tf__image-wrap {
    transform: rotate(var(--mixxd-tf-hover-img-rot)) !important;
}

/* ---- Hover: Zoom image ---- */
.mixxd-tf--hover-zoom:hover .mixxd-tf__img {
    transform: scale(1.08);
}

/* ---- Hover: Lift up ---- */
.mixxd-tf--hover-lift:hover {
    transform: translateY(-6px);
}

.mixxd-tf--hover-lift:hover .mixxd-tf__image-wrap {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.mixxd-tf--hover-lift {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .mixxd-tf__frame,
    .mixxd-tf__image-wrap,
    .mixxd-tf__img,
    .mixxd-tilted-frame {
        transition: none !important;
    }
}