@keyframes main-menu-dim {
  from { color: var(--main-menu-blue); }
  to { color: #ccc; }
}

@media (min-width: 992px) {
  /* The mobile panel shows all sections together, so its links stay blue. */
  #header .topmenu {
    --main-menu-blue: #81b1cb;
    --main-menu-hover: #fff;
  }

  /* Keep the animation attached during hover so it only plays once per page. */
  body[data-main-menu="uslugi"] #header .topmenu .level-1 > li:not(:nth-child(1)) > a,
  body[data-main-menu="teh-trebovaniya"] #header .topmenu .level-1 > li:not(:nth-child(2)) > a,
  body[data-main-menu="spravka"] #header .topmenu .level-1 > li:not(:nth-child(3)) > a,
  body.contact-page #header .topmenu .level-1 > li:not(:nth-child(4)) > a,
  #header .topmenu .level-1:has(> li.selected) > li:not(.selected) > a {
    color: #ccc;
    animation: main-menu-dim 0.6s ease-out;
  }

  #header .topmenu .level-1 > li > a > span {
    color: inherit;
    transition: none !important;
  }

  #header .topmenu .level-1 > li > a:hover,
  #header .topmenu .level-1 > li > a:focus {
    color: var(--main-menu-hover) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    #header .topmenu .level-1 > li > a {
      animation: none !important;
    }
  }
}