<!– INIZIO CODICE LANDING PAGE (Copia tutto in un blocco HTML Personalizzato) –>

<!– 1. Caricamento Librerie Esterne –>
<script src=”https://cdn.tailwindcss.com”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css”>

<!– 2. Configurazione Stili e Tailwind –>
<script>
tailwind.config = {
important: ‘#lp-wrapper’, /* Isola gli stili Tailwind al nostro wrapper */
theme: {
extend: {
colors: {
‘gold’: ‘#C5A059’,
‘gold-dark’: ‘#a68546’,
‘charcoal’: ‘#2C2C2C’,
‘beige-light’: ‘#F9F8F6’,
‘stone-50’: ‘#fafaf9’,
},
fontFamily: {
/* Impostiamo Montserrat sia come sans che come serif per uniformare tutto */
‘sans’: [‘Montserrat’, ‘sans-serif’],
‘serif’: [‘Montserrat’, ‘sans-serif’],
},
letterSpacing: {
‘widest-xl’: ‘.25em’,
}
}
}
}
</script>

<style>
/* Caricamento Font – Solo Montserrat */
@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap’);

/* Tenta di nascondere Header e Footer del tema WordPress standard */
header#masthead, footer#colophon, .site-header, .site-footer {
display: none !important;
}

/* WRAPPER PRINCIPALE */
#lp-wrapper {
font-family: ‘Montserrat’, sans-serif;
color: #4a4a4a;
line-height: 1.6; /* Aumentato leggermente per leggibilità sans-serif */
/* Reset CSS locale */
font-size: 16px;
background-color: #F9F8F6;
width: 100%;
overflow-x: hidden;
}

/* Override Tipografia – Forza Sans Serif ovunque */
#lp-wrapper h1,
#lp-wrapper h2,
#lp-wrapper h3,
#lp-wrapper h4,
#lp-wrapper .serif-font {
font-family: ‘Montserrat’, sans-serif;
}

/* TRUCCO PER FULL WIDTH SU WORDPRESS */
#lp-wrapper .force-full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw !important; /* Forza override */
}

/* Scrollbar Personalizzata */
#lp-wrapper ::-webkit-scrollbar {
width: 8px;
}
#lp-wrapper ::-webkit-scrollbar-track {
background: #f9f8f6;
}
#lp-wrapper ::-webkit-scrollbar-thumb {
background: #d6cfc7;
border-radius: 4px;
}
#lp-wrapper ::-webkit-scrollbar-thumb:hover {
background: #C5A059;
}

/* Animazioni */
#lp-wrapper .fade-in-up {
animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
opacity: 0;
transform: translateY(30px);
}

@keyframes fadeInUp {
to { opacity: 1; transform: translateY(0); }
}

/* Lightbox Styles */
#lp-lightbox {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 999999 !important;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#lp-lightbox.active {
animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>

<!– 3. Contenuto Pagina –>
<div id=”lp-wrapper”>

<!– Hero Section –>
<header class=”force-full-width relative h-screen min-h-[600px] flex items-end pb-12 md:pb-16 justify-center overflow-hidden”>
<!– Background Image –>
<div class=”absolute inset-0 z-0″>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/470165494_18477456583038203_8021758697450188078_n-822×1024.jpg”
class=”w-full h-full object-cover object-center transform scale-105″
style=”margin:0;”
alt=”Wedding Hero”>
<div class=”absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent”></div>
</div>

<div class=”relative z-10 text-center text-white px-4 max-w-5xl mx-auto mb-8″>
<h1 class=”text-gold tracking-[0.3em] uppercase text-sm md:text-xl mb-0 fade-in-up font-medium”>Carmine Napolitano</h1>
</div>

<div class=”absolute bottom-6 left-1/2 transform -translate-x-1/2 animate-bounce text-white/50″>
<i class=”fa-solid fa-chevron-down text-xl”></i>
</div>
</header>

