/* -------------------------------------------------------------------------- */
/* Movimento editorial exclusivo da landing page                              */
/* -------------------------------------------------------------------------- */

/* As palavras entram de cima para baixo, criando a sensação de queda suave. */
.app-shell .reveal-words.is-prepared .word {
  transform: translateY(-125%) rotate(-1.5deg);
  transform-origin: center top;
}

/* O estado observado conclui a queda e mantém a regra restrita à LP. */
.app-shell .reveal-words.is-prepared.is-visible .word {
  transform: translateY(0) rotate(0);
}

/* A variação rise do sistema é invertida somente dentro da LP. */
.app-shell [data-reveal="rise"] {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(-5rem) scale(0.985);
  transition:
    opacity 1s var(--fall-delay, 0ms),
    filter 1.2s var(--fall-delay, 0ms),
    transform 1.7s var(--fall-delay, 0ms) var(--ease-expo);
}

/* O estado final remove desfoque e deslocamento sem manter resíduos. */
.app-shell [data-reveal="rise"].is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Elementos sem data-reveal recebem a mesma linguagem por observação local. */
.lp-fall-reveal {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(-4.5rem) scale(0.99);
  transition:
    opacity 0.95s var(--fall-delay, 0ms),
    filter 1.15s var(--fall-delay, 0ms),
    transform 1.65s var(--fall-delay, 0ms) var(--ease-expo);
  will-change: opacity, filter, transform;
}

/* A classe é aplicada uma única vez quando o bloco alcança o viewport. */
.lp-fall-reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Os CTAs extras preservam ritmo e alinhamento entre as seções comerciais. */
.section-cta {
  display: flex;
  align-items: center;
  margin-top: 6rem;
}

/* A variação finaliza a leitura da seção no mesmo eixo direito. */
.section-cta--end {
  justify-content: flex-end;
}

/* O apoio dos depoimentos agrupa texto e decisão na segunda coluna. */
.spatial-head__aside {
  display: grid;
  justify-items: start;
  gap: 2.4rem;
  margin-top: 3rem;
}

/* Replica a hierarquia editorial anteriormente aplicada ao parágrafo direto. */
.spatial-head__aside p {
  max-width: 34ch;
  margin: 0;
  color: var(--color-muted);
  line-height: 1.65;
}

/* -------------------------------------------------------------------------- */
/* Chegada reversa após retornar de um projeto                                 */
/* -------------------------------------------------------------------------- */

/* O hash é posicionado instantaneamente e escondido pela cobertura inicial. */
html.is-portfolio-return-lock {
  scroll-behavior: auto !important;
}

/* A marca criada no head impede qualquer quadro visível antes da seção correta. */
html.is-portfolio-return-pending .route-transition {
  display: block;
}

html.is-portfolio-return-pending .route-transition__backdrop {
  opacity: 1;
  transition: none;
}

html.is-portfolio-return-pending .route-transition__fill {
  opacity: 1;
  transform: scaleY(1);
  transform-origin: bottom;
  transition: none;
}

/* A cobertura começa completa para continuar o gesto iniciado no portfólio. */
.route-transition.is-return-arrival {
  display: block;
}

.route-transition.is-return-arrival .route-transition__backdrop {
  opacity: 1;
}

.route-transition.is-return-arrival .route-transition__fill {
  opacity: 1;
  transform: scaleY(1);
  transform-origin: bottom;
}

/* A tela é revelada de cima para baixo, no sentido oposto da cobertura. */
.route-transition.is-return-arrival.is-uncovering .route-transition__fill {
  opacity: 1;
  transform: scaleY(0);
}

.route-transition.is-return-arrival.is-uncovering .route-transition__backdrop {
  opacity: 0;
}

/* O conteúdo acompanha a abertura com um deslocamento curto e controlado. */
.app-shell.is-return-arriving {
  transform: translateY(-6vh);
}

.app-shell.is-return-arriving.is-return-settled {
  transform: none;
  transition: transform 0.9s var(--ease-cover);
}

/* Em telas estreitas, os CTAs permanecem grandes e fáceis de tocar. */
@media (max-width: 767px) {
  .section-cta,
  .section-cta--end {
    justify-content: stretch;
  }

  .section-cta .ds-button,
  .spatial-head__aside .ds-button {
    width: 100%;
  }

  .spatial-head__aside {
    margin-top: 2.4rem;
  }
}

/* O fallback entrega todo o conteúdo sem transições ou desfoque. */
@media (prefers-reduced-motion: reduce) {
  .app-shell [data-reveal="rise"],
  .lp-fall-reveal,
  .app-shell.is-return-arriving {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}