/* Impostazioni di base */

:root {
    /* Tavolozza colore  */
    --primary: #000;
    --secondary: #685B87;
    --light: #FFFDFD;
    --dark: rgb(107, 106, 106);
    --accent: rgb(190, 190, 190);


    /* Tipografia */
    --font-primary: 'Poppins', sans-serif;
    --font-display: 'Open+Sans', sans-serif;

    /* Dimensioni */
    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 2rem;
    --space-l: 3rem;
    --spacce-xl: 4rem;

    /* Proprietà elementi */
    --border-radius: 4px;
    --box-shadow: 0 4px 6px #100d0d;

    /* Animazioni */
    --animazioni-micro-l: 6s cubic-bezier(.33, .96, .68, .31);
    --animazioni-micro-s: 0.7s cubic-bezier(.45, .64, .56, .45);
    --transition: all 0.3s ease-in-out;

    /* Distanziatori */
    --space: 10px;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: var(--light);
}

li {
    list-style-type: none;
}


/* Utility */

html {
    /* serve per scrollare in modo più morbida quando pigi su about per andare nella sua sezione  */
    scroll-behavior: smooth;
}

/* il res serve per le immagini */
.res {
    width: 100%;
    max-width: 200px;

}

.container {
    max-width: 900px;
    margin: 0 auto;
    /* outline: 1px solid red; */
}


/* servono per alcuni paragrafi */
.leading {
    font-size: 1.4em;
}


/* Tipografia */
body {
    font-family: 'Open+Sans', sans-serif;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', light;
    font-weight: 300;
}

/* il p sta per il paragrafo a cui sto dando dei parametri che varranno per tutti i paragrafi */
p {
    font-size: 1.2em;
    line-height: 1.5em;
    margin-bottom: 20px;
}

p.leading {
    font-size: 1.2em;
}


.title {
    font-size: 80px;
    font-family: 'Poppins', light;
    font-weight: 300;
}

.subtitle {
    font-size: 70px;
}

.headline {
    font-size: 20px;
}

.headline,
.title,
.subtitle {
    font-family: 'Poppins', sans-serif;
    /* il primo 0 lavora in alto, poi a ds, il 10 è in basso e l'ultimo zero a sn come un orologio */
    margin: 0 0 10px 0;
    color: var(--light);
}


/* HEADER */
header.header {
    /* position: fixed;
    width: 100%; */
    background: var(--primary);

}

/* lo spazio significa che header è figlio di conteiner */
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;

}

.fixed {
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* provvisorio */
/* .header__logo,
.header__menu,
.header__cta,
.header__icon {
    outline: 1px solid red;
} */

.header__cta {
    width: 130px;
}

.header__cta a {
    display: block;
    color: var(--light);
    border: 1px solid var(--secondary);
    background-color: var(--secondary);
    padding: 10px;
    text-align: center;
    border-radius: 50px;

}

.header__logo img {
    filter: invert(1);
}

i.eyes {
    display: block;
    float: right;
    background-image: url(../img/eyes.svg);
    background-position: 0 0;
    top: .75em;
    width: 5.9em;
    height: 3.8em;
    background-size: 5.9em 3.8em;
    -webkit-transition: transform .3s ease-in;
    -o-transition: transform .3s ease-in;
    -webkit-transition: -webkit-transform .3s ease-in;
    transition: transform .3s ease-in;
    transition: transform .3s ease-in, -webkit-transform .3s ease-in;
}

.header__icon {
    display: none;
    color: var(--light);
}

/* il li con l'angolare serve per specificare l'elemento figlio di site nav */
.site-nav>li {
    display: inline-block;
}

/* questo è il menù centrale */
.site-nav>li a {
    color: var(--light);
    padding: 20px;
}


/* HERO*/
.hero {
    /* qui sotto ho caricato una immagine per lo sfondo  */
    background: url(img/museo_illusioni_clip.mp4) center center var(--primary);
    /* background size serve per non far venire l'immagine gigante */
    background-size: cover;
    height: 100vh;
    display: flex;
    /* questo comando lavora sull'asse verticale e lo centra */
    align-items: center;
    justify-content: center;
}

/* Il video deve occupare tutta la sezione hero */
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Adatta il video per coprire tutta l'area */
    z-index: 1;
}

.txt {
    position: absolute;
    z-index: 2;
}

/* questo tipo di scrittura (::) richiama a degli pseudo elementi per poter inserire delle cose che ci sono ma non si vedono come opaccizzare l'immagine che hai di sfondo   */
.hero::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--secondary);
    opacity: 0.5;
    z-index: 2;
}

