:root {
  --dot-size: 12px;
  --gap-desktop: 15px;
  --gap-mobile: 20px;
  --nav-side-x: 20px;
  --nav-bottom-y: 0px;
  --color-inactive: #333;
  --color-active: #0a66ff;
  --label-desktop: 12px;
  --label-mobile: 10px;
  --z: 50;
  --bg-color: #f4f4f5;
  --text-color: #18181b;
  --logo-color-dark: #161615;
  --logo-color-green: #337c6a;
  --logo-color-red: #973d0f;
}

html {
  scroll-behavior: smooth;
}
header {
  transition: background-color 0.3s ease, gap 0.3s ease, padding 0.3s ease;
}


/* Logo */
.svg-elem-1{-webkit-animation:animate-svg-fill-1 0.7s cubic-bezier(0.47,0,0.745,0.715) 0.8s both;animation:animate-svg-fill-1 0.7s cubic-bezier(0.47,0,0.745,0.715) 0.8s both}@-webkit-keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(22,22,21)}}@keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(22,22,21)}}.svg-elem-2{-webkit-animation:animate-svg-fill-2 0.7s cubic-bezier(0.47,0,0.745,0.715) 0.9s both;animation:animate-svg-fill-2 0.7s cubic-bezier(0.47,0,0.745,0.715) 0.9s both}@-webkit-keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(22,22,21)}}@keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(22,22,21)}}.svg-elem-3{-webkit-animation:animate-svg-fill-3 0.7s cubic-bezier(0.47,0,0.745,0.715) 1s both;animation:animate-svg-fill-3 0.7s cubic-bezier(0.47,0,0.745,0.715) 1s both}@-webkit-keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(51,124,106)}}@keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(51,124,106)}}.svg-elem-4{-webkit-animation:animate-svg-fill-4 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.1s both;animation:animate-svg-fill-4 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.1s both}@-webkit-keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(151,61,15)}}@keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(151,61,15)}}.svg-elem-5{-webkit-animation:animate-svg-fill-5 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.2000000000000002s both;animation:animate-svg-fill-5 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.2000000000000002s both}@-webkit-keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(151,61,15)}}@keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(151,61,15)}}.svg-elem-6{-webkit-animation:animate-svg-fill-6 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s both;animation:animate-svg-fill-6 0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s both}
/* Fine Logo */

   /* --- Stili e Animazione SVG --- */
 .logo-svg {
       width: 100%;
       height: auto;
   }
   #loader-logo {
       max-width: 250px;
   }
   .logo-anim-path {
       fill-opacity: 0;
       stroke-width: 2px;
   }

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill-in {
    from {
        fill-opacity: 0;
    }
    to {
        fill-opacity: 1;
    }
}

body {
  font-family: "Lato", sans-serif;
  color: #161615;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #ffffff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#circle-cursor {
  background-color: transparent;
  border: 1px solid var(--color-teal);
  height: 40px;
  width: 40px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  position: absolute;
  z-index: 100;
  transition: all 650ms ease;
}

#circle-cursor.expand-cursor {
  width: 100px;
  height: 100px;
  background: var(--color-teal);
}

#circle-cursor.expand-cursor:before {
  content: "VIEW";
  letter-spacing: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: #ffffff;
}

.link_page {
  z-index: 20;
}

/* Aggiungo uno stile per bloccare lo scroll del body quando l'overlay è attivo */
body.is-overlay-active {
  overflow: hidden;
}

:root {
  --color-cyan: #57b3d3;
  --color-teal: #337c6a;
  --color-orange: #d88363;
  --color-black: #161615;
}
.text-black_custom {
  color: var(--color-black);
}
.text-teal {
  color: var(--color-teal);
}
.text-orange {
  color: var(--color-orange);
}
.text-cyan {
  color: var(--color-cyan);
}
.bg-cyan {
  background-color: var(--color-cyan);
}
.bg-teal-600 {
  background-color: var(--color-teal);
}
.bg-gray {
  background-color: #f9f9f9;
}
#section1 {
  position: relative;
  top: 0;
  overflow: hidden;
}
#section2 {
  position: relative;
  z-index: 2;
  background-color: white;
}
#section3 {
  background-color: #edeef0;
  position: relative;
}

.image-sequence-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#sequence-canvas-1 {
  background-color: #eff7f7;
}
#sequence-canvas-2 {
  position: absolute;
  right: 0;
  width: auto;
  left: auto;
  transform: scaleX(-1);
  opacity: 0.2;
}
.sequence-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    transition: opacity 0.5s ease;
}
.loader-text {
  color: #7d7d7d;
  letter-spacing: 3.5px;
}
.loader-bar {
  width: 80%;
  max-width: 300px;
  height: 2px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}
