/* BACKGROUND E LAYOUT */


body {


    background-color: #0d0d0d;


    color: #E5E4E2;


    font-family: 'Bebas Neue', sans-serif;


    margin: 0;


    min-height: 100vh;


    display: flex;


    justify-content: center;


    align-items: flex-start; 


    overflow-y: auto;


    position: relative;


    padding: 60px 0; /* Aumentato il padding superiore per dare spazio al logo */


    cursor: pointer;


}





/* Layer immagine di sfondo con movimento */


body::before {


    content: '';


    position: fixed;


    top: 0; left: 0; width: 100%; height: 100%;


    background-image: url('img/stelle-sfondo.jpg'); 


    background-size: cover;


    background-position: center;


    opacity: 0.5;


    z-index: 1;


    animation: backgroundMove 100s linear infinite;


}





@keyframes backgroundMove {


    0%, 100% { transform: scale(1); }


    50% { transform: scale(1.1); }


}





#light-container {


    position: fixed;


    width: 100%; height: 100%;


    top: 0; left: 0;


    pointer-events: none;


    z-index: 2;


}





.container {


    text-align: center;


    z-index: 100; /* Aumentato per stare sopra light-container */


    display: flex;


    flex-direction: column;


    align-items: center;


    position: relative;


    width: 100%;


    margin: 0 auto;


    pointer-events: auto; /* Forza la ricezione dei click */


}





/* STELLE */


.light {


    position: absolute;


    background: #FFD700;


    border-radius: 50%;


    box-shadow: 0 0 7px 1px rgba(255, 215, 0, 0.4);


    animation: twinkle 4s infinite alternate ease-in-out;


}





@keyframes twinkle {


    0% { opacity: 0.2; transform: scale(0.8); }


    100% { opacity: 0.8; transform: scale(3.4); }


}





.animate-expand {


    animation: logoZoom 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;


}





@keyframes logoZoom {


    0% { opacity: 0; transform: scale(2.5); filter: blur(15px); }


    100% { opacity: 1; transform: scale(1); filter: blur(0px); }


}





/* TESTO DINAMICO E LETTERE RANDOM */


#dynamic-text {


	font-family: 'Bebas Neue', sans-serif;


    font-size: 2.5rem;


	letter-spacing: 4px;


	color: #E5E4E2;


    font-weight: 800;


	/* Effetto bagliore metallico */


    text-shadow: 0 0 8px rgba(216, 217, 218, 0.3), 0 0 2px rgba(255, 255, 255, 0.5);


    margin-bottom: 20px;


    text-transform: uppercase;


    letter-spacing: 5px;


    min-height: 1.5em;


	transition: opacity 0.8s ease;


}





/* Opzionale: un tocco di colore speciale per il "Grazie" */


#dynamic-text.success-message {


    color: #87B3B4; /* verde acqua Tiffany */


    text-shadow: 0 0 15px rgba(135, 179, 180, 0.4);


}



.dynamic-letter {
		font-size: 4rem;           /* Più grande per dominare lo schermo */
        letter-spacing: 4px;       /* Aumenta il respiro tra le lettere */
        font-weight: 400;          /* Assicurati che non sia troppo pesante */
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.2); /* Un tocco di luce per la Noctis */
        -webkit-font-smoothing: antialiased; /* Rende i bordi più lisci su Mac/Chrome */
}


.dynamic-letter.hidden-letter {


    display: inline-block;


    opacity: 0;


    transform: scale(0.3);


    filter: blur(15px);


}





.dynamic-letter.reveal-letter {


    opacity: 1 !important;


    filter: blur(0px);


    animation: letterRandomReveal 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;


}





@keyframes letterRandomReveal {


    0% { opacity: 0; transform: scale(0.3) translateY(20px); filter: blur(15px); color: #FFD700; }


    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0px); color: inherit; }


}





/* BOTTONE E FIAMMA */


.btn {


    padding: 15px 30px;


    background: #111;


    color: #FFD700;


    border: 1px solid #FFD700;


    font-size: 18px;


    cursor: pointer;


    display: flex;


    align-items: center;


    text-transform: uppercase;


    opacity: 0;


    transition: 0.3s;


}





.btn.reveal-letter { opacity: 1; }





