/* Hardway Eight — floating clover background field */
.clover-field{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.clover{
  position:absolute;
  width:110px;
  opacity:0.14;
  filter:brightness(1.4);
  transition:transform 11s ease-in-out;
  will-change:transform;
}

.c1{  top:6%;  left:14%; width:100px; }
.c2{  top:10%; left:46%; width:90px;  }
.c3{  top:14%; right:16%; width:120px; }
.c4{  top:26%; left:30%; width:95px;  }
.c5{  top:24%; right:38%; width:105px; }
.c6{  top:38%; left:8%;  width:90px;  }
.c7{  top:42%; left:52%; width:115px; }
.c8{  top:46%; right:12%; width:115px; }
.c9{  top:58%; left:22%; width:100px; }
.c10{ top:56%; right:32%; width:95px;  }
.c11{ top:66%; left:44%; width:105px; }
.c12{ top:68%; right:6%;  width:90px;  }
.c13{ bottom:6%; left:16%; width:100px; }
.c14{ bottom:8%; left:48%; width:95px;  }
.c15{ bottom:10%; right:22%; width:110px; }
.c16{ bottom:14%; right:44%; width:100px; }

@media (max-width:900px){
  .clover-field{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .clover{ transition:none; }
}