/* 1.3.12 */

html, body{
  /*overflow: hidden;*/
}




/* MENU */
/* =========================
   NAV (link top-level)
   - attivo: underline base visibile
   - hover: animazione come già fai
   ========================= */

/* underline (base + hover) per nav-link-navbar */
.nav-link-navbar{
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.nav-link-navbar::before,
.nav-link-navbar::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background-color: currentColor;
  transform: scaleX(0);
  pointer-events:none;
}

/* linea base (serve per w--current) */
.nav-link-navbar::before{
  transform-origin: left center;
  transition: transform .3s ease-out .12s;
}

/* linea hover (entra da sinistra) */
.nav-link-navbar::after{
  transform-origin: left center;
  transition: transform .3s ease-out;
}

/* hover: base si chiude verso destra, hover entra */
.nav-link-navbar:hover::before,
.nav-link-navbar:focus-visible::before{
  transform: scaleX(0);
  transform-origin: right center;
  transition-delay: 0s;
}

.nav-link-navbar:hover::after,
.nav-link-navbar:focus-visible::after{
  transform: scaleX(1);
  transition-delay: .12s;
}

/* mouseleave: hover si richiude verso destra */
.nav-link-navbar:not(:hover)::after{
  transform: scaleX(0);
  transform-origin: right center;
}

/* link attivo: underline visibile di default (linea base) */
.nav-link-navbar.w--current::before{
  transform: scaleX(1);
  transition-delay: 0s;
}

/* sull'attivo, la linea hover resta nascosta finché non hover */
.nav-link-navbar.w--current::after{
  transform: scaleX(0);
}


/* =========================
   DROPDOWN (link dentro menu)
   - underline SOLO in hover (sul div .text-block-36)
   - attivo: SOLO bold + colore (nessuna underline di base)
   ========================= */

.dropdown-link.w-inline-block .text-block-36{
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

/* pseudo underline per dropdown text */
.dropdown-link.w-inline-block .text-block-36::before,
.dropdown-link.w-inline-block .text-block-36::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background-color: currentColor;
  transform: scaleX(0);
  pointer-events:none;
}

/* per dropdown usiamo solo la linea hover (after) */
.dropdown-link.w-inline-block .text-block-36::after{
  transform-origin: left center;
  transition: transform .3s ease-out;
}

/* hover/focus: entra underline */
.dropdown-link.w-inline-block:hover .text-block-36::after,
.dropdown-link.w-inline-block:focus-visible .text-block-36::after{
  transform: scaleX(1);
  transition-delay: .12s;
}

/* mouseleave: richiude verso destra */
.dropdown-link.w-inline-block:not(:hover) .text-block-36::after{
  transform: scaleX(0);
  transform-origin: right center;
}

/* dropdown attivo: SOLO bold (niente underline base) */
.dropdown-link.w-inline-block.w--current .text-block-36{
  color: #30344f;
  font-weight: 700;
}

/* forza: mai underline base/di default sul dropdown attivo */
.dropdown-link.w-inline-block.w--current .text-block-36::before{
  transform: scaleX(0) !important;
  transition: none !important;
}

/* (facoltativo) assicurati che anche l'hover line parta nascosta sull'attivo finché non hover */
.dropdown-link.w-inline-block.w--current .text-block-36::after{
  transform: scaleX(0);
}





