/* =============================================================================
   Gruppo Benza — sistema di stile

   L'idea che tiene insieme tutto e' la LINEA D'ACQUA: una riga orizzontale che
   attraversa la pagina e si comporta come il pelo dell'acqua. Sopra c'e' l'aria
   e il verde (Benza srl, il giardino), sotto c'e' la profondita' (Benza Water
   Storage, l'acqua tenuta ferma). Il mestiere del gruppo e' esattamente quella
   superficie di separazione, quindi la pagina la usa come struttura, non come
   decorazione.

   I colori non sono scelti a tavolino: sono campionati dalle due fotografie del
   biolago sopra Sanremo e della biopiscina sul mare.
   ============================================================================= */

:root {
  /* --- Sotto la linea: l'acqua --- */
  --gb-abisso: #04222c;        /* acqua in ombra, fondo scuro della pagina */
  --gb-profondo: #073243;      /* un gradino sopra l'abisso */
  --gb-acqua: #00a1e6;         /* azzurro Benza Water Storage */
  --gb-riflesso: #6fd0e8;      /* riflesso sulla superficie, testi minori su fondo scuro */

  /* --- Sopra la linea: l'aria e il verde --- */
  --gb-giardino: #006000;      /* verde Benza srl, dal loro logo, su fondo chiaro */
  --gb-fronda: #35b869;        /* stesso verde schiarito, per i fondi scuri */
  --gb-sabbia: #e3cfa8;        /* la sabbia della biopiscina: l'unico caldo della tavolozza */
  --gb-schiuma: #f4f8f9;       /* superficie chiara */
  --gb-inchiostro: #0a2029;    /* testo su fondo chiaro */
  --gb-inchiostro-tenue: #4b6470;

  /* --- Tipografia --- */
  --gb-display: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  --gb-testo: 'Source Sans 3 Variable', system-ui, sans-serif;
  --gb-dato: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- Ritmo --- */
  --gb-sp-1: 0.5rem;
  --gb-sp-2: 1rem;
  --gb-sp-3: 1.75rem;
  --gb-sp-4: 3rem;
  --gb-sp-5: 5rem;
  --gb-sp-6: 8rem;
  --gb-raggio: 4px;
  --gb-larghezza: 1280px;

  /* --- Movimento --- */
  --gb-onda: cubic-bezier(0.22, 1, 0.36, 1);
  --gb-lento: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--gb-testo);
  font-size: clamp(1rem, 0.55vw + 0.9rem, 1.125rem);
  line-height: 1.6;
  color: var(--gb-inchiostro);
  background: var(--gb-abisso);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--gb-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

/* --- Contenitori ------------------------------------------------------- */

.gb-wrap {
  width: 100%;
  max-width: var(--gb-larghezza);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.gb-sezione { padding-block: clamp(4rem, 11vw, var(--gb-sp-6)); }

/* Due sezioni consecutive dello stesso tono non hanno un bordo che le separi:
   sommare i due riempimenti verticali lascia un vuoto grande il doppio. */
.gb-sotto + .gb-sotto, .gb-sopra + .gb-sopra { padding-top: 0; }

/* Sezione sotto la linea d'acqua */
.gb-sotto { background: var(--gb-abisso); color: var(--gb-schiuma); }
/* Sezione sopra la linea d'acqua */
.gb-sopra { background: var(--gb-schiuma); color: var(--gb-inchiostro); }

/* --- L'occhiello: sempre in mono, e' un'etichetta di misura --------------- */

.gb-etichetta {
  font-family: var(--gb-dato);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 var(--gb-sp-2);
  color: var(--gb-acqua);
}
.gb-sopra .gb-etichetta { color: var(--gb-giardino); }

/* --- La linea d'acqua ---------------------------------------------------- */

.gb-linea {
  position: relative;
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--gb-acqua) 70%, transparent) 18%,
    color-mix(in srgb, var(--gb-fronda) 70%, transparent) 82%,
    transparent
  );
}

/* --- Titoli di sezione --------------------------------------------------- */

.gb-titolo {
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  font-variation-settings: 'wdth' 92;
  max-width: 18ch;
}

.gb-occhio {
  max-width: 54ch;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  color: var(--gb-inchiostro-tenue);
}
.gb-sotto .gb-occhio { color: #9fb6bf; }

/* --- Accessibilita' ------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--gb-acqua);
  outline-offset: 3px;
  border-radius: 2px;
}
.gb-sopra :focus-visible { outline-color: #0077a8; }

.gb-skip {
  position: absolute;
  left: -9999px;
  background: var(--gb-abisso);
  color: var(--gb-schiuma);
  padding: var(--gb-sp-2);
  z-index: 100;
}
.gb-skip:focus { left: var(--gb-sp-2); top: var(--gb-sp-2); }

/* =============================================================================
   Movimento

   Due meccaniche, entrambe senza JavaScript:
   - la sequenza di apertura dell'hero, con @keyframes normali;
   - le rivelazioni a scorrimento, con animation-timeline: view(), che i browser
     recenti sanno fare da soli. Dove non c'e' supporto il contenuto e' gia'
     visibile: la regola sta dentro @supports, quindi non si nasconde niente
     che poi non possa ricomparire.
   ============================================================================= */

@keyframes gb-affiora {
  from { clip-path: inset(100% 0 0 0); transform: translateY(0.4em); }
  to   { clip-path: inset(0 0 0 0);   transform: translateY(0); }
}

@keyframes gb-scorri-linea {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes gb-sfuma {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes gb-tergi {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes gb-riempi {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes gb-deriva {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@supports (animation-timeline: view()) {
  /* Il contenuto arriva "tergendo" lungo l'orizzontale, come il pelo dell'acqua
     che scopre una superficie. Non e' il blocco che sale dal basso. */
  .gb-anim {
    animation: gb-tergi linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 26%;
  }
  .gb-anim-sfuma {
    animation: gb-sfuma linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 24%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  @supports (animation-timeline: view()) {
    .gb-anim, .gb-anim-sfuma { animation: none; clip-path: none; opacity: 1; }
  }
}