/**
 * Image Link widget for Creative Elements — frontend styles
 *
 * @author    Z Digital
 * @copyright 2026 Z Digital
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0
 */

.zdil-wrap {
    display: flex;
    width: 100%;
    justify-content: center;
}

.zdil-link {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .35s ease, transform .35s ease;
    will-change: transform;
}

.zdil-pic,
.zdil-pic img {
    display: block;
}

.zdil-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
    transition-property: transform, filter;
    transition-duration: .35s;
    transition-timing-function: ease;
    will-change: transform, filter;
}

/* ------------------------------------------------------------------
 * Hover effects
 * ------------------------------------------------------------------ */
.zdil-hover-zoom:hover .zdil-img {
    transform: scale(1.06);
}

.zdil-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.zdil-hover-tilt:hover .zdil-img {
    transform: perspective(900px) rotateX(4deg) rotateY(-4deg) scale(1.03);
}

.zdil-hover-bright:hover .zdil-img {
    filter: brightness(1.12) saturate(1.06);
}

.zdil-hover-grayscale .zdil-img {
    filter: grayscale(1);
}
.zdil-hover-grayscale:hover .zdil-img {
    filter: grayscale(0);
}

/* Darken overlay (uses a pseudo-element so it never affects layout) */
.zdil-hover-darken::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background .35s ease;
    pointer-events: none;
}
.zdil-hover-darken:hover::after {
    background: rgba(0, 0, 0, .28);
}

/* ------------------------------------------------------------------
 * Click effects
 * ------------------------------------------------------------------ */
.zdil-click-press:active .zdil-img {
    transform: scale(.96);
}

.zdil-click-pulse.zdil-is-clicked .zdil-img {
    animation: zdilPulse .4s ease;
}
@keyframes zdilPulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Ripple: a circle expands from the click point */
.zdil-click-ripple {
    overflow: hidden;
}
.zdil-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transform: scale(0);
    animation: zdilRipple .6s ease-out;
    pointer-events: none;
    mix-blend-mode: overlay;
}
@keyframes zdilRipple {
    to {
        transform: scale(2.4);
        opacity: 0;
    }
}

/* ------------------------------------------------------------------
 * On-appear animations
 * ------------------------------------------------------------------ */
.zdil-anim .zdil-link {
    opacity: 0;
    transition: opacity var(--zdil-dur, 700ms) ease, transform var(--zdil-dur, 700ms) ease;
    transition-delay: var(--zdil-delay, 0ms);
    will-change: opacity, transform;
}

.zdil-anim-fade-up .zdil-link      { transform: translateY(40px); }
.zdil-anim-fade-down .zdil-link    { transform: translateY(-40px); }
.zdil-anim-fade-left .zdil-link    { transform: translateX(-40px); }
.zdil-anim-fade-right .zdil-link   { transform: translateX(40px); }
.zdil-anim-zoom-in .zdil-link      { transform: scale(.85); }
.zdil-anim-zoom-out .zdil-link     { transform: scale(1.15); }

.zdil-anim.zdil-is-visible .zdil-link {
    opacity: 1;
    transform: none;
}

/* Reduced-motion: never animate. */
@media (prefers-reduced-motion: reduce) {
    .zdil-anim .zdil-link {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .zdil-img,
    .zdil-link {
        transition: none !important;
    }
}