body.no-scroll {
    overflow: hidden;
}

main {
  display: flex;
  flex-direction: column;
  padding: 16rem 1rem 12.5rem 1rem;
  align-items: center;
  gap: 15rem;
}

.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 4rem;
  text-align: center;

  .hello-section {
    display: flex;
    flex-direction: column;
    padding: 0rem 1rem;
    align-items: center;
    gap: 2.5rem;
    p, h1 {
      max-width: 30rem;
    }
  }

  .mission-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0.5rem;
    gap: 1.5rem;
    width: 100%;
    border-radius: 12px;
    max-width: 29.4375rem;

    /* AGGIUNTE PER L'EFFETTO RIFLESSO */
    position: relative;
    overflow: hidden;

    /* EFFETTO TRASPARENTE */
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(45px) saturate(170%);
    -webkit-backdrop-filter: blur(45px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

    p, h2, h3 {
      max-width: 20.5rem;
      /* Mantiene i testi leggibili mettendoli sopra al livello della luce */
      position: relative; 
      z-index: 2; 
    }
  }
}

/* --- EFFETTO RIFLESSO COLORATO (MISSION SECTION) --- */
.mission-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 1. Applichiamo il gradiente lineare che hai richiesto */
  background: linear-gradient(90deg, #DB00AC 23.56%, #0900FF 90.38%);
  
  /* 2. Usiamo il radial-gradient come MASCHERA per creare il cerchio di luce.
     La maschera "ritaglia" il gradiente lineare seguendo il mouse. */
  -webkit-mask-image: radial-gradient(
      circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
      black 0%, 
      transparent 100%
  );
  mask-image: radial-gradient(
      circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
      black 0%, 
      transparent 100%
  );
  
  /* 3. Opacità e transizioni */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; 
  z-index: 1; 
}

/* 4. Quando passi il mouse, il riflesso colorato appare */
.mission-section:hover::after {
  /* Ho impostato 0.15 (15%) per renderlo un riflesso elegante. 
     Se lo vuoi più acceso, puoi portarlo a 0.2 o 0.3 */
  opacity: 0.15; 
}

.skills-section {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-self: stretch;
  align-items: center;
  scroll-margin-top: 14rem;

  .skills-group {
    display: flex;
    padding: 0rem 2rem 0rem 2rem;
    flex-direction: column;
    width: 100%;
    max-width: 29rem;
    align-items: center;
    gap: 2rem;
    position: relative;

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      flex-wrap: wrap;

      img {
        width: 4rem;
        height: 4rem;
      }
    }

    .hider {
      background: linear-gradient(0deg, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
      width: 100%;
      height: 7rem;
      position: absolute;
      left: 0rem;
      bottom: -1.5rem;
    }
  }
}

.projects-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 2.5rem;
  scroll-margin-top: 14rem;
}

.cv-section {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  gap: 2.5rem;
  scroll-margin-top: 14rem;

  /* --- EFFETTO AURA VIVA (CV SECTION) --- */
.cv-aura {
    position: absolute;
    /* Usiamo inset negativi per far uscire l'aura di 30px per lato rispetto all'immagine */
    top: 20px;
    left: -30px;
    right: -30px;
    bottom: 130px;
    
    /* Nuovo gradiente richiesto */
    background: linear-gradient(90deg, #DB00AC 23.56%, #0900FF 90.38%);
    
    /* Aumentiamo il blur per renderlo più soffuso e visibile */
    filter: blur(80px);
    border-radius: 999px;
    opacity: 0.6; /* Regola questo valore per l'intensità (0.1 - 1.0) */
    
    z-index: -1;
    transition: transform 2000ms ease-in-out;
}

  .cv-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    overflow: visible !important; /* Permette al blur di "uscire" dai bordi della card */
  }

  img {
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    max-width: 500px;
  }

  .hider {
      background: linear-gradient(0deg, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
      width: 100%;
      height: 8rem;
      position: absolute;
      left: 0rem;
      bottom: -2rem;

      /* AGGIUNTE: */
      z-index: 10; /* Forza l'hider a stare in primissimo piano rispetto all'immagine e all'aura */
      pointer-events: none; /* Evita che l'hider blocchi interazioni col mouse */
  }
  }


.contacts-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 2.5rem;
  scroll-margin-top: 14rem;

  .form-wrapper {
    position: relative;
    width: 100%;
    max-width: 35.5rem;
    margin: 0 auto;
    z-index: 1;

    .red-circle, .yellow-circle, .blu-circle {
        position: absolute;
        border-radius: 100%;
        filter: blur(0px);
        opacity: 1;
        z-index: -1;
    }

    .red-circle {
        width: 400px; 
        height: 400px;
        background-color: #EB3A3A;
        top: -3%;
        left: -20%;
    }

    .yellow-circle {
        width: 200px; 
        height: 200px;
        background-color: #E1EE4C;
        top: 60%;
        left: 15%;
    }

    .blu-circle {
        width: 250px; 
        height: 250px;
        background-color: #2D32BC;
        top: 60%;
        right: -5%;
    }
  }
}

.social-section {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: 6rem;
  
  img {
    width: 40px;
    height: 40px;
  }

  .row {
    display: flex;
    max-width: 29rem;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0rem 2rem 0rem 2rem;
    flex-wrap: wrap;

    a {
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4px) scale(1.1);
        opacity: 0.9;
      }
    }
  }
}

/* MODALE SKILLS */

/* 1. L'OVERLAY (Lo sfondo scuro dietro la modale) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px); 
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* 2. IL CONTENITORE DELLA MODALE */
.modal-content {
    background-color: #ffffff;
    width: 90%;
    max-width: 800px; 
    max-height: 85vh; 
    overflow-y: auto; 
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(30px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. LA CLASSE CHE ATTIVA TUTTO */
.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.modal-overlay.is-open .modal-content {
    transform: translateY(0) scale(1);
}

/* 4. STILI DELL'HEADER */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.close-btn {
    width: 48px;
    height: 48px;
    color: #212121;
    padding: 0.4rem 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.close-btn:hover { 
    transform: scale(1.1); 
}

/* --- 5. LAYOUT CORPO MODALE E GRUPPI --- */
.modal-body {
    display: flex;
    flex-direction: column;
    gap: 4rem; 
}

.skill-category {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.skill-category h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212121;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.5rem;
}

/* --- 6. GRIGLIA ICONE SKILLS --- */
.skill-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 1.5rem;
}

.skill-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    transition: background-color 0.2s ease;
}

.skill-item:hover { 
    background-color: #f9f9f9; 
}

.skill-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.skill-item span {
    font: var(--body-m-font);
    font-weight: 500;
    color: #212121;
}

/* 7. ADATTAMENTO PER SCHERMI MOLTO PICCOLI (MOBILE) */
@media (max-width: 600px) {
    .skill-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 1rem;
    }
}

/* --- CONTENITORE CARD PROGETTI --- */
.projects-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 2.5rem; 
  width: 100%;
}

/* --- SOCIAL ICONS RESPONSIVE --- */
@media (min-width: 750px) {
  .social-section img {
    width: 48px; 
    height: 48px; 
  }
}

/* --- LAYOUT PROGETTI DESKTOP --- */
@media (min-width: 1080px) {
  .projects-wrapper {
    flex-direction: row; 
    justify-content: center;
    align-items: stretch;
    max-width: 1140px; 
    gap: 1.25rem; 
  }

  .projects-wrapper .project-card {
    flex: 1; 
    min-width: 0; 
  }
}