/* =============================================================
   HOME — HERO CINEMATICO
   Caricato solo da index.php. Nessun'altra pagina lo usa.

   Come funziona: la sezione .cmp-hero è alta più schermate e al suo
   interno .cmp-hero__stage resta "sticky". Lo scorrimento della pagina
   viene tradotto da js/home-hero.js in variabili CSS (zoom, opacità,
   salita del verde), quindi tutta l'animazione è gestita qui.

   ATTENZIONE: l'altezza della hero determina quanto si deve scorrere
   prima di arrivare ai contenuti. Si regola nelle tre variabili qui
   sotto; valori più bassi = effetto più rapido, contenuti più vicini.
   ============================================================= */

html.cmp-parallax-home {
  --cmp-hero-height: 420vh;         /* desktop */
  --cmp-hero-height-tablet: 340vh;  /* fino a 900px */
  --cmp-hero-height-mobile: 165vh;  /* fino a 640px — più bassa = animazione più rapida */
}

/* Senza JavaScript la classe non viene aggiunta e la hero resta alta
   una schermata: si vede una hero statica normale, non 4 schermate vuote. */
.cmp-hero {
  position: relative;
  height: 100svh;
  background: #22341A;
}

html.cmp-parallax-home .cmp-hero {
  height: var(--cmp-hero-height);
  margin-top: 0 !important;
}

.cmp-hero__stage {
  --cmp-p: 0;
  --cmp-image-scale: 1;
  --cmp-image-y: 0vh;
  --cmp-copy-y: 0vh;
  --cmp-copy-scale: 1;
  --cmp-copy-opacity: 1;
  --cmp-copy-pe: auto;
  --cmp-second-opacity: 0;
  --cmp-second-y: 24px;
  --cmp-green-opacity: 0;
  --cmp-green-soft-opacity: 0;
  --cmp-green-y: 58%;
  --cmp-scroll-opacity: 1;
  --cmp-brand-opacity: 0;
  --cmp-brand-y: 72px;

  /* --- Indicatore di scorrimento: misure in un punto solo -----------
     La freccia sta SEMPRE in fondo alla schermata; da queste variabili
     si ricava automaticamente lo spazio che il testo deve lasciarle
     libero (--cmp-scroll-zone), così non c'è mai sovrapposizione.

     --cmp-cta-bar tiene conto della barra fissa .mobile-cta (Chiama /
     Indicazioni), che in style.css è alta 56px + 1px di bordo ed è
     visibile fino a 991px: senza questo scarto la barra coprirebbe
     la freccia, perché ha uno z-index molto più alto. */
  --cmp-cta-bar: 0px;
  --cmp-scroll-inset: max(24px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  --cmp-scroll-bottom: calc(var(--cmp-cta-bar) + var(--cmp-scroll-inset));
  --cmp-scroll-line: 48px;   /* lunghezza della linea luminosa */
  --cmp-scroll-gap: 0px;     /* stacco visibile fra linea e freccia */
  --cmp-scroll-arrow: 14px;  /* lato del quadrato ruotato */
  --cmp-scroll-play: 10px;   /* margine per il rimbalzo della freccia */
  --cmp-scroll-zone: calc(
    var(--cmp-scroll-bottom) + var(--cmp-scroll-line) +
    var(--cmp-scroll-gap) + var(--cmp-scroll-arrow) + var(--cmp-scroll-play)
  );

  /* Fascia verticale in cui vive il testo della hero. */
  --cmp-hero-pad-top: clamp(84px, 13vh, 150px);
  --cmp-hero-pad-bottom: calc(var(--cmp-scroll-zone) + 22px);
  --cmp-hero-copy-shift: 0px; /* ritocco fine della posizione del testo */

  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #22341A;
}

/* ---------- Immagine ---------- */
.cmp-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #7ca7c3;
}

