/* create a variable that holds the progress percentage
you can't animate custom properties by default; you have
to define what kind of value it is with @property */
@property --progress {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}

@keyframes progress {
  from {  
transform: scaleX(1);  
    --progress: 0;
  }
  to {
    --progress: 1;
         
  transform: scaleX(-1);
        
  }
}



.bird2-container {
  --PI: 3.1415;
  --WAVE-COUNT: 2; /* number of waves to do over the element's width */
  --TOTAL-ANGLE: calc(var(--WAVE-COUNT) * 2 * var(--PI)); /* one wave is 2PI radians */
  --UNIT: 1vw; /* we need to use the same unit for all calculations. Keep variables unit-less as long as possible, and only apply units when assigning to css properties */
  --r: 5; /* radius in --UNITs of circle we'll use as reference */
  --CONTAINER-WIDTH: 100; /* container's width in --UNITs */
  
  --x: calc(var(--progress) * var(--CONTAINER-WIDTH)); /* current x-position in --UNITs */
  --ROTATION-PER-LENGTH-UNIT: calc(var(--TOTAL-ANGLE) / var(--CONTAINER-WIDTH));
  --alpha-reference-angle: calc(var(--ROTATION-PER-LENGTH-UNIT) * var(--x) * 1rad); /* current angle of reference circle */
  --y: calc(-1 * var(--r) * sin(var(--alpha-reference-angle))); /* current y-position in --UNITs; multiply by -1 because in math positive values are upward, in css downwards */

  /* for calculations, we need to use x and y without units;
  now add units so we can use them with actual css properties */
  --x-with-unit: calc(var(--x) * var(--UNIT));
  --y-with-unit: calc(var(--y) * var(--UNIT));

  /*
  to get tangent at any point on the sine curve, we need the derived function
  of the sine function. Generally, for a function of the form
  f(x) = a * sin(b * x)
  the derived function is
  f'(x) = a * b * cos( b * x)
  The angle beta corresponding to that tangent is the atan of that value.
  In our case a equals --r, 
  b equals --ROTATION-PER-LENGTH-UNIT
    */
  --tan: calc(-1 * var(--r) * var(--ROTATION-PER-LENGTH-UNIT) * cos(var(--alpha-reference-angle)));
  --beta-tangent-angle: atan(var(--tan));

  position: absolute;
   
  left:80px;
  bottom:23vh;
  width: calc(var(--CONTAINER-WIDTH) * var(--UNIT));
  animation: progress 3s alternate infinite;
  animation-delay: 5s;
 
}


.bird1-container {
  --PI: 3.1415;
  --WAVE-COUNT: 2; /* number of waves to do over the element's width */
  --TOTAL-ANGLE: calc(var(--WAVE-COUNT) * 2 * var(--PI)); /* one wave is 2PI radians */
  --UNIT: 1vw; /* we need to use the same unit for all calculations. Keep variables unit-less as long as possible, and only apply units when assigning to css properties */
  --r: 5; /* radius in --UNITs of circle we'll use as reference */
  --CONTAINER-WIDTH: 100; /* container's width in --UNITs */
  
  --x: calc(var(--progress) * var(--CONTAINER-WIDTH)); /* current x-position in --UNITs */
  --ROTATION-PER-LENGTH-UNIT: calc(var(--TOTAL-ANGLE) / var(--CONTAINER-WIDTH));
  --alpha-reference-angle: calc(var(--ROTATION-PER-LENGTH-UNIT) * var(--x) * 1rad); /* current angle of reference circle */
  --y: calc(-1 * var(--r) * sin(var(--alpha-reference-angle))); /* current y-position in --UNITs; multiply by -1 because in math positive values are upward, in css downwards */

  /* for calculations, we need to use x and y without units;
  now add units so we can use them with actual css properties */
  --x-with-unit: calc(var(--x) * var(--UNIT));
  --y-with-unit: calc(var(--y) * var(--UNIT));

  /*
  to get tangent at any point on the sine curve, we need the derived function
  of the sine function. Generally, for a function of the form
  f(x) = a * sin(b * x)
  the derived function is
  f'(x) = a * b * cos( b * x)
  The angle beta corresponding to that tangent is the atan of that value.
  In our case a equals --r, 
  b equals --ROTATION-PER-LENGTH-UNIT
    */
  --tan: calc(-1 * var(--r) * var(--ROTATION-PER-LENGTH-UNIT) * cos(var(--alpha-reference-angle)));
  --beta-tangent-angle: atan(var(--tan));

  position: absolute;
   
  left: 10;
  bottom:20vh;
  width: calc(var(--CONTAINER-WIDTH) * var(--UNIT));
  animation: progress 3s alternate infinite;
  animation-delay: 2s;
 
}

.shape {
  --shape-width: 50px;
  --shape-height: 10px;
  position: absolute;
  z-index: 1;
  top: calc( -0.5 * var(--shape-height));
  left: calc( -0.5 * var(--shape-width));
  width: var(--shape-width);
  height: var(--shape-height);
 
  translate: var(--x-with-unit) var(--y-with-unit);
  rotate: var(--beta-tangent-angle);
}



/* code below for demonstration purposes only: dotted helper lines */

.shape-container--with-indicators {
  border-top: 1px dotted hotpink;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--r) * var(--UNIT));
    width: 100%;
    height: 0;
    border-top: 1px dotted #ccc;
  }

  &::after {
    top: calc(var(--r) * var(--UNIT));
  }
}