/* questo serve per portare davanti al quadrato opaco fatto il testo e cambiargli colore e la scritta che appare dopo il video */
.hero__content {
    color: #fff;
    text-align: center;
    /* serve per portare in alt */
    z-index: 3;
    outline: 1px solid red;
    font-size: 3em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

}


section {
    /* scrtoll margin top serve per mettere un margine solo quando si scrolla e non sempre */
    scroll-margin-top: 177.33px;
    /* per poter mettere il testo centro si usa questi 2 comandi
    display: flex;
    justify-content: center;
    align-items: center; */
    /* outline: 1px solid red; */
    padding: 50px;

    display: flex;
    flex-direction: row;
    gap: 30px;


}

/* testi video  */
.important {
    font-size: 1em;
    font-weight: 500;
    color: var(--secondary);
}

.content__title {
    width: 30%;
    text-align: right;
    font-size: 40px;
}

.content__testi {
    width: 70%;
}

.box-dim {
    width: 100%;
    gap: 30px;
}


/* Immagini affiancate */
.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin: 0px 0;
    position: relative;
    /* Altezza fissa modificata per evitare sovrapposizioni */
    height: 500px;
    overflow: visible;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.image-wrapper.static {
    /* Dimensioni ridotte per evitare sovrapposizioni */
    width: 450px;
    height: 500px;
}

.image-wrapper.scroll-animation {
    width: 300px;
    height: 400px;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.moving-image {
    position: relative;
    /* Transizione più evidente */
    transition: transform 0.2s ease-out;
}

.content {
    text-align: center;
    max-width: 800px;
    margin: 100px auto 0;
    /* Aumentato il margine superiore */
    padding: 40px 0;
    clear: both;
    /* Assicura che il contenuto stia sotto le immagini */
}


/* immagine a tutto schermo con effetto parallax */
.parallax-section {
    width: 100% !important;
    height: 100vh;
    /* Imposta l'altezza al 100% della viewport per coprire tutta la pagina */
    background: url(../img/foto5.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

/* immagine a tutto schermo 2 */
.parallax-img {
    width: 100% !important;
    height: 100vh;
    /* Imposta l'altezza al 100% della viewport per coprire tutta la pagina */
    background: url(../img/foto3.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}


.content {
    position: relative;
    z-index: 1;
    /*Impedisce che il contenuto venga nascosto sotto l'immagine  */
    padding: 150px;
    background-color: rgba(255, 255, 255, 0.7);
    /*Fondo semi-trasparente per far risaltare il testo  */
}

.other-content {
    padding: 50px;
    background-color: #f9f9f9;
}

/* testi della parte dei biglietti */
.testi-inlinea {
    display: inline;
    width: 70%;
    padding: 0px;
}

h3 {
    font-family: 'Poppins', light;
    font-weight: 300;
    font-size: 1.5em;
    color: var(--secondary);
}

li {
    font-size: 1.2em;
}

.footer {
    color: var(--light);
}


/* box biglietti */
/* Stile di base per il corpo della pagina */
body {
    font-family: 'Poppins', light;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Box di prenotazione */

.calendario-biglietti {
    display: inline;
    padding: 10px;
    gap: 20px;
}

.prenotazione {
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px;
    gap: 30px;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Titolo */
h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

/* Sezione del calendario */
.calendario-box {
    margin-bottom: 20px;
}

label {
    font-size: 18px;
    margin-bottom: 10px;
    display: block;
}

input[type="date"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 50px;
}

/* Sezione di selezione biglietti */
.biglietti-selezione {
    margin-bottom: 20px;
    font-family: 'Open+Sans', sans-serif;
}

select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 50px;
}

/* Pulsante di conferma prenotazione */
#conferma {
    position: relative;
    width: 100%;
    padding: 12px;
    font-size: 18px;
    background-color: var(--secondary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: not-allowed;
}

#conferma:enabled {
    cursor: pointer;
    background-color: #45a049;
}

.icon i {
    color: var(--secondary);
    font-size: 1em;
}

.posizione {
    width: 100%;
    height: auto;
    position: relative;
    object-fit: cover;
}

/* regala i biglietti */
/* Stili per il checkout semplificato */
.checkout-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Poppins', sans-serif;
}

.content__title {
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary);
}

.checkout-form {
    background-color: var(--light);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.form-section {
    margin-bottom: 30px;
}

.form-section h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--primary);
    position: relative;
    padding-bottom: 10px;
}

.form-section h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--secondary);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    min-width: 250px;
}

.form-group.full-width {
    flex-basis: 100%;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--secondary);
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    border-color: #4a90e2;
    outline: none;
}

