/* ============================================================
   HOME AKASHA - ETTAGONO / TESTATA / HOTSPOT
   Questo CSS deve riguardare SOLO la home con l'ettagono
   ============================================================ */


/* ============================================================
   1. CONTENITORE TESTATA HOME
   ============================================================ */

.home-header-akasha {
 position: relative;
 width: 100%;
 line-height: 0;
}

 /* Sfumatura superiore per fondere il menu trasparente con la testata */
 .home-header-akasha::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 95px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient( to bottom, rgba(15, 5, 5, .55) 0%, rgba(15, 5, 5, .20) 55%, rgba(15, 5, 5, 0) 100% );
 }


/* ============================================================
   2. IMMAGINE TESTATA / ETTAGONO
   ============================================================ */

.brand-header {
 position: relative;
 width: 100%;
 overflow: hidden;
 line-height: 0;
 transition: transform .55s ease;
}

/* Quando in home viene rivelato il menu, la testata scende leggermente */
body.home-page.menu-revealed .home-header-akasha .brand-header {
 transform: translateY(48px);
}

.header-picture {
 display: block;
 width: 100%;
}


.brand-header img {
 width: 100%;
 height: auto;
 display: block;
}

/* Raccordo inferiore tra immagine e rosso di pagina */
.brand-header::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 140px;
 background: linear-gradient( to bottom, rgba(209, 42, 24, 0) 0%, #d12a18 100% );
 pointer-events: none;
}


/* ============================================================
   3. NAV HOTSPOT SOPRA L'IMMAGINE
   ============================================================ */

.header-nav {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 10;
}

/* Base hotspot invisibili */
.hotspot {
 position: absolute;
 border-radius: 50%;
 cursor: pointer;
 transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

 /* Effetto luce al passaggio */
 .hotspot:hover,
 .hotspot:focus {
  background: rgba(255, 241, 173, .15);
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 241, 173, .3);
  outline: none;
 }


/* ============================================================
   4. COORDINATE HOTSPOT
   ============================================================ */

/* Akasha Lifestyle - alto centro */
.top-center {
 top: 5%;
 left: 45%;
 width: 10%;
 height: 28%;
}

/* Il Loto B&B - sinistra alto */
.mid-top-left {
 top: 13%;
 left: 32%;
 width: 10%;
 height: 28%;
}

/* Il Loto Gourmet - destra alto */
.mid-top-right {
 top: 13%;
 left: 58%;
 width: 10%;
 height: 28%;
}

/* Diamante centrale / Home */
.center-diamond {
 top: 35%;
 left: 45%;
 width: 10%;
 height: 28%;
}

/* Buddha Bar - sinistra centro */
.mid-bottom-left {
 top: 42%;
 left: 29%;
 width: 10%;
 height: 28%;
}

/* Percorso Energetico Iside - destra centro */
.mid-bottom-right {
 top: 42%;
 left: 61%;
 width: 10%;
 height: 28%;
}

/* Il Libro - basso sinistra */
.bottom-left {
 top: 68%;
 left: 35%;
 width: 10%;
 height: 28%;
}

/* Percorso Energetico Osiride - basso destra */
.bottom-right {
 top: 68%;
 left: 56%;
 width: 10%;
 height: 28%;
}


/* ============================================================
   5. LABEL HOVER ETTAGONO
   ============================================================ */

.ettagono-label {
 position: absolute;
 left: 50%;
 bottom: 2%;
 transform: translateX(-50%) translateY(10px);
 z-index: 20;
 max-width: 620px;
 padding: 16px 28px;
 border-radius: 999px;
 background: rgba(15, 8, 8, .42);
 border: 1px solid rgba(255, 216, 107, .22);
 color: #fff6dc;
 font-family: "Montserrat", Arial, sans-serif;
 font-size: 17px;
 font-weight: 500;
 line-height: 1.45;
 text-align: center;
 backdrop-filter: blur(18px);
 -webkit-backdrop-filter: blur(18px);
 box-shadow: 0 12px 32px rgba(0,0,0,.20), 0 0 18px rgba(255,216,107,.08);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

 .ettagono-label.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
 }


/* ============================================================
   6. MOBILE ETTAGONO
   ============================================================ */

@media (max-width: 768px) {

 .brand-header {
  width: 99%;
  margin: 0 auto;
 }

  .brand-header img {
   width: 250% !important;
   max-width: none !important;
   margin-left: -75% !important;
  }

 .header-nav {
  width: 250% !important;
  margin-left: -75% !important;
 }

 .brand-header::after {
  height: 80px;
 }

 .ettagono-label {
  bottom: 3%;
  max-width: 86%;
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 18px;
 }
}