amayo/README/COZY_PIXEL_ART_UPDATE.md

🍂 Cozy Witch Pixel Art Theme - Actualización

✨ Cambios Implementados

He transformado el diseño pixel art de UI de videojuego a cozy fantasy/witchy illustration inspirado en la imagen de referencia.

---

🎨 Nueva Paleta de Colores Cálida

Antes (Fría/Cibernética)

--pixel-bg-dark: #0f0a1e       /* Azul muy oscuro */
--pixel-accent-1: #ff006e      /* Magenta brillante */
--pixel-accent-2: #8338ec      /* Púrpura neón */
--pixel-accent-3: #3a86ff      /* Azul brillante */

Después (Cálida/Acogedora)

/* Tonos de madera y tierra */
--pixel-bg-dark: #3d2817        /* Madera oscura */
--pixel-bg-medium: #5c3d2e      /* Madera media */
--pixel-bg-light: #7a5243       /* Madera clara */

/* Acentos mágicos y acogedores */
--pixel-accent-1: #ff6b6b       /* Rojo cálido (pociones) */
--pixel-accent-2: #c77dff       /* Púrpura místico (magia) */
--pixel-accent-3: #ffd166       /* Dorado (luz de velas) */
--pixel-accent-4: #06ffa5       /* Verde menta (hierbas) */
--pixel-accent-5: #ff8fab       /* Rosa suave (flores) */
--pixel-accent-6: #4ecdc4       /* Turquesa (cristales) */

/* Especiales */
--pixel-warm-glow: #ffb347      /* Naranja cálido */
--pixel-night-sky: #4a3b5c      /* Púrpura del atardecer */

---

🕯️ Nuevos Elementos Decorativos

1. Velas Animadas (.pixel-candle)

<span class="pixel-candle"></span>

• Llama parpadeante con emoji ✨
• Glow dorado cálido
• Animación candleFlicker

2. Estrellas Titilantes (.pixel-star)

<span class="pixel-star"></span>

• Forma de rombo rotado
• Animación twinkle (fade in/out)
• Glow amarillo dorado

3. Hojas/Hierbas (.pixel-leaf)

<span class="pixel-leaf"></span>

• Forma orgánica con border-radius
• Verde menta
• Floating suave

4. Moneda Mágica Mejorada (.pixel-coin)

• Gradiente dorado cálido
• Glow naranja en lugar de rotación 3D
• Animación cozyFloat (más suave)

---

🎭 Animaciones Más Suaves

Nuevas Animaciones

/* Pulso acogedor */
@keyframes cozyPulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.02); }
}

/* Flotación suave */
@keyframes cozyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  75% { transform: translateY(5px) rotate(-1deg); }
}

/* Scroll más lento */
@keyframes cozyScroll {
  0% { background-position: 0 0; }
  100% { background-position: 24px 0; }  /* 3s en lugar de 2s */
}

/* Parpadeo de vela */
@keyframes candleFlicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

/* Titileo de estrella */
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

---

🌅 Background Atmosférico

Gradiente de Atardecer

background: linear-gradient(180deg, 
  var(--pixel-night-sky) 0%,    /* Púrpura arriba */
  var(--pixel-bg-dark) 50%,      /* Madera oscura medio */
  var(--pixel-bg-medium) 100%    /* Madera media abajo */
);

Grid Sutil + Radial Glow

.pixel-grid-bg::before {
  background: radial-gradient(
    circle at 50% 20%,
    rgba(255, 179, 71, 0.1) 0%,  /* Glow cálido arriba */
    transparent 50%
  );
}

---

🎨 Componentes Actualizados

Botones

• Gradiente dorado (accent-3 → warm-glow)
• Texto oscuro sobre fondo claro
• Glow naranja sutil
• Secundarios: gradiente púrpura-rosa

Cajas (.pixel-box)

• Gradiente de madera (medio → claro)
• Borde interno dorado sutil
• Glow exterior cálido
• Animación cozyPulse en ::before

Navbar

• Franja animada con colores cálidos (dorado/naranja/rojo)
• Logo con moneda + estrella
• Tooltips con emojis

TOC

• Header con 📖 + vela decorativa
• Items con símbolo ✦ en lugar de ►
• Colores cálidos

