Почему не работает display на радио-кнопке по селектору :checked?
Потому что селектор неверный.
С вашей разметкой не получится добиться желаемого без js. Ибо вы хотите достучаться до элемента, который по факту находится выше чем целевой элемент.
А ваш нынешний селектор ишет вложенный в инпут заголовок(т.е. дочерний), а его как видим нет там, и не может быть
У вас проблема в sibling. Вы задаете условие видимости для следующего за инпутом блока, но там стоит лэйбл.
Решение: оберните инпут лэйблом и уже потом регулируйте
Попробуйте заменить 'border-color: #404040!important'
На 'border-color: #404040 !important'
Сначала свой вариант, а если не получится,
то потом предложенные варианты. Ибо у вас ошибка то в этом, на беглый взгляд
Анимация у вас не работает, потому что @keyframes это отдельный блок правил, а не свойство внутри селектора. Вынесите его самостоятельным блоком.
А теперь к задаче. У вас не получится анимировать фон (bg image)независимо от контейнера. Поэтому совет, вынесите bg-image к ::before/::after, предварительно его подогнав в нужное место, крутите его.
З.ы.: в гугле первый линк по запросу: rotate background image css ведет на стэк, там уже есть решение