.flame {


    width: 12px; height: 18px;


    background: radial-gradient(circle at 50% 30%, #fff6b3, #ffb347, #ff6a00);


    border-radius: 50% 50% 20% 20%;


    margin-right: 12px;


    box-shadow: 0 0 10px #ffb347;


    animation: flameMove 1s infinite alternate;


}





@keyframes flameMove {


    from { transform: scale(1); opacity: 0.8; }


    to { transform: scale(1.2) translateY(-2px); opacity: 1; }


}





/* FORM RITUALE */


#form-container {


    background: rgba(0,0,0,0.85);


    padding: 25px;


    border: 1px solid #FFD700;


    border-radius: 10px;


    margin: 0 auto; /* Centra il form */


    width: 320px;


    z-index: 1000;


    position: relative;


}





input, textarea {


    width: 100%; margin-bottom: 15px; background: #1a1a1a;


    border: 1px solid #444; color: white; padding: 10px; box-sizing: border-box;


}





.input-group {


    margin-bottom: 20px;


    text-align: left;


}





.input-group label {


    display: block;


    color: #FFD700;


    font-size: 0.8rem;


    letter-spacing: 2px;


    margin-bottom: 8px;


    text-transform: uppercase;


}





.input-group input, 


.input-group textarea {


    width: 100%;


    padding: 12px;


    background: rgba(255, 255, 255, 0.05);


    border: 1px solid rgba(255, 215, 0, 0.3);


    color: #fff;


    border-radius: 4px;


    font-family: 'Cinzel', serif; /* o il font che usi */


}





.custom-request-text {


    font-size: 0.85rem;


    color: #87B3B4; /* Un colore leggermente diverso per distinguere la sezione */


    margin-bottom: 10px;


    font-style: italic;


}





.message-area textarea {


    height: 100px; /* Più piccolo rispetto a prima */


    resize: none;


}





.hidden { display: none !important; }





/* SEZIONE VETRINA */


#feature-section {


    width: 100%;


    max-width: 900px; /* Leggermente più largo per un effetto cinematografico */


	margin: 20px auto 0px auto; /* Margine per non toccare i bordi */


    padding: 20px; /* Margine interno di sicurezza su mobile */


    box-sizing: border-box; /* Include padding nel calcolo della larghezza */


    


    /* Gestione visibilità e transizioni */


    opacity: 0;


    visibility: hidden; /* Nasconde l'elemento anche al lettore di schermo finché non serve */


	transform-origin: center top; /* Lo zoom parte dall'alto, più naturale per lo scroll */


    /* transition: transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.2s ease, visibility 1.2s; */


    


    /* Posizionamento per l'animazione */


    /* transform-origin: center center; */


    /* position: relative;


    z-index: 15; */


}





/* Stile per mostrare la sezione (Zoom In + Fade In) */


#feature-section.show {


    opacity: 1;


    visibility: visible;


    transform: scale(1);


    animation: vetrinaZoomIn 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;


}





/* Evitiamo che la sezione vetrina blocchi i click quando è nascosta */


#feature-section.hidden {


    display: none !important;


}





/* Animazione di INGRESSO (Zoom da lontano, simile al logo) */


@keyframes vetrinaZoomIn {


    0% { opacity: 0; transform: scale(2.5) translateY(0px); filter: blur(20px); }


    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0px); }


}





/* Animazione di USCITA (Z-out rimpicciolimento) */


#feature-section.shrink-out {


    transform: scale(0);


    opacity: 0;


}





/* --- Layout del Contenuto (Testo e Immagini) --- */


.feature-content {


    display: flex;


    flex-direction: column;


    align-items: center;


    width: 100%;


}





.feature-text {


    color: #FFD700;


    font-size: 1.5rem; /* Leggermente più grande per leggibilità */


    line-height: 1.7;


    margin-bottom: 40px;


    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);


    text-align: center;


    max-width: 700px;


}





.feature-text span {


    color: #ffffff;


    font-size: 1.3rem;


    font-weight: 300;


}





/* --- Griglia Immagini Responsive --- */


.feature-images {


    display: flex;


    justify-content: center;


    align-items: center;


    gap: 20px; /* Spazio tra le immagini */


    width: 100%;


    flex-wrap: wrap; /* Permette alle immagini di andare a capo su schermi piccoli */


	pointer-events: auto;     /* Assicura che l'immagine riceva il click */


	z-index: 100;


}





.feature-images img {


    flex: 1 1 250px; /* Flessibile: base 250px, cresce e si rimpicciolisce */


    max-width: 30%; /* Su desktop, massimo un terzo della larghezza */


    height: auto; /* Mantiene le proporzioni */


    border: 2px solid rgba(255, 215, 0, 0.3); /* Bordo oro sfumato */


    border-radius: 8px;


    box-shadow: 0 10px 25px rgba(0,0,0,0.6);


    transition: transform 0.4s ease, border-color 0.4s ease;


}