.cmp-hero__media picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.cmp-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 48%;
  transform: translate3d(0, var(--cmp-image-y), 0) scale(var(--cmp-image-scale));
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* ---------- Luce, profondità e verde finale ---------- */
.cmp-hero__light,
.cmp-hero__vignette,
.cmp-hero__bottom-shadow,
.cmp-hero__green-soft,
.cmp-hero__green {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cmp-hero__light {
  z-index: 2;
  background: radial-gradient(
    ellipse 48% 55% at 50% 42%,
    rgba(255,255,255,.11) 0%,
    rgba(255,255,255,.045) 28%,
    rgba(255,255,255,.012) 50%,
    transparent 72%
  );
}

.cmp-hero__vignette {
  z-index: 3;
  background: radial-gradient(
    ellipse at center,
    transparent 43%,
    rgba(0,0,0,.025) 68%,
    rgba(0,0,0,.16) 100%
  );
}

.cmp-hero__bottom-shadow {
  z-index: 3;
  background: linear-gradient(
    to bottom,
    transparent 48%,
    rgba(8,12,7,.025) 68%,
    rgba(8,12,7,.20) 100%
  );
}

/* Prima sfumatura: colora il prato prima che salga il verde pieno. */
.cmp-hero__green-soft {
  z-index: 5;
  left: -10%;
  right: auto;
  top: auto;
  bottom: -2%;
  width: 120%;
  height: 72%;
  opacity: var(--cmp-green-soft-opacity);
  background: radial-gradient(
    ellipse 82% 70% at 50% 100%,
    rgba(34,52,26,.98) 0%,
    rgba(34,52,26,.72) 38%,
    rgba(34,52,26,.38) 58%,
    rgba(34,52,26,.14) 74%,
    rgba(34,52,26,0) 100%
  );
  will-change: opacity;
}

/* Verde #22341A che sale dal fondo con bordo molto morbido. 
.cmp-hero__green {
  z-index: 6;
  left: -5%;
  right: auto;
  top: auto;
  bottom: -10%;
  width: 110%;
  height: 84%;
  opacity: var(--cmp-green-opacity);
  transform: translate3d(0, var(--cmp-green-y), 0);
  background: linear-gradient(
    to top,
    #22341A 0%,
    #22341A 31%,
    rgba(34,52,26,1) 43%,
    rgba(34,52,26,.96) 52%,
    rgba(34,52,26,.82) 61%,
    rgba(34,52,26,.58) 70%,
    rgba(34,52,26,.32) 79%,
    rgba(34,52,26,.14) 87%,
    rgba(34,52,26,.04) 94%,
    rgba(34,52,26,0) 100%
  );
  will-change: opacity, transform;
}
*/

.cmp-hero__green {
  z-index: 6;

  left: -10%;
  right: auto;
  top: auto;
  bottom: -10%;

  width: 120%;
  height: 90%;

  opacity: var(--cmp-green-opacity);
  transform: translate3d(0, var(--cmp-green-y), 0);

  border-radius: 50% 50% 0 0 / 18% 18% 0 0;

  background: linear-gradient(
    to top,
    #22341A 0%,
    #22341A 31%,
    rgba(34,52,26,1) 43%,
    rgba(34,52,26,.96) 52%,
    rgba(34,52,26,.82) 61%,
    rgba(34,52,26,.58) 70%,
    rgba(34,52,26,.32) 79%,
    rgba(34,52,26,.14) 87%,
    rgba(34,52,26,.04) 94%,
    rgba(34,52,26,0) 100%
  );

  will-change: opacity, transform;
}

/* ---------- Testi ---------- */
/* Il testo è centrato NELLA FASCIA che resta libera fra la zona alta
   (dove comparirà il menu) e la zona bassa riservata all'indicatore:
   qualunque sia l'altezza dello schermo, i due non si toccano mai. */
.cmp-hero__content-wrap {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--cmp-hero-pad-top);
  padding-bottom: var(--cmp-hero-pad-bottom);
  pointer-events: none;
}

