@keyframes modit-header-enter {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modit-header-brand-enter {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.site-header {
  animation: modit-header-enter 0.6s ease both;
}

.header-brand {
  animation: modit-header-brand-enter 0.6s ease 0.2s both;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .header-brand {
    animation: none;
  }
}