/* ================= GENERALE ================= */

@font-face {
    font-family: "OldEnglish";
    src: local("Old English Text MT");
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f4f6f8;
    color: #000;
    font-family: "Times New Roman", serif;
}

/* ================= HEADER ================= */

.site-header{

position:sticky;
top:0;
z-index:1000;

display:flex;
align-items:center;
gap:20px;

padding:22px;

background:linear-gradient(60deg,#a2d4ff,#98cbff);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,0.2);

transition:all .3s ease;
position: relative;

}

.site-header{
    position: relative;
    top:0;
    z-index:1000;
    transition: all .3s ease;
}

.site-header.scrolled{
    padding:12px 25px;
    box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

.site-header h1 {
    font-family: "OldEnglish", serif;
    font-size: 42px;
    letter-spacing: 2px;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    
   
}

.logo {
    width: 70px;
    height: 70px;
}

/* ================= HOME BUTTON ================= */

#home-button {
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 10px;
}

#home-button i {
    font-size: 24px;
    color: #000;
}

/* ================= MAPPA ================= */

.site-map {
    padding: 40px;
}

.top-level {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.top-level .box {
    flex: 1 1 calc(25% - 20px);
    min-width: 220px;
}

/* ================= BOX ================= */

.box{

background:#98cbff;

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

border-radius:16px;

border:1px solid #98cbff;

padding:14px;

display:flex;
flex-direction:column;
align-items:center;

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

transition:all .3s ease;

}

.box:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(0,0,0,0.2);

}
.box.open > .box-content{
max-height:1200px;
opacity:1;
transform:translateY(0);
}

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

/* ================= TITOLI BOX ================= */

.box-title {
    width: 100%;
    padding: 14px;
    font-size: 22px;
    font-family: "OldEnglish", serif;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.25s ease;
}

.box-title::after {
    content: "▼";
    float: right;
    transition: transform 0.3s;
}

.box:hover .box-title::after {
    transform: rotate(180deg);
}

.box-title:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.box-return {
    width: 10%;
    padding: 14px;
    font-size: 22px;
    font-family: "OldEnglish", serif;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.25s ease;
}



.box:hover .box-return::after {
    transform: rotate(180deg);
}

.box-return:hover {
    background: #98cbff;
    color: #fff;
}

/* ================= CONTENUTO ================= */

.box-content{
display:flex;
flex-direction:column;
align-items:center;
max-height:0;
overflow:hidden;
opacity:0;
transform:translateY(-6px);
transition:all .35s ease;
}

/* apertura indipendente box annidate */

.box-content .box .box-content{
max-height:0;
opacity:0;
transform: translateY(-8px);
transition: all 0.35s ease;
}

.box:hover > .box-content{
max-height:1200px;
opacity:1;
transform:translateY(0);
}

/* ================= BOTTONI ================= */

