/* -------------------------------------------------------------------------- */
/* Retorno global dos projetos para a landing page Zenitify                   */
/* -------------------------------------------------------------------------- */

/*
 * O botão permanece visível durante toda a experiência sem depender da
 * navegação interna de cada projeto. As cores seguem a identidade oficial.
 */
.zenitify-return {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.15rem;
  border: 1px solid rgb(247 245 235 / 22%);
  border-radius: 999px;
  color: #f7f5eb;
  background: #0a1a3a;
  box-shadow: 0 1rem 2.8rem rgb(10 26 58 / 28%);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}

/* O sinal luminoso conecta o controle ao motivo visual da marca. */
.zenitify-return::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f7f5eb;
  box-shadow: 0 0 0.9rem rgb(247 245 235 / 78%);
}

/* O hover mantém o movimento curto para não competir com os projetos. */
.zenitify-return:hover {
  transform: translateY(-0.2rem);
  background: #1f2f5a;
  box-shadow: 0 1.25rem 3.2rem rgb(10 26 58 / 36%);
}

/* O foco permanece evidente em todos os fundos dos três portfólios. */
.zenitify-return:focus-visible {
  outline: 3px solid #f7f5eb;
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* Crédito de autoria consistente no fechamento de cada projeto              */
/* -------------------------------------------------------------------------- */

/* Centraliza a assinatura atual sem alterar o rodapé autoral de cada case. */
.zenitify-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 5.25rem;
  padding: 0.8rem 1.25rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A faixa escura recebe a assinatura creme oficial. */
.zenitify-credit--dark {
  color: rgb(247 245 235 / 58%);
  background: #090c0d;
  border-top: 1px solid rgb(247 245 235 / 12%);
}

/* A faixa clara do Atelier usa a assinatura azul oficial. */
.zenitify-credit--light {
  color: rgb(10 26 58 / 58%);
  background: #f5f0e9;
  border-top: 1px solid rgb(10 26 58 / 12%);
}

/* A largura considera a área transparente presente nos PNGs mestres. */
.zenitify-credit .zenitify-credit__logo {
  display: block;
  width: clamp(9rem, 13vw, 12rem);
  max-width: 42vw;
  height: auto;
}

/* Em celulares, o botão ocupa uma zona de toque ampla e previsível. */
@media (max-width: 600px) {
  .zenitify-return {
    right: 1rem;
    left: 1rem;
    min-height: 3.5rem;
  }
}

/* O fallback elimina deslocamentos quando o usuário reduz movimento. */
@media (prefers-reduced-motion: reduce) {
  .zenitify-return {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Saída reversa dos projetos                                                  */
/* -------------------------------------------------------------------------- */

/* A camada cobre o projeto de cima para baixo antes de voltar à LP. */
.zenitify-route-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* Enquanto visível, a cobertura impede novos cliques concorrentes. */
.zenitify-route-transition.is-shown {
  visibility: visible;
  pointer-events: auto;
}

.zenitify-route-transition__backdrop,
.zenitify-route-transition__fill {
  position: absolute;
  inset: 0;
}

/* A sombra antecipa a mudança sem provocar um corte abrupto. */
.zenitify-route-transition__backdrop {
  opacity: 0;
  background: rgb(10 26 58 / 28%);
  transition: opacity 500ms ease;
}

/* O preenchimento cresce no sentido contrário ao acesso aos projetos. */
.zenitify-route-transition__fill {
  background: #f7f5eb;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 760ms cubic-bezier(0.76, 0, 0.24, 1);
}

.zenitify-route-transition.is-covering .zenitify-route-transition__backdrop {
  opacity: 1;
}

.zenitify-route-transition.is-covering .zenitify-route-transition__fill {
  transform: scaleY(1);
}

/* O conteúdo desce discretamente enquanto a cobertura avança. */
body.zenitify-page-leaving > header,
body.zenitify-page-leaving > main,
body.zenitify-page-leaving > footer {
  transform: translateY(7vh);
  transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1);
}

/* O CTA sai antes da navegação para não permanecer sobre a cobertura. */
body.zenitify-page-leaving .zenitify-return {
  opacity: 0;
  transform: translateY(1rem);
}

/* A rolagem é congelada somente durante os milissegundos de saída. */
body.zenitify-page-leaving {
  overflow: hidden;
}

/* Movimento reduzido preserva a navegação sem cobertura prolongada. */
@media (prefers-reduced-motion: reduce) {
  .zenitify-route-transition__backdrop,
  .zenitify-route-transition__fill,
  body.zenitify-page-leaving > header,
  body.zenitify-page-leaving > main,
  body.zenitify-page-leaving > footer {
    transition: none;
  }
}