.terms-privacy {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.terms-privacy input {
    margin-right: 10px;
    margin-top: 4px;
}

.terms-privacy label {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

.terms-privacy a {
    color: #4a90e2;
    text-decoration: none;
}

.terms-privacy a:hover {
    text-decoration: underline;
}

.submit-button {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: var(--secondary);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #350758;
}

/* FOOTER */
footer {
    background: var(--secondary);

}

footer .container {
    background: var(--secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-style: italic;
    font-size: small;
}


div .social {
    color: var(--light);
    font-size: 1em;
    display: flex;
    gap: 20px;
}

@viewport {
    width: device-width;
    zoom: 1.0;
}

/* MEDIA QUERIES */
/* Versioni per dispositivi medi (Ipad) in giù anche */
@media (max-width: 768px) {

    .content {
        display: flex;
        flex-direction: column;
        padding: 30px 20px;
        width: 100%;
    }

    .content__title {
        width: 100%;
        text-align: left;
        margin-bottom: 20px;
    }

    .content__testi {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    section {
        display: flex;
        flex-direction: column;
    }

    .testi-inlinea {
        width: 100%;
    }

    .box-dim {
        width: 100%;
        gap: 0px;
    }

    .parallax-section {
        height: 40vh;
    }

    /* tipografia */
    .title {
        font-size: 50px;
    }

    .subtitle {
        font-size: 35px;
    }

    .headline {
        font-size: 20px;
    }

    /* serve per far riapparire l'hambuerger (display block) */
    .header__icon {
        display: block;
    }

    /* Header */
    .header__menu {
        position: fixed;
        left: 50%;
        width: 50%;
        height: 40%;
        background: var(--secondary);
        /* questo comando serve per far traslare via uno sfondo  */
        transform: translateY(-100%);
        transition: var(--animazioni-micro-s);

    }

    .open .header__menu {
        transform: translateY(0);
        top: 20%;
    }

    .site-nav {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        align-items: center;
        gap: var(--space-m);
        font-size: 1em;
        padding: var(--spacce-s);
        position: static;
        z-index: 2;
    }

    /* Hamburger */
    .icon__hamburger {
        cursor: pointer;
        height: 20px;
        width: 40px;
        position: relative;
        transition: var(--animazioni-micro-s);
    }

    .icon__hamburger span {
        background: var(--light);
        height: 2px;
        width: 100%;
        position: absolute;
        left: 0;
        border-radius: 20px;

    }

    /* qui con icon hambuer sto creando un hambuerger animato colleto a span dell'html */
    .icon__hamburger span:nth-child(1) {
        top: 0;
    }

    .icon__hamburger span:nth-child(2),
    .icon__hamburger span:nth-child(3) {
        top: 10px;
        width: 70%;
    }

    .icon__hamburger span:nth-child(4) {
        top: 20px;
    }

    /* Hamburger solo quando la classe antenato è in open */
    .open .icon__hamburger {
        /* i deg sono i gradi per la rotazione che fa la x dell'hamburger */
        transform: rotate(180deg);
    }

    .open .icon__hamburger span:nth-child(1),
    .open .icon__hamburger span:nth-child(4) {
        width: 0;
    }

    .open .icon__hamburger span:nth-child(2) {
        transform: rotate(45deg);
        width: 100%;
    }

    .open .icon__hamburger span:nth-child(3) {
        transform: rotate(-45deg);
        width: 100%;
    }

    /* carosello immagine */
    .image-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .image-item {
        width: 100%;
    }

    .overlay {
        opacity: 1;
        transform: translateY(0);
    }

    /* immagini affiancate */
    .container {
        padding: 10px;
    }

    .image-container {
        margin: 30px 0;
        gap: 15px;
    }

    .image-wrapper.static {
        max-width: 350px;
    }

    .image-wrapper.scroll-animation {
        max-width: 280px;
    }

    /* regala biglietti */
    .main-content {
        flex-direction: row;
    }

    footer .container {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
        align-items: center;
        text-align: center;
    }

    /* regala i biglietti */
    .checkout-form {
        padding: 20px;
    }

    .form-group {
        min-width: 100%;
    }


}

@media (max-width: 480px) {
    section {
        padding: 20px 15px;
    }

    .content__title {
        font-size: 30px;
    }

    /* tipografia */
    .title {
        font-size: 40px;
    }

    .subtitle {
        font-size: 30px;
    }

    .headline {
        font-size: 20px;
        margin: 15px;
    }

    p,
    p.leading {
        font-size: 1.2em;
    }

    /* immagini affinacate */
    .image-wrapper.static {
        max-width: 280px;
    }

    .image-wrapper.scroll-animation {
        max-width: 220px;
    }

    /* immagine parralax */
    .parallax-section {
        width: 50vh;

    }


    .parallax-img {
        width: 50%;
        height: 40vh;
    }

}