<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generador de Mosaicos Pixel Art Dinámicos</title>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <!-- Font Awesome (para iconos) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- anime.js (para animaciones complejas) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <style>
        :root {
            --primary-color: #00ffcc;
            --secondary-color: #9400d3;
            --background-dark: #1a1a2e;
            --background-light: #2a2a4e;
            --text-color: #e0e0fc;
            --accent-glow: rgba(0, 255, 204, 0.5);
            --font-display: 'Orbitron', sans-serif;
            --font-body: 'Roboto', sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-body);
            background: linear-gradient(135deg, var(--background-dark) 0%, #16222a 100%);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            background-color: rgba(42, 42, 78, 0.7);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-glow);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 255, 204, 0.2);
            margin-top: 20px;
            margin-bottom: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 1px solid var(--primary-color);
            padding-bottom: 20px;
        }

        header h1 {
            font-family: var(--font-display);
            font-size: 2.8em;
            color: var(--primary-color);
            text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
            margin-bottom: 10px;
            letter-spacing: 2px;
        }

        header p {
            font-size: 1.1em;
            color: var(--text-color);
            opacity: 0.8;
        }

        main {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 30px;
            align-items: start;
        }

        @media (max-width: 900px) {
            main {
                grid-template-columns: 1fr;
            }
            #controls {
                order: 1; /* Move controls below mosaic on smaller screens */
            }
            #mosaic-area {
                 order: 0;
                 min-height: 400px; /* Ensure space for mosaic */
            }
        }

        #controls {
            background-color: var(--background-light);
            padding: 25px;
            border-radius: 10px;
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .control-group label {
            font-weight: bold;
            color: var(--primary-color);
            font-size: 1.1em;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .control-group label i {
            width: 20px;
            text-align: center;
        }

        input[type="file"] {
            display: none; /* Hide default and use custom button */
        }

        .custom-file-upload {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: var(--background-dark);
            padding: 12px 20px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            font-weight: bold;
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .custom-file-upload:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), 0 0 15px var(--accent-glow);
        }

        .custom-file-upload i {
            margin-right: 8px;
        }

        #file-name {
            font-size: 0.9em;
            color: var(--text-color);
            opacity: 0.7;
            margin-top: 5px;
            word-break: break-all;
        }

        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            border-radius: 5px;
            outline: none;
            cursor: pointer;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid var(--background-dark);
            box-shadow: 0 0 8px var(--accent-glow);
            transition: background 0.2s ease;
        }
        input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid var(--background-dark);
            box-shadow: 0 0 8px var(--accent-glow);
            transition: background 0.2s ease;
        }
        input[type="range"]::-webkit-slider-thumb:hover,
        input[type="range"]::-moz-range-thumb:hover {
            background: #fff;
        }

        .range-value {
            text-align: right;
            font-size: 0.9em;
            color: var(--primary-color);
            font-weight: bold;
        }

        select {
            padding: 10px;
            border-radius: 5px;
            border: 1px solid var(--secondary-color);
            background-color: var(--background-dark);
            color: var(--text-color);
            font-size: 1em;
            cursor: pointer;
            appearance: none; /* Remove default arrow */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300ffcc'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd' /%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px 16px;
        }

        .action-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 15px;
        }

        button {
            padding: 12px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1em;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
        }

        .btn-primary {
            background: linear-gradient(45deg, var(--primary-color), #00b38f);
            color: var(--background-dark);
        }
        .btn-primary:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), 0 0 15px var(--accent-glow);
        }

        .btn-secondary {
            background: linear-gradient(45deg, var(--secondary-color), #7a00b3);
            color: var(--text-color);
        }
        .btn-secondary:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), 0 0 15px rgba(148, 0, 211, 0.5);
        }

        .btn-danger {
             background: linear-gradient(45deg, #ff4d4d, #cc0000);
             color: var(--text-color);
             grid-column: span 2; /* Make reset button full width */
        }
        .btn-danger:hover:not(:disabled) {
             transform: translateY(-2px);
             box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 77, 77, 0.5);
        }


        #mosaic-area {
            background-color: var(--background-dark);
            border-radius: 10px;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
            position: relative;
            overflow: hidden;
            /* Aspect ratio ensures it doesn't collapse */
            aspect-ratio: 4 / 3;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #mosaic-container {
            display: grid;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .pixel-tile {
            /* Width/Height set by JS */
            /* background-color set by JS */
            transition: background-color 0.1s linear; /* For non-anime.js color changes */
        }

        #placeholder, #loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: var(--text-color);
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }

        #placeholder i {
            font-size: 4em;
            margin-bottom: 15px;
            color: var(--primary-color);
        }

        #loader {
            display: none; /* Hidden by default */
            flex-direction: column;
            align-items: center;
        }

        .spinner {
            border: 5px solid rgba(255, 255, 255, 0.2);
            border-top: 5px solid var(--primary-color);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 15px;
            border-top: 1px solid rgba(0, 255, 204, 0.2);
            font-size: 0.9em;
            color: var(--text-color);
            opacity: 0.7;
            width: 100%;
            max-width: 1200px;
        }

        footer a {
            color: var(--primary-color);
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        }

    </style>