/* Effetto Hover sulle immagini */


.feature-images img:hover {


    transform: scale(1.05);


    border-color: rgba(255, 215, 0, 0.8);


    box-shadow: 0 15px 35px rgba(255, 215, 0, 0.3);


}











/* ANIMAZIONE RIMPICCIOLIMENTO (Z-OUT) */


.shrink-out {


    transform: scale(0);


    opacity: 0;


}





/* TASTO "SCOPRI IL RITO" ANIMATO */


.btn {


    position: relative;


    border-radius: 50px; /* Più arrotondato come da screenshot */


    padding: 12px 40px;


    animation: buttonPulse 2s infinite;


}





@keyframes buttonPulse {


    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }


    70% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); }


    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }


}





#cta-button {


    z-index: 999; /* Altissimo */


    position: relative; /* Necessario per lo z-index */


    pointer-events: auto !important; /* Forza la cliccabilità */


}





/* MANINA CHE LAMPEGGIA */


.pointer-hand {


    position: absolute;


    right: -30px;


    bottom: -10px;


    font-size: 1.5rem;


    animation: handFlash 1s infinite alternate;


}





@keyframes handPointHorizontal {


    0% { 


        opacity: 0.4; 


        transform: translateY(-50%) translateX(0) scale(0.9); 


    }


    100% { 


        opacity: 1; 


        transform: translateY(-50%) translateX(-10px) scale(1.1); 


    }


}








/* --- ANIMAZIONE LAMPEGGIAMENTO E PULSAZIONE --- */


@keyframes handFlashAndPulse {


    0% { 


        opacity: 0.2; 


        transform: translateY(0) scale(0.9); 


        text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);


    }


    100% { 


        opacity: 1; 


        transform: translateY(5px) scale(1.1); /* Si muove leggermente verso il basso e si ingrandisce */


        text-shadow: 0 0 15px rgba(255, 215, 0, 0.9);


    }


}











@keyframes handFlash {


    0% { opacity: 0.2; transform: translateY(0); }


    100% { opacity: 1; transform: translateY(5px); }


}





/* --- EFFETTI HEADER LOGO --- */


/* Contenitore principale dell'header */


#header-logo {


    position: relative;


    display: block;      


    margin: 0 auto 10px auto;


    z-index: 11;


    text-align: center;  


    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), margin 1.2s ease;


}





#header-logo.move-up {


    transform: translateY(0); /* Evitiamo il translate che taglia la punta */


    margin-top: 0; 


    margin-bottom: 5px;


}





#logo-wrapper {


    position: relative;


    display: inline-block; /* Si stringe attorno al logo per fare da ancora alla manina */


    vertical-align: middle;


}





.logo {


    display: block;


    max-width: 280px;


    height: auto;


    opacity: 0;


}





#logo-backlight {


    position: absolute;


    top: 50%;


    left: 50%;


    width: 120%; /* Leggermente più grande del logo */


    height: 120%;


    background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, rgba(255, 215, 0, 0) 70%);


    transform: translate(-50%, -50%) scale(0); /* Parte da invisibile/piccolo */


    filter: blur(30px);


    opacity: 0;


    z-index: -1; /* Dietro il logo */


    transition: transform 2s ease, opacity 2s ease;


}





/* Quando il JS aggiunge questa classe, la luce appare */


#header-logo.illuminate #logo-backlight {


    opacity: 1;


    transform: translate(-50%, -50%) scale(1.5);


}





/*MANINA*/


.pointer-hand-logo {


    position: absolute;


    right: -65px;       /* Distanza orizzontale dal logo */


    top: 50%;           /* Centratura verticale */


    transform: translateY(-50%); 


    


    font-size: 2.5rem;


    color: #FFD700;


    text-shadow: 0 0 15px rgba(255, 215, 0, 0.9);


    pointer-events: none;


    z-index: 12;


    


    animation: handPointHorizontal 1.2s infinite alternate ease-in-out;


    opacity: 0;


    visibility: hidden;


    transition: opacity 0.5s ease;


}





@keyframes handPointHorizontal {


    0% { transform: translateY(-50%) translateX(0) scale(0.9); opacity: 0.4; }


    100% { transform: translateY(-50%) translateX(-10px) scale(1.1); opacity: 1; }


}





