/**
 * Cross-document View Transitions (MPA).
 * Ładowany bezpośrednio z HTML (pomija cssnano) + @import w regulamin-mjrp.css.
 */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  main,
  .page-content {
    view-transition-name: page-content;
  }

  .easy-header,
  .regulamin-page__header {
    view-transition-name: site-header;
  }

  ::view-transition-group(page-content) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  ::view-transition-group(site-header) {
    animation-duration: 0.22s;
    animation-timing-function: ease;
  }

  ::view-transition-old(site-header),
  ::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
    height: 100%;
  }

  @keyframes vt-slide-out-forward {
    to {
      opacity: 0;
      transform: translateX(-24px);
    }
  }

  @keyframes vt-slide-in-forward {
    from {
      opacity: 0;
      transform: translateX(24px);
    }
  }

  @keyframes vt-slide-out-back {
    to {
      opacity: 0;
      transform: translateX(24px);
    }
  }

  @keyframes vt-slide-in-back {
    from {
      opacity: 0;
      transform: translateX(-24px);
    }
  }

  ::view-transition-old(page-content) {
    animation-name: vt-slide-out-forward;
  }

  ::view-transition-new(page-content) {
    animation-name: vt-slide-in-forward;
  }

  html:active-view-transition-type(back) ::view-transition-old(page-content) {
    animation-name: vt-slide-out-back;
  }

  html:active-view-transition-type(back) ::view-transition-new(page-content) {
    animation-name: vt-slide-in-back;
  }

  .vt-shared-hero {
    view-transition-name: page-hero;
  }

  .vt-site-logo {
    view-transition-name: site-logo;
  }

  ::view-transition-group(page-hero),
  ::view-transition-group(site-logo) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}