.products-header-wrapper{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));
  transition:background 3s ease;
}

/* sun / moon */
.products-header-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 70% 25%,
      rgba(255,255,255,var(--sun-glow)) 0%,
      rgba(255,255,255,0) 45%
    );
  pointer-events:none;
  transition:opacity 3s ease;
}

/* stars */
.products-header-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1px 1px at 10% 20%, #fff 99%, transparent),
    radial-gradient(1px 1px at 30% 60%, #fff 99%, transparent),
    radial-gradient(1px 1px at 55% 40%, #fff 99%, transparent),
    radial-gradient(1px 1px at 80% 30%, #fff 99%, transparent),
    radial-gradient(1px 1px at 90% 80%, #fff 99%, transparent);
  opacity:var(--stars);
  animation:starsBlink 3s ease-in-out infinite;
  pointer-events:none;
}

@keyframes starsBlink{
  0%,100%{opacity:var(--stars)}
  50%{opacity:calc(var(--stars) * .4)}
}

/* text */
.products-header-wrapper h1{
  position:relative;
  z-index:2;
  color:var(--text-color);
  transition:color 2s ease;
  text-shadow:0 4px 14px rgba(0,0,0,.35);
}