.cmp-hero__content {
  width: min(1050px, calc(100% - 48px));
  text-align: center;
  color: #fff;
  opacity: var(--cmp-copy-opacity);
  transform: translate3d(0, calc(var(--cmp-copy-y) + var(--cmp-hero-copy-shift)), 0) scale(var(--cmp-copy-scale));
  transform-origin: center;
  will-change: transform, opacity;
  /* i pulsanti smettono di essere cliccabili quando il testo è svanito */
  pointer-events: var(--cmp-copy-pe, auto);
}

.cmp-hero__content .eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 18px rgba(0,0,0,.34);
}

.cmp-hero__content h1 {
  max-width: 980px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(58px, 7.8vw, 120px);
  line-height: .9;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: 0 7px 36px rgba(0,0,0,.16);
}

.cmp-hero__sub {
  width: min(650px, 94%);
  margin: 28px auto 0;
  color: rgba(255,255,255,.96);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0,0,0,.36);
}

.cmp-hero__content .btn-group {
  justify-content: center;
  margin-top: 30px;
}

/* Seconda frase: entra dopo la prima. */
.cmp-hero__second-copy {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: 50%;
  width: min(980px, calc(100% - 48px));
  color: #fff;
  text-align: center;
  opacity: var(--cmp-second-opacity, 0);
  transform: translate3d(-50%, calc(-50% + var(--cmp-second-y, 24px)), 0);
  will-change: opacity, transform;
  pointer-events: none;
}

.cmp-hero__second-copy h2 {
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(42px, 5.8vw, 92px);
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 6px 30px rgba(0,0,0,.18);
}

.cmp-hero__second-copy p {
  width: min(620px, 94%);
  margin: 24px auto 0;
  color: rgba(255,255,255,.94);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0,0,0,.36);
}

@media (max-width: 640px) {
  .cmp-hero__second-copy p { margin-top: 18px; font-size: 14px; }
}

/* Firma finale: entra dal basso e resta visibile sul verde. */
.cmp-hero__brand-copy {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: clamp(54px, 8vh, 110px);
  width: min(1200px, calc(100% - 48px));
  color: #fff;
  text-align: center;
  opacity: var(--cmp-brand-opacity, 0);
  transform: translate3d(-50%, var(--cmp-brand-y, 72px), 0);
  will-change: opacity, transform;
  pointer-events: none;
}

.cmp-hero__brand-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(54px, 7.6vw, 126px);
  line-height: .88;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: 0 7px 34px rgba(0,0,0,.16);
}

/* ---------- Indicatore di scorrimento ----------
   Linea con luce che scende + freccia che pulsa verso il basso.
   Il markup resta un <div> vuoto: linea e freccia sono i due
   pseudo-elementi, disposti in colonna da flexbox (::before sopra,
   ::after sotto). Così il contenitore si dimensiona da solo a partire
   dalle variabili in cima al file e resta sempre appoggiato al fondo
   della schermata, tenendo conto della safe-area degli iPhone.
   L'ombra lo tiene leggibile anche sulle zone chiare della foto. */
.cmp-hero__scroll {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: var(--cmp-scroll-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cmp-scroll-gap);
  width: 40px;               /* solo area di rispetto: i figli sono centrati */
  opacity: var(--cmp-scroll-opacity);
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}

/* Traccia fissa + luce che la percorre (due layer di background). */
.cmp-hero__scroll::before {
  content: "";
  flex: none;
  width: 2px;
  height: var(--cmp-scroll-line);
  border-radius: 2px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 55%, rgba(255,255,255,0) 100%),
    rgba(255,255,255,.42);
  background-size: 100% 46%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 50% -50%, 50% 0;
  animation: cmpScrollLine 1.9s cubic-bezier(.65, 0, .35, 1) infinite;
}

