/* Contenitore dell'icona hamburger */
#container {
  position: fixed;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  z-index: 2000; 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}


/* Blocco SVG */
.box {
  width: 100%;
  height: 100%;
  float: none;
}

/* Icona SVG base */
.icon {
  width: 70px;
  height: 70px;
  fill: none;
  stroke-width: 3;
  stroke: black;
  cursor: pointer;
  display: block;
}

/* Icona bianca quando il menu è aperto */
.icon.white {
  stroke: white;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* Frecce con colore dinamico */
.arrow-head {
  stroke: black;
}
.white .arrow-head {
  stroke: white;
}

/* Pannello che si apre da sinistra */
#menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 70vw;       
  height: 100vh;      /* tutta l'altezza dello schermo */
  display: flex;      /* 5 colonne affiancate */
  flex-direction: row;
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1900;
}

/* Stato attivo del pannello */
#menu-panel.open {
  transform: translateX(0%);
}

/* Ogni blocco della gabbia verticale */
.menu-block {
  flex: 1;            /* 1/5 dello spazio orizzontale */
  height: 100%;
}

/* Colonne rosse */
.menu-block.red {
  background-color: #ab2b2b;
}

/* Prima colonna (menu) più larga */
.menu-block.red:first-child {
  flex: 3;           /* prende il doppio dello spazio */
}

/* Colonne trasparenti */
.menu-block.transparent {
  background-color: transparent;
}

.menu-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  margin: 0 40px;
}

.menu-content ul {
  list-style: none;
  padding: 0;
  margin-top: 2vw;
}

.menu-content li a{
  font-size: 40px;
  color: white;
  margin-bottom: 3rem;
  cursor: pointer;
  line-height: 1.2;
  padding-left: 7.2vw;
  
}

/* Blocco lingue */
.lang-switcher {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #fff;
  padding-left: 10vw;
  margin-top: 1.2rem;
  gap: 6px;
}

.lang-switcher li {
  list-style: none;
}

.lang-switcher li a {
  font-size: inherit;
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: color .28s ease;
}

.lang-switcher li.active a {
  font-weight: bold;  /* evidenzia lingua attiva */
}

.lang-switcher li a:hover {
  color: #7f1f2f;
}

/* MOBILE: lingue su una riga, più piccole */
@media (max-width: 768px) {
  .lang-switcher {
    flex-direction: row;
    justify-content: center;
    padding-left: 0;
    margin-top: 24px;
    gap: 16px;
  }

  .lang-switcher li a {
    font-size: 12px;
    letter-spacing: .06em;
  }
}


body {
  margin: 0;
  font-family: serif;
  
}

.dot-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
}

.c-timeline__start {
  position: absolute;
  top: 0;
  left: -7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #7f1f2f;
}



.filler {
  height: 3000px;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
}


.logo-svg {
  max-width: 200px;
  margin-left: 20;
  height: 45px;
  display: block;
  padding: 0;
  flex-direction: column;
  align-items: left;
  transition: filter 0.1s ease;
}


.logo-svg.white {
  filter: brightness(0) invert(1);
}

.logo-svg-slide {
  transition: transform 0.6s ease;
}

.logo-svg-slide:hover {
  transform: translateX(-45px);
}


#logo-container {
  align-items: center;
  gap: 6px;
  margin-left: 16px;
  display: flex;
}

.logo-icon {
  width: 45px;
  height: 45px;
  filter: brightness(0) invert(1);
  display: block;
  transform: translateY(2px);
  margin: 0;
  padding: 0;
}

.logo-icon.white {
  filter: brightness(0) invert(1);
  display: block;
}

/* Pittogramma: parte invisibile, spostato a sinistra */
.logo-icon {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Quando il menu è aperto */
.menu-open .logo-icon {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.3s;
}

/* Logotipo: posizione iniziale */
.logo-svg {
  transform: translateX(-70px);
  transition: transform 0.6s ease;
}

/* Spostamento logotipo quando menu aperto */
.menu-open .logo-svg {
  transform: translateX(0px);
  transition: transform 0.6s ease;
  transition-delay: 0.3s;
}

.menu-content li a{
  text-decoration: none;   /* niente sottolineatura fissa */
  line-height: 1.2;
}

/* blocco lingue */
.menu-content lingue {
  display: block;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #fff;
  padding-left: 10vw;
}

/* logo in alto a sinistra: tienilo ma non interferire con la lista */
#container { gap: 12px; }
.logo-svg { height: 45px; margin-left: 22px; }


.menu-content li {
  transition: transform .28s ease;
}
.menu-content li:hover {
  transform: translateY(-5px);
}

/* lineetta orizzontale nel gutter a sinistra, animata sx→dx */
.menu-content li a {
  background-image: linear-gradient(#7f1f2f, #7f1f2f);
  background-repeat: no-repeat;
  background-position:  0 0.6em;;   /* parte nel padding-left */
  background-size: 0 2px;          /* nascosta inizialmente */
  line-height: 1.2;
  transition: color .28s ease, background-size .28s ease;
}

.menu-content li:hover a {
  color: #7f1f2f; /* testo hover */
  background-image: linear-gradient(#7f1f2f, #7f1f2f); /* lineetta hover */
  color: #7f1f2f !important;
  background-size: 70px 2px; /* lunghezza lineetta */
}


/* ====== PERSIANA 5 COLONNE (page transition) ====== */
#page-wipe {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
  z-index: 4000;
}
#page-wipe .wipe-col {
  position: relative;
  overflow: hidden;
  --d: 0.08s; /* delay step tra colonne */
}
#page-wipe .wipe-col:nth-child(1) { --i: 0 }
#page-wipe .wipe-col:nth-child(2) { --i: 1 }
#page-wipe .wipe-col:nth-child(3) { --i: 2 }
#page-wipe .wipe-col:nth-child(4) { --i: 3 }
#page-wipe .wipe-col:nth-child(5) { --i: 4 }

/* base: “chiuso” (0) */
#page-wipe .wipe-col::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform-origin: left center;
  transform: scaleX(0);
}

