/* Navegação progressiva: links continuam usando o carregamento nativo. */
@view-transition {
  navigation: auto;
}

@supports (view-transition-name: page-main) {
  .header { view-transition-name: site-header; }
  #principal { view-transition-name: page-main; }
  .site-footer { view-transition-name: site-footer; }

  /* Marca e homenagem permanecem estáveis enquanto o conteúdo muda. */
  ::view-transition-group(root),
  ::view-transition-group(site-header),
  ::view-transition-group(site-footer),
  ::view-transition-group(page-main) {
    animation: none;
  }
  ::view-transition-old(root),
  ::view-transition-old(site-header),
  ::view-transition-old(site-footer) {
    display: none;
  }
  ::view-transition-new(root),
  ::view-transition-new(site-header),
  ::view-transition-new(site-footer) {
    animation: none;
  }
  ::view-transition-old(page-main),
  ::view-transition-new(page-main) {
    height: 100%;
    object-fit: none;
    object-position: top left;
    mix-blend-mode: normal;
  }
  ::view-transition-old(page-main) {
    animation: page-content-out 120ms ease-out both;
  }
  ::view-transition-new(page-main) {
    animation: page-content-in 240ms cubic-bezier(.22,1,.36,1) both;
  }
}

@keyframes page-content-out {
  to { opacity: 0; }
}
@keyframes page-content-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Estados perceptíveis sem deslocar ou redimensionar os links. */
.header nav a:not(.nav-contact):focus-visible {
  color: var(--blue);
  background-color: rgba(18,63,85,.07);
  box-shadow: 0 0 0 5px rgba(18,63,85,.07);
}
.header nav a:active { transform: translateY(1px); }
.header .menu-toggle {
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.header .menu-toggle[aria-expanded="true"] {
  background-color: #e4edef;
  border-color: #7695a1;
}
.header .menu-toggle:active { background-color: #d5e3e7; }

@keyframes menu-panel-in {
  from { opacity: .35; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes menu-item-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
  .js .header nav.is-open {
    animation: menu-panel-in 200ms cubic-bezier(.22,1,.36,1) backwards;
  }
  .js .header nav.is-open a {
    animation: menu-item-in 240ms cubic-bezier(.22,1,.36,1) backwards;
  }
  .js .header nav.is-open a:nth-child(2) { animation-delay: 25ms; }
  .js .header nav.is-open a:nth-child(3) { animation-delay: 50ms; }
  .js .header nav.is-open a:nth-child(4) { animation-delay: 75ms; }
  .js .header nav.is-open:focus-within,
  .js .header nav.is-open a:focus-visible { animation: none; }
}

@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  html, .header, #principal, .site-footer { view-transition-name: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .js .header nav.is-open,
  .js .header nav.is-open a { animation: none !important; }
  .header .menu-toggle { transition: none; }
  .header nav a:active { transform: none; }
}