/* Freccia: quadrato ruotato di 45°, due lati visibili.
   La rotazione avviene DOPO il calcolo del layout: il chevron visibile
   parte a metà altezza del box, quindi senza compensazione resterebbe
   sempre mezzo lato di distanza dalla linea. Il margine negativo pari
   a metà lato riporta la punta a contatto; --cmp-scroll-gap diventa
   così lo stacco reale, e a 0 la freccia è attaccata alla linea.
   Il margine in basso lascia spazio al rimbalzo dell'animazione. */
.cmp-hero__scroll::after {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: var(--cmp-scroll-arrow);
  height: var(--cmp-scroll-arrow);
  margin-top: calc(var(--cmp-scroll-arrow) / -2);
  margin-bottom: var(--cmp-scroll-play);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  animation: cmpScrollArrow 1.9s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes cmpScrollLine {
  0%        { background-position: 50% -50%, 50% 0; }
  72%, 100% { background-position: 50% 150%, 50% 0; }
}

@keyframes cmpScrollArrow {
  0%, 100% { opacity: .7; transform: translateY(0) rotate(45deg); }
  50%      { opacity: 1;  transform: translateY(4px) rotate(45deg); }
}

/* ---------- Raccordo con il resto della pagina ---------- */
html.cmp-parallax-home,
html.cmp-parallax-home body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Il blocco informazioni prosegue esattamente il verde finale della hero. */
html.cmp-parallax-home .hero-facts {
  background: #22341A !important;
}

.cmp-hero + .hero-facts {
  position: relative;
  z-index: 20;
}

/* ---------- Header: nascosto durante la hero ----------
   visibility: hidden è indispensabile: con la sola opacity i link
   resterebbero raggiungibili con il tasto Tab pur essendo invisibili. */
html.cmp-parallax-home .site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  margin: 0 !important;
  opacity: 0;
  visibility: hidden;
  translate: 0 -12px;
  pointer-events: none;
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    translate .9s cubic-bezier(.22,1,.36,1),
    visibility .9s;
  will-change: opacity, translate;
}

/* Il menu desktop imposta visibility:visible su .nav e vincerebbe sul
   genitore nascosto: va spento esplicitamente, altrimenti i link
   restano raggiungibili con il tasto Tab. */
html.cmp-parallax-home .site-header:not(.cmp-menu-visible) .nav {
  visibility: hidden;
}

html.cmp-parallax-home .site-header.cmp-menu-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  pointer-events: auto;
}

/* Il pulsante "torna su" non deve comparire sopra la hero cinematica. */
html.cmp-parallax-home:not(.cmp-hero-done) .back-to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- Breakpoint ---------- */
/* --- Dove esiste la barra CTA fissa (.mobile-cta, fino a 991px) ---
   Tutto l'indicatore sale sopra la barra. Essendo --cmp-scroll-bottom
   dentro il calcolo di --cmp-scroll-zone, anche il testo si alza da
   solo: non serve toccare altro. */
@media (max-width: 991px) {
  .cmp-hero__stage {
    --cmp-cta-bar: 57px;
    --cmp-scroll-inset: 28px;
  }
}

