.hero-wrapper {
  position: absolute;       /* sopra tutto il contenuto */
  top: 0;
  left: 0;
  width: 100%;
  height: 65vh;          /* come hai detto */
  overflow: hidden;
  z-index: 100;
  transition: top 3s ease;  /* animazione smooth */
}

.hero-wrapper.shrink {
  top: var(--placeholder-top);  /* verrà impostata via JS */
}


.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MOTTO */
.motto-wrapper {
  position:absolute;
  top:10vh;
  left:0;
  width:100%;
  height:50vh;
  overflow:hidden;
  pointer-events:none;
  z-index:10;
}

.motto {
  position:absolute;
  left:100%;
  white-space:nowrap;
  font-size:5vw;
  line-height:1.1;
  opacity:0;
  color:#999;
  user-select:none;
  animation: scroll-and-bounce 40s linear;
  font-family:'Figtree',sans-serif;
}

@keyframes scroll-and-bounce {
  0% { opacity:0; transform: translateX(0); }
  10% { opacity:1; }
  50% { transform: translateX(-250%); }
  75% { opacity:0; }
  100% { opacity:0; transform: translateX(0); }
}

.home-content {
  padding: 3rem 1rem;
  text-align: center;
}

.homepage-intro {
  max-width: 800px;
  margin: 0 auto 3rem;
}

.home-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
}

.link-item {
  width: 220px;
  text-align: center;
}

.link-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.homepage-teaser {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.hero-placeholder {
  width: 100%;
  height: 65vh; /* stessa altezza del hero */
}
/* Tutti gli elementi partono invisibili */
header,
.home-content,
.homepage-teaser,
footer {
  opacity: 0;
  transform: translateY(20px); /* piccolo offset verso il basso */
  transition: opacity 3s ease, transform 1s ease;
}

/* Quando diventano visibili */
.visible {
  opacity: 1;
  transform: translateY(0);
}