<!– About Section –>
<section id=”about” class=”force-full-width py-20 md:py-32 bg-white overflow-hidden”>
<div class=”max-w-6xl mx-auto px-6 lg:px-8″>
<div class=”grid grid-cols-1 md:grid-cols-2 gap-16 items-center”>
<div class=”relative order-2 md:order-1 mx-auto max-w-md md:max-w-full”>
<div class=”absolute top-6 left-6 w-full h-full border border-gold z-0 hidden md:block transition-transform duration-500 hover:translate-x-2 hover:translate-y-2″></div>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/470478301_18477291352038203_7356004294950376874_n-822×1024.jpg”
alt=”Carmine Napolitano”
class=”relative z-10 w-full h-auto shadow-xl transition-all duration-1000 ease-out object-cover aspect-[4/5] m-0″>
</div>

<div class=”order-1 md:order-2 text-center md:text-left”>
<span class=”text-gold uppercase tracking-widest text-xs font-semibold mb-2 block”>Il Fotografo</span>
<h2 class=”text-3xl md:text-4xl font-light text-charcoal mb-8″>Mi Presento</h2>

<div class=”space-y-6 text-gray-600 font-light leading-loose text-base md:text-lg”>
<p>Il mio sguardo nasce dall’ascolto: attenzione ai dettagli, rispetto per le persone e consapevolezza di ciò che desiderano raccontare.</p>
<p>Non fotografo semplicemente due sposi, ma il contesto in cui la loro storia si manifesta. Lavoro affinché luci, luoghi ed emozioni si intreccino in immagini capaci di restituire un senso di continuità.</p>
<blockquote class=”border-l-2 border-gold pl-6 py-2 my-8 ml-0 md:ml-0″>
<p class=”text-charcoal font-normal italic text-lg md:text-xl leading-normal”>
“Ogni fase è pensata per far convivere stile e autenticità, affinché gli scatti diventino ricordi destinati a risuonare negli anni.”
</p>
</blockquote>
</div>
</div>
</div>
</div>
</section>

<!– Approach Section –>
<section id=”approach” class=”force-full-width py-20 md:py-32 bg-beige-light”>
<div class=”max-w-6xl mx-auto px-6″>
<div class=”text-center max-w-3xl mx-auto mb-16″>
<h2 class=”text-3xl md:text-4xl font-light text-charcoal mb-4″>Il Mio Approccio</h2>
<div class=”w-16 h-px bg-gold mx-auto”></div>
</div>

<div class=”grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12″>
<div class=”bg-white p-10 shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group”>
<div class=”text-gold text-4xl mb-6 group-hover:scale-110 transition-transform duration-300 origin-left”><i class=”fa-solid fa-camera-retro”></i></div>
<h3 class=”text-xl mb-4 font-medium text-charcoal”>Reportage Discreto</h3>
<p class=”text-gray-500 font-light leading-relaxed”>Racconto della giornata lasciando fluire ogni momento con naturalezza, senza pose forzate.</p>
</div>
<div class=”bg-white p-10 shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group”>
<div class=”text-gold text-4xl mb-6 group-hover:scale-110 transition-transform duration-300 origin-left”><i class=”fa-solid fa-hand-holding-heart”></i></div>
<h3 class=”text-xl mb-4 font-medium text-charcoal”>Cura Artigianale</h3>
<p class=”text-gray-500 font-light leading-relaxed”>Dalla selezione rigorosa delle immagini alla stampa dell’album Fine Art.</p>
</div>
<div class=”bg-white p-10 shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group”>
<div class=”text-gold text-4xl mb-6 group-hover:scale-110 transition-transform duration-300 origin-left”><i class=”fa-solid fa-drone”></i></div>
<h3 class=”text-xl mb-4 font-medium text-charcoal”>Tecnica e Creatività</h3>
<p class=”text-gray-500 font-light leading-relaxed”>Attrezzatura full-frame di ultima generazione, ottiche luminose e droni 4K.</p>
</div>
</div>
</div>
</section>

