/* ========================================
   HOME PAGE SPECIFIC STYLES
   ======================================== */

/* ----------------------------------------
   A. HERO & CIRCLES
   ---------------------------------------- */
.home-hero {
  margin-top: calc(var(--grid-baseline) * 20); 
  position: relative;
  align-items: center; 
}

.circles-wrapper {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  max-width: calc(var(--grid-baseline) * 156);
  height: calc(var(--grid-baseline) * 96);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.home-circle {
  width: calc(var(--grid-baseline) * 96); 
  height: calc(var(--grid-baseline) * 96);
  border-radius: 50%;
  position: absolute;
  top: 0;
  cursor: pointer;
  animation: breath var(--motion-breath) var(--ease-ambient) infinite alternate;
  transition: filter var(--motion-normal) var(--ease-interaction),
              background-color var(--motion-normal) var(--ease-interaction),
              transform var(--motion-fast) var(--ease-interaction); 
              
  /* FIX SAFARI BUG: Evita glitch visivi sui bordi del blur */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: filter, transform;
}

@keyframes breath {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.circle-left {
  left: 0; 
  background-color: color-mix(in srgb, var(--color-alpine) 15%, transparent);
  filter: blur(8px);
}

.circle-right {
  right: 0; 
  background-color: color-mix(in srgb, var(--color-bordeaux) 15%, transparent);
  filter: blur(8px);
}

/* Hover States for Circles */
.circles-wrapper:hover .circle-left {
  filter: blur(var(--blur-far));
  background-color: color-mix(in srgb, var(--color-alpine) 10%, transparent);
}
.circles-wrapper:hover .circle-right {
  filter: blur(var(--blur-far));
  background-color: color-mix(in srgb, var(--color-bordeaux) 10%, transparent);
}

.circles-wrapper .circle-left:hover {
  filter: blur(0);
  background-color: color-mix(in srgb, var(--color-alpine) 17%, transparent);
  z-index: 5;
}
.circles-wrapper .circle-right:hover {
  filter: blur(0);
  background-color: color-mix(in srgb, var(--color-bordeaux) 17%, transparent);
  z-index: 5;
}

/* ----------------------------------------
   B. TITLES
   ---------------------------------------- */
.home-titles-wrapper {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  align-items: end; 
  pointer-events: none;
  z-index: 10;
  grid-template-rows: auto auto; 
  row-gap: calc(var(--grid-baseline) * 8);
}

.home-title-left, .home-title-right {
  grid-row: 1;
}

.home-title-left {
  grid-column: 1 / 7;
  white-space: nowrap; 
}

.home-title-right {
  grid-column: 7 / 13;
  text-align: right; 
}

/* Testi Hover */
.hover-text {
  grid-row: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hover-left { grid-column: 1 / 7; text-align: left; }
.hover-right { grid-column: 7 / 13; text-align: right; }

.home-hero:has(.circle-left:hover) .hover-left { opacity: 1; }
.home-hero:has(.circle-right:hover) .hover-right { opacity: 1; }

/* ----------------------------------------
   C. ABOUT TEASER SECTION & COORDINATES
   ---------------------------------------- */
.home-about {
  margin-top: calc(var(--grid-baseline) * 8);
  margin-bottom: calc(var(--grid-baseline) * 12);
  align-items: end;
}

.home-about-text, .home-coord-left, .home-coord-right {
  grid-row: 1;
}

.home-about-text {
  grid-column: 5 / 9;
  text-align: justify; 
  margin: 0;
}

.coord-text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-data-size);
  line-height: var(--type-data-lh);
  color: var(--color-accent);
}

.home-coord-left {
  grid-column: 1 / 5;
  text-align: right;
  margin-bottom: 0; 
}

.home-coord-right {
  grid-column: 9 / 13;
  text-align: left;
  margin-bottom: var(--type-body-lh); 
}

/* ----------------------------------------
   D. MOBILE OVERRIDES
   ---------------------------------------- */
@media (max-width: 768px) {
  .home-hero { display: flex; flex-direction: column; }
  
  .circles-wrapper {
    display: block;
    width: 100%;
    max-width: calc(var(--grid-baseline) * 96);
    height: calc(var(--grid-baseline) * 56); 
    margin: 0 auto calc(var(--grid-baseline) * 12) auto;
  }
  
  .home-circle {
    width: calc(var(--grid-baseline) * 56);
    height: calc(var(--grid-baseline) * 56);
  }
  
  .home-titles-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
  }
  
  .home-title-left { grid-column: 1 / 3; white-space: normal; }
  .home-title-right { grid-column: 3 / 5; text-align: right; }
  
  .hover-left { grid-column: 1 / 3; }
  .hover-right { grid-column: 3 / 5; }

  .home-about { margin-top: calc(var(--grid-baseline) * 8); }
  
  .home-about-text { grid-column: 1 / 3; }
  
  .home-coord-left { 
    grid-column: 3 / 5;
    text-align: left;
    margin-bottom: 0;
  }

  .home-coord-right { 
    grid-column: 3 / 5;
    text-align: left;
    margin-bottom: var(--type-body-lh); 
  }
}