/* --- NUOVA ANIMAZIONE ESPANSIONE TESTO --- */


.dynamic-letter.light-expansion {


    opacity: 1 !important;


    filter: blur(0px) !important;


    animation: lightExpansionReveal 1.2s cubic-bezier(0.175, 0.885, 0.32, 1) forwards;


}





@keyframes lightExpansionReveal {


    0% { 


        opacity: 0; 


        transform: scale(0) translateX(var(--letter-offset)); 


        filter: blur(20px);


        color: #ffffff;


    }


    40% {


        opacity: 1;


        filter: blur(5px);


        color: #FFD700;


    }


    100% { 


        opacity: 1; 


        transform: scale(1) translateX(0); 


        filter: blur(0px);


        color: #FFD700;


    }


}





/* Classe per rimpicciolire il testo dinamico */


#dynamic-text.small-text {


    font-size: 1.9rem; /* Circa la metà della dimensione originale */


    letter-spacing: 3px;


    max-width: 100%; /* Evita che la frase lunga vada troppo ai bordi */


    margin-left: auto;


    margin-right: auto;


    line-height: 1.4;


}





.newsletter-group {


    display: flex;


    align-items: center;


    gap: 10px;


    margin: 20px 0;


    cursor: pointer;


    font-size: 0.9rem;


    color: #D8D9DA; /* Argento */


    font-family: 'Montserrat', sans-serif;


}





.newsletter-group input[type="checkbox"] {


    cursor: pointer;


    accent-color: #87B3B4; /* Verde Tiffany quando selezionato */


    width: 18px;


    height: 18px;


}





.newsletter-group label {


    cursor: pointer;


    user-select: none;


}





.newsletter-group:hover label {


    color: #ffffff; /* L'argento diventa bianco al passaggio del mouse */


    transition: color 0.3s ease;


}





.newsletter-group input[type="checkbox"] {


    cursor: pointer;


    accent-color: #87B3B4; /* Il colore Tiffany che abbiamo scelto */


    width: 18px;


    height: 18px;


    filter: drop-shadow(0 0 5px rgba(135, 179, 180, 0.2));


}





/* Newsletter e Privacy */


.checkbox-wrapper {


    display: flex;


    align-items: center;


    gap: 10px;


    margin-top: 15px;


}





.privacy-note {


    font-size: 0.7rem;


    color: #888;


    margin-top: 10px;


    font-family: sans-serif;


}





.privacy-note a {


    color: #87B3B4;


    text-decoration: underline;


}





.form-instruction {


    color: #ffffff;


    font-family: 'Bebas Neue', sans-serif;


    font-size: 0.9rem; /* Leggermente più grande per leggibilità */


    letter-spacing: 1px;


    margin: 0 0 20px 0; /* Rimosso margine superiore */


    text-align: center;


}








/* --- FIX MOBILE (DENTRO UNA SOLA MEDIA QUERY) --- */


@media (max-width: 480px) {
	
	.dynamic-letter {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.0rem;
    letter-spacing: 1px;
	}


    .logo {


        max-width: 160px; /* Logo più piccolo su smartphone */


    }


    


    .pointer-hand-logo {


        right: -45px;   /* Più vicina perché il logo è più piccolo */


        font-size: 1.8rem;


        display: block !important; /* Forza la visibilità */


        top: 50%;


        transform: translateY(-50%);


    }





    #header-logo.move-up {


        margin-top: -20px; /* Recupera spazio in alto senza usare translate pericolosi */


    }





    #form-container {


        width: 90%; /* Più largo su mobile per non sprecare spazio */


        padding: 20px;


    }


	.form-instruction {


        font-size: 1rem;


        padding: 0 10px;


    }





    .feature-images {


        flex-wrap: nowrap !important; /* Forza la riga unica */


        gap: 8px;                    /* Riduciamo lo spazio per farle stare meglio */


    }


	


    #gallery-close { right: 20px; }


	


	.nav-btn {


        position: absolute !important;


        top: 50% !important;


        transform: translateY(-50%) !important;


        z-index: 100010 !important;


        font-size: 3rem !important; /* Dimensione leggibile */


        padding: 15px !important;


        /* Un leggero cerchio d'ombra per renderle visibili su ogni foto */


        background: rgba(0, 0, 0, 0.4) !important;


        border-radius: 50%;


        width: 50px;


        height: 50px;


        display: flex !important;


        align-items: center;


        justify-content: center;


        color: #FFD700 !important;


    }





    #prev-btn {


        left: 10px !important; /* Fissa a sinistra */


    }





    #next-btn {


        right: 10px !important; /* Fissa a destra */


    }





    /* Riduciamo leggermente l'immagine per non coprire troppo le frecce */


    #gallery-img {


        max-width: 90vw !important;


        max-height: 75vh !important;


    }





    /* Spostiamo la X di chiusura per non sovrapporla alle frecce */


    #gallery-close {


        top: 10px !important;


        right: 15px !important;


        font-size: 2.5rem !important;


    }
	
	#gallery-overlay {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    

    /* SFONDO SEMITRASPARENTE + BLUR EFFETTO VETRO */

    background: rgba(0, 0, 0, 0.7) !important; 

    backdrop-filter: blur(10px); 

    -webkit-backdrop-filter: blur(10px); 

    

    display: none; /* JS userà style.display='flex' */

    

    /* ALLINEAMENTO ORIZZONTALE */

    flex-direction: row; 

    justify-content: center;

    align-items: center;

    

    z-index: 99999 !important; /* Altissimo */

    cursor: default;

    opacity: 1 !important; /* Forza la visibilità */

    visibility: visible !important;

}