.item{
display:inline-block;
padding:10px 18px;
margin:6px;
border-radius:10px;
border:none;
background:linear-gradient(145deg,#ffffff,#f1f1f1);
cursor:pointer;
transition:all .25s ease;
font-weight:500;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.item:hover{
transform:translateY(-3px);
box-shadow:0 6px 14px rgba(0,0,0,0.15);
background:#ffffff;
}

/* ================= BOTTONI OVALI ================= */

.oval {
    padding: 6px 16px;
    margin: 6px;
    border-radius: 30px;
    border: 1px solid #ccc;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.oval:hover {
    transform: scale(1.05);
    background: #ececec;
}



.item:active,
.oval:active{
transform: scale(.96);
}


/* ================= SOTTO LIVELLI ================= */

.sub-items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* ================= MODULI ================= */

.grid-moduli {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.module-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 150px;
}

/* --- GALLERIA ORIZZONTALE COMPATTA --- */

/* 1. Rende il contenitore a scorrimento orizzontale */
.immagini {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important; /* Abilita lo scroll a destra/sinistra */
    overflow-y: hidden !important;
    gap: 15px !important;       /* Spazio tra un'immagine e l'altra */
    padding: 15px 5px !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* 2. Ridimensiona i contenitori di foto e video */
.immagini .immagine, 
.immagini .video {
    flex: 0 0 auto !important;  /* Impedisce che si schiaccino o si allarghino */
    width: 250px !important;    /* LARGHEZZA RIDOTTA */
    height: 180px !important;   /* ALTEZZA RIDOTTA */
    margin: 0 !important;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

/* 3. Adatta l'immagine/video all'interno del riquadro 250x180 */
.immagini .img02, 
.immagini .vid {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Mantiene le proporzioni e ritaglia il superfluo */
    border-radius: 10px;
} 

/* Specificità elevata per garantire lo scorrimento del carosello */
#img.content-section.active {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

/* CAROSELLO SCORREVOLE ORIZZONTALE */
.immagini-gallery {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    
    overflow-x: auto !important;   /* ABILITA LO SCORRIMENTO ORIZZONTALE */
    overflow-y: hidden !important;
    
    width: 100% !important;
    gap: 15px !important;
    padding: 20px 10px !important;
    
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Personalizzazione barra di scorrimento */
.immagini-gallery::-webkit-scrollbar {
    height: 10px;
}
.immagini-gallery::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.immagini-gallery::-webkit-scrollbar-thumb {
    background: #2889ff;
    border-radius: 10px;
}

/* Singoli box per ogni foto/video */
.immagini-gallery .media-box {
    flex: 0 0 260px !important;    /* Larghezza fissa per ciascuna immagine, impedisce lo schiacciamento */
    width: 260px !important;
    height: 180px !important;
    margin: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #000;
}

/* Adattamento contenuti interni (immagini e video) */
.immagini-gallery .media-box img,
.immagini-gallery .media-box video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ================= IMMAGINI ================= */

.immagine{
display:flex;
justify-content:center;
margin-top:40px;
}

.img01{
width:70%;
max-width:900px;
height:auto;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}
/* ================= VIDEO ================= */
.video{
display:flex;
justify-content:center;
margin-top:40px;
}

.vid{
width:70%;
max-width:900px;
height:auto;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* ================= SPLASH SCREEN ================= */

#splash-screen {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.8s ease;
}

#splash-screen.splash-hide {
    opacity: 0;
    pointer-events: none;
}

.splash-home {
    position: absolute;
    top: 20px;
    left: 30px;
    font-size: 20px;
}

.splash-logo {
    width: 450px;
    margin-bottom: 30px;
}

#splash-video{
width:450px;
border-radius:14px;
margin-bottom:30px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.splash-motto {
    font-family: "OldEnglish", serif;
    font-size: 60px;
    margin-bottom: 40px;
}

#splash-enter {
    padding: 15px 60px;
    font-size: 22px;
    background: rgb(255,140,0);
    border: none;
    cursor: pointer;
    animation: pulseEnter 1.2s infinite;
}
@keyframes pulseEnter {
    0% {
        background: rgb(255,140,0);
        box-shadow: 0 0 10px rgba(255,140,0,0.5);
    }
    50% {
        background: rgb(255,180,0);
        box-shadow: 0 0 25px rgba(255,180,0,0.9);
    }
    100% {
        background: rgb(255,140,0);
        box-shadow: 0 0 10px rgba(255,140,0,0.5);
    }
}

/* ================= COOKIE BANNER ================= */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

.cookie-banner{
transition: opacity .3s ease;
}

.cookie-banner.hide{
opacity:0;
pointer-events:none;
}

.cookie-buttons{
    display:flex;
    gap:10px;
    margin-left:auto;
}

.cookie-banner button {
    margin-left: 10px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

#cookie-accept {
    background: #4CAF50;
    color: #fff;
    align-items: right;
}

#cookie-decline {
    background: #f44336;
    color: #fff;
    align-items: right;
}

/* ================= FOOTER ================= */

.site-footer{
background:linear-gradient(60deg,#a2d4ff,#98cbff);
padding:40px;
text-align:center;
margin-top:60px;
color:rgb(0, 0, 0);
}

.site-footer h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.site-footer p {
    margin: 5px 0;
}

a{
text-decoration: none;
color: inherit;
}


/* AREA CONTENUTI */

.content-area{
max-width:1000px;
margin:40px auto;
}

.content-section{
display:none;
margin-top:20px;
}

/* SCHEDE PROFILO */

.profile-card{

display:flex;
gap:30px;
background:#ffffff;
padding:25px;
border-radius:12px;

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

transition:all .3s ease;

}

.profile-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,0.12);

}

.profile-img{
width:180px;
border-radius:10px;
object-fit:cover;
}

.profile-text{
flex:1;
text-align:left;
}

.profile-text h3{
margin-top:0;
font-size:24px;
}

/* SCHEDE PROGETTO */

.project-card{
display:flex;
gap:30px;
background:#ffffff;
padding:25px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.project-img{
width:300px;
border-radius:10px;
}

.project-text{
flex:1;
text-align:left;
}

.content-section{
display:none;
opacity:0;
transition:opacity 0.4s ease;
}

.content-section.active{
display:block;
opacity:1;
}

.reveal{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.reveal.visible{

opacity:1;

transform:translateY(0);

}

.hero{

text-align:center;

padding:120px 20px;

background:linear-gradient(120deg,#8fbae5,#9dc6ec);

color:rgb(0, 0, 0);
 /* sfondo animato */
  background: linear-gradient(-45deg, #4cd8ffb4, #2889ff, #4facfe, #46f6ffb7);
  background-size: 400% 400%;
  animation: gradientWave 20s ease infinite;
}

.hero h1{

font-size:64px;

margin-bottom:20px;

font-family:"OldEnglish";

}

.hero p{

font-size:22px;

opacity:.9;

}
/* animazione del gradiente */
@keyframes gradientWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* effetto focus/defocus */

.content-section:hover .profile-card{
opacity:1;
filter:blur(5px);
transition:all .35s ease;
}

.content-section .profile-card:hover{
opacity:1;
filter:blur(0px);
transform:translateY(-6px) scale(1.03);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.profile-card{
transition:all .3s ease;
}

.profile-card{
transition:all .3s ease;
}

.content-section:hover .profile-card{
opacity:0.4;
filter:blur(2px);
}

.content-section .profile-card:hover{
opacity:1;
filter:none;
transform:scale(1.03);
}

/* OVERLAY */

/*.popup-overlay{

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

background:rgba(0,0,0,0.6);
backdrop-filter:blur(6px);

display:none;
justify-content:center;
align-items:center;

z-index:90000;
animation:fadeOverlay .5s ease
}

@keyframes fadeOverlay{
from{opacity:0;}
to{opacity:1;}
}

.popup-overlay.active {
    display: flex;
}


/* BOX */
/*
.popup-box{
background:rgba(255,255,255,0.9);

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

padding:35px;
border-radius:18px;

width:90%;
max-width:420px;

box-shadow:
0 20px 60px rgba(0,0,0,0.25);

position:relative;

transform:translateY(40px) scale(0.95);
opacity:0;

animation:popupEnter .6s ease forwards;
}

/* INPUT */
/*
.popup-box input{
width:100%;
padding:12px;
margin:10px 0;

border-radius:10px;
border:1px solid rgba(0,0,0,0.1);

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

transition:all .25s ease;
}

.popup-box input:focus{
outline:none;
border-color:#6A89A7;
box-shadow:0 0 0 3px rgba(106,137,167,0.2);
}

/* BUTTON */
/*
.popup-box button[type="submit"]{
width:100%;
padding:14px;
margin-top:15px;

background:linear-gradient(135deg,#6A89A7,#8aaed0);

color:white;

border:none;
border-radius:10px;

font-weight:600;

cursor:pointer;

transition:all .3s ease;
}

.popup-box button[type="submit"]:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

/* CLOSE */
/*
.close-btn{
position:absolute;
top:10px;
right:10px;

background:none;
border:none;
font-size:18px;
cursor:pointer;
}

/* ANIMAZIONE */
/*
@keyframes popupEnter{
0%{
opacity:0;
transform:translateY(80px) scale(0.9);
}

60%{
opacity:1;
transform:translateY(-10px) scale(1.02);
}

100%{
transform:translateY(0) scale(1);
}
}
.popup-subtext{
font-size:14px;
color:#666;
margin-bottom:15px;
text-align:center;
}
.input-error{
border-color:red !important;
}*/


.privacy-link {
    color: rgb(106, 197, 204);
    text-decoration: underline;
}

/* =========================================================
SELETTORE LINGUA SPLASH
========================================================= */

.language-selector {
position: absolute;
top: 25px;
right: 30px;

display: flex;
align-items: center;
gap: 8px;

z-index: 10000;

}

/* Pulsanti bandiera */

.language-btn {
width: 34px;
height: 26px;

padding: 0;

border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 6px;

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

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

font-size: 18px;
line-height: 1;

cursor: pointer;

display: flex;
align-items: center;
justify-content: center;

transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;

}

/* Hover */

.language-btn {
transform: translateY(-2px) scale(1.08);

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

box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.3);

}

/* Lingua selezionata */

.language-btn.active {
border-color: rgba(255, 255, 255, 0.9);

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

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

}

/* =========================================================
GESTIONE TESTI LINGUA
========================================================= */

/* Per impostazione predefinita inglese nascosto */

.lang-en {
display: none;
}

/* Quando il sito è inglese */

body.language-en .lang-it {
display: none;
}

body.language-en .lang-en {
display: inline;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 600px) {

.language-selector {
    top: 15px;
    right: 15px;
}

.language-btn {
    width: 30px;
    height: 23px;
    font-size: 16px;
}

}

/* Nasconde la barra superiore di Google Translate */
.goog-te-banner-frame.skiptranslate, 
.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0px !important;
}

.goog-tooltip, 
.goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important; 
    box-shadow: none !important;
}

/* Stile per la scritta del copyright sopra il carosello */
.copyright-text {
    color: #888888;          /* Colore grigetto */
    font-size: 0.85rem;       /* Dimensione del testo leggermente più piccola */
    text-align: center;       /* Allineamento al centro (o 'left' se lo preferisci a sinistra) */
    margin-bottom: 8px;       /* Spazio tra la scritta e il carosello */
    font-family: inherit;     /* Utilizza il font predefinito del sito */
    opacity: 0.8;             /* Opacità opzionale per un effetto ancora più discreto */
}

.language-btn {
    background-color: rgb(255,140,0); /* Cambia questo codice con il colore che preferisci */
    color: #000000;            /* Colore del testo (se presente) */
    border: 1px solid rgb(255,140,0); /* Colore del bordo */
}