.hu-bar {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.hu-brand-lockup {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hu-brand-lockup .hu-logo {
  flex-shrink: 0;
}

.hu-anniversary {
  position: relative;
  display: block;
  flex: 0 1 96px;
  min-width: 90px;
  height: 46px;
  pointer-events: none;
  isolation: isolate;
}

.hu-anniversary__divider {
  position: absolute;
  left: 0;
  top: 5px;
  width: 1px;
  height: 36px;
  background: #ffffff;
  opacity: .78;
}

.hu-anniversary__mark {
  position: absolute;
  left: 6px;
  top: -1px;
  display: block;
  width: 88px;
  height: auto;
  max-width: none;
  user-select: none;
}

.hu-anniversary__drone,
.hu-anniversary-flight__drone {
  position: absolute;
  width: 30px;
  height: auto;
  aspect-ratio: 898 / 477;
  pointer-events: none;
}

.hu-anniversary__drone {
  right: -2px;
  top: -1px;
  z-index: 3;
}

.hu-anniversary__drone-body {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

.hu-anniversary__rotor {
  --rotor-rest: 0deg;
  position: absolute;
  width: 9px;
  height: 9px;
  transform: translate(-50%,-50%) rotate(var(--rotor-rest));
  transform-origin: center;
}

.hu-anniversary__rotor::before,
.hu-anniversary__rotor::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1.25px;
  border-radius: 999px;
  background: #ffffff;
  transform: translate(-50%,-50%);
}

.hu-anniversary__rotor::after {
  transform: translate(-50%,-50%) rotate(90deg);
}

.hu-anniversary__rotor--front-left {
  left: 14%;
  top: 5%;
  --rotor-rest: 12deg;
}

.hu-anniversary__rotor--front-right {
  left: 86%;
  top: 5%;
  --rotor-rest: -12deg;
}

.hu-anniversary__rotor--rear-left {
  left: 5%;
  top: 64%;
  --rotor-rest: -8deg;
}

.hu-anniversary__rotor--rear-right {
  left: 95%;
  top: 64%;
  --rotor-rest: 8deg;
}

.hu-anniversary.is-flying + .hu-anniversary-flight .hu-anniversary__rotor--cw {
  animation: anniversary-rotor-cw 240ms linear infinite;
}

.hu-anniversary.is-flying + .hu-anniversary-flight .hu-anniversary__rotor--ccw {
  animation: anniversary-rotor-ccw 240ms linear infinite;
}

.hu-anniversary__drone .hu-anniversary__rotor {
  animation-name: none;
}

.hu-anniversary.is-preview-motion + .hu-anniversary-flight .hu-anniversary__rotor {
  animation-delay: -120ms;
  animation-play-state: paused;
}

@keyframes anniversary-rotor-cw {
  from {
    transform: translate(-50%,-50%) rotate(var(--rotor-rest));
  }
  to {
    transform: translate(-50%,-50%) rotate(calc(var(--rotor-rest) + 1turn));
  }
}

@keyframes anniversary-rotor-ccw {
  from {
    transform: translate(-50%,-50%) rotate(var(--rotor-rest));
  }
  to {
    transform: translate(-50%,-50%) rotate(calc(var(--rotor-rest) - 1turn));
  }
}

.hu-anniversary.is-flying .hu-anniversary__drone {
  animation: anniversary-legacy-complete 1ms linear both;
}

@keyframes anniversary-legacy-complete {
  from,
  to {
    transform: translate3d(0,0,0);
  }
}

.hu-anniversary-flight {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.hu-anniversary.is-flying + .hu-anniversary-flight {
  visibility: visible;
  opacity: 1;
}

.hu-anniversary.is-flying:not(.is-preview-landed) .hu-anniversary__drone {
  visibility: hidden;
}

.hu-anniversary.is-preview-landed .hu-anniversary__rotor,
.hu-anniversary.is-preview-landed + .hu-anniversary-flight .hu-anniversary__rotor {
  animation: none !important;
}

.hu-anniversary.is-preview-landed + .hu-anniversary-flight {
  visibility: hidden;
}

.hu-anniversary-flight__route {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hu-anniversary-flight__path {
  fill: none;
  stroke: none;
  opacity: 0;
}

.hu-anniversary-flight__origin {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hu-anniversary-flight__drone {
  left: 0;
  top: 0;
}

@media (min-width: 901px) {
  .header-upper.v2 .hu-brand-lockup .hu-logo {
    flex: 0 0 76px;
    width: 76px;
    max-width: 76px;
  }
}

@media (min-width: 901px) and (max-width: 1219px) {
  .hu-brand-lockup {
    flex: 0 0 176px;
    min-width: 176px;
  }

  .hu-anniversary {
    flex-basis: 96px;
  }
}

@media (min-width: 1220px) {
  .hu-anniversary-flight {
    z-index: 5;
  }

  .hu-brand-lockup {
    gap: 8px;
  }

  .hu-anniversary {
    flex-basis: 128px;
    min-width: 128px;
  }

  .hu-anniversary__divider {
    top: 3px;
    height: 40px;
  }

  .hu-anniversary__mark {
    left: 8px;
    top: -5px;
    width: 104px;
  }

  .hu-anniversary__drone,
  .hu-anniversary-flight__drone {
    width: 36px;
  }

  .hu-anniversary__drone {
    right: -2px;
    top: -3px;
  }
}

@media (max-width: 420px) {
  .hu-brand-lockup {
    gap: 4px;
  }

  .hu-anniversary {
    flex-basis: 92px;
    min-width: 92px;
  }

  .hu-anniversary__mark {
    left: 5px;
    top: 1px;
    width: 84px;
  }

  .hu-anniversary__drone,
  .hu-anniversary-flight__drone {
    width: 27px;
  }

  .hu-anniversary__drone {
    right: -1px;
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hu-anniversary__rotor {
    animation: none !important;
  }
}