<div class="header">
  <h2 class="cownter"></h2>
  <div class="animate__animated animate__backInDown on-scroll-trigger-12">
    <br>
    <a href="#" class="reset">🔁Re-cross the scroller-verse</a>
  </div>
</div>
<div class="main">
  <div class="scroll-trigger-1"></div>
<div class="circle bg-green animate__animated  animate__rollIn on-scroll-trigger-1"><div>great power</div></div>
  <div class="scroll-trigger-2"></div>
  <div class="circle spider-cow-1 bg-blue animate__animated animate__fadeInDownBig on-scroll-trigger-2"></div>
  
<div class="break"></div>
  <div class="scroll-trigger-3"></div>
  <div class="circle bg-yellow animate__animated animate__flipInY on-scroll-trigger-3"><div>scrolly sense</div></div>
  
  
  <div class="break"></div>
   <div class="scroll-trigger-4"></div>
  <div class="spider-cow-2 circle animate__animated animate__lightSpeedInLeft on-scroll-trigger-4"></div>
  
  <div class="scroll-trigger-5"></div>
<div class="circle bg-yellow on-scroll-trigger-5 animate__animated animate__bounceIn"><div>so amaze</div></div>

  <div class="break"></div>
     <div class="scroll-trigger-6"></div>
<div class="circle bg-purple on-scroll-trigger-6 animate__animated animate__zoomInUp"><div>no script</div></div>
  
  <div class="break"></div>
  <div class="circle bg-blue on-scroll-trigger-7 animate__animated animate__zoomInUp"><div>no responsibility</div></div>
  
  <div class="scroll-trigger-7"></div>
   <div class="scroll-trigger-8"></div>
  <div class="circle on-scroll-trigger-8 animate__animated animate__flipInY spider-cow-3"></div> 
  
  <div class="break"></div>
  <div class="circle bg-red on-scroll-trigger-9 animate__animated animate__rotateInUpLeft"><div>web fluid</div></div>
    <div class="scroll-trigger-9"></div>
  
  <div class="break"></div>
  
  <div class="circle bg-blue on-scroll-trigger-10 
              animate__animated animate__jello"><div>low radiation</div></div>
     <div class="scroll-trigger-10"></div>

    <div class="circle animate__animated on-scroll-trigger-11 animate__backInUp spider-cow-4 "></div>
       <div class="scroll-trigger-11"></div>  
  <div class="break"></div>
  
    <div class="circle bg-green animate__animated on-scroll-trigger-12 animate__wobble"><div>tingling
      <div class="scroll-trigger-13"></div></div>
      <div class="scroll-trigger-12"></div>
  </div>

body {
     font-family: "Comic Sans MS";
  --circle-diameter: clamp(200px, max(20vw, 40vh), 900px);
}

.header {
  .cownter::after {
     --cownter: calc(var(--scroll-trigger-2) + var(--scroll-trigger-4) + var(--scroll-trigger-8) + var(--scroll-trigger-11));
    --pluralised-cow: 'cows';
    counter-set: cownter var(--cownter);
    content: "Have " counter(cownter) " " var(--pluralised-cow) ", man";
  }

   @container style(--scroll-trigger-2: 1) and style(--scroll-trigger-4: 0) {
     .cownter::after {
        --pluralised-cow: 'cow';
     }
  }
  
  a {
    text-decoration: none;
    color:blue;
  }
}

:root:has(.reset:active) * {
  animation-name: none;
}

  .reset {
      border-radius: 2em;
      background-color:#FAFAFA;
      color: #562185;
      box-shadow: 0 1px 10px 2px rgba(0, 0, 0, 0.1);
      padding: 0.5rem 1.5rem;
    }


.main {
  width: 100vw;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.bg-green {
    background: #5bd5a0;
}

.bg-yellow {
    background: #ffcc35;
}

.bg-blue {
    background: #1daee9;
}

.bg-red {
    background: #eb3980;
}

.bg-purple {
    background: #c843a5;
}

.bg-green {
    background: #5bd5a0;
}

.circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  border-radius: 50%;    
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 30px;
}


.main img {
  width: var(--circle-diameter);
  height:var(--circle-diameter);
  display: block;
}

.spider-cow-1 {
  background: url(https://i.imgur.com/W7mPTZg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #1daee9;
}

.spider-cow-2 {
  background: url(https://i.imgur.com/y1GF4bu.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #5bd5a0;
}

.spider-cow-3 {
  background: url(https://i.imgur.com/K5kqzWF.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #5bd5a0;
}

.spider-cow-4 {
  background: url(https://i.imgur.com/I8aeS7o.png);
    background-repeat: no-repeat;
  background-size: cover;
  background-color: #5bd5a0;
}
 

.break {
  flex-basis: 100%;
  height: 0;
}

.header {
  position: sticky;
  top: 0;
  margin-top: 5px;
  padding: 10px 16px;
  color: #000;
  text-align: center;
  z-index: 1;
}