/* OUTGOING: riempimento sx→dx prima di lasciare la pagina */
#page-wipe.wipe-anim-in .wipe-col::before {
  animation: wipe-in 0.6s ease forwards;
  animation-delay: calc(var(--i) * var(--d));
}

/* preset ARRIVO: già pieno bianco */
#page-wipe.wipe-preset-full .wipe-col::before {
  transform: scaleX(1);
}

/* INCOMING: scoperta sx→dx quando la nuova pagina è pronta */
#page-wipe.wipe-anim-out .wipe-col::before {
  animation: wipe-out 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  animation-delay: calc(0.25s + var(--i) * var(--d));
}

@keyframes wipe-in  { to { transform: scaleX(1); } }
@keyframes wipe-out { to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  #page-wipe { display: none; }
}

/* MOBILE FIX */
@media (max-width: 768px) {

  /* 1) Pannello davvero full screen e a singola colonna utile */
  #menu-panel {
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Nascondi le colonne “di gabbia” non necessarie su mobile */
  #menu-panel .menu-block.transparent { 
    display: none; 
  }
  /* Fai occupare tutto allo stack rosso (la parte con il menu) */
  #menu-panel .menu-block.red {
    flex: 0 0 auto;
    width: 100%;
  }

  /* 2) Logo: nascosto di default, visibile SOLO quando il menu è aperto */
  #logo-container { 
    display: none !important;        /* forza il nascondimento su mobile */
  }
  body.menu-open #logo-container {    /* ri-mostra quando si apre il menu */
    display: flex !important;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    justify-content: center;
    align-items: center;
    z-index: 1500; /* sopra al pannello ma sotto all’hamburger (2000) */
  }

  /* Opzionale: ridimensiona il logo per mobile */
  #logo-container .logo-icon { width: 40px; height: 40px; }
  #logo-container .logo-svg  { height: 40px; max-width: none; transform: none; }

  #menu-panel {
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #menu-panel .menu-block.transparent { display: none; }
  #menu-panel .menu-block.red { width: 100%; flex: 0 0 auto; }
  /* nascondi eventuali altre .menu-block.red vuote */
  #menu-panel .menu-block.red + .menu-block.red { display: none; }

  /* lista voci: colonna unica ordinata */

  .menu-content{
    max-width: 85%;
    margin: 0 auto;
    padding-left: 0;
    align-items: flex-start;
  }

  /* voci del menu più compatte e ordinate in colonna */
  .menu-content ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;                 /* spazio tra le voci (più stretto) */
    margin: 0;
  }
  .menu-content li{ margin: 0; }
  .menu-content li a{
    font-size: 28px;           /* più piccolo del 2° screen */
    line-height: 1.25;
    text-align: left;
    margin-left: 10vh;
    background: none;          /* niente aste/grafismi laterali */
    text-decoration: none;
  }

  /* lingue: su due righe, allineate a sinistra e piccole */
  .menu-content ul:last-of-type{
    margin-top: 18px;
    gap: 6px;
    align-items: flex-start;
  }
  .menu-content ul:last-of-type li a{
    font-size: 12px;
    letter-spacing: .06em;
  }
  .menu-content li { margin: 0; }
  .menu-content li a {
    font-size: 2rem;
    line-height: 1.2;
    text-align: center;
    padding-left: 0;     /* rimuovi gutter left da desktop */
    background: none;    /* niente lineetta laterale */
    text-decoration: none;
  }

  /* blocco lingue sotto il menu, su una riga */
  .menu-content ul:last-of-type {
    flex-direction: row;
    gap: 16px;
    margin-top: 24px;
    justify-content: center;
  }
  .menu-content lingue {
    display: block;
    padding: 0;
    line-height: 1.1;
    font-size: 1rem;
    margin-left: 10vh;
  }

  /* 4) Hamburger il doppio più grande */
  .icon { width: 80px; height: 80px; }
  #container { width: 140px; height: 140px; }
}