/*
 * Divi Animated Image — Frontend Styles
 * Supports both reactive (3D tilt) and autonomous (wave/ripple) effects.
 */

.dai-animated-wrapper {
    display: block;
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
    border-radius: inherit;
    overflow: hidden;
    line-height: 0; /* removes phantom gap below inline image */
}

/*
 * Wave effect: allow edge pixels displaced by feDisplacementMap to be visible.
 * Without this, the SVG filter clips the distorted edges at the wrapper boundary.
 */
.dai-animated-wrapper.dai-has-wave {
    overflow: visible;
}

.dai-animated-image {
    display: block;
    width: 100%;
    height: auto;
    transform-style: preserve-3d;
    will-change: filter; /* hint GPU compositing when wave filter is active */
    pointer-events: none; /* prevents img drag from interfering with tilt events */
}

/*
 * Hidden SVG that holds the wave filter definition.
 * Positioned absolutely so it takes no layout space.
 */
.dai-wave-svg {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/*
 * Builder placeholder — shown when no image has been selected yet.
 */
.dai-tilt-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: #f0f0f0;
    border: 2px dashed #ccc;
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
}

.dai-tilt-placeholder p {
    margin: 0;
    color: #888;
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
}

/*
 * Accessibility: honour OS-level "Reduce Motion" preference.
 * The JS also checks this, but CSS is the safety net in case JS fires late.
 */
@media (prefers-reduced-motion: reduce) {
    .dai-animated-wrapper[data-dai-reduced-motion="true"] {
        transform: none !important;
        transition: none !important;
    }

    .dai-animated-wrapper[data-dai-reduced-motion="true"] .js-tilt-glare {
        display: none;
    }

    /* Strip the wave filter entirely when reduced motion is preferred. */
    .dai-animated-wrapper.dai-has-wave .dai-animated-image {
        filter: none !important;
    }

    /* Pause SVG animate elements (supported in Chrome/Firefox/Edge). */
    .dai-wave-svg animate {
        animation-play-state: paused;
    }
}