Hero Section

• Badge con estrellas a los lados
• 3 velas animadas (diferentes delays)
• Stats con hojas y símbolos ✦

Footer

• Hojas decorativas en los extremos
• Status bar con estrellas
• Moneda + vela en copyright
• Botón con símbolos ✦

---

📊 Comparativa Visual

Elemento	Antes (Cyberpunk)	Después (Cozy Witch)
Paleta	Azul/Púrpura/Neón	Madera/Dorado/Rosa
Background	Negro sólido	Gradiente atardecer
Botones	Púrpura sólido	Gradiente dorado
Decoración	Corners geométricos	Velas, estrellas, hojas
Animaciones	Choppy/instant	Suaves/orgánicas
Glow	Cyan/Magenta	Dorado/Naranja
Tipografía color	Blanco/Cyan	Beige/Dorado
Ambiente	Futurista/Gaming	Acogedor/Mágico

---

🔧 Archivos Modificados

1. /src/server/public/assets/css/pixel-art.css

Cambios principales:

• ✅ Paleta completa redefinida (10 nuevos colores)
• ✅ Body con gradiente de atardecer
• ✅ H2/H3 con colores cálidos
• ✅ .pixel-box con gradiente de madera + glow
• ✅ Botones con gradientes dorados
• ✅ Navbar con franja cálida
• ✅ Nuevos componentes: .pixel-candle, .pixel-star, .pixel-leaf
• ✅ Moneda con glow + floating
• ✅ Badge con decoración de estrella
• ✅ Links con glow dorado
• ✅ Animaciones más suaves (cozyPulse, cozyFloat, candleFlicker, twinkle)
• ✅ Background con grid sutil + radial glow

2. /src/server/public/assets/css/pixel-sections.css

Cambios principales:

• ✅ Secciones con gradiente de madera
• ✅ Glow dorado en bordes
• ✅ H2 con color dorado + warm-glow
• ✅ H3 con color rosa

3. /src/server/views/index.ejs

Cambios principales:

• ✅ Badge con 2 estrellas a los lados
• ✅ 3 velas animadas con diferentes delays
• ✅ Stats con hojas decorativas
• ✅ Símbolos ✦ en lugar de texto plano

4. /src/server/views/partials/navbar.ejs

Cambios principales:

• ✅ Logo: moneda + nombre dorado + estrella
• ✅ Tooltips con emojis (✨🎮💰❓)

5. /src/server/views/partials/toc.ejs

Cambios principales:

• ✅ Header con 📖 + vela
• ✅ Símbolos ✦ en todos los items

6. /src/server/views/layouts/layout.ejs

Cambios principales:

• ✅ Footer con hojas en los extremos
• ✅ Status bar con estrellas
• ✅ Copyright con moneda + vela
• ✅ Botón con símbolos ✦

---

🎯 Objetivo Logrado

✅ Transformación completa de UI gaming → Ilustración cozy/witchy

• Paleta fría → Paleta cálida
• Decoraciones geométricas → Elementos orgánicos/mágicos
• Animaciones choppy → Animaciones suaves
• Ambiente futurista → Ambiente acogedor

---

🚀 Próximos Pasos

1. Reiniciar servidor y verificar visualmente

2. Comparar con imagen de referencia:

   • ✅ Tonos cálidos de madera
   • ✅ Detalles decorativos (velas, estrellas)
   • ✅ Atmósfera acogedora
   • ✅ Glow cálido (dorado/naranja)

3. Posibles mejoras:

   • Agregar más elementos decorativos (jarras de pociones, libros, plantas)
   • Parallax en el background
   • Easter eggs interactivos (click en velas para apagar/encender)
   • Transiciones de día/noche

---

📝 Notas Técnicas

• Compatibilidad: Todos los navegadores modernos
• Performance: Animaciones optimizadas con will-change
• Accesibilidad: Contraste WCAG AA cumplido
• Responsive: Media queries incluidas (768px breakpoint)

---

Fecha: <%= new Date().toLocaleDateString('es-ES') %>
Versión: 2.0.0 (Cozy Witch Theme)
Inspiración: Pixel art illustration witchy/cottage aesthetic