<!– Gallery Section –>
<section id=”gallery” class=”force-full-width py-20 md:py-32 bg-white”>
<div class=”max-w-[1400px] mx-auto px-4 md:px-8″>
<!– Masonry Grid –>
<div class=”columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6″>
<!– Gallery Item 1 –>
<div class=”break-inside-avoid relative group cursor-pointer overflow-hidden rounded-sm mb-6″ onclick=”openLPLightbox(this)”>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/241180805_2358971197571545_2466459540783797340_n-820×1024.jpg”
class=”w-full h-auto transition-transform duration-700 group-hover:scale-105 m-0″ alt=”Wedding”>
<div class=”absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center”>
<i class=”fa-solid fa-expand text-white text-2xl”></i>
</div>
</div>
<!– Gallery Item 2 –>
<div class=”break-inside-avoid relative group cursor-pointer overflow-hidden rounded-sm mb-6″ onclick=”openLPLightbox(this)”>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/263423680_4768788379901601_333890549959195489_n-819×1024.jpg”
class=”w-full h-auto transition-transform duration-700 group-hover:scale-105 m-0″ alt=”Wedding”>
<div class=”absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center”>
<i class=”fa-solid fa-expand text-white text-2xl”></i>
</div>
</div>
<!– Gallery Item 3 –>
<div class=”break-inside-avoid relative group cursor-pointer overflow-hidden rounded-sm mb-6″ onclick=”openLPLightbox(this)”>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/399944379_2357673337763178_837313356509745495_n-820×1024.jpg”
class=”w-full h-auto transition-transform duration-700 group-hover:scale-105 m-0″ alt=”Wedding”>
<div class=”absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center”>
<i class=”fa-solid fa-expand text-white text-2xl”></i>
</div>
</div>
<!– Gallery Item 4 –>
<div class=”break-inside-avoid relative group cursor-pointer overflow-hidden rounded-sm mb-6″ onclick=”openLPLightbox(this)”>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/298746625_598202485086533_7307233535484745353_n-819×1024.jpg”
class=”w-full h-auto transition-transform duration-700 group-hover:scale-105 m-0″ alt=”Wedding”>
<div class=”absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center”>
<i class=”fa-solid fa-expand text-white text-2xl”></i>
</div>
</div>
<!– Gallery Item 5 –>
<div class=”break-inside-avoid relative group cursor-pointer overflow-hidden rounded-sm mb-6″ onclick=”openLPLightbox(this)”>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/470250397_18477456547038203_5349384960653561990_n-822×1024.jpg”
class=”w-full h-auto transition-transform duration-700 group-hover:scale-105 m-0″ alt=”Wedding”>
<div class=”absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center”>
<i class=”fa-solid fa-expand text-white text-2xl”></i>
</div>
</div>
<!– Gallery Item 6 –>
<div class=”break-inside-avoid relative group cursor-pointer overflow-hidden rounded-sm mb-6″ onclick=”openLPLightbox(this)”>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/316688502_131512542836924_201618884883342123_n-819×1024.jpg”
class=”w-full h-auto transition-transform duration-700 group-hover:scale-105 m-0″ alt=”Wedding”>
<div class=”absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center”>
<i class=”fa-solid fa-expand text-white text-2xl”></i>
</div>
</div>
<!– Gallery Item 7 –>
<div class=”break-inside-avoid relative group cursor-pointer overflow-hidden rounded-sm mb-6″ onclick=”openLPLightbox(this)”>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/332073193_217934287414173_7072448655971254851_n-819×1024.jpg”
class=”w-full h-auto transition-transform duration-700 group-hover:scale-105 m-0″ alt=”Wedding”>
<div class=”absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center”>
<i class=”fa-solid fa-expand text-white text-2xl”></i>
</div>
</div>
<!– Gallery Item 8 –>
<div class=”break-inside-avoid relative group cursor-pointer overflow-hidden rounded-sm mb-6″ onclick=”openLPLightbox(this)”>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/470249108_18477456586038203_9122056778137416012_n-822×1024.jpg”
class=”w-full h-auto transition-transform duration-700 group-hover:scale-105 m-0″ alt=”Wedding”>
<div class=”absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center”>
<i class=”fa-solid fa-expand text-white text-2xl”></i>
</div>
</div>
<!– Gallery Item 9 –>
<div class=”break-inside-avoid relative group cursor-pointer overflow-hidden rounded-sm mb-6″ onclick=”openLPLightbox(this)”>
<img src=”https://carminenapolitano.com/wp-content/uploads/2026/01/470606579_18477525085038203_2265485504584298128_n-822×1024.jpg”
class=”w-full h-auto transition-transform duration-700 group-hover:scale-105 m-0″ alt=”Wedding”>
<div class=”absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center”>
<i class=”fa-solid fa-expand text-white text-2xl”></i>
</div>
</div>
</div>
</div>
</section>

