/* Variabili CSS per una gestione colori centralizzata e facile modifica */
        :root {
            --primary-bg: #111827; /* Grigio scuro quasi nero */
            --secondary-bg: #1f2937; /* Grigio più chiaro per le sezioni */
            --accent-color: #FBBF24; /* Giallo ambrato per dettagli e highlight */
            --text-color-light: #e5e7eb; /* Grigio chiaro per il testo principale */
            --text-color-dark: #9ca3af; /* Grigio più scuro per testo secondario */
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--primary-bg);
            color: var(--text-color-light);
            overflow-x: hidden; /* Previene lo scrolling orizzontale causato dalle animazioni */
        }

        /* Stile per i titoli con font Playfair Display */
        h1, h2, h3, .font-display {
            font-family: 'Playfair Display', serif;
        }

        /* Stili per i pulsanti di navigazione e paginazione di Swiper.js */
        .swiper-button-next, .swiper-button-prev {
            color: var(--accent-color);
        }
        .swiper-pagination-bullet-active {
            background: var(--accent-color);
        }

        /* Classi personalizzate per mantenere l'aspect ratio dei video (compatibilità) */
        .aspect-w-16-h-9 {
            position: relative;
            padding-bottom: 56.25%; /* Rapporto 16:9 */
            height: 0;
            overflow: hidden;
        }
        .aspect-w-16-h-9 iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .aspect-w-9-h-16 {
            position: relative;
            padding-bottom: 177.77%; /* Rapporto 9:16 (verticale) */
            height: 0;
            overflow: hidden;
        }
        .aspect-w-9-h-16 iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* Stile per il bagliore dei video in evidenza */
        .video-glow {
            box-shadow: 0 0 40px 15px rgba(251, 191, 36, 0.8); /* Bagliore più grande e intenso */
            border: 5px solid rgba(251, 191, 36, 0.8); /* Bordo più spesso e intenso */
            animation: pulse-glow 3s infinite alternate; /* Animazione più lenta */
            will-change: box-shadow, border-color, transform; /* Hint per il browser */
        }

        @keyframes pulse-glow {
            from {
                box-shadow: 0 0 20px 8px rgba(251, 191, 36, 0.5); /* Valori iniziali più sfumati ma visibili */
                border-color: rgba(251, 191, 36, 0.5);
            }
            to {
                box-shadow: 0 0 40px 15px rgba(251, 191, 36, 0.8); /* Valori finali più intensi */
                border-color: rgba(251, 191, 36, 0.8);
            }
        }

        /* Animazione di fade-in per le sezioni */
        .fade-in-section {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            position: relative; /* Crea un nuovo contesto di stacking */
            z-index: 1; /* Assicura che sia sopra l'overlay magico */
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Animazione per gli elementi della Hero Section */
        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fade-in-up 0.8s ease-out forwards;
        }

        .animate-fade-in-up.delay-200 {
            animation-delay: 0.2s;
        }

        .animate-fade-in-up.delay-400 {
            animation-delay: 0.4s;
        }

        /* Stili per gli effetti magici di sfondo */
        #magic-overlay {
            position: fixed;
            inset: 0;
            z-index: -1; /* Posizionato dietro il contenuto principale */
            pointer-events: none; /* Non deve bloccare le interazioni con la pagina */
            overflow: hidden; /* Nasconde le parti delle animazioni che escono dal viewport */
        }

        .star {
            position: absolute;
            background-color: var(--accent-color);
            border-radius: 50%;
            opacity: 0;
            animation: twinkle 2s infinite alternate ease-in-out;
            will-change: transform, opacity;
        }

        /* Dimensioni e posizioni delle stelline aumentate per maggiore visibilità */
        .star:nth-child(1) { width: 5px; height: 5px; top: 10%; left: 20%; animation-delay: 0s; }
        .star:nth-child(2) { width: 4px; height: 4px; top: 5%; left: 50%; animation-delay: 0.5s; }
        .star:nth-child(3) { width: 6px; height: 6px; top: 15%; left: 80%; animation-delay: 1s; }
        .star:nth-child(4) { width: 4px; height: 4px; top: 25%; left: 10%; animation-delay: 0.2s; }
        .star:nth-child(5) { width: 5px; height: 5px; top: 30%; left: 70%; animation-delay: 0.7s; }
        .star:nth-child(6) { width: 4px; height: 4px; top: 40%; left: 30%; animation-delay: 1.2s; }
        .star:nth-child(7) { width: 6px; height: 6px; top: 50%; left: 90%; animation-delay: 0.4s; }
        .star:nth-child(8) { width: 5px; height: 5px; top: 60%; left: 5%; animation-delay: 0.9s; }
        .star:nth-child(9) { width: 4px; height: 4px; top: 70%; left: 40%; animation-delay: 1.4s; }
        .star:nth-child(10) { width: 6px; height: 6px; top: 85%; left: 60%; animation-delay: 0.6s; }
        .star:nth-child(11) { width: 5px; height: 5px; top: 90%; left: 25%; animation-delay: 1.1s; }
        .star:nth-child(12) { width: 4px; height: 4px; top: 75%; left: 75%; animation-delay: 0.3s; }
        .star:nth-child(13) { width: 6px; height: 6px; top: 55%; left: 15%; animation-delay: 0.8s; }
        .star:nth-child(14) { width: 5px; height: 5px; top: 20%; left: 65%; animation-delay: 1.3s; }
        .star:nth-child(15) { width: 4px; height: 4px; top: 80%; left: 45%; animation-delay: 0.1s; }


        @keyframes twinkle {
            0% { opacity: 0; transform: scale(0.5); }
            50% { opacity: 1; transform: scale(1.5); } /* Opacità massima aumentata e scala più grande */
            100% { opacity: 0; transform: scale(0.5); }
        }

        .light-streak {
            position: absolute;
            background: linear-gradient(to right, transparent, rgba(251, 191, 36, 1), transparent); /* Opacità massima */
            height: 4px; /* Più spessa */
            width: 250px; /* Lunghezza della scia */
            opacity: 0;
            animation: streak-move 10s infinite linear; /* Animazione leggermente più veloce */
            will-change: transform, opacity;
        }

        @keyframes streak-move {
            0% { transform: translateX(-100vw); opacity: 0; }
            10% { opacity: 1; } /* Opacità massima */
            50% { opacity: 1; } /* Opacità massima */
            90% { opacity: 0; }
            100% { transform: translateX(100vw); opacity: 0; }
        }