.hero .dot-reveal{
  --dot-x:72%;
  --dot-y:38%;
  --dot-radius:clamp(220px,30vw,430px);
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(245,243,238,.095) 1px,transparent 1.2px);
  background-size:26px 26px;
  background-position:center;
}

.hero .dot-reveal::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,rgba(245,243,238,.72) 1px,transparent 1.45px);
  background-size:26px 26px;
  background-position:center;
  -webkit-mask-image:radial-gradient(circle var(--dot-radius) at var(--dot-x) var(--dot-y),#000 0%,rgba(0,0,0,.92) 32%,transparent 74%);
  mask-image:radial-gradient(circle var(--dot-radius) at var(--dot-x) var(--dot-y),#000 0%,rgba(0,0,0,.92) 32%,transparent 74%);
  filter:drop-shadow(0 0 4px rgba(255,51,51,.18));
}

.hero .dot-reveal::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle var(--dot-radius) at var(--dot-x) var(--dot-y),rgba(255,51,51,.055),transparent 72%);
}

@media (max-width:800px), (hover:none){
  .hero .dot-reveal{
    --dot-x:72%;
    --dot-y:34%;
    --dot-radius:clamp(190px,52vw,300px);
    background-size:24px 24px;
  }
  .hero .dot-reveal::after{background-size:24px 24px;}
}

@media (prefers-reduced-motion:reduce){
  .hero .dot-reveal{
    --dot-x:72%;
    --dot-y:36%;
  }
}