/* Page enter + slide-in. Zyro CSS keeps .transition at opacity 0 until JS sets data-animation-state. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 0.32s ease both page-slide-out;
}

::view-transition-new(root) {
  animation: 0.45s cubic-bezier(0.22, 1, 0.36, 1) both page-slide-in;
}

@keyframes page-slide-out {
  to {
    opacity: 0;
    transform: translateX(-28px);
  }
}

@keyframes page-slide-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
}

body.menu-open {
  overflow: hidden;
}

.block-header-layout-mobile__dropdown--open {
  visibility: visible;
  overflow-y: auto;
  pointer-events: auto;
}

.block-header-layout-mobile__dropdown--open.block-header-layout-mobile__dropdown--full-screen {
  max-height: none;
  height: calc(100dvh - var(--header-height-mobile, 87px));
}

@media (prefers-reduced-motion: reduce) {
  .transition,
  .transition [data-animation-role],
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  @view-transition {
    navigation: none;
  }
}