/* Accordion dropdown: non lascia spazio da chiuso */
.w-dropdown-list{
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;

  /* FIX: se Webflow/Designer la mette flex per un frame, resta comunque in colonna */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;

  will-change: height, opacity, transform;

  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

/* apri: abilita click (nota: Webflow usa spesso w--open, non solo is-open) */
.w-dropdown.is-open .w-dropdown-list,
.w-dropdown.w--open .w-dropdown-list{
  pointer-events: auto;
}

/* voci in colonna */
.w-dropdown-link{
  display: block !important;
  width: 100%;
}

.w-dropdown{
  text-align: center !important;
}

.w-icon-dropdown-toggle{
  margin: 0;
  width: 100%;
  top: 50%;
  right: 0;
  left: 85%;
  display: inline;
}











/* underline solo hover per link-menu-footer (crescita da sinistra verso destra) */
a.link-menu-footer{
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

a.link-menu-footer::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1.5px;
  background: #30344f;          /* prende il colore del testo */
  transform: scaleX(0);
  transform-origin: left center;     /* cresce verso destra */
  transition: transform .3s ease-out;
  transition-delay: .12s;            /* come la navbar */
  pointer-events: none;
}

a.link-menu-footer:hover::after,
a.link-menu-footer:focus-visible::after{
  transform: scaleX(1);
}

/* opzionale: in uscita “chiude” tornando verso destra (non verso il centro) */
a.link-menu-footer:not(:hover)::after{
  transform-origin: right center;
}






.link-underline-anim{
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

.link-underline-anim::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1.5px;
  background: #30344f;          /* prende il colore del testo */
  transform: scaleX(0);
  transform-origin: left center;     /* cresce verso destra */
  transition: transform .3s ease-out;
  transition-delay: .12s;            /* come la navbar */
  pointer-events: none;
}

.link-underline-anim.underline-white::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1.5px;
  background: #fff;          /* prende il colore del testo */
  transform: scaleX(0);
  transform-origin: left center;     /* cresce verso destra */
  transition: transform .3s ease-out;
  transition-delay: .12s;            /* come la navbar */
  pointer-events: none;
}

.link-underline-anim:hover::after,
.link-underline-anim:focus-visible::after{
  transform: scaleX(1);
}

/* opzionale: in uscita “chiude” tornando verso destra (non verso il centro) */
.link-underline-anim:not(:hover)::after{
  transform-origin: right center;
}










/* ANIMAZIONI DEI BOTTONI */

/* Testo */
.text-block-2 {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

/* Bottoni principali: contact-, work-, form- */
.contact-button,
.work-button,
.form-button {
  outline: 1px solid #f3f3f3;
  border-radius: 50px;            /* ← fondamentale per forma a pillola */
  display: inline-block;          /* ← NO flex qui! */
  position: relative;
  overflow: visible;
  transform-origin: center center;
  padding: 15px 25px;             /* uniformiamo padding */
  box-sizing: border-box;         /* evita glitch con outline */
}

/* Bordo esterno animato */
.contact-button::after,
.work-button::after,
.form-button::after {
  content: "";
  position: absolute;

  /* distanza leggera */
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;

  border: 1px solid #f3f3f3;
  border-radius: 50px;

  transform: scale(var(--after-scale, 0.8));
  opacity: var(--after-opacity, 0);
  transform-origin: center;
  pointer-events: none;
}




.footer-wrapper {
  overflow: clip; /* oppure hidden */
  position: relative;
}

.footer {
  opacity: 0;
  clip-path: inset(100% 0% 0% 0%); /* totalmente nascosto dall'alto */
  will-change: opacity, clip-path;
}












/* ANIMAZIONI CTA TESTO + FRECCIA */

.text-link {
  position: relative;
}

.text-link-text {
  position: relative;
  display: inline-block;
  padding-bottom: 5px; /* Distanza tra il testo e l'underline */
}

/* Prima underline (di base è visibile) */
.text-link-text::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* L'underline di base è a 100% */
  height: 2px;
  background-color: white; /* Colore dell'underline */
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
  transform: scaleX(1); /* L'underline di base è visibile */
}

/* Seconda underline (inizialmente nascosta) */
.text-link-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: white;
  transform-origin: bottom left;
  transform: scaleX(0); /* Il secondo underline è nascosto inizialmente */
  transition: transform 0.3s ease-out 0.3s; /* Ritardo di 0.3s */
}

/* override se ha anche .text-blue */
.text-link-text.text-blue::before,
.text-link-text.text-blue::after {
  background-color: #30344F;
}

/* Al mouse entra (mouseenter) */
.text-link.hovered .text-link-text::before {
  transform: scaleX(0); /* Il primo underline si riduce a 0 */
}

