/* -------------------------------------------------------------------------- */
/* Aviso compartilhado para experiências demonstrativas do portfólio          */
/* -------------------------------------------------------------------------- */

/* O bloqueio temporário evita rolagem concorrente enquanto o aviso está aberto. */
body.zenitify-portfolio-modal-open {
  overflow: hidden;
}

/* A camada fixa fica acima das interfaces de cada case sem alterar seu layout. */
.zenitify-portfolio-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
}

/* O atributo nativo mantém o diálogo fora da árvore visual e de foco quando fechado. */
.zenitify-portfolio-modal[hidden] {
  display: none;
}

/* O fundo reduz distrações, mas preserva a percepção da experiência original. */
.zenitify-portfolio-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(4 10 24 / 72%);
  cursor: default;
  opacity: 0;
  transition: opacity 280ms ease;
}

/* O painel usa a paleta Zenitify para deixar clara a natureza institucional do aviso. */
.zenitify-portfolio-modal__panel {
  position: relative;
  width: min(100%, 34rem);
  padding: clamp(2rem, 5vw, 3.25rem);
  overflow: hidden;
  border: 1px solid rgb(247 245 235 / 20%);
  border-radius: 1.75rem;
  color: #f7f5eb;
  background: #0a1a3a;
  box-shadow: 0 2rem 6rem rgb(0 0 0 / 36%);
  opacity: 0;
  transform: translateY(1rem) scale(0.98);
  transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1), transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Um brilho discreto retoma o sinal luminoso do botão de retorno. */
.zenitify-portfolio-modal__panel::before {
  position: absolute;
  top: -7rem;
  right: -6rem;
  width: 17rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(247 245 235 / 8%);
  content: "";
  pointer-events: none;
}

/* A classe é adicionada após a primeira pintura para liberar a entrada suave. */
.zenitify-portfolio-modal.is-visible .zenitify-portfolio-modal__backdrop,
.zenitify-portfolio-modal.is-visible .zenitify-portfolio-modal__panel {
  opacity: 1;
}

/* O painel conclui o deslocamento somente quando o modal se torna visível. */
.zenitify-portfolio-modal.is-visible .zenitify-portfolio-modal__panel {
  transform: translateY(0) scale(1);
}

/* O estado de saída preserva o mesmo deslocamento curto e dissolução da entrada. */
.zenitify-portfolio-modal.is-closing .zenitify-portfolio-modal__backdrop {
  opacity: 0;
}

/* O painel volta discretamente à sua posição inicial antes de sair da árvore visual. */
.zenitify-portfolio-modal.is-closing .zenitify-portfolio-modal__panel {
  opacity: 0;
  transform: translateY(1rem) scale(0.98);
}

/* O rótulo contextual cria hierarquia sem competir com a mensagem principal. */
.zenitify-portfolio-modal__eyebrow {
  position: relative;
  margin: 0;
  color: rgb(247 245 235 / 64%);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* O título explica o contexto antes da ressalva sobre funções simuladas. */
.zenitify-portfolio-modal__title {
  position: relative;
  max-width: 14ch;
  margin: 1.35rem 0 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

/* A descrição usa contraste reduzido, mas passa o aviso de forma direta. */
.zenitify-portfolio-modal__description {
  position: relative;
  max-width: 34ch;
  margin: 1.5rem 0 0;
  color: rgb(247 245 235 / 70%);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* O fechamento principal oferece uma área de toque ampla e previsível. */
.zenitify-portfolio-modal__action {
  position: relative;
  min-height: 3.25rem;
  margin-top: 2rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #0a1a3a;
  background: #f7f5eb;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 220ms ease, background-color 220ms ease;
}

/* O hover confirma a resposta sem competir com o restante do painel. */
.zenitify-portfolio-modal__action:hover {
  background: #e6ebf5;
  transform: translateY(-0.15rem);
}

/* O fechamento secundário fica no canto e mantém um alvo de toque completo. */
.zenitify-portfolio-modal__close {
  position: absolute;
  z-index: 1;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 2.75rem;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(247 245 235 / 28%);
  border-radius: 50%;
  color: #f7f5eb;
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

/* Ambos os controles exibem foco suficiente sobre o fundo azul institucional. */
.zenitify-portfolio-modal__action:focus-visible,
.zenitify-portfolio-modal__close:focus-visible {
  outline: 3px solid #f7f5eb;
  outline-offset: 3px;
}

/* Movimento reduzido mantém o conteúdo imediato sem retirar o diálogo. */
@media (prefers-reduced-motion: reduce) {
  .zenitify-portfolio-modal__backdrop,
  .zenitify-portfolio-modal__panel,
  .zenitify-portfolio-modal__action {
    transition: none;
  }
}