.yalla-background-layer {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 1000 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  isolation: isolate;
  contain: none !important;
}
.yalla-background-layer .ybg__branch {
  position: absolute !important;
  top: calc(var(--ybg-top, 0px) - 10px);
  width: min(44vw, 700px);
  max-width: none;
  opacity: var(--ybg-opacity, .52);
  pointer-events: none;
  will-change: transform;
}
.yalla-background-layer .ybg__branch--left {
  left: var(--ybg-side, 0px);
  transform-origin: 0% 0%;
  animation: ybg-bend-left var(--ybg-speed, 16s) ease-in-out infinite;
}
.yalla-background-layer .ybg__branch--right {
  right: var(--ybg-side, 0px);
  transform-origin: 100% 0%;
  animation: ybg-bend-right calc(var(--ybg-speed, 16s) * 1.19) ease-in-out infinite;
}
.yalla-background-layer .ybg__leaf-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: scale(var(--ybg-scale, 1));
  transform-origin: top left;
}
.yalla-background-layer .ybg__branch--right .ybg__leaf-image { transform-origin: top right; }
@keyframes ybg-bend-left {
  0%,100% { transform: rotate(-.30deg) skewY(-.05deg); }
  28% { transform: rotate(.60deg) skewY(.16deg); }
  58% { transform: rotate(-.65deg) skewY(-.12deg); }
  78% { transform: rotate(.32deg) skewY(.07deg); }
}
@keyframes ybg-bend-right {
  0%,100% { transform: rotate(.35deg) skewY(.08deg); }
  26% { transform: rotate(-.55deg) skewY(-.13deg); }
  57% { transform: rotate(.72deg) skewY(.14deg); }
  81% { transform: rotate(-.24deg) skewY(-.06deg); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .yalla-background-layer .ybg__branch { width: min(42vw, 440px); }
  .yalla-background-layer .ybg__branch--left { left: calc(var(--ybg-side, 0px) - 6vw); }
  .yalla-background-layer .ybg__branch--right { right: calc(var(--ybg-side, 0px) - 6vw); }
}
@media(max-width:767px){
  .yalla-background-layer .ybg__branch { width: min(50vw, 310px); }
  .yalla-background-layer .ybg__branch--left { left: calc(var(--ybg-side, 0px) - 8vw); }
  .yalla-background-layer .ybg__branch--right { right: calc(var(--ybg-side, 0px) - 8vw); }
}
@media (prefers-reduced-motion: reduce) {
  .yalla-background-layer .ybg__branch {animation: none !important;}
}
.yalla-background-layer, .yalla-background-layer * { pointer-events: none !important; }

/* bottom decorations */
.yalla-background-layer .ybg__bottom {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.yalla-background-layer .ybg__item {
  position: absolute !important;
  bottom: calc(-1 * var(--ybg-bottom-bury, 32px)) !important;
  height: auto !important;
  opacity: var(--ybg-bottom-opacity, .48);
  transform-origin: 50% 100% !important;
  will-change: transform;
  pointer-events: none !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-delay: var(--ybg-delay, 0s) !important;
}
.yalla-background-layer .ybg__item img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  opacity: 1 !important;
}
.yalla-background-layer .ybg__item--left {
  left: calc(var(--ybg-bottom-inset, 8px) + var(--ybg-index, 0) * var(--ybg-bottom-gap, 72px));
}
.yalla-background-layer .ybg__item--right {
  right: calc(var(--ybg-bottom-inset, 8px) + var(--ybg-index, 0) * var(--ybg-bottom-gap, 72px));
}

/* mushrooms */
.yalla-background-layer .ybg__bottom--mushrooms .ybg__item {
  width: clamp(65px, 6.5vw, 105px);
  animation-duration: 6.5s !important;
}
.yalla-background-layer .ybg__bottom--mushrooms .ybg__item--left { animation-name: ybg-real-wind-a !important; }
.yalla-background-layer .ybg__bottom--mushrooms .ybg__item--right { animation-name: ybg-real-wind-b !important; }
.yalla-background-layer .ybg__bottom--mushrooms .ybg__item--variant-1 { width: clamp(50px, 5vw, 82px); animation-duration: 7.8s !important; }
.yalla-background-layer .ybg__bottom--mushrooms .ybg__item--variant-2 { width: clamp(61px, 5.7vw, 95px); animation-duration: 8.4s !important; }
.yalla-background-layer .ybg__bottom--mushrooms .ybg__item--variant-3 { width: clamp(54px, 5.3vw, 85px); animation-duration: 7.1s !important; }

/* herbs */
.yalla-background-layer .ybg__bottom--herbs .ybg__item {
  bottom: calc(-1 * var(--ybg-herb-bury, 56px)) !important;
}
.yalla-background-layer .ybg__bottom--herbs .ybg__item--left { animation-name: ybg-herb-sway-left !important; }
.yalla-background-layer .ybg__bottom--herbs .ybg__item--right { animation-name: ybg-herb-sway-right !important; }
.yalla-background-layer .ybg__bottom--herbs .ybg__item--variant-0 { width: clamp(72px, 7.2vw, 118px); animation-duration: 8.2s !important; }
.yalla-background-layer .ybg__bottom--herbs .ybg__item--variant-1 { width: clamp(64px, 6.2vw, 102px); animation-duration: 7.4s !important; }
.yalla-background-layer .ybg__bottom--herbs .ybg__item--variant-2 { width: clamp(60px, 5.9vw, 96px); animation-duration: 8.7s !important; }

@keyframes ybg-real-wind-a {
  0%,100% { transform: rotate(-3deg) skewX(-.8deg); }
  28% { transform: rotate(3deg) skewX(.8deg); }
  61% { transform: rotate(-2deg) skewX(-.5deg); }
  83% { transform: rotate(3.5deg) skewX(1deg); }
}
@keyframes ybg-real-wind-b {
  0%,100% { transform: rotate(2.8deg) skewX(.8deg); }
  23% { transform: rotate(-3.4deg) skewX(-1deg); }
  56% { transform: rotate(2deg) skewX(.6deg); }
  81% { transform: rotate(-3deg) skewX(-.8deg); }
}
@keyframes ybg-herb-sway-left {
  0%,100% { transform: rotate(-1.8deg) skewX(-.35deg); }
  25% { transform: rotate(2.7deg) skewX(.55deg); }
  55% { transform: rotate(-2.3deg) skewX(-.45deg); }
  78% { transform: rotate(1.2deg) skewX(.2deg); }
}
@keyframes ybg-herb-sway-right {
  0%,100% { transform: rotate(1.8deg) skewX(.35deg); }
  22% { transform: rotate(-2.8deg) skewX(-.55deg); }
  53% { transform: rotate(2.4deg) skewX(.45deg); }
  81% { transform: rotate(-1.1deg) skewX(-.2deg); }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .yalla-background-layer .ybg__item--left { left: calc(var(--ybg-bottom-inset, 8px) + var(--ybg-index, 0) * var(--ybg-bottom-gap, 72px) * .82); }
  .yalla-background-layer .ybg__item--right { right: calc(var(--ybg-bottom-inset, 8px) + var(--ybg-index, 0) * var(--ybg-bottom-gap, 72px) * .82); }
  .yalla-background-layer .ybg__bottom--mushrooms .ybg__item { width: 68px; opacity: calc(var(--ybg-bottom-opacity, .48) * .9); }
  .yalla-background-layer .ybg__bottom--mushrooms .ybg__item--variant-1 { width: 53px; }
  .yalla-background-layer .ybg__bottom--mushrooms .ybg__item--variant-2 { width: 62px; }
  .yalla-background-layer .ybg__bottom--mushrooms .ybg__item--variant-3 { width: 57px; }
  .yalla-background-layer .ybg__bottom--herbs .ybg__item--variant-0 { width: 90px; }
  .yalla-background-layer .ybg__bottom--herbs .ybg__item--variant-1 { width: 78px; }
  .yalla-background-layer .ybg__bottom--herbs .ybg__item--variant-2 { width: 72px; }
}
@media (max-width: 767px) {
  .yalla-background-layer .ybg__item--left { left: calc(var(--ybg-bottom-inset, 8px) + var(--ybg-index, 0) * var(--ybg-bottom-gap, 72px) * .58); }
  .yalla-background-layer .ybg__item--right { right: calc(var(--ybg-bottom-inset, 8px) + var(--ybg-index, 0) * var(--ybg-bottom-gap, 72px) * .58); }
  .yalla-background-layer .ybg__bottom--mushrooms .ybg__item { width: 43px; opacity: calc(var(--ybg-bottom-opacity, .48) * .8); }
  .yalla-background-layer .ybg__bottom--mushrooms .ybg__item--variant-1 { width: 35px; }
  .yalla-background-layer .ybg__bottom--mushrooms .ybg__item--variant-2 { width: 40px; }
  .yalla-background-layer .ybg__bottom--mushrooms .ybg__item--variant-3 { width: 37px; }
  .yalla-background-layer .ybg__bottom--herbs .ybg__item--variant-0 { width: 58px; }
  .yalla-background-layer .ybg__bottom--herbs .ybg__item--variant-1 { width: 50px; }
  .yalla-background-layer .ybg__bottom--herbs .ybg__item--variant-2 { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .yalla-background-layer .ybg__item { animation: none !important; transform: none !important; }
}