/* Motion. Hidden only under html.js, which main.js itself sets. */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
body.elementor-editor-active .reveal,body.elementor-editor-active .reveal.in{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* the monarchs (main.js builds them; there is nothing here without it) */
.monarchs{position:absolute;inset:0;z-index:2;pointer-events:none}
.fly{position:absolute;left:0;top:0;display:block;width:var(--s,64px);height:calc(var(--s,64px) * .645);perspective:220px;will-change:transform;filter:drop-shadow(0 6px 5px rgba(40,24,12,.4))}
.fly i{position:absolute;top:0;left:0;width:50%;height:100%;background:url(../img/monarch-l.webp) center/100% 100% no-repeat;transform-origin:100% 50%;animation:mi-flap-l var(--f,.16s) ease-in-out infinite alternate}
.fly i + i{left:50%;background-image:url(../img/monarch-r.webp);transform-origin:0 50%;animation-name:mi-flap-r}
.fly.is-rest i{animation-duration:1.5s}
@keyframes mi-flap-l{from{transform:rotateY(6deg)}to{transform:rotateY(74deg)}}
@keyframes mi-flap-r{from{transform:rotateY(-6deg)}to{transform:rotateY(-74deg)}}