/* --- Tablet / laptop piccoli --- */
@media (max-width: 900px) {
  html.cmp-parallax-home .cmp-hero { height: var(--cmp-hero-height-tablet); }

  .cmp-hero__stage {
    --cmp-scroll-line: 44px;
    --cmp-scroll-arrow: 15px;
    --cmp-hero-pad-top: clamp(64px, 9vh, 108px);
  }

  .cmp-hero__scroll { filter: drop-shadow(0 2px 14px rgba(0,0,0,.75)); }
  .cmp-hero__scroll::before {
    background:
      linear-gradient(to bottom, rgba(255,255,255,0), #fff 55%, rgba(255,255,255,0)),
      rgba(255,255,255,.65);
  }
  .cmp-hero__scroll::after { border-width: 2.5px; }

  .cmp-hero__content { width: min(760px, calc(100% - 32px)); }
  .cmp-hero__content h1 { font-size: clamp(52px, 11vw, 88px); line-height: .92; }
  .cmp-hero__sub { max-width: 560px; font-size: 15px; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  html.cmp-parallax-home .cmp-hero { height: var(--cmp-hero-height-mobile); }

  .cmp-hero__stage {
    --cmp-scroll-inset: 34px;   /* distacco dalla barra CTA */
    --cmp-scroll-line: 32px;
    --cmp-scroll-gap: 0px;
    --cmp-scroll-arrow: 13px;
    --cmp-scroll-play: 9px;
    /* Testi in alto: tutta la metà bassa resta libera per
       indicatore e barra CTA. */
    --cmp-hero-pad-top: clamp(12px, 2vh, 32px);
    --cmp-hero-pad-bottom: calc(var(--cmp-scroll-zone) + 30px);
    --cmp-hero-copy-shift: -26px;
  }

  .cmp-hero__scroll::after { border-width: 2.5px; }

  .cmp-hero__image { object-position: 50% 50%; }
  .cmp-hero__content h1 { font-size: clamp(38px, 11.5vw, 62px); line-height: .9; letter-spacing: -.045em; }
  .cmp-hero__content .eyebrow2 { margin-bottom: 10px; font-size: 14px; }
  .cmp-hero__sub { width: 96%; margin-top: 14px; font-size: 13.5px; line-height: 1.45; }
  .cmp-hero__content .btn-group { margin-top: 16px; gap: 10px; }

  .cmp-hero__second-copy { top: 25%; width: calc(100% - 32px); }
  .cmp-hero__second-copy h2 { font-size: clamp(38px, 11vw, 64px); line-height: .98; }

  /* Anche la firma finale deve restare sopra la barra CTA. */
  .cmp-hero__brand-copy {
    bottom: calc(var(--cmp-cta-bar) + 34px);
    width: calc(100% - 28px);
  }
  .cmp-hero__brand-copy h2 { font-size: clamp(48px, 13.5vw, 76px); line-height: .9; }

  /* L'ombra verde parte più in alto: copre prima l'immagine. */
  .cmp-hero__green { height: 92%; }
  .cmp-hero__green-soft { height: 78%; }
}

/* --- Schermi bassi (landscape, laptop 13" con barra strumenti) ---
   Qui lo spazio verticale è poco: si asciuga il testo invece di
   lasciarlo scivolare sopra la freccia. */
@media (max-height: 620px) and (min-width: 641px) {
  .cmp-hero__stage {
    --cmp-hero-pad-top: 60px;
    --cmp-scroll-line: 34px;
  }
  .cmp-hero__content h1 { font-size: clamp(40px, 6vw, 68px); }
  .cmp-hero__sub { margin-top: 16px; font-size: 15px; }
  .cmp-hero__content .btn-group { margin-top: 20px; }
}

@media (max-height: 560px) and (max-width: 640px) {
  .cmp-hero__stage { --cmp-scroll-line: 26px; --cmp-hero-pad-top: 24px; }
  .cmp-hero__sub { display: none; }
}

/* ---------- Movimento ridotto: hero statica ---------- */
@media (prefers-reduced-motion: reduce) {
  html.cmp-parallax-home .cmp-hero { height: 100svh; }

  .cmp-hero__image,
  .cmp-hero__content,
  .cmp-hero__green { transform: none !important; }

  /* Niente animazione, ma l'indicatore resta: serve a capire che si scorre. */
  .cmp-hero__scroll::before,
  .cmp-hero__scroll::after { animation: none; }
  .cmp-hero__scroll::before { background: rgba(255,255,255,.55); }
  .cmp-hero__scroll::after { opacity: 1; }

  html.cmp-parallax-home .site-header { transition: opacity .25s ease; }
}

/* Tutte le regole dell'indicatore stanno ora nei breakpoint qui sopra:
   si governa dalle variabili --cmp-scroll-* di .cmp-hero__stage. */