/* Hero "Il laghetto" */
.hero-laghetto{
  position:relative;
  height:100vh;height:100svh;   /* a tutto schermo; cambia qui l'altezza se la vuoi più bassa */
  min-height:520px;
  /* patch: niente taglio sul bordo basso, le foglie possono uscire dal laghetto */
  clip-path:inset(0 0 -200px 0);
  background:#2a251f;
  color:#F2EDE4;
}
.hero-laghetto .hl-bottom,.hero-laghetto .hl-pond{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-laghetto .hl-bottom{pointer-events:none}
/* patch: la tela di foglie e pesci scende oltre il bordo del laghetto */
.hero-laghetto .hl-pond{bottom:auto;height:calc(100% + 200px)}
/* pan-y: su telefono il trascinamento verticale fa scorrere la pagina, tocchi e trascinamenti orizzontali muovono l'acqua */
.hero-laghetto .hl-pond{touch-action:pan-y;cursor:grab}
.hero-laghetto .hl-hint{position:absolute;left:0;right:0;bottom:0;padding-inline:16px;padding-block:0 calc(18px + env(safe-area-inset-bottom,0px));
  text-align:center;pointer-events:none;font-family:"Sora","Avenir Next","Segoe UI",system-ui,sans-serif;font-weight:300;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#F2EDE4;opacity:.8;text-shadow:0 1px 8px rgba(30,26,20,.8);transition:opacity 1.2s}
.hero-laghetto .hl-hint.gone{opacity:0}
.hero-laghetto .hl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
@media (max-width:480px){.hero-laghetto .hl-hint{font-size:.64rem;letter-spacing:.12em}}