.sp-ambient {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}

.sp-ambient-bee {
  position: absolute;
  display: block;
  width: 28px;
  height: 16px;
  color: #f3d48a;
  opacity: 0.55;
  will-change: transform;
}

.sp-ambient-bee svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sp-ambient-bee--1 { left: 10px; top: 18%; animation: sp-drift-a 22s ease-in-out infinite; }
.sp-ambient-bee--2 { right: 12px; top: 28%; animation: sp-drift-b 26s ease-in-out infinite; opacity: 0.5; }
.sp-ambient-bee--3 { left: 18px; top: 58%; animation: sp-drift-a 30s ease-in-out infinite reverse; opacity: 0.48; }
.sp-ambient-bee--4 { right: 16px; top: 66%; animation: sp-drift-b 24s ease-in-out infinite reverse; }
.sp-ambient-bee--5 { left: 8px; top: 82%; animation: sp-drift-c 28s linear infinite; opacity: 0.45; }

@keyframes sp-drift-a {
  0% { transform: translate3d(0, 0, 0) rotate(-10deg); }
  50% { transform: translate3d(14px, 18vh, 0) rotate(12deg); }
  100% { transform: translate3d(0, 36vh, 0) rotate(-8deg); }
}

@keyframes sp-drift-b {
  0% { transform: translate3d(0, 0, 0) rotate(8deg); }
  50% { transform: translate3d(-12px, 16vh, 0) rotate(-10deg); }
  100% { transform: translate3d(0, 32vh, 0) rotate(6deg); }
}

@keyframes sp-drift-c {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -40vh, 0); }
}

.sp-section-head__title {
  position: relative;
}

.sp-section-head__title::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 0.2em;
  width: 13px;
  height: 8px;
  pointer-events: none;
  opacity: 0.55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18' fill='none' stroke='%23e8c56b' stroke-width='1.6' stroke-linecap='round'><path d='M8 8.2c0-3.2 3.2-5 5.2-2.6'/><path d='M13.2 7.2c1.2-3.4 5.2-3.2 5.6.4'/><ellipse cx='12.2' cy='11.4' rx='6' ry='3.3'/><path d='M8.6 11.4h6.2'/><circle cx='18.6' cy='10.4' r='1.7'/><path d='M19.8 9.2 22 7.2'/></svg>") center / contain no-repeat;
  animation: sp-title-bee 3.8s ease-in-out infinite;
}

@keyframes sp-title-bee {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  50% { transform: translate3d(2px, -2px, 0) rotate(8deg); }
}

html.sp-bees-off .sp-ambient-bee,
html.sp-bees-off .sp-section-head__title::before {
  animation-play-state: paused;
}

@media (max-width: 767.98px) {
  .sp-ambient-bee--3,
  .sp-ambient-bee--4,
  .sp-ambient-bee--5,
  .sp-section-head__title::before {
    display: none;
  }

  .sp-ambient-bee {
    width: 18px;
    height: 11px;
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-ambient,
  .sp-section-head__title::before {
    display: none !important;
  }
}
