@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');

body {
    margin: 0;
    background-color: #fdfdfd;
    /* Un bianco morbido per non affaticare gli occhi */
}

.cormorant-garamond {
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

.alex-brush-regular {
    font-family: "Alex Brush", cursive;
    font-weight: 400;
    font-style: normal;
}

.didactic-gothic {
    font-family: 'Didact Gothic', sans-serif;
}


/* HEADER */
.barra-colorata {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: linear-gradient(90deg,
            #eaf8fc,
            /* schiarito da #d4f1f9 */
            #c9e8f2,
            /* da #87cde3 */
            #a0d8ea,
            /* da #3fa9d0 */
            #80bddc,
            /* da #007bb5 */
            #9bbebe,
            /* da #367b7b */
            #b9b6d9,
            /* da #716cae */
            #f2aacc
            /* da #e759a6 */
        );

    background-size: 300% 300%;
    animation: smoothShift 20s ease infinite;
    overflow: hidden;
}

.barra-colorata::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='0.04'/></svg>");
    background-repeat: repeat;
    pointer-events: none;
}

/* IMMAGINE TESTO */
.img-testo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55vh;
    margin-top: 40px;
}

.img-testo .img-profumo {
    width: 250px;
    margin-right: 60px;
}

.img-testo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 66px;
    line-height: 120%;
    font-weight: 600;
}

.del {
    font-family: 'Alex Brush', cursive;
    font-weight: 400;
}

.img-testo h1 {
    margin-bottom: 0;
}

.social-icons {
    margin-left: 5px;
    display: flex;
    gap: 0.5rem;
    /* spazio tra le icone */
    align-items: center;
    /* allinea verticalmente le icone */
    margin-top: 1rem;
    /* opzionale, per distanziarle dal titolo */
}

.social-icons svg {
    width: 32px;
    /* o 32px, in base al design */
    height: 32px;
    fill: #000;
    /* o il colore che desideri */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.icon:hover {
    transform: scale(1.1);
}


/* TESTO */
.language-carousel {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.carousel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.carousel-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.5s ease;
}

.lang-item {
    height: auto;
    font-size: 1.8em;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    line-height: 1.2;
}

.lang-item.active {
    font-size: 2.2em;
    font-weight: bold;
    opacity: 1;
    cursor: default;
}

.lang-item:hover:not(.active) {
    opacity: 0.8;
    transform: scale(1.03);
}

.story-text {
    text-align: justify;
    /* Aspetto editoriale */
    margin-top: 30px;
    font-size: 1.125rem;
    /* 18px: corpo testo ideale */
    line-height: 1.6;
    /* Spaziatura tra righe */
    max-width: 65ch;
    /* Lunghezza riga ottimale */
    margin-inline: auto;
    /* Centra il blocco */
    padding: 0 1rem;
    /* Spazio laterale */
    color: #222;
    /* Testo leggibile */

    white-space: pre-wrap;
    /* Mantiene \n e spazi multipli */
    overflow-wrap: break-word;
    /* Spezza parole troppo lunghe */
    word-break: break-word;
    /* Fallback compatibilità */
    hyphens: auto;
    /* Sillabazione dove supportata */

    transition: opacity 0.3s ease;
}

.footer {
    background-color: #c9e8f2; /* azzurro chiaro, tono coerente con l'header */
    color: #1a1a1a; /* testo scuro, leggibile ma non aggressivo */
    font-family: 'Didact Gothic', sans-serif;
    font-size: 0.75rem;
    text-align: center;
    padding: 0.6rem 1rem;
    margin-top: 3rem;
    border-top: 1px solid #a8d3e4; /* leggero tocco di separazione */
  }
  
  .footer p {
    margin: 0;
    letter-spacing: 0.3px;
  }
  



/* Mobile - fino a 599px */
@media (min-width: 0px) and (max-width: 599px) {

    .img-testo {
        display: block;
        text-align: center;
        align-items: center; /* Non ha effetto su un blocco, funziona solo con display: flex */
        font-size: 40px;
        height: 75vh;
    }

    .img-testo .img-profumo {
        width: 200px;
        margin: 30px auto 0; /* centrato orizzontalmente */
    }

    .img-testo h1 {
        margin-top: 15px;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

    .lang-item {
        font-size: 1.3em;
    }

    .lang-item.active {
        font-size: 1.7em;
    }
}

/* Tablet piccolo - da 600px a 830px */
@media (min-width: 600px) and (max-width: 830px) {

    .story-text {
        margin: 0 20px;
    }

    .img-testo {
        font-size: 40px;
        height: 48vh;
    }

    .img-testo .img-profumo {
        width: 200px;
        margin-right: 60px;
    }

    .language-carousel {
        margin-top: 30px;
    }

    .lang-item {
        font-size: 1.5em;
    }

    .lang-item.active {
        font-size: 1.9em;
    }
}

/* Tablet largo e dispositivi più piccoli fino a 1024px */
@media (max-width: 1024px) {
    /* Spazio per eventuali stili condivisi tra mobile e tablet */
}