/* ============================================
   HOMEPAGE - Link di navigazione principale
   Stili specifici per la homepage con l'albero animato
   ============================================ */

/* ============================================
   BASE - Stile link circolari
   ============================================ */

.link-home {
  position: absolute;
  background-image: url("../img/_DVD6039.jpg");
  padding: var(--s-2);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 84px;
  height: 84px;
  border-radius: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: 
    transform 0.08s ease-out,
    border-width 0.12s ease-in-out,
    padding 0.12s ease-in-out,
    border-radius 0.12s ease-in-out;
  border: 1px solid var(--white);
  transform-origin: center center;

  /* Anti-jitter: forza GPU acceleration e rendering pulito */
  will-change: transform, background-size, border-width;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: scale(1) translateZ(0);
  transform-style: preserve-3d;
}

/* Hover state - espansione centrata */
.link-home:hover {
  padding: var(--s-4);
  border-radius: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: scale(4.76) translateZ(0);
  
  /* Scala inversamente il bordo per mantenerlo nitido */
  border-width: calc(1px / 4.76);
  
  /* Forza Chrome a renderizzare l'immagine scalata in modo nitido */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  filter: contrast(1.01);
}

/* Overlay scuro */
.link-home:after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 1000px;
  transition: all 0.12s ease-in-out;
}

.link-home:hover:after {
  background: rgba(0, 0, 0, 0.2);
}


/* ============================================
   CONTENUTO - Wrapper e testo
   ============================================ */

/* Wrapper per contenuto - mantiene layout */
.link-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* Counter-scale sul wrapper - mantiene dimensioni originali */
.link-home:hover .link-content {
  transform: scale(0.21); /* 1 / 4.76 = 0.21 (inverso di 400/84) */
  transition: all 0.12s ease-in-out;
}

/* Testo - nascosto di default, visibile on hover */
.link-home p {
  display: none;
}

.link-home:hover p {
  display: block;
}


/* ============================================
   POSIZIONAMENTO - Link specifici sull'albero
   Posizionamento relativo al centro dell'albero (1200px)
   Formula: calc(50% - 600px + offset_x_nell_albero)
   ============================================ */

.link-home.studio-link {
  top: 255px;
  left: calc(50% - 600px + 652px);
}

.link-home.scuola-link {
  top: 489px;
  left: calc(50% - 600px + 370px);
  background-image: url("../img/scuola-musica-02.jpg") !important;
}

.link-home.contenuti-link {
  top: 710px;
  left: calc(50% - 600px + 780px);
  background-image: url("../img/contenuti-podcast.jpg") !important;
}

.link-home.eventi-link {
  top: 1050px;
  left: calc(50% - 600px + 365px);
  background-image: url("../img/eventi.jpg") !important;
}


/* ============================================
   ICONE LUCIDE - Gestione visibilità
   ============================================ */

/* Freccia - nascosta di default, visibile on hover */
.link-home .lucide.lucide-arrow-up-right {
  display: none;
}

.link-home:hover .lucide.lucide-arrow-up-right {
  display: block;
  width: 34px;
  min-height: 34px;
}

/* Icona Disco - visibile di default, nascosta on hover */
.link-home .lucide.lucide-disc-3 {
  display: block;
  width: 34px;
  min-height: 34px;
}

.link-home:hover .lucide.lucide-disc-3 {
  display: none;
}

/* Icona Cappello - visibile di default, nascosta on hover */
.link-home .lucide.lucide-graduation-cap {
  display: block;
  width: 34px;
  min-height: 34px;
}

.link-home:hover .lucide.lucide-graduation-cap {
  display: none;
}

/* Icona Cuffie - visibile di default, nascosta on hover */
.link-home .lucide.lucide-headphones {
  display: block;
  width: 34px;
  min-height: 34px;
}

.link-home:hover .lucide.lucide-headphones {
  display: none;
}

/* Icona Giradischi - visibile di default, nascosta on hover */
.link-home .lucide.lucide-turntable {
  display: block;
  width: 34px;
  min-height: 34px;
}

.link-home:hover .lucide.lucide-turntable {
  display: none;
}

/* ============================================
   STILI MOBILE
   ============================================ */

.link-home-mobile {
  width: 100%;
  height: auto;
  border-radius: 50%;
  position: relative;
  border: 1px solid var(--white);
  aspect-ratio: 1;
}