@property --progress {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}

@keyframes progress {
  from { --progress: 0; }
  to { --progress: 1; }
}

@keyframes flutter {
  from { transform: rotateX(0); }
  to { transform: rotateX(80deg); }
}

.shape-container {
  --PI: 3.1415;
  --TOTAL-ANGLE: calc(var(--WAVE-COUNT) * 2 * var(--PI));
  --UNIT: 1vw;
  --r: 5;
  --CONTAINER-WIDTH: 120;
  
  --x: calc(var(--progress) * var(--CONTAINER-WIDTH));
  --ROTATION-PER-LENGTH-UNIT: calc(var(--TOTAL-ANGLE) / var(--CONTAINER-WIDTH));
  --alpha-reference-angle: calc(var(--ROTATION-PER-LENGTH-UNIT) * var(--x) * 1rad + var(--RANDOM-START-ANGLE) * 1rad);
  --y: calc(-1 * var(--r) * sin(var(--alpha-reference-angle)));
  
  --x-with-unit: calc(var(--x) * var(--UNIT));
  --y-with-unit: calc(var(--y) * var(--UNIT));
  
  --tan: calc(-1 * var(--r) * var(--ROTATION-PER-LENGTH-UNIT) * cos(var(--alpha-reference-angle)));
  --beta-tangent-angle: atan(var(--tan));

  opacity: 1; /* Añadimos opacidad inicial */
  position: fixed;
  top: 100px;
  left: -5vw;
  width: calc(var(--CONTAINER-WIDTH) * var(--UNIT));
  animation: progress var(--duration) linear infinite;
  animation-delay: var(--delay, 0);
  rotate: var(--rotate, 0);
}

.shape {
  --shape-width: 50px;
  --shape-height: 10px;
  position: absolute;
  z-index: 9999; /* Cambiado de 1 a 9999 para que aparezca sobre todos los elementos */
  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);
}

.butterfly-container {
  --RADIUS-WAVE-COUNT: 0.5;
  --RADIUS-TOTAL-ANGLE: calc(var(--RADIUS-WAVE-COUNT) * 2 * var(--PI));
  --r-min: 2;
  --r-max: 10;
  --delta-r: calc(var(--r-max) - var(--r-min));
  --gamma-reference-angle: calc(var(--progress) * var(--RADIUS-TOTAL-ANGLE));
  --r: calc(var(--r-min) + var(--delta-r) * sin(var(--gamma-reference-angle)));
  
  top: var(--top, 40vh);
}

.butterfly {
  width: var(--butterfly-width);
  background: none;
  color: var(--butterfly-color, hotpink);
}

.butterfly path {
  fill: currentColor;
}

.butterfly__wing {
  transform-origin: center center;
  animation: flutter var(--flutter-duration) alternate infinite;
}