/* =========================================================
   512 Art Direction · Liquid Ripple
   =========================================================
   Container que envuelve la imagen para que el WebGL canvas
   se superponga sin afectar el layout.

   Cero !important. Truco: las reglas base usan :where() para
   neutralizar specificity, así las media queries de
   prefers-reduced-motion y max-width pueden sobreescribir
   limpiamente.
   ========================================================= */

@layer plugins {

    [data-art-ripple] {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    /* Base picture/img — :where() neutraliza specificity para que
       las reglas reactivas (.is-ripple-running) o las media queries
       puedan ganar sin parches. */
    :where([data-art-ripple]) > img,
    :where([data-art-ripple]) > picture {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    :where([data-art-ripple]) > picture > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Canvas WebGL — se inserta por JS */
    :where([data-art-ripple]) > canvas.ad-ripple-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--dur-medium, 500ms) var(--ease-out-quint, cubic-bezier(0.16, 1, 0.3, 1));
    }

    [data-art-ripple].is-ripple-active > canvas.ad-ripple-canvas {
        opacity: 1;
    }

    /* Cuando el ripple está activo, ocultamos la imagen base
       (el canvas la muestra ya con la distorsión). */
    [data-art-ripple].is-ripple-running > picture,
    [data-art-ripple].is-ripple-running > img {
        opacity: 0;
        transition: opacity var(--dur-medium, 500ms) var(--ease-out-quint, cubic-bezier(0.16, 1, 0.3, 1));
    }

    /* Reduced motion · gana sin !important porque las reglas base
       usan :where() (specificity 0) y acá repetimos la jerarquía
       completa (incluyendo .is-ripple-running) para empatar specificity. */
    @media (prefers-reduced-motion: reduce) {
        [data-art-ripple] > canvas.ad-ripple-canvas {
            display: none;
        }
        [data-art-ripple].is-ripple-running > picture,
        [data-art-ripple].is-ripple-running > img,
        [data-art-ripple] > picture,
        [data-art-ripple] > img {
            opacity: 1;
        }
    }

    /* Mobile · canvas oculto. Misma técnica de specificity vs :where(). */
    @media (max-width: 768px) {
        [data-art-ripple] > canvas.ad-ripple-canvas {
            display: none;
        }
    }

}