🔧 Update: Curve Clipping Fix

Problemi Risolti

❌ PRIMA (v2.0.0)

1. Layer L2: zona troppo ristretta (42% → bottom) + offset sx (26%)
   • Creava “buco nero” nella zona centrale sinistra dell’immagine
   • Curva non visibile nello spazio tra VISION e INTELLIGENCE
2. Layer L3: inizio troppo basso (72% → bottom)
   • Curva NON arrivava SOTTO INTELLIGENCE
   • Impossibile “attorcigliarsi” attorno al blocco verde

✅ DOPO (v2.0.1)

Layer L2: Ampliato e Spostato

// OLD
clip-path: inset(42% 0 0 26%);   // da 42%, offset sx 26%

// NEW
clip-path: inset(35% 52% 0 0);   // da 35%, SOLO metà sinistra

Effetti:

• ✅ Zona visibile più ampia (35% vs 42% = +7% area)
• ✅ Nessun offset sinistro → curva visibile da bordo sx
• ✅ Clip destro al 52% → evita overlap con foto (che è centrata/dx)
• ✅ Risolve il “buco nero” a sinistra dell’immagine

Nuovo comportamento:

• Curva passa a SINISTRA della foto (non più tagliata)
• Si attorciglia lungo il bordo sinistro
• Visibile nell’area centrale tra VISION e INTELLIGENCE

Layer L3: Esteso Verso l’Alto

// OLD
clip-path: inset(72% 0 0 0);   // solo bottom 28%

// NEW  
clip-path: inset(65% 0 0 0);   // bottom 35% (+7% area)

Effetti:

• ✅ Zona visibile più ampia (+25% area)
• ✅ Curva ora arriva da SOTTO INTELLIGENCE
• ✅ Può “attorcigliarsi” attorno ai bordi del blocco verde
• ✅ Maggiore continuità visiva con L2

Nuovo comportamento:

• Curva emerge da sotto il blocco INTELLIGENCE
• Si avvolge attorno (wrap effect)
• Passa davanti nella zona superiore
• Effetto “nastro che abbraccia il blocco”

Visualizzazione Clipping

BEFORE

┌─────────────────────────────────┐  0%
│ L0 | L1                         │
├─────────────────────────────────┤  35%  ← L2 inizio (nuovo)
│                                 │
│           [26%]                 │
│              ↓                  │
├──────────────┬──────────────────┤  42%  ← L2 inizio (vecchio)
│ ❌ BUCO NERO │   L2             │
│              │   (troppo dx)    │
│      [FOTO]  │                  │
├──────────────┴──────────────────┤  65%  ← L3 inizio (nuovo)
│                                 │
├─────────────────────────────────┤  72%  ← L3 inizio (vecchio)
│  [INTELLIGENCE]  L3 (troppo basso)
└─────────────────────────────────┘  100%

AFTER

┌─────────────────────────────────┐  0%
│ L0 | L1                         │
├─────────────────────────────────┤  35%  ← L2 NUOVO inizio
│ L2 (sx)|                        │
│        |     [52%]              │
│        |       ↓                │
│        |       ✅ no overlap    │
│        |    [FOTO]              │
│ (tutta│                         │
│  sx)  │                         │
├───────┴─────────────────────────┤  65%  ← L3 NUOVO inizio
│      ↓ curva arriva da sotto    │
│  [INTELLIGENCE]  ← L3 avvolge   │
│      ↑ si attorciglia           │
└─────────────────────────────────┘  100%

Parametri Aggiornati

Effetti Visivi Attesi

1. Zona Centrale (a sx della foto)

Prima: ❌ Curva scompariva (clip-path tagliava troppo)
Dopo: ✅ Curva visibile e continua

2. Attorno alla Foto

Prima: ❌ Curva visibile solo a destra (offset 26%)
Dopo: ✅ Curva si attorciglia a SINISTRA (più naturale)

3. Area INTELLIGENCE

Prima: ❌ Curva appariva solo SOPRA (troppo tardi)
Dopo: ✅ Curva arriva da SOTTO e si avvolge attorno

4. Profondità L2

Prima: Layer L2 appariva “in ombra” (brightness 0.95)
Dopo: Layer L2 più luminoso (1.05) → più davanti alla foto

Test Rapidi

// 1. Verifica nuovo clipping L2
getComputedStyle(document.querySelector('.mp-hero-curve--l2')).clipPath
// Expected: inset(35% 52% 0px 0px)

// 2. Verifica nuovo clipping L3
getComputedStyle(document.querySelector('.mp-hero-curve--l3')).clipPath
// Expected: inset(65% 0px 0px 0px)

// 3. Confronta area visibile
// L2: (100 - 35) * (100 - 52) / 100 = 65% * 48% = 31.2%
// L3: (100 - 65) * 100 / 100 = 35%

Changelog

Version: 2.0.0 → 2.0.1
Date: 2026-04-18
Type: Patch (bug fix)

Changed

• .mp-hero-curve--l2 clipping zone: inset(42% 0 0 26%) → inset(35% 52% 0 0)
• .mp-hero-curve--l3 clipping zone: inset(72% 0 0 0) → inset(65% 0 0 0)
• .mp-hero-curve--l2 brightness: 0.95 → 1.05
• .mp-hero-curve--l2 saturation: 0.9 → 1.1
• .mp-hero-curve--l2 stroke-width: 17px → 19px
• .mp-hero-curve--l2 opacity: 0.80 → 0.88

Fixed

• ❌ “Buco nero” a sinistra dell’immagine (L2 troppo ristretto)
• ❌ Curva non arrivava sotto INTELLIGENCE (L3 iniziava troppo tardi)
• ❌ Impossibilità di “attorcigliarsi” attorno agli elementi

Impatto Performance

Nessun impatto negativo:

• Stesse proprietà CSS (solo valori modificati)
• Nessun nuovo layer o elemento DOM
• Clipping più efficiente (meno calcoli per browser)

Status: ✅ Fixed
Breaking changes: Nessuno
Backward compatible: Sì