/* =========================================================
   GiùFra – Hero "La natura diventa luce"
   Foto a tutto schermo (lampada sul mare al tramonto),
   testo a sinistra, movimento Ken Burns lentissimo.
   ========================================================= */

.hero {
  --sabbia: #d3a574;
  --sabbia-chiara: #dfb88d;
  --inchiostro: 20, 15, 10;        /* colore dell'ombra (r, g, b) */
  --bianco-tenue: rgba(255, 255, 255, 0.85);
  --font-rivista: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;

  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: rgb(var(--inchiostro)); /* mentre la foto si carica */
}

/* ----- Foto di sfondo, con Ken Burns -----
   La foto è un vero <img> (in index.html) e si muove solo con transform,
   sulla scheda grafica. La rotazione impercettibile (0.01deg) obbliga il
   browser a disegnarla in modo continuo invece che "a pixel interi":
   senza, uno zoom così lento procede a scatti. */
.hero__sfondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__sfondo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02) rotate(0.01deg);
  transform-origin: 70% 55%;       /* lo zoom si stringe piano verso la lampada */
  backface-visibility: hidden;
  will-change: transform;
  animation: hero-ken-burns 24s ease-in-out infinite alternate;
}
/* Con js/hero.js lo zoom è disegnato su un canvas (fluido anche in Firefox):
   la foto resta solo come sorgente, ferma e nascosta. */
.hero__tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__sfondo--tela img { visibility: hidden; animation: none; }

@keyframes hero-ken-burns {
  from { transform: scale(1.02) rotate(0.01deg); }
  to   { transform: scale(1.07) rotate(0.01deg); }
}

/* ----- Velo per la leggibilità: più scuro a sinistra, quasi nullo sulla lampada ----- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(var(--inchiostro), 0.3) 0%, transparent 16%, transparent 78%, rgba(var(--inchiostro), 0.35) 100%),
    linear-gradient(90deg,
      rgba(var(--inchiostro), 0.55) 0%,
      rgba(var(--inchiostro), 0.25) 45%,
      rgba(var(--inchiostro), 0.05) 75%);
  pointer-events: none;
}

/* ----- Contenuto ----- */
.hero__contenuto {
  width: 100%;
  max-width: calc(650px + 8vw);
  padding: 96px 24px 64px 8vw;
}
.hero__occhiello {
  margin: 0;
  font-family: var(--font-testo);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--bianco-tenue);
}
.hero__occhiello::after {
  /* filo color sabbia/ottone */
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 22px;
  background: var(--sabbia);
}
.hero__titolo {
  margin: 34px 0 0;
  font-family: var(--font-rivista);
  font-size: clamp(64px, 6vw, 105px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: initial;
}
.hero__riga { display: block; }
.hero__titolo em {
  font-style: italic;
  color: var(--sabbia);
}
.hero__testo {
  margin: 32px 0 0;
  max-width: 24ch;
  font-size: clamp(20px, 1.5vw, 22px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--bianco-tenue);
}

/* ----- Pulsante pill ----- */
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 44px;
  padding: 18px 36px;
  border-radius: 999px;
  background: var(--sabbia);
  /* testo scuro invece che bianco: sul sabbia il bianco non raggiunge un contrasto leggibile (≈2:1) */
  color: rgb(var(--inchiostro));
  font-family: var(--font-testo);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(var(--inchiostro), 0.6);
  transition: transform 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}
.hero__cta:hover {
  transform: translateY(-2px);
  background: var(--sabbia-chiara);
  box-shadow: 0 14px 34px -12px rgba(var(--inchiostro), 0.7);
}
.hero__cta:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
/* la spaziatura delle lettere lascia un vuoto dopo l'ultima: lo togliamo per centrare davvero */
.hero__cta span { margin-right: -0.2em; }

/* ----- Indicatore di scorrimento ----- */
.hero__giu {
  position: absolute;
  left: 50%;
  bottom: 28px;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 56px;
  color: rgba(255, 255, 255, 0.75);
  transition: color 300ms ease;
}
.hero__giu:hover { color: #fff; }
.hero__giu svg { animation: hero-giu 2.8s ease-in-out infinite; }
@keyframes hero-giu {
  0%, 100% { transform: translateY(-4px); opacity: 0.6; }
  50%      { transform: translateY(5px);  opacity: 1; }
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .hero__contenuto { padding-left: 6vw; }
  .hero__titolo { font-size: clamp(56px, 8vw, 80px); margin-top: 28px; }
  .hero__testo { font-size: 19px; margin-top: 26px; }
  .hero__cta { margin-top: 36px; }
}

/* ----- Schermi verticali (tablet in piedi): la foto scorre verso la lampada ----- */
@media (min-width: 641px) and (max-aspect-ratio: 1/1) {
  .hero__sfondo img { object-position: 74% center; }
}

/* ----- Telefono: lampada in alto, testo in basso ----- */
@media (max-width: 640px) {
  .hero {
    height: auto;
    min-height: 100svh;
    align-items: flex-end;
  }
  .hero__sfondo img {
    object-position: 60% center;
    transform-origin: 60% 40%;
  }
  .hero::before {
    background:
      linear-gradient(to top,
        rgba(var(--inchiostro), 0.85) 0%,
        rgba(var(--inchiostro), 0.6) 40%,
        rgba(var(--inchiostro), 0.08) 66%,
        transparent 84%,
        rgba(var(--inchiostro), 0.3) 100%);
  }
  .hero__contenuto { padding: 120px 24px 104px; }
  .hero__occhiello { font-size: 12px; letter-spacing: 0.32em; }
  .hero__occhiello::after { margin-top: 16px; }
  .hero__titolo { font-size: clamp(52px, 15vw, 64px); margin-top: 22px; }
  .hero__testo { font-size: 18px; margin-top: 18px; }
  .hero__cta { margin-top: 28px; min-height: 56px; padding: 18px 30px; }
  .hero__giu { bottom: 16px; }
}

/* ----- Movimento ridotto: tutto fermo ----- */
@media (prefers-reduced-motion: reduce) {
  .hero__sfondo img,
  .hero__giu svg { animation: none; }
  .hero__cta:hover { transform: none; }
}