# Plan para "Apaciguar" el Efecto Fluid sobre Textos

## Comportamiento Actual
- El efecto de fluid responde al movimiento del mouse en toda la página (gracias a EventListener en document)
- Cuando el mouse está sobre texto, el efecto es tan intenso que dificulta la lectura
- La dinámica del efecto (color transition, fuerza, etc.) sigue funcionando bien

## Objetivo
"Apaciguar" el efecto cuando el mouse está sobre áreas de texto - reducir su impacto visual sin eliminar la interacción.

## Opciones viables:

### Opción 1: Reducir intensidad basado en elementos (Recomendado)
**Enfoque:** Detectar cuándo el mouse está sobre elementos de texto/lectura y reducir la intensidad

#### Implementación:
```javascript
// En fluid.js, modificar el event listener
document.addEventListener("mousemove", function(e) {
  //Verificar si está sobre elementos que no deben tener efecto fuerte
  const overText = isMouseOverTextElements(e.target);
  
  if (overText) {
    //Modo "apaciguado" - reducir intensidad
    pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * 2.0; //Reducido (<10.0)
    pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * 2.0;
    
    //Opcional: reducir el color también
    const mutedColor = [colorArr[0]*0.7, colorArr[1]*0.7, colorArr[2]*0.7];
    pointers[0].color = mutedColor;
  } else {
    //Modo normal - comportamiento actual
    pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * 10.0;
    pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * 10.0;
    pointers[0].color = colorArr;
  }
  
  pointers[0].x = e.clientX - canvas.offsetLeft;
  pointers[0].y = e.clientY - canvas.offsetTop;
});

function isMouseOverTextElements(target) {
  //Listar selectores de elementos donde NO queremos efecto fuerte
  const textSelectors = [
    'p', '.hero-content p','h1', '.hero-content h1',
    'h2', 'h3', 'a.sheet-link', '.sheet-link span',
    '.menu-btn', '.eyebrow'
  ];
  
  for (const selector of textSelectors) {
    if (target.closest(selector)) {
      return true;
    }
  }
  return false;
}
```

**Ventajas:**
- Automático y contextual
- No cambia la dinámica original en áreas no-textuales  
- Conserva completa interacción
- Personalizable qué elementos "apacigar"

---

### Opción 2: Transparencia condicional (Alternativa simple)
**Enfoque:** Reducir opacidad del canvas cuando está sobre texto

#### Implementación:
```css
/* En styles.css */
p, h1, h2, h3,
.sheet-link span,
.eyebrow {
  position: relative;
}

p::after, h1::after, h2::after, h3::after,
.sheet-link span::after,
.eyebrow::after {
  content: '';
  position: absolute; 
  top: -10px; right: -10px; bottom: -10px; left: -10px;
  z-index: 2;
}
```

**Ventajas:**
- Solución CSS-only (no requiere JS)
- Simple implementación

**Desventajas:**
- No control fino, solo todo o nada
- Puede afectar capas y layout existing

---

### Opción 3: Efecto "follow" más suave para texto
**Enfoque:** Reducir la intensidad (dx/dy multiplier) pero mantener color full

#### Implementación:
```javascript
document.addEventListener("mousemove", function(e) {
  const isOverReadableText = /(p|h[1-6]|.eyebrow|.sheet-link)/i.test(e.target.className || e.target.tagName);
  
  const multiplier = isOverReadableText ? 3.0 : 10.0; // Reducido de 10 a 3 sobre texto
  
  pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * multiplier;
  pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * multiplier;
  //Restante del código...
});
```

**Ventajas:**
- Muy sutil, difícil de notas
- Conserva dinámica del efecto

---

## Recomendación Final: Implementar Opción 1 con refinamientos

### Cambios específicos:
1. **En fluid.js** (líneas ~372):
   - Modificar el `mousemove` handler para detectar elementos de texto
   - Aplicar multiplicador reducido (*2 o *3) y color más tenue en esos casos
   
2. **Lista de selectores** para "modo apaciguado":
   ```javascript
   ['p', 'h1', 'h2', 'h3', '.hero-content h1', '.eyebrow', 
    'a.sheet-link', '.sheet-link span', '.menu-btn']
   ```

### Beneficios clave:
- 📖 Facilita la lectura al reducir ruido visual sobre texto
- ✨ Conserva el efecto completo en áreas no-textuales (fondo, logos)
- 🎨 Mantiene las transiciones de color entre marcas
- 🚀 Sin cambios en la dinámica del sistema fluid (solo intensidad)

### Prueba y ajuste:
- Probar con diferentes multiplicadores (2.0 vs 3.0) para encontrar el balance ideal
- Ajustar selectores CSS según qué elementos necesitan "apaciguamiento"
- Verificar que botones/menu sigan siendo interactivos