<!– Pricing Section (GOLD ONLY) –>
<section id=”pricing” class=”force-full-width py-20 md:py-32 bg-stone-50″>
<div class=”max-w-7xl mx-auto px-6″>
<div class=”text-center mb-16″>
<h2 class=”text-3xl md:text-4xl font-light text-charcoal”>Personalizzazione del servizio</h2>
<div class=”w-12 h-px bg-gold mx-auto mt-6″></div>
</div>

<!– Single Card Layout –>
<div class=”max-w-lg mx-auto mb-16″>

<!– GOLD CARD –>
<div class=”bg-charcoal text-white p-8 lg:p-12 border border-charcoal shadow-2xl flex flex-col h-full rounded-sm relative overflow-hidden”>
<div class=”absolute -top-[50%] -left-[50%] w-[200%] h-[200%] bg-gradient-to-br from-transparent via-white/5 to-transparent rotate-45 pointer-events-none”></div>
<div class=”text-center mb-4 text-gold uppercase text-[10px] tracking-[0.3em] font-medium border border-gold/30 inline-block mx-auto px-3 py-1 rounded-full”>L’Offerta Completa</div>
<div class=”text-center text-gold text-4xl font-light mb-10 mt-4″>€4000</div>

<div class=”space-y-6 flex-grow text-sm text-gray-300″>
<ul class=”space-y-5 font-light list-none pl-0″>
<li class=”flex items-start”><span class=”text-gold text-xs mr-3 mt-1 font-semibold”>*1</span> <span><strong>Doppia Squadra</strong> (Foto + Video)</span></li>
<li class=”flex items-start”><span class=”text-gold text-xs mr-3 mt-1 font-semibold”>*2</span> <span>Scatti illimitati</span></li>
<li class=”flex items-start”><span class=”text-gold text-xs mr-3 mt-1 font-semibold”>*3</span> <span>Consegna di tutte le immagini <br><span class=”text-xs text-gray-500 block mt-1″>(Comprese quelle non inserite nell’album)</span></span></li>
<li class=”flex items-start”><span class=”text-gold text-xs mr-3 mt-1 font-semibold”>*4</span> <span><strong>Album Artigianale 30×40</strong> <br><span class=”text-xs text-gray-500 block mt-1″>(Layout, copertine e packaging personalizzati)</span></span></li>
<li class=”flex items-start”><span class=”text-gold text-xs mr-3 mt-1 font-semibold”>*5</span> <span><strong>2 Album Gemelli 20×30</strong> <br><span class=”text-xs text-gray-500 block mt-1″>(Copie identiche per i genitori)</span></span></li>
<li class=”flex items-start”><span class=”text-gold text-xs mr-3 mt-1 font-semibold”>*6</span> <span><strong>Video Pack:</strong> Trailer + Reel + Film 20′</span></li>
<li class=”flex items-start”><span class=”text-gold text-xs mr-3 mt-1 font-semibold”>*7</span> <span>Filmati con audio in presa diretta (Intero Giorno)</span></li>
<li class=”flex items-start”><span class=”text-gold text-xs mr-3 mt-1 font-semibold”>*8</span> <span>Riprese Drone <span class=”text-gold”>(Intera Giornata)</span></span></li>
</ul>
</div>
<!– Agganciato alla pagina contatti –>
<a href=”https://carminenapolitano.com/contact-me/” target=”_blank” class=”mt-12 block w-full py-4 bg-gold text-center text-white uppercase text-xs tracking-widest hover:bg-white hover:text-charcoal hover:font-semibold transition-all shadow-lg hover:shadow-gold/20 no-underline”>Richiedi Info</a>
</div>

