🎯 CURVE SYSTEM - Analisi e Soluzione Pulita

❌ PROBLEMI ATTUALI (Code Review)

1. Architettura Sovracomplessa

PRIMA (SBAGLIATO):
- 4 layer SVG sovrapposti (L0, L1, L2, L3)
- Maschere SVG duplicate e confuse
- CSS con gradienti multi-step ridondanti
- Mix-blend-mode non necessario
- Logica z-index contorta (0 → 2 → 3 → 4 → 5 → 6)

Problema: Codice difficile da mantenere, performance scarse, effetto visivo incoerente.

2. Maschera VISION Non Funziona

<!-- SBAGLIATO: La maschera SVG con testo non matcha la dimensione reale -->
<text x="500" y="150" font-size="220">VISION</text>

Problema:

• Font-size SVG (220px) ≠ font-size CSS reale (~24vw = variabile)
• Position assoluta SVG non allineata con testo HTML
• Letter-spacing SVG (-8) ≠ letter-spacing CSS (0.02em)
• Risultato: La maschera non copre le lettere corrette

3. Gradienti con Threshold Bruschi

// SBAGLIATO: Salti netti di opacity
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.2) 5%,    // ← SALTO +0.2
rgba(0,0,0,0.5) 10%,   // ← SALTO +0.3
rgba(0,0,0,0.75) 15%,  // ← SALTO +0.25

Problema: Troppi step creano “bande” visibili invece di transizione fluida.

4. Foto: Z-Index Errato

// SITUAZIONE ATTUALE:
.mp-cinema-hero__figure { z-index: 3; }  // Foto
.mp-hero-curve--l2 { z-index: 4; }       // Curva DAVANTI

// TU VUOI:
Foto z:4 → Curva z:2  // Foto DAVANTI, curva DIETRO

5. INTELLIGENCE: Altezza/Ampiezza Curva Errata

// PROBLEMA: Curva emerge a 70% ma INTELLIGENCE sta a ~75-85%
mask-image: linear-gradient(to bottom, 
  rgba(0,0,0,0) 70%,  // ← Troppo presto!
  ...

Risultato: Curva visibile SOPRA il blocco verde invece che sotto.

✅ SOLUZIONE PULITA E PROFESSIONALE

Principio: 1 Curva Per Zona, CSS Semplice

ARCHITETTURA CORRETTA:
┌─────────────────────────────────────┐
│  ZONA VISION (0-35%)                │
│  ├─ Curva: opacity fade 0-100%      │  z:0 (dietro VISION z:1)
│  └─ NO mask, solo clip verticale    │
├─────────────────────────────────────┤
│  ZONA FOTO (35-65%)                 │
│  ├─ Curva: opacity centrale bassa   │  z:2 (DIETRO foto z:4)
│  └─ Radial fade dal centro          │
├─────────────────────────────────────┤
│  ZONA INTELLIGENCE (65-100%)        │
│  ├─ Curva: clip inizia a 85%        │  z:4 (sotto LOWER z:5)
│  └─ Fade in graduale 85-100%        │
└─────────────────────────────────────┘

CSS Minimale (una sola classe per curva):

// CURVA SUPERIORE: zona VISION
.mp-hero-curve--vision {
  z-index: 0;
  clip-path: inset(0 0 65% 0);  // Visibile solo 0-35%
  opacity: 0.85;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

// CURVA CENTRALE: zona FOTO (DIETRO)
.mp-hero-curve--photo {
  z-index: 2;  // SOTTO foto (z:4)
  clip-path: inset(35% 0 35% 0);  // Visibile solo 35-65%
  opacity: 0.6;  // Più trasparente
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

// CURVA INFERIORE: zona INTELLIGENCE
.mp-hero-curve--intel {
  z-index: 4;  // SOTTO lower (z:5)
  clip-path: inset(85% 0 0 0);  // Visibile solo 85-100%
  opacity: 0.95;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

Z-Index Corretti:

0: Curva VISION (dietro)
1: Testo VISION
2: Curva FOTO (dietro)
3: (vuoto)
4: Foto + Curva INTELLIGENCE
5: LOWER (INTELLIGENCE blocco)

🔧 AZIONI IMMEDIATE

1. ELIMINA tutta la complessità:
   • Rimuovi L0, L1, L2, L3
   • Rimuovi tutte le maschere SVG
   • Rimuovi gradienti multi-step CSS
2. CREA 3 curve semplici:
   • mp-hero-curve--vision
   • mp-hero-curve--photo
   • mp-hero-curve--intel

3. USA solo clip-path: inset() per zone verticali

4. CORREGGI z-index foto: da 3 a 4

5. TESTA su localhost prima di committare

📊 METRICHE MIGLIORATE

Conclusione: Ripartire da zero è la scelta professionale corretta.