/* Balionų fonas izoliuotas „Apie mus“ skiltyje. */
#apie {
  isolation: isolate;
}
.hero-balloons {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.hero-background-balloon {
  position: absolute;
  top: 100%;
  left: var(--left);
  width: var(--size);
  height: calc(var(--size) * 1.25);
  opacity: 0;
  animation: hero-balloon-rise var(--duration) linear infinite;
  animation-delay: var(--delay);
}
.hero-balloon-body {
  position: absolute;
  inset: 0;
  border-radius: 48% 48% 46% 46%;
  background: radial-gradient(ellipse at 30% 25%, #ffffffd9 0%, #ffffff50 10%, transparent 28%), var(--balloon-color);
  box-shadow: inset -6px -7px 12px #29233520;
  animation: hero-balloon-sway 5s ease-in-out infinite alternate;
  transform-origin: 50% 110%;
}
.hero-balloon-body::before {
  content: '';
  position: absolute;
  top: 98%;
  left: calc(50% - 4px);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--balloon-color);
}
.hero-balloon-body::after {
  content: '';
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  width: 12px;
  height: 65px;
  border-left: 1px solid #74647770;
  border-radius: 50%;
}
@keyframes hero-balloon-rise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: .4; }
  48%, 58% { opacity: 1; }
  82% { opacity: .6; }
  100% { transform: translateY(calc(-1 * var(--hero-rise, 1000px))); opacity: 0; }
}
@keyframes hero-balloon-sway {
  from { transform: translateX(-12px) rotate(-7deg); }
  to { transform: translateX(12px) rotate(7deg); }
}
.balloons-paused *, .balloons-paused {
  animation-play-state: paused;
}
@media (max-width: 760px) {
  .hero-background-balloon:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-balloons { display: none; }
}

/* Kiekvieno baliono individualus svyravimo ritmas. */
.hero-balloon-body {
  animation-duration: var(--sway-duration, 5s);
  animation-delay: var(--sway-delay, 0s);
}
@keyframes hero-balloon-sway {
  from { transform: translateX(calc(-1 * var(--sway-distance, 12px))) rotate(-7deg); }
  to { transform: translateX(var(--sway-distance, 12px)) rotate(7deg); }
}