.hero{
  position:relative;
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
  radial-gradient(circle at top right,
  rgba(255,255,255,.08),
  transparent 30%);
}

/* stato iniziale */

.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:
  opacity 1s cubic-bezier(.16,1,.3,1),
  transform 1s cubic-bezier(.16,1,.3,1);
}

/* quando entra */

.reveal.active{
  opacity:1;
  transform:translateY(0);
}