.loader-bar-inner {
  width: 0%;
  height: 100%;
  background-color: var(--color-teal);
  transition: width 0.2s linear;
}
.dots-nav {
  position: fixed;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  z-index: 1000;
}
.dots-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dots-nav li {
  margin: 20px 0;
  display: flex;
  align-items: center;
  height: 40px;
  cursor: pointer;
}
.dots-nav .dot-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  position: relative;
}
.dots-nav .dot-link::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #337c6a;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.dots-nav li.active .dot-link::before {
  background-color: #4a4a4a;
  width: 3px;
  height: 40px;
  border-radius: 2px;
}
.dots-nav .dot-label {
  position: absolute;
  left: 10px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  color: #337c6a;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.dots-nav li:hover .dot-label,
.dots-nav li.active .dot-label {
  opacity: 1;
  visibility: visible;
}
.canvas-verticale {
  aspect-ratio: 9 / 16;
}
#canvas-sticky-container {
  mix-blend-mode: multiply;
}




.has-animation {
  position: relative;
  display: inline-block;
}

.has-animation > * {
  opacity: 0;
  transform: translateY(50px); /* Sposta l'elemento verso il basso */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Transizione fluida */
}

.has-animation.animate-in > * {
  opacity: 1;
  transform: translateY(0); /* Riporta l'elemento nella sua posizione originale */
}

/* Aggiunge un ritardo sequenziale agli elementi figli */
.has-animation.animate-in > *:nth-child(1) {
  transition-delay: 0.2s;
}
.has-animation.animate-in > *:nth-child(2) {
  transition-delay: 0.4s;
}
.has-animation.animate-in > *:nth-child(3) {
  transition-delay: 0.6s;
}
.has-animation.animate-in > *:nth-child(4) {
  transition-delay: 0.8s;
}
/* Aggiungi altre regole nth-child se necessario per più elementi */
/* --- FINE CODICE ANIMAZIONE REVEAL --- */

.link_page svg {
  border-radius: 100%;
}

/* Stile principale dell'overlay */
.ajax-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Occupa sempre tutta l'altezza della finestra */
  z-index: 9990;

  /* MODIFICA CHIAVE: Permettiamo lo scroll verticale all'interno dell'overlay stesso */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Scrolling fluido su mobile */

  /* MODIFICA CHIAVE: Aggiungiamo padding per distanziare il contenuto dai bordi */
  padding: 8vh 0; /* 8vh di spazio sopra e sotto */

  /* RIMOSSO: display: flex e le sue proprietà non servono più,
     perché non dobbiamo più centrare un box di altezza fissa. */

  pointer-events: none;
  visibility: hidden;
}

.ajax-overlay.is-active {
  pointer-events: auto;
  visibility: visible;
}

/* Sfondo con blur, perfetto così com'è */
.ajax-overlay__bg {
  position: fixed; /* MODIFICATO: Usiamo 'fixed' per bloccarlo durante lo scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: opacity;
  opacity: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Wrapper del contenuto */
.ajax-overlay__content-wrapper {
  position: relative;
  margin: 0 auto; /* Centra orizzontalmente */
  width: 100%;
  height: auto;
  overflow: visible;
  will-change: transform, opacity;
  opacity: 0;
}

/* Area del contenuto specifica */
.ajax-overlay__content {

  height: 100%;
  margin: auto;
  opacity: 0;

  /* RIMOSSO: overflow-y: auto non è più necessario qui,
     perché lo scroll è gestito dal genitore .ajax-overlay */
}

.ajax-overlay__close-btn {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 9995;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  border: solid 2px #337c6a;
  border-radius: 100%;
  padding: 22px;
  background-color: #337c6a;
}
.ajax-overlay__close-btn::before,
.ajax-overlay__close-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  height: 2px;
  background-color: #fff;
}
.ajax-overlay__close-btn::before {
  transform: rotate(45deg);
}
.ajax-overlay__close-btn::after {
  transform: rotate(-45deg);
}
.ajax-overlay__close-btn:hover {
  transform: scale(1);
}

/* Stili per l'animazione "fade up" dei link */
.fade-up-target {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up-target.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nuovi stili per l'animazione "fade up" del contenuto dei tab */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tab-fade-in-up {
  /* Applica l'animazione definita sopra */
  animation: fadeInUp 0.5s ease-out forwards;
}