</div>

<!– Notes Section for Asterisks –>
<div class=”max-w-4xl mx-auto mt-12 pt-8 border-t border-gray-200″>
<h4 class=”text-sm uppercase tracking-widest text-charcoal font-semibold mb-6″>Note e Dettagli (*):</h4>
<div class=”grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4 text-xs text-gray-500 font-light”>
<p><strong class=”text-gold”>*1 Doppia Squadra:</strong> 2 Fotografi presenti per coprire l’intero evento.</p>
<p><strong class=”text-gold”>*2 Scatti Illimitati:</strong> Nessun limite al numero di foto scattate durante la giornata.</p>
<p><strong class=”text-gold”>*3 Consegna Completa:</strong> Consegna digitale in alta risoluzione di tutti gli scatti realizzati.</p>
<p><strong class=”text-gold”>*4 Album Artigianale:</strong> Formato 30x40cm, materiali di pregio a scelta per copertina e box.</p>
<p><strong class=”text-gold”>*5 Album Gemelli:</strong> Due copie in formato ridotto (20x30cm) identiche all’album principale.</p>
<p><strong class=”text-gold”>*6 Video Pack:</strong> Include Trailer emozionale, Reel per social e Film completo da 20 minuti.</p>
<p><strong class=”text-gold”>*7 Audio Originale:</strong> Consegna del girato integrale con audio ambientale in presa diretta.</p>
<p><strong class=”text-gold”>*8 Drone:</strong> Riprese aeree professionali durante l’intera giornata (meteo permettendo).</p>
</div>
</div>

<!– Additional Services –>
<div class=”mt-20 bg-white p-8 md:p-14 border border-gray-100 shadow-lg rounded-sm”>
<h3 class=”text-2xl font-light text-center mb-12″>Servizi Aggiuntivi</h3>
<div class=”grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 text-sm text-gray-600″>
<div class=”flex items-start space-x-4″>
<div class=”flex-shrink-0 w-10 h-10 rounded-full bg-beige-light flex items-center justify-center text-gold”><i class=”fa-solid fa-star text-sm”></i></div>
<div><strong class=”block text-charcoal mb-2 font-medium”>Red Carpet / Photobooth</strong></div>
</div>
<div class=”flex items-start space-x-4″>
<div class=”flex-shrink-0 w-10 h-10 rounded-full bg-beige-light flex items-center justify-center text-gold”><i class=”fa-solid fa-clock text-sm”></i></div>
<div><strong class=”block text-charcoal mb-2 font-medium”>Reel 48h</strong></div>
</div>
<div class=”flex items-start space-x-4″>
<div class=”flex-shrink-0 w-10 h-10 rounded-full bg-beige-light flex items-center justify-center text-gold”><i class=”fa-solid fa-film text-sm”></i></div>
<div><strong class=”block text-charcoal mb-2 font-medium”>Proiezione Highlights</strong></div>
</div>
</div>
</div>
</div>
</section>

<!– Footer / Contact –>
<footer id=”contact” class=”force-full-width bg-charcoal text-white py-20 relative overflow-hidden”>
<div class=”absolute top-0 left-0 w-full h-full opacity-[0.03] pointer-events-none flex items-center justify-center overflow-hidden”>
<span class=”text-[20vw] font-bold leading-none whitespace-nowrap”>LOVE STORY</span>
</div>
<div class=”relative z-10 max-w-4xl mx-auto px-6 text-center”>
<h2 class=”text-3xl md:text-4xl font-light mb-6″>Raccontiamo la vostra storia</h2>
<div class=”w-12 h-px bg-gold mx-auto mb-8″></div>
<p class=”text-gray-300 mb-12 max-w-lg mx-auto font-light leading-relaxed”>Contattami per verificare la disponibilità e prenotare una consulenza gratuita.</p>

