@property --progress{initial-value: 0; inherits: false; syntax: "<number>";}@keyframes progress{0%{--progress: 0}to{--progress: 1}}.shape-container{--PI: 3.1415;--TOTAL-ANGLE: calc(var(--WAVE-COUNT) * 2 * var(--PI));--UNIT: 1vw;--r: 5;--CONTAINER-WIDTH: 140;--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));position:absolute;left:-10vw;z-index:5;width:calc(var(--CONTAINER-WIDTH) * var(--UNIT));animation:progress var(--duration) linear infinite;animation-delay:var(--delay);rotate:var(--rotate)}.shape{position:relative;width:var(--butterfly-width);translate:var(--x-with-unit) var(--y-with-unit);rotate:var(--beta-tangent-angle)}.butterfly-container{--RADIUS-WAVE-COUNT: .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)}@keyframes flutter{0%{transform:rotateX(0)}to{transform:rotateX(80deg)}}.butterfly{color:var(--butterfly-color)}.butterfly path{fill:currentColor}.butterfly__wing{transform-origin:center;animation:flutter var(--flutter-duration) alternate infinite}