@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

:root.a11y-reduced-stimuli::view-transition-group(*),
:root.a11y-reduced-stimuli::view-transition-old(*),
:root.a11y-reduced-stimuli::view-transition-new(*) {
  animation: none !important;
}

@keyframes hart-menu-hart {
  from { transform: scale(1.023); }
  to   { transform: scale(1); }
}

@keyframes hart-menu-slag {
  0%    { transform: scale(1); }
  10%   { transform: scale(1.0075); }
  22.6% { transform: scale(1); }
  32.7% { transform: scale(1.0045); }
  47.7% { transform: scale(1); }
  100%  { transform: scale(1); }
}

.menuContainer.is-open {
  background-image: none;
}

.menuContainer.is-open::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  z-index: -1;

  background-image: url("../img/menu-hart.svg");
  background-repeat: no-repeat;
  background-position: right -598px bottom -830px;
  background-size: 1784px 1467px;

  transform-origin: calc(100% - 294px) calc(100% + 96.5px);

  animation:
    hart-menu-hart 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) both,
    hart-menu-slag 8.6s ease-in-out 1.6s infinite;
}

@keyframes hart-paneel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.single-form:not(.hidden) {
  animation: hart-paneel-in 220ms ease-out both;
}

.hart-anim-item {
  opacity: 0;
  transform: translateY(14px);
}

.hart-anim-item.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 500ms ease-out var(--hart-anim-vertraging, 0ms),
    transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--hart-anim-vertraging, 0ms);
}