<!– Agganciato alla pagina contatti –>
<a href=”https://carminenapolitano.com/contact-me/” target=”_blank” class=”inline-block bg-white text-charcoal border border-white px-12 py-4 text-xs uppercase tracking-widest hover:bg-gold hover:border-gold hover:text-white transition-all duration-300 mb-16 shadow-lg no-underline”>Verifica Disponibilità</a>

<div class=”flex justify-center space-x-10 mb-12″>
<a href=”https://www.instagram.com/carminenapolitanofotografo/” target=”_blank” class=”text-gray-400 hover:text-gold transition-colors transform hover:scale-110″><i class=”fa-brands fa-instagram text-2xl”></i></a>
<a href=”https://www.facebook.com/napolitano.fotografo/” target=”_blank” class=”text-gray-400 hover:text-gold transition-colors transform hover:scale-110″><i class=”fa-brands fa-facebook text-2xl”></i></a>
</div>
<div class=”border-t border-white/10 pt-8″>
<p class=”text-[10px] text-gray-500 uppercase tracking-widest”>&copy; 2026 Carmine Napolitano Photography.</p>
</div>
</div>
</footer>

<!– Lightbox Modal –>
<div id=”lp-lightbox” class=”fixed inset-0 z-[99999] bg-black/95 items-center justify-center p-4″ onclick=”closeLPLightbox()” style=”display:none”>
<button class=”absolute top-6 right-6 text-white/70 hover:text-gold transition-colors z-50 p-2 border-0 bg-transparent cursor-pointer”>
<i class=”fa-solid fa-xmark text-4xl”></i>
</button>
<img id=”lp-lightbox-img” src=”” alt=”Full screen” class=”max-h-[90vh] max-w-[95vw] object-contain shadow-2xl rounded-sm” onclick=”event.stopPropagation()”>
</div>

</div> <!– Close #lp-wrapper –>

<!– 4. Script Funzionali –>
<script>
// Lightbox Logic (con nomi univoci per evitare conflitti con altri script WP)
const lpLightbox = document.getElementById(‘lp-lightbox’);
const lpLightboxImg = document.getElementById(‘lp-lightbox-img’);

function openLPLightbox(element) {
const img = element.querySelector(‘img’);
if(img && lpLightbox && lpLightboxImg) {
lpLightboxImg.src = img.src;
lpLightbox.style.display = ‘flex’;
requestAnimationFrame(() => {
lpLightbox.classList.add(‘active’);
});
document.body.style.overflow = ‘hidden’;
}
}

function closeLPLightbox() {
if(lpLightbox) {
lpLightbox.classList.remove(‘active’);
setTimeout(() => {
lpLightbox.style.display = ‘none’;
if(lpLightboxImg) lpLightboxImg.src = ”;
}, 300);
document.body.style.overflow = ‘auto’;
}
}

// Listener per chiusura con ESC
document.addEventListener(‘keydown’, function(e) {
if (e.key === ‘Escape’ && lpLightbox && lpLightbox.classList.contains(‘active’)) {
closeLPLightbox();
}
});

// Intersection Observer per animazioni
const lpObserverOptions = {
root: null,
rootMargin: ‘0px’,
threshold: 0.1
};

const lpObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘fade-in-up’);
observer.unobserve(entry.target);
}
});
}, lpObserverOptions);

// Attiva animazioni solo all’interno del nostro wrapper
document.querySelectorAll(‘#lp-wrapper .fade-in-up’).forEach(el => {
// Se volessi attivare l’osservatore per altri elementi:
// lpObserver.observe(el);
});
</script>