#gallery-content {

    width: auto;

    height: auto;

    max-width: 80%; /* Ridotto per dare spazio alle frecce orizzontali */

    max-height: 90vh;

    display: block;          /* Cambiamo da flex a block per permettere lo scroll */

    justify-content: center;

    align-items: center;

    z-index: 100000;

	width: 100%;

    height: 100%;

	overflow-x: hidden; /* Gestiamo la dimensione noi con max-height */

	overflow-y: auto;        /* ATTIVA lo scroll verticale se l'immagine è lunga */

	-webkit-overflow-scrolling: touch; /* Rende lo scroll fluido su iPhone */

}


}





/* --- Media Query per Schermi Piccoli (TABLET) --- */


@media (max-width: 768px) {


    #dynamic-text { font-size: 1.8rem; }


    


    .feature-text { font-size: 1.1rem; }


    


    .feature-images { gap: 10px; }


    


    .feature-images img {


        flex: 1 1 45%; /* Due immagini per riga su tablet */


        max-width: 48%;


    }


}








/* --- STILE GALLERIA LIGHTBOX --- */


#gallery-overlay {
    display: none; /* Gestito da JS */
    position: fixed !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(10px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}


/* Le frecce sono all'interno dell'overlay, Flexbox le allinea */


.nav-btn {


    position: static; /* Rimuoviamo il posizionamento assoluto */


    background: none;


    border: none;


    color: #FFD700;


    font-size: 5rem;


    cursor: pointer;


    padding: 30px;


    z-index: 100001;


    transition: transform 0.3s ease;


    text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);


    outline: none;


    pointer-events: auto; /* IMPORTANTE */


}





.nav-btn:hover { transform: scale(1.15); }





/* Contenitore Immagine (allineato tra le frecce) */
#gallery-content {
    position: relative;
    width: 80%;
    height: 80vh; /* Altezza fissa su PC */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Niente scroll su PC */
}





#gallery-img {


/* Impedisce all'immagine di superare l'altezza del display */


    max-width: 95vw !important; 


    max-height: 80vh !important;


    object-fit: contain !important;


	


	display: block;


    margin: auto;


    border: 1px solid #FFD700;


    border-radius: 4px;


    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);


	


    transition: opacity 0.3s ease;


	cursor: pointer; /* Su desktop mostra la manina */


    /*touch-action: none;  Impedisce al browser di scrollare la pagina mentre fai lo swipe */


    user-select: none; /* Impedisce di "selezionare" l'immagine trascinandola */


    -webkit-user-drag: none;


	


	/* IMPORTANTE: auto permette lo scroll verticale, pan-x permette lo swipe */


    touch-action: pan-x pan-y; 


}





/* Opzionale: un leggero effetto quando si cambia immagine */


.gallery-fade {


    animation: fadeEffect 0.4s ease;


}





@keyframes fadeEffect {


    from { opacity: 0; transform: scale(0.95); }


    to { opacity: 1; transform: scale(1); }


}





/* Tasto Chiusura (X in alto a destra) */


#gallery-close {


    position: absolute;


    top: 30px;


    right: 40px;


    color: #FFD700;


    font-size: 4rem;


    cursor: pointer;


    z-index: 100002;


    pointer-events: auto; /* IMPORTANTE */


}