@property --progress{initial-value:1;inherits:false;syntax:'<number>';}@keyframes progress{from{--progress:1;}to{--progress:0;}}@property --progress-reverse{initial-value:1;inherits:false;syntax:'<number>';}@keyframes progress-reverse{from{--progress:0;}to{--progress:1;}}.shape-container{--PI:3.1415;--WAVE-COUNT:2;--TOTAL-ANGLE:calc(var(--WAVE-COUNT) * 2 * var(--PI));--UNIT:1vw;--r:5;--CONTAINER-WIDTH:100;--CONTAINER-OFFSET-X:calc(100 - var(--CONTAINER-WIDTH));--x:calc(var(--progress) * var(--CONTAINER-WIDTH) + var(--CONTAINER-OFFSET-X));--ROTATION-PER-LENGTH-UNIT:calc(var(--TOTAL-ANGLE) / var(--CONTAINER-WIDTH));--alpha-reference-angle:calc(var(--ROTATION-PER-LENGTH-UNIT) * var(--x) * 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:fixed;top:var(--destY);width:calc(var(--CONTAINER-WIDTH) * var(--UNIT));}.shape-container.ltr{--x:calc(var(--progress) * var(--CONTAINER-WIDTH) + var(--CONTAINER-OFFSET-X));left:50%;translate:-50vw 0;animation:progress 5s ease-out forwards;}.shape-container.rtl{--x:calc(var(--progress) * var(--CONTAINER-WIDTH));left:0;animation:progress-reverse 5s ease-out forwards;}.butterfly-compound{position:absolute;z-index:1;translate:var(--x-with-unit) var(--y-with-unit);rotate:var(--beta-tangent-angle);scale:0.5;}.butterfly-container{--RADIUS-ANIMATION-ANGLE:var(--PI);--r-min:2;--r-max:3;--delta-r:calc(var(--r-max) - var(--r-min));--gamma-reference-angle:calc(var(--progress) * var(--RADIUS-ANIMATION-ANGLE));--r:calc(var(--r-min) + var(--delta-r) * sin(var(--gamma-reference-angle)));}:root{--color-wing:#009aa3ee;--color-sub-wing:#00cbd7cc;--color-background:#fff;--color_butterfly:#5b4a20;--destX:50vw;--destY:50vh;--flap-duration:250ms;--flap-delay:0ms;--flap-iterations:infinite;--flap-direction:alternate;--flap-fill-mode:reverse;--flap-timing-function-landed:cubic-bezier(0.5,-0.5,1.0,1.5);--flap-left-degree-begin:-20deg;--flap-left-degree-end:90deg;--flap-right-degree-begin:200deg;--flap-right-degree-end:90deg;}body.preload .shape-container{animation-duration:0s !important;}.flutterby{position:relative;display:block;}.flutterby.disappear{animation:fadeout 1s ease-out;}.flutterby.disappeared{display:none;.butterfly,.wing,.shadow{animation:none;}}body.preload .flutterby{display:none;}.butterfly{animation:hover 250ms cubic-bezier(.48,.01,.54,1) infinite;animation-direction:alternate;animation-fill-mode:reverse;position:relative;transform-style:preserve-3d;transform:rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateY(0px);width:15px;&::before{background:var(--color_butterfly);border-radius:50%;content:'';display:block;height:55px;left:50%;margin-left:-5px;outline:1px solid transparent;position:absolute;top:-7.5px;transform:rotatey(100deg);width:20px;z-index:2;}}.butterfly-compound{position:fixed;display:inline-block;}.shape-container.rtl .butterfly-compound{transform:scale(-1,1);}.butterfly-compound.landed{transition:transform 0.5s ease-out,rotate 0.5s ease-out,width 0.5s ease-out;rotate:0deg;}.butterfly-compound.landed .butterfly::before{width:10px;}.shadow{animation:shadow 250ms cubic-bezier(.48,.01,.54,1) infinite;animation-direction:alternate;animation-fill-mode:reverse;background:#000;border-radius:50%;display:block;height:5px;opacity:0.01;transform-origin:50% 50%;transform:translateX(-20px) translateY(50px);width:50px;}.wing{background:#888;display:block;opacity:0.7;outline:1px solid transparent;position:absolute;top:0;&:first-child{animation:leftflap var(--flap-duration) cubic-bezier(.48,.01,.54,1);animation-direction:var(--flap-direction);animation-fill-mode:var(--flap-fill-mode);animation-delay:var(--flap-delay);animation-iteration-count:var(--flap-iterations);height:0.5px;left:0;transform:rotateY(var(--flap-left-degree-begin));transform-origin:700% 50%;width:0.5px;z-index:3;}&:last-child{animation:rightflap var(--flap-duration) cubic-bezier(.48,.01,.54,1);animation-direction:var(--flap-direction);animation-fill-mode:var(--flap-fill-mode);animation-delay:var(--flap-delay);animation-iteration-count:var(--flap-iterations);right:0;transform:rotateY(var(--flap-right-degree-begin));z-index:1;}&:first-child.inactive,&:last-child.inactive{animation:none;}.bit{background:var(--color-wing);}.bit::after{background:var(--color-sub-wing);}.bit,.bit::after{border-radius:50%;overflow:hidden;position:absolute;right:0;top:0;transform-origin:100% 50%;}.bit:first-child{height:35px;text-align:center;top:7.5px;transform:rotateZ(40deg);width:65px;&::after{content:'';display:inline-block;height:30px;left:-15px;top:2.5px;width:50px;}}.bit:last-child{height:27.5px;transform:rotateZ(-40deg);width:50px;&::after{content:'';display:inline-block;height:22.5px;left:-12px;top:2.5px;width:30px;z-index:1;}}}.landed .wing{--flap-direction:alternate-reverse;--flap-fill-mode:both;--flap-left-degree-begin:10deg;--flap-right-degree-begin:170deg;animation-timing-function:var(--flap-timing-function-landed);}@keyframes hover{0%{transform:rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateZ(0px);}100%{transform:rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateZ(-1.5px);}}@keyframes shadow{0%{transform:translateX(-20px) translateY(50px) scale(1,1);}100%{transform:translateX(-20px) translateY(50px) scale(1.1,1.1);}}@keyframes leftflap{0%{transform:rotateY(var(--flap-left-degree-begin));}100%{transform:rotateY(var(--flap-left-degree-end));}}@keyframes rightflap{0%{transform:rotateY(var(--flap-right-degree-begin));}100%{transform:rotateY(var(--flap-right-degree-end));}}@keyframes fadeout{0%{opacity:1;}100%{opacity:0;}}