/* Compact motion below the logo fits within the original header height. */
.brand-lockup { flex: 0 0 222px; width: 222px; }
.brand-lockup .brand { display: block; flex: none; width: 100%; }
.brand-lockup .brand img { width: 100%; }
.nav-transit { position: relative; width: 100%; height: 22px; }
.nav-transit-track { position: absolute; inset: 2px 0 0; overflow: hidden; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nav-transit-carrier { position: absolute; inset: 0; transform: translateX(var(--transit-rest)); }
.nav-transit-carrier > svg { display: block; position: absolute; left: -32px; top: 0; width: 32px; height: 18px; }
.nav-transit-truck { --transit-rest: 25%; --transit-delay: -2s; }
.nav-transit-ship { --transit-rest: 58%; --transit-delay: 4s; }
.nav-transit-plane { --transit-rest: 91%; --transit-delay: 10s; }
@media (prefers-reduced-motion: no-preference) {
  .nav-transit.is-enhanced .nav-transit-carrier { animation: nav-transit-cross 18s linear var(--transit-delay) infinite both; animation-play-state: paused; }
  .nav-transit.is-enhanced .nav-transit-ship > svg { animation: nav-transit-sail 3s ease-in-out infinite alternate; animation-play-state: paused; }
  .nav-transit.is-enhanced .nav-transit-plane > svg { animation: nav-transit-fly 4s ease-in-out infinite alternate; animation-play-state: paused; }
  .nav-transit.is-running .nav-transit-carrier, .nav-transit.is-running .nav-transit-carrier > svg { animation-play-state: running; }
}
@keyframes nav-transit-cross {
  0% { transform: translateX(0); opacity: 0; }
  2% { opacity: 1; }
  30% { transform: translateX(calc(100% + 32px)); opacity: 1; }
  33.333%, 100% { transform: translateX(calc(100% + 32px)); opacity: 0; }
}
@keyframes nav-transit-sail { from { transform: translateY(-.5px) rotate(-1deg); } to { transform: translateY(.5px) rotate(1deg); } }
@keyframes nav-transit-fly { from { transform: translateY(1px); } to { transform: translateY(-1px); } }
@media (min-width: 851px) and (max-width: 1150px) { .brand-lockup { flex-basis: 155px; width: 155px; } }
@media (max-width: 850px) { .brand-lockup { flex-basis: 185px; width: 185px; } }
@media (max-width: 560px) {
  .brand-lockup { flex-basis: 180px; width: 180px; }
  .nav-transit { height: 20px; }
  .nav-transit-track { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-transit-carrier, .nav-transit-carrier > svg { animation: none !important; }
}
@media print { .nav-transit { display: none; } }
