/* ============================================
   WORK ITEMS (Elenco Testuale Scorrevole come Bottoni)
   ============================================ */

/* Sfumatura dinamica ai bordi della lista scrollabile. 
   Usiamo altezze fisse (60vh e 76vh) per bypassare il bug di WebKit 
   che stira le maschere su tutta l'altezza di scorrimento. */
#works-textbox .personal-works-content {
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* SPAZIO DI OVERSCROLL: 
   Ridotto rispetto a prima. 15vh sono sufficienti per far arrivare 
   l'ultimo elemento nella zona di massima sfumatura senza creare vuoti enormi. */
#works-textbox .personal-works-content .personal-work-item:first-child {
  margin-top: 15vh !important;
}

#works-textbox .personal-works-content .personal-work-item:last-child {
  margin-bottom: 15vh !important;
}

.personal-work-item {
  transform-origin: left center !important; /* Mantiene la base del testo allineata */
  transition: transform 0.05s ease-out, opacity 0.05s ease-out;
  will-change: transform, opacity, filter;
}

.personal-work-item .work-link {
  font-size: 2.4vh;
  display: inline-block;
  margin-bottom: -0.3em;
  font-weight: 300;
  color: var(--text-main);
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  padding: 0.02em 0.2vw;
  line-height: 1.15;
  z-index: 1;
  transition: color 0.3s ease;
}

.personal-work-item .work-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background-color: var(--accent-lime);
  transition: width 0.3s ease;
  z-index: -1;
}

.personal-work-item .work-link:hover,
.personal-work-item .work-link.active-project {
  color: var(--bg-dark);
  font-weight: 450;
}

.personal-work-item .work-link:hover::before,
.personal-work-item .work-link.active-project::before {
  width: 100%;
}

.personal-work-item p {
  font-size: 1.8vh;
  font-weight: 300;
  line-height: 1.4;
  color: var(--text-dim);
  margin-top: 0.6em;
  margin-bottom: 0.8em;
}

/* ============================================
   DESKTOP STYLES (min-width: 769px)
   ============================================ */
@media (min-width: 769px) {
  #works-textbox .personal-works-content {
    /* Il contenitore su desktop è alto 60vh. La sfumatura è di 20vh. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20vh, black 40vh, transparent 60vh) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 20vh, black 40vh, transparent 60vh) !important;
    -webkit-mask-size: 100% 60vh !important;
    mask-size: 100% 60vh !important;
  }

  .personal-work-item {
    margin-bottom: 1em;
  }
  
  .personal-work-item .work-link {
    font-size: 2vh;
    padding: 0.02em 0.2vw;
  }
  
  .personal-work-item p {
    font-size: 1.6vh;
    margin-top: 0.15em;
  }
}

/* ============================================
   MOBILE ADJUSTMENTS (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
body.panel-open #works-textbox .personal-works-content {
    max-height: 18vh !important; /* Sblocca il limite di styles.css */
    
    /* La sfumatura va da 0 a 4vh (sopra), poi è solida fino a 13vh, e sfuma di nuovo fino a 18vh (sotto) */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 4vh, black 13vh, transparent 18vh) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 4vh, black 13vh, transparent 18vh) !important;
    -webkit-mask-size: 100% 18vh !important;
    mask-size: 100% 18vh !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
       touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

#works-textbox .personal-works-content.scrolled {
    --fade-top: transparent;
    
    /* Assicurati di RIMUOVERE le vecchie dichiarazioni intere di mask-image da qui dentro */
  }

  #works-textbox .personal-work-item {
    transform-origin: right center !important; /* Allineamento a destra su mobile */
  }

  /* Limita lo scroll oltre i bordi */
#works-textbox .personal-works-content .personal-work-item:first-child {
    margin-top: 4vh !important; 
  }
#works-textbox .personal-works-content .personal-work-item:last-child {
    margin-bottom: 1.5vh !important;
  }

  #works-textbox .personal-work-item .work-link::before {
    left: auto !important;
    right: 0 !important;
    transition: width 0.3s ease !important;
  }

  #works-textbox .personal-work-item .work-link:hover::before,
  #works-textbox .personal-work-item .work-link.active-project::before {
    width: 100% !important;
  }

  .personal-work-item {
    margin-bottom: 1.2em;
  }

  .personal-work-item .work-link {
    font-size: 2vh;
    padding: 0.02em 0.2vw;
  }

  .personal-work-item p {
    font-size: 1.4vh;
    margin-top: 0.4em;
  }

body.panel-open #works-textbox,
  body.panel-open #works-textbox.active {
    top: calc(env(safe-area-inset-top) + 4vh) !important; 
    max-height: 24vh !important; /* Sblocca il limite di styles.css */
  }
}