/* =========================================================
   TRANSIÇÃO ENTRE PÁGINAS
========================================================= */

:root {
  --color-dark: #1c1e2b;
  --color-dark-2: #11131d;
  --color-yellow: #fab117;
  --color-white: #ffffff;
  --color-gray: #8b8fa3;
  --color-light: #f3f4f7;
  --container-width: 1180px;
  --layout-max: 1440px;
  --layout-gutter: clamp(18px, 4vw, 64px);
  --border: rgba(28, 30, 43, 0.12);
}

@view-transition {
  navigation: auto;
}

/*
  Evita que a navbar seja capturada separadamente.
  Ela fará parte do snapshot completo da página.
*/

.navbar {
  view-transition-name: none;
}

/*
  Define a mesma cor em todas as camadas que podem
  aparecer durante a troca de documentos.
*/

::view-transition {
  background-color: var(--color-light);
}

::view-transition-group(root),
::view-transition-image-pair(root) {
  background-color: #f3f4f7;
}

::view-transition-image-pair(root) {
  isolation: isolate;
}

/* Página anterior */

::view-transition-old(root) {
  animation: inspire-pagina-saindo 0.18s ease-out both;
  mix-blend-mode: normal;
  backface-visibility: hidden;
}

/* Página nova */

::view-transition-new(root) {
  animation: inspire-pagina-entrando 0.3s ease-out both;
  mix-blend-mode: normal;
  backface-visibility: hidden;
}

@keyframes inspire-pagina-saindo {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes inspire-pagina-entrando {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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