#static-fallback-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("./images/placeholder-hero.webp"); /* USARE UN FRAME RAPPRESENTATIVO E OTTIMIZZATO */
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Fallback per il background della sezione 3 su mobile */
.mobile-section-3-bg {
  background-image: url("./images/placeholder-section3.webp"); /* USARE UN FRAME RAPPRESENTATIVO E OTTIMIZZATO */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Effetto parallax semplice */
}

.mobile-video-container {
  display: none;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  position: absolute; /* O 'relative' a seconda del layout */
  top: 0;
  left: 0;
}
.profile_picture {
  position: relative;
}
.wrap_header {
  position: relative;
}
.bg_image_head {
  position: absolute;
  width: 100%;
  z-index: -1;
  left: 0px;
  bottom: 0px;
}
.bg_image_head img {
    width: 100%;
    object-fit: cover;
    height: 360px;
    object-position: bottom;
}
.block_txt_head {

}
.dots-nav li { text-align: center; }
.dots-nav a { text-decoration: none; }
.dots-nav .dot-link { display: flex; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; margin: 0 auto; transition: transform .2s ease, background .2s ease, opacity .2s ease; opacity: .9; }
.dots-nav li.active .dot-link { opacity: 1; }
.dots-nav .dot-link:focus-visible { outline-offset: 3px; }
.dots-nav .dot-label { display: block; margin-top: 6px; font-size: var(--label-desktop); color: #222; white-space: nowrap; }

.dots-nav li:hover .dot-link { transform: scale(1.15); }

 @media (prefers-reduced-motion: reduce) {
  .dots-nav, .dots-nav .dot-link { transition: none; }
}

.force-mobile .dots-nav { left: 50% !important; bottom: var(--nav-bottom-y) !important; top: auto !important; transform: translateX(-50%) translateY(120%) !important; flex-direction: row !important; }
.force-mobile .dots-nav ul { flex-direction: row !important; gap: var(--gap-mobile) !important; background: rgba(255,255,255,.9); backdrop-filter: saturate(140%) blur(6px); padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.force-mobile .dots-nav.show { transform: translateX(-50%) translateY(0) !important; }



@media (max-width: 990px) {

  .dots-nav { left: 50%; bottom: var(--nav-bottom-y); top: auto; transform: translateX(-50%) translateY(120%); flex-direction: row; }
  .dots-nav ul { flex-direction: row; gap: var(--gap-mobile); background: rgba(255,255,255,.9); backdrop-filter: saturate(140%) blur(6px); padding: 8px 14px; border-radius: 0px; box-shadow: 0 6px 18px rgba(0,0,0,.08);
    width: 100% !important;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            gap: 70px;
                 display: flex;
                 align-items: center;
                 height: 60px;
                 cursor: pointer;
                 position: relative;
   }
  .dots-nav .active::before {
      content: "";
      display: block;
      width: 8px;
      height: 8px;
      background-color:#111;
      border-radius: 50%;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  .dots-nav .dot-label { margin-top: 4px; font-size: var(--label-mobile); color: #111; }
  .dots-nav.show {
    transform: translateX(-50%) translateY(0);
    width: 100% !important;
    box-sizing: border-box;
    display: block !important;
  }
  .dots-nav li.active .dot-link::before {
     display: none;
  }
  .dots-nav ul {
        gap: 8px;
        justify-content: flex-end;
    }
    .dots-nav li.active .dot-link {
        opacity: 1;
        display: none;
    }
    .dots-nav .dot-label {
    position: absolute;
    left: 10px;
    background-color: #fff;
  }
}




/* Su desktop, il background statico non serve perché c'è il canvas */
@media (min-width: 769px) {
  .mobile-section-3-bg {
    background-image: none;
  }

}

/* Nasconde la navigazione a punti su schermi piccoli */
@media (max-width: 768px) {
.main-nav a:active, .main-nav a:hover {
      text-decoration: underline !important;
  }
header.header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 0px;
    height: auto;
    min-height: auto;
}
header.header-sticky .svg-elem-1 {
    opacity: 0;
    width: 0;
    margin-right: -20px; /* Compensa il gap rimosso per evitare salti */
    pointer-events: none; /* Rende l'elemento non cliccabile */
    display: none;
}
#circle-cursor {
    display: none!important;
}
.bg_image_head {
    bottom: 110px;
}
  /* Assicura che i contenitori interni si adattino */
  #attivita,
  #mission {
    height: auto;
    min-height: 100vh;
    position: relative;
    z-index: 2;
  }
  #sequence-canvas-1,
  #sequence-canvas-2 {
    display: none !important;
  }
  .mobile-video-container {
    display: block; /* Mostra il contenitore del video */
  }
  nav button:nth-child(4) {
    border-bottom: none !important; /* Using !important to ensure override, consider alternative specificity if possible */
  }
}