</head>
<body>

    <div class="container">
        <header>
            <h1><i class="fas fa-cubes"></i> Generador Pixel Art Dinámico</h1>
            <p>Convierte tus imágenes en mosaicos animados y reconfigurables.</p>
        </header>

        <main>
            <section id="controls">
                <div class="control-group">
                    <label for="imageUpload" class="custom-file-upload">
                        <i class="fas fa-upload"></i> Cargar Imagen
                    </label>
                    <input type="file" id="imageUpload" accept="image/*">
                    <span id="file-name">Ningún archivo seleccionado</span>
                </div>

                <div class="control-group">
                    <label for="pixelSize"><i class="fas fa-th-large"></i> Tamaño Pixel (px)</label>
                    <input type="range" id="pixelSize" min="5" max="50" value="20" step="1">
                    <span class="range-value" id="pixelSizeValue">20px</span>
                </div>

                <div class="control-group">
                    <label for="animationSpeed"><i class="fas fa-tachometer-alt"></i> Velocidad Animación</label>
                    <input type="range" id="animationSpeed" min="100" max="5000" value="1000" step="100">
                    <span class="range-value" id="animationSpeedValue">1000ms</span>
                </div>

                 <div class="control-group">
                    <label for="animationStyle"><i class="fas fa-random"></i> Estilo Animación/Azar</label>
                    <select id="animationStyle">
                        <option value="fade">Desvanecimiento (Fade)</option>
                        <option value="flyIn">Entrada Volando (Fly In)</option>
                        <option value="scalePop">Pop con Escala</option>
                        <option value="randomColorShift">Cambio Color Aleatorio</option>
                        <option value="shuffle">Mezclar Posiciones</option>
                        <option value="wave">Onda (Wave)</option>
                         <option value="implodeExplode">Implosión/Explosión</option>
                    </select>
                </div>

                <div class="action-buttons">
                    <button id="generateBtn" class="btn-primary" disabled><i class="fas fa-cogs"></i> Generar</button>
                    <button id="animateBtn" class="btn-secondary" disabled><i class="fas fa-play"></i> Animar/Azar</button>
                    <button id="stopAnimationBtn" class="btn-secondary" style="background: linear-gradient(45deg, #ffae42, #ff8c00);" disabled><i class="fas fa-stop"></i> Detener</button>
                    <button id="resetBtn" class="btn-danger"><i class="fas fa-undo"></i> Reiniciar</button>
                </div>
            </section>

            <section id="mosaic-area">
                <div id="placeholder">
                    <i class="fas fa-image"></i>
                    <p>Carga una imagen para comenzar</p>
                </div>
                <div id="loader">
                    <div class="spinner"></div>
                    <p>Procesando imagen...</p>
                </div>
                <canvas id="sourceCanvas" style="display: none;"></canvas> <!-- Hidden canvas for processing -->
                <div id="mosaic-container">
                    <!-- Pixel tiles will be generated here -->
                </div>
            </section>
        </main>
    </div>

    <footer>
        <p>Creado con <i class="fas fa-heart" style="color: var(--primary-color);"></i> y mucho <i class="fas fa-code" style="color: var(--primary-color);"></i> | Inspirado en el arte digital</p>
    </footer>

    <script>
        // DOM Elements
        const imageUpload = document.getElementById('imageUpload');
        const fileNameSpan = document.getElementById('file-name');
        const pixelSizeSlider = document.getElementById('pixelSize');
        const pixelSizeValueSpan = document.getElementById('pixelSizeValue');
        const animationSpeedSlider = document.getElementById('animationSpeed');
        const animationSpeedValueSpan = document.getElementById('animationSpeedValue');
        const animationStyleSelect = document.getElementById('animationStyle');
        const generateBtn = document.getElementById('generateBtn');
        const animateBtn = document.getElementById('animateBtn');
        const stopAnimationBtn = document.getElementById('stopAnimationBtn');
        const resetBtn = document.getElementById('resetBtn');
        const mosaicContainer = document.getElementById('mosaic-container');
        const mosaicArea = document.getElementById('mosaic-area');
        const sourceCanvas = document.getElementById('sourceCanvas');
        const placeholder = document.getElementById('placeholder');
        const loader = document.getElementById('loader');
        const ctx = sourceCanvas.getContext('2d', { willReadFrequently: true }); // willReadFrequently for performance

        // State
        let sourceImage = null;
        let pixelData = []; // Array to hold color data for each tile
        let currentAnimation = null;
        let cols = 0;
        let rows = 0;
        let currentPixelSize = parseInt(pixelSizeSlider.value);
        let tiles = []; // Keep track of tile elements

        // --- Event Listeners ---

        imageUpload.addEventListener('change', handleImageUpload);
        pixelSizeSlider.addEventListener('input', handlePixelSizeChange);
        animationSpeedSlider.addEventListener('input', handleAnimationSpeedChange);
        generateBtn.addEventListener('click', generateMosaic);
        animateBtn.addEventListener('click', triggerAnimation);
        stopAnimationBtn.addEventListener('click', stopAnimation);
        resetBtn.addEventListener('click', resetAll);

        // --- Initialization ---

        updateSliderValue(pixelSizeSlider, pixelSizeValueSpan, 'px');
        updateSliderValue(animationSpeedSlider, animationSpeedValueSpan, 'ms');

        // --- Functions ---

        function handleImageUpload(event) {
            const file = event.target.files[0];
            if (file) {
                fileNameSpan.textContent = file.name;
                const reader = new FileReader();
                reader.onload = function(e) {
                    sourceImage = new Image();
                    sourceImage.onload = () => {
                        generateBtn.disabled = false;
                        animateBtn.disabled = true; // Needs generation first
                        stopAnimationBtn.disabled = true;
                        placeholder.style.opacity = 0;
                        loader.style.display = 'none';
                        // Optionally generate preview or initial mosaic here
                        generateMosaic(); // Auto-generate on load
                    };
                    sourceImage.onerror = () => {
                        alert("Error al cargar la imagen.");
                        resetAll();
                    };
                    sourceImage.src = e.target.result;
                    showLoader("Cargando imagen...");
                }
                reader.readAsDataURL(file);
            } else {
                fileNameSpan.textContent = 'Ningún archivo seleccionado';
                sourceImage = null;
                generateBtn.disabled = true;
            }
        }

        function handlePixelSizeChange() {
            currentPixelSize = parseInt(pixelSizeSlider.value);
            updateSliderValue(pixelSizeSlider, pixelSizeValueSpan, 'px');
             // Re-generate automatically if image exists
            if (sourceImage) {
                generateMosaic();
            }
        }

        function handleAnimationSpeedChange() {
             updateSliderValue(animationSpeedSlider, animationSpeedValueSpan, 'ms');
             // If an animation is running, update its speed (might require restarting it depending on library/effect)
             if(currentAnimation) {
                 // Anime.js allows changing timescale, but simpler to just re-trigger for some effects
                 // Stop and restart might be safer across all animation types
                 stopAnimation();
                 triggerAnimation();
             }
        }

        function updateSliderValue(slider, span, unit) {
            span.textContent = slider.value + unit;
        }

        function showLoader(message = "Procesando...") {
            loader.querySelector('p').textContent = message;
            loader.style.display = 'flex';
            placeholder.style.opacity = 0;
            mosaicContainer.innerHTML = ''; // Clear previous mosaic
        }

        function hideLoader() {
            loader.style.display = 'none';
        }

        function processImage(pixelSize) {
            if (!sourceImage) return;

            showLoader("Analizando píxeles...");

            // Use a timeout to allow the loader to render before heavy processing
            setTimeout(() => {
                const aspectRatio = sourceImage.width / sourceImage.height;
                const containerWidth = mosaicArea.clientWidth;
                const containerHeight = mosaicArea.clientHeight;

                let canvasWidth, canvasHeight;

                // Fit image to container while maintaining aspect ratio
                if (containerWidth / containerHeight > aspectRatio) {
                    canvasHeight = containerHeight;
                    canvasWidth = canvasHeight * aspectRatio;
                } else {
                    canvasWidth = containerWidth;
                    canvasHeight = canvasWidth / aspectRatio;
                }

                 // Calculate cols/rows based on the *display* size and pixelSize
                cols = Math.floor(canvasWidth / pixelSize);
                rows = Math.floor(canvasHeight / pixelSize);

                // Ensure at least one row/col
                cols = Math.max(1, cols);
                rows = Math.max(1, rows);

                // Adjust canvas size slightly to be perfect multiple of pixelSize
                const finalCanvasWidth = cols * pixelSize;
                const finalCanvasHeight = rows * pixelSize;

                sourceCanvas.width = finalCanvasWidth;
                sourceCanvas.height = finalCanvasHeight;

                // Draw image scaled onto the processing canvas
                ctx.clearRect(0, 0, finalCanvasWidth, finalCanvasHeight);
                ctx.drawImage(sourceImage, 0, 0, finalCanvasWidth, finalCanvasHeight);

                pixelData = [];

                try {
                    const imageData = ctx.getImageData(0, 0, finalCanvasWidth, finalCanvasHeight);
                    const data = imageData.data;

                    for (let y = 0; y < rows; y++) {
                        for (let x = 0; x < cols; x++) {
                            const startX = x * pixelSize;
                            const startY = y * pixelSize;
                            let r = 0, g = 0, b = 0, count = 0;

                            // Sample pixels within the block
                            for (let py = 0; py < pixelSize; py++) {
                                for (let px = 0; px < pixelSize; px++) {
                                    const currentX = startX + px;
                                    const currentY = startY + py;
                                    const index = (currentY * finalCanvasWidth + currentX) * 4;

                                    if (index < data.length) {
                                        r += data[index];
                                        g += data[index + 1];
                                        b += data[index + 2];
                                        // alpha = data[index + 3]; // Could use alpha later
                                        count++;
                                    }
                                }
                            }

                            // Calculate average color
                            if (count > 0) {
                                r = Math.floor(r / count);
                                g = Math.floor(g / count);
                                b = Math.floor(b / count);
                                pixelData.push(`rgb(${r},${g},${b})`);
                            } else {
                                pixelData.push('rgb(0,0,0)'); // Fallback for empty areas
                            }
                        }
                    }
                     // Proceed to create tiles after processing
                    createTiles(pixelSize, finalCanvasWidth, finalCanvasHeight);

                } catch (error) {
                    console.error("Error processing image data:", error);
                    alert("Hubo un error al procesar la imagen. Puede ser demasiado grande o un formato no soportado por el canvas.");
                    hideLoader();
                    resetAll();
                }

            }, 50); // Small delay for UI update
        }


        function createTiles(pixelSize, mosaicWidth, mosaicHeight) {
             mosaicContainer.innerHTML = ''; // Clear previous tiles
             tiles = []; // Reset tiles array
             mosaicContainer.style.gridTemplateColumns = `repeat(${cols}, ${pixelSize}px)`;
             mosaicContainer.style.gridTemplateRows = `repeat(${rows}, ${pixelSize}px)`;

            // Center the grid within the container if it's smaller
             mosaicContainer.style.width = `${mosaicWidth}px`;
             mosaicContainer.style.height = `${mosaicHeight}px`;
             mosaicContainer.style.margin = 'auto'; // Centers the grid

             for (let i = 0; i < pixelData.length; i++) {
                 const tile = document.createElement('div');
                 tile.classList.add('pixel-tile');
                 tile.style.width = `${pixelSize}px`;
                 tile.style.height = `${pixelSize}px`;
                 tile.style.backgroundColor = pixelData[i];
                 // Store original color for some animations
                 tile.dataset.originalColor = pixelData[i];
                 // Store original position (index) for shuffle
                 tile.dataset.originalIndex = i;
                 mosaicContainer.appendChild(tile);
                 tiles.push(tile);
             }

             hideLoader();
             placeholder.style.opacity = 0; // Ensure placeholder is hidden
             animateBtn.disabled = false;
             stopAnimationBtn.disabled = true; // Animation not running yet
        }


        function generateMosaic() {
            if (!sourceImage) {
                alert("Por favor, carga una imagen primero.");
                return;
            }
            stopAnimation(); // Stop any existing animation before regenerating
            processImage(currentPixelSize);
        }

        function triggerAnimation() {
            if (tiles.length === 0) {
                alert("Genera un mosaico primero.");
                return;
            }

            stopAnimation(); // Ensure any previous animation is stopped

            const style = animationStyleSelect.value;
            const duration = parseInt(animationSpeedSlider.value);
            const delay = anime.stagger(Math.max(1, Math.floor(duration / tiles.length / 2)), { grid: [cols, rows], from: 'center' });

             animateBtn.disabled = true;
             stopAnimationBtn.disabled = false;

            switch (style) {
                case 'fade':
                    currentAnimation = anime({
                        targets: tiles,
                        opacity: [0, 1],
                        delay: delay,
                        duration: duration,
                        easing: 'easeInOutQuad',
                        loop: true,
                        direction: 'alternate',
                        complete: () => { if (!currentAnimation) { animateBtn.disabled = false; stopAnimationBtn.disabled = true;} } // Re-enable buttons if stopped manually
                    });
                    break;

                case 'flyIn':
                     // Reset initial positions slightly offscreen/scaled
                    tiles.forEach(tile => {
                        tile.style.opacity = 0;
                        const xRand = (Math.random() - 0.5) * 50;
                        const yRand = (Math.random() - 0.5) * 50;
                        tile.style.transform = `translate(${xRand}px, ${yRand}px) scale(0.5)`;
                    });
                    currentAnimation = anime({
                        targets: tiles,
                        opacity: [0, 1],
                        translateX: 0,
                        translateY: 0,
                        scale: [0.5, 1],
                        delay: delay,
                        duration: duration * 1.5, // Longer duration for fly-in
                        easing: 'easeOutExpo',
                        complete: () => { animateBtn.disabled = false; stopAnimationBtn.disabled = true; } // Only run once
                    });
                    break;

                case 'scalePop':
                    currentAnimation = anime({
                        targets: tiles,
                        scale: [0.2, 1],
                        opacity: [0, 1],
                        delay: delay,
                        duration: duration,
                        easing: 'easeOutBack',
                        loop: true,
                        direction: 'alternate',
                        complete: () => { if (!currentAnimation) { animateBtn.disabled = false; stopAnimationBtn.disabled = true;} }
                    });
                    break;

                case 'randomColorShift':
                    currentAnimation = anime({
                        targets: tiles,
                        backgroundColor: () => `rgb(${anime.random(0, 255)}, ${anime.random(0, 255)}, ${anime.random(0, 255)})`,
                        delay: anime.stagger(50, { grid: [cols, rows], from: 'first' }),
                        duration: duration,
                        easing: 'linear',
                        loop: true,
                        direction: 'alternate',
                         complete: () => { if (!currentAnimation) { animateBtn.disabled = false; stopAnimationBtn.disabled = true;} }
                    });
                    break;

                 case 'shuffle':
                    // Important: Shuffle needs careful handling of positions
                    stopAnimation(); // Ensure other transforms are stopped

                    let indices = tiles.map((_, i) => i);
                    // Fisher-Yates Shuffle
                    for (let i = indices.length - 1; i > 0; i--) {
                        const j = Math.floor(Math.random() * (i + 1));
                        [indices[i], indices[j]] = [indices[j], indices[i]];
                    }

                    currentAnimation = anime({
                        targets: tiles,
                        translateX: (el, i) => {
                            const targetIndex = indices[i];
                            const originalCol = parseInt(el.dataset.originalIndex) % cols;
                            const targetCol = targetIndex % cols;
                            return (targetCol - originalCol) * currentPixelSize;
                        },
                        translateY: (el, i) => {
                            const targetIndex = indices[i];
                            const originalRow = Math.floor(parseInt(el.dataset.originalIndex) / cols);
                            const targetRow = Math.floor(targetIndex / cols);
                            return (targetRow - originalRow) * currentPixelSize;
                        },
                        scale: [
                            { value: 0.7, easing: 'easeOutSine', duration: duration / 2 },
                            { value: 1, easing: 'easeInOutQuad', duration: duration / 2 }
                        ],
                        delay: anime.stagger(20, { grid: [cols, rows], from: 'center' }),
                        easing: 'easeOutExpo',
                        duration: duration * 1.2,
                        complete: () => {
                           // Important: Reset transforms so next animation works correctly
                           // We don't physically reorder the DOM for performance
                           // but visually they are shuffled. For a true persistent shuffle,
                           // you'd need to reorder or update background colors.
                           anime({ targets: tiles, translateX: 0, translateY: 0, duration: 0});
                           animateBtn.disabled = false;
                           stopAnimationBtn.disabled = true;
                        }
                    });
                    break;

                case 'wave':
                     currentAnimation = anime({
                        targets: tiles,
                        translateY: [
                            { value: -10, easing: 'easeOutSine', duration: duration / 2 },
                            { value: 0, easing: 'easeInOutQuad', duration: duration / 2 }
                        ],
                        delay: anime.stagger(100, {grid: [cols, rows], from: 'first', axis: 'x'}),
                        loop: true,
                        direction: 'alternate',
                        duration: duration,
                        easing: 'linear',
                        complete: () => { if (!currentAnimation) { animateBtn.disabled = false; stopAnimationBtn.disabled = true;} }
                    });
                    break;

                 case 'implodeExplode':
                    const centerX = mosaicArea.clientWidth / 2;
                    const centerY = mosaicArea.clientHeight / 2;

                     // Reset positions first
                    anime({ targets: tiles, translateX: 0, translateY: 0, scale: 1, opacity: 1, duration: 0});

                    currentAnimation = anime.timeline({
                        duration: duration * 1.5,
                        easing: 'easeOutExpo',
                        loop: true,
                        complete: () => { if (!currentAnimation) { animateBtn.disabled = false; stopAnimationBtn.disabled = true;} }
                    })
                    .add({ // Implode
                        targets: tiles,
                        translateX: (el) => {
                             const rect = el.getBoundingClientRect();
                             const elCenterX = rect.left + rect.width / 2 - mosaicContainer.getBoundingClientRect().left;
                             return centerX - elCenterX - rect.width/2; // Adjusting for element size and centering
                        },
                        translateY: (el) => {
                             const rect = el.getBoundingClientRect();
                             const elCenterY = rect.top + rect.height / 2 - mosaicContainer.getBoundingClientRect().top;
                             return centerY - elCenterY - rect.height/2; // Adjusting for element size and centering
                        },
                        scale: 0,
                        opacity: 0,
                        delay: anime.stagger(5, {grid: [cols, rows], from: 'center'}),
                        easing: 'easeInExpo'
                    })
                    .add({ // Explode back
                        targets: tiles,
                        translateX: 0,
                        translateY: 0,
                        scale: 1,
                        opacity: 1,
                        delay: anime.stagger(5, {grid: [cols, rows], from: 'center'}),
                        easing: 'easeOutExpo'
                    }, `-=${duration * 0.5}`); // Overlap animations slightly
                    break;

                default:
                    console.warn("Estilo de animación no reconocido:", style);
                    animateBtn.disabled = false;
                    stopAnimationBtn.disabled = true;
            }
        }


        function stopAnimation() {
            if (currentAnimation) {
                anime.remove(tiles); // Remove all animations targetting the tiles
                currentAnimation.pause(); // Pause the animation controller if possible
                currentAnimation = null;

                // Reset visual state for consistency, especially transforms
                anime({
                    targets: tiles,
                    opacity: 1,
                    scale: 1,
                    translateX: 0,
                    translateY: 0,
                    // Optionally reset colors if the animation changed them permanently
                    // backgroundColor: (el) => el.dataset.originalColor,
                    duration: 300, // Short transition back to normal
                    easing: 'easeOutQuad'
                });

                console.log("Animation stopped");
            }
            animateBtn.disabled = tiles.length === 0; // Re-enable if tiles exist
            stopAnimationBtn.disabled = true;
        }

        function resetAll() {
            stopAnimation();
            sourceImage = null;
            pixelData = [];
            tiles = [];
            mosaicContainer.innerHTML = '';
            mosaicContainer.style.width = '100%'; // Reset centering styles
            mosaicContainer.style.height = '100%';
            mosaicContainer.style.margin = '0';
            placeholder.style.opacity = 1;
            hideLoader();
            imageUpload.value = ''; // Clear file input
            fileNameSpan.textContent = 'Ningún archivo seleccionado';
            pixelSizeSlider.value = 20;
            handlePixelSizeChange(); // Update display and value
            animationSpeedSlider.value = 1000;
            handleAnimationSpeedChange(); // Update display and value
            generateBtn.disabled = true;
            animateBtn.disabled = true;
            stopAnimationBtn.disabled = true;
            ctx.clearRect(0, 0, sourceCanvas.width, sourceCanvas.height); // Clear hidden canvas
        }

    </script>

</body>
</html>