/* The scene keeps the original hive's footprint in the newspaper masthead. */
.hive-scene {
  --bee-step: 1px;
  position: relative;
  display: block;
  flex: none;
  width: 43px;
  height: 40px;
  overflow: visible;
  line-height: 0;
  isolation: isolate;
  pointer-events: none;
}

.hive-scene > .hive-emblem {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.mini-hive .hive-scene {
  width: 100%;
  height: 100%;
}

/* Reused hive marks stay plain; the playful bees belong to the masthead. */
.hive-scene .hive-bee {
  display: none;
}

.brand-prefix .hive-scene .hive-bee {
  position: absolute;
  z-index: 2;
  display: block;
  width: 16px;
  height: 13px;
  overflow: visible;
  transform-origin: 50% 50%;
}

.brand-prefix .hive-bee-one {
  left: -14%;
  top: 25%;
  transform: translate(0, 0) rotate(-8deg);
}

.brand-prefix .hive-scene .hive-bee-two {
  left: 77%;
  top: 54%;
  width: 15px;
  height: 12px;
  transform: translate(0, 0) rotate(12deg) scaleX(-1);
}

.hive-bee .bee-wings {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* One greeting per page load. Both bees are fully still after 4.35 seconds. */
@media (prefers-reduced-motion: no-preference) {
  .brand-prefix .hive-bee-one {
    animation: hive-bee-flight-one 3.8s ease-in-out 0s 1 both;
  }

  .brand-prefix .hive-bee-two {
    animation: hive-bee-flight-two 4.2s ease-in-out .15s 1 both;
  }

  .brand-prefix .hive-bee-one .bee-wings {
    animation: hive-bee-wing-flutter .16s ease-in-out 0s 20;
  }

  .brand-prefix .hive-bee-two .bee-wings {
    animation: hive-bee-wing-flutter .16s ease-in-out .15s 23;
  }
}

@keyframes hive-bee-flight-one {
  0% { transform: translate(calc(-3 * var(--bee-step)), calc(6 * var(--bee-step))) rotate(-12deg); }
  18% { transform: translate(calc(5 * var(--bee-step)), calc(-10 * var(--bee-step))) rotate(-20deg); }
  36% { transform: translate(calc(22 * var(--bee-step)), calc(-14 * var(--bee-step))) rotate(8deg); }
  52% { transform: translate(calc(38 * var(--bee-step)), calc(-2 * var(--bee-step))) rotate(22deg); }
  70% { transform: translate(calc(20 * var(--bee-step)), calc(12 * var(--bee-step))) rotate(5deg); }
  84% { transform: translate(calc(5 * var(--bee-step)), calc(5 * var(--bee-step))) rotate(-16deg); }
  100% { transform: translate(0, 0) rotate(-8deg); }
}

/* The second bee takes a small looping detour, then wobbles into place. */
@keyframes hive-bee-flight-two {
  0% { transform: translate(0, 0) rotate(12deg) scaleX(-1); }
  15% { transform: translate(calc(3 * var(--bee-step)), calc(-7 * var(--bee-step))) rotate(-6deg) scaleX(-1); }
  28% { transform: translate(calc(-3 * var(--bee-step)), calc(-13 * var(--bee-step))) rotate(-18deg) scaleX(-1); }
  38% { transform: translate(calc(-12 * var(--bee-step)), calc(-12 * var(--bee-step))) rotate(-25deg) scaleX(-1); }
  48% { transform: translate(calc(-17 * var(--bee-step)), calc(-4 * var(--bee-step))) rotate(14deg) scaleX(-1); }
  58% { transform: translate(calc(-12 * var(--bee-step)), var(--bee-step)) rotate(-18deg) scaleX(-1); }
  68% { transform: translate(calc(-4 * var(--bee-step)), calc(-4 * var(--bee-step))) rotate(18deg) scaleX(-1); }
  78% { transform: translate(calc(3 * var(--bee-step)), calc(-9 * var(--bee-step))) rotate(5deg) scaleX(-1); }
  88% { transform: translate(calc(-1 * var(--bee-step)), calc(2 * var(--bee-step))) rotate(19deg) scaleX(-1); }
  94% { transform: translate(var(--bee-step), calc(-1 * var(--bee-step))) rotate(7deg) scaleX(-1); }
  100% { transform: translate(0, 0) rotate(12deg) scaleX(-1); }
}

@keyframes hive-bee-wing-flutter {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(.55) rotate(-8deg); }
}

@media (max-width: 760px) {
  .brand-prefix .hive-scene {
    --bee-step: .68px;
    width: 28px;
    height: 28px;
  }

  .brand-prefix .hive-scene .hive-bee {
    width: 12px;
    height: 10px;
  }

  .brand-prefix .hive-scene .hive-bee-two {
    width: 11px;
    height: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-prefix .hive-bee,
  .brand-prefix .hive-bee .bee-wings {
    animation: none !important;
  }
}

@media print {
  .hive-scene .hive-bee {
    display: none !important;
    animation: none !important;
  }

  .hive-bee .bee-wings {
    animation: none !important;
  }
}