.text-link.hovered .text-link-text::after {
  transform: scaleX(1); /* Il secondo underline cresce a 100% */
}

/* Al mouse esce (mouseleave) */
.text-link.hover-leave .text-link-text::after {
  transform: scaleX(0); /* Il secondo underline si riduce a 0 */
    transform-origin: bottom left;
  transition: transform 0.3s ease-out;
}

.text-link.hover-leave .text-link-text::before {
  transform: scaleX(1); /* Il primo underline torna a 100% */
  transition: transform 0.3s ease-out 0.3s; 
    transform-origin: bottom right;
}


/* Aggiungiamo la rotazione dell'immagine al mouse enter */
.text-link:hover img {
  transform: rotate(-45deg); /* Ruota l'immagine di -45 gradi */
  transition: transform 0.3s ease-out; /* Durata della transizione */
}

/* Al mouse esce (mouseleave) l'immagine torna normale */
.text-link:not(:hover) img {
  transform: rotate(0deg); /* Torna all'angolo originale (0 gradi) */
  transition: transform 0.3s ease-out; /* Durata della transizione */
}



/* INTRO: sweep L->R visibile (base nascosta, nessun reverse) */
.text-link.intro .text-link-text::before{
  transform: scaleX(0) !important;   /* base OFF durante lo sweep */
  transition: none !important;
}

.text-link.intro .text-link-text::after{
  transform-origin: bottom left !important;
  transform: scaleX(1) !important;   /* sweep L->R */
  transition: transform .3s ease-out !important;
  transition-delay: 0s !important;
}

/* SNAP finale: stato base istantaneo, senza animazioni */
.text-link.intro-snap .text-link-text::before{
  transform: scaleX(1) !important;   /* base ON istantaneo */
  transition: none !important;
}

.text-link.intro-snap .text-link-text::after{
  transform: scaleX(0) !important;   /* hover line OFF istantaneo */
  transition: none !important;
}

















/* Style del menu e dell'header */

.content-container {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
  transform-origin: right top;
}

.menu-toggle {
  position: relative;
  width: 3rem;
  height: 1.5rem;
  cursor: pointer;
  z-index: 9999;
}

.menu-toggle img{
  position: absolute;
  transform-origin: top left;
  will-change: transform, opacity;
}

.menu-toggle .menu-close{
  width: 40%;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  background-color: #F3F3F3;
  z-index: 9998; /* opzionale: sotto al toggle */
}

.menu-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: left bottom;
  will-change: opacity, transform;
}

.menu-content {
  transform: translateX(-100px) translateY(-100px) scale(1.5) rotate(-15deg);
  opacity: 0.25;
}

.menu-overlay {
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

.menu-toggle img.menu-close {
  opacity: 0;
  transform: translateX(-5px) translateY(10px) rotate(5deg);
}

.menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-link {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.menu-link a, .menu-link .w-dropdown {
  display: inline-block;
  will-change: transform;
  transition: color 0.5s;
  text-align: center;
}

.menu-link a, .menu-link .w-dropdown {
  transform: translateY(120%);
  opacity: 0.25;
}

.page-layer { width: 100%; }








/* Animazione testi */

/* Applica solo su desktop */
@media (min-width: 768px) {
  .pagetitle-animation{
    overflow: hidden;
  }
  
  .title-animation{
    overflow: hidden;
  }
   
  /* wrapper di ogni riga: maschera sempre attiva, ma non taglia il font */
  .title-line{
    display: block;
    overflow: hidden;
  
    /* extra area sopra/sotto per evitare clipping */
    padding-top: 0.30em;
    padding-bottom: 0.30em;
  
    /* compenso per non cambiare layout */
    margin-top: -0.30em;
    margin-bottom: -0.1em;
  }
  
  .title-line-inner{
    display: inline-block;
    will-change: transform;
  }
  
    .page-title .char { display: inline-block; }
  }

/* Mobile: reset (nel caso ci siano regole globali che interferiscono) */
@media (max-width: 767px) {
  .pagetitle-animation{
    overflow: visible;
  }
}
  




.fade-in { will-change: opacity, transform; }