/* Paint cloud layers once, then composite their movement independently. */
.sky-entrance{position:fixed;inset:0;z-index:10050;pointer-events:none;overflow:hidden;contain:strict}
.sky-entrance[hidden]{display:none!important}
.sky-entrance-wing{position:absolute;top:-10%;bottom:-10%;width:64%;will-change:transform;transform:translate3d(0,0,0)}
.sky-entrance-wing svg{width:100%;height:100%;display:block}
.sky-entrance-left{left:-2%}
.sky-entrance-right{right:-2%}
.sky-entrance-right svg{transform:scaleX(-1)}
@media(prefers-reduced-motion:reduce){.sky-entrance{display:none}}
@media print{.sky-entrance{display:none}}

.sky-entrance-leaf{position:fixed;left:0;top:0;width:34px;height:56px;z-index:10051;pointer-events:none;will-change:transform,opacity;opacity:0;transform-origin:40% 88%;filter:drop-shadow(2px 5px 3px #113a5720)}
.sky-entrance-leaf svg{display:block;width:100%;height:100%}
@media(max-width:540px){.sky-entrance-leaf{width:28px;height:47px}}
@media(prefers-reduced-motion:reduce){.sky-entrance-leaf{display:none}}
@media print{.sky-entrance-leaf{display:none}}

/* The travelling leaf stays below dialogs and settles into the footer itself. */
.sky-entrance-leaf.leaf-on-journey{z-index:40}
.foot{position:relative}
.sky-entrance-leaf.leaf-resting{position:absolute;left:82%;top:auto;bottom:16px;z-index:1;opacity:1;transform:translateX(-40%) rotate(60deg);will-change:auto}
.leaf-resting svg{transform-origin:40% 88%;animation:footerLeafBreeze 5.8s ease-in-out infinite}
.leaf-resting.leaf-asleep svg{animation-play-state:paused}
@keyframes footerLeafBreeze{0%,100%{transform:rotate(-4deg)}35%{transform:rotate(5deg) translateY(-1px)}65%{transform:rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.leaf-resting svg{animation:none}}