/* --- TRANSIÇÃO DE PÁGINA (View Transitions API, cross-document) --- */
/* Card central do carrossel faz morph até o hero da página de projeto.
   Degrada para navegação normal onde a API não é suportada. */

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

  /* Morph do elemento compartilhado (card -> hero).
     O view-transition-name vive no <img>, mas o arredondamento dos cards vem do
     clip do pai (.carousel-item). Sem o border-radius/overflow aqui, o snapshot
     que faz o morph teria cantos retos e só "arredondaria" ao fim. Arredondamos
     o próprio grupo (8px, igual ao .carousel-item) para casar com o card durante
     toda a transição. */
  ::view-transition-group(work-media) {
    animation-duration: 0.55s;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 8px;
    overflow: clip;
  }

  ::view-transition-old(work-media),
  ::view-transition-new(work-media) {
    height: 100%;
    object-fit: cover;
    overflow: clip;
    border-radius: 8px;
  }

  /* Bubble logo: sai na home, entra na página de work */
  ::view-transition-group(site-nav) {
    z-index: 100;
  }

  ::view-transition-old(site-nav) {
    animation: nav-exit 0.22s ease forwards;
  }

  ::view-transition-new(site-nav) {
    animation: nav-enter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.42s both;
  }

  /* Work: bubble logo entra via CSS/nav-enter.js (após hero carregar) */
  .work-page ::view-transition-new(site-nav) {
    animation: none;
    opacity: 0;
  }

  @keyframes nav-exit {
    to {
      opacity: 0;
      transform: translateY(-10px);
    }
  }

  @keyframes nav-enter {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Cross-fade do restante (dots, fundo) — nav já tem transição própria */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: ease;
  }
}

/* --- VOLTA PARA A HOME (work -> home) --- */
/* O hero faz o morph de volta para o card do carrossel. Easing com leve
   overshoot para o card "assentar" no slot, enfatizando a entrada no 3D.
   O restante da home (carrossel, dots) entra com um cross-fade um pouco mais
   suave em torno do card que pousa. */
@media (prefers-reduced-motion: no-preference) {
  :root:active-view-transition-type(nq-to-home)::view-transition-group(work-media) {
    animation-duration: 0.62s;
    animation-timing-function: cubic-bezier(0.34, 1.18, 0.42, 1);
  }

  :root:active-view-transition-type(nq-to-home)::view-transition-old(root),
  :root:active-view-transition-type(nq-to-home)::view-transition-new(root) {
    animation-duration: 0.55s;
    animation-timing-function: ease;
  }

  :root:active-view-transition-type(nq-to-home)::view-transition-new(root) {
    animation-name: nq-home-fade-in;
  }

  @keyframes nq-home-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* Feedback imediato ao clicar no card central (antes da navegação) —
   O efeito visual está em nav.css (.is-navigating .bubble-logo/toggle). */