/* Motion do portfólio. Só age com .motion-ready (adicionada pelo Motion.jsx),
   então sem JavaScript ou com "reduzir movimento" o conteúdo aparece parado. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.motion-ready {
  scroll-behavior: smooth;
}

/* ---------- Texto dividido (títulos grandes e título do case) ---------- */
.split {
  display: inline;
}
.split-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Folga para ascendentes, descendentes e acentos não serem cortados. */
  padding: 0.12em 0.03em 0.16em;
  margin: -0.12em -0.03em -0.16em;
}
.split-item {
  display: inline-block;
}
.motion-ready [data-split] .split-item {
  /* 140%: as letras da serifa são mais altas que a linha (line-height 90%). */
  transform: translate3d(0, 140%, 0) rotate(4deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition:
    transform 1.15s var(--ease-out) calc(var(--i) * 45ms),
    opacity 0.7s var(--ease-soft) calc(var(--i) * 45ms);
}
.motion-ready .case-title .split-item {
  transition-delay: calc(var(--i) * 70ms + 120ms);
}
.motion-ready [data-split].is-in .split-item {
  transform: none;
  opacity: 1;
}

/* Parallax do título grande: só se desloca para cima (nunca para baixo),
   para não encostar na linha que fecha o título. */
.motion-ready [data-parallax] {
  transform: translate3d(0, calc(min(var(--p, 0), 0) * 46px), 0);
  will-change: transform;
}

/* ---------- Reveal ao rolar ---------- */
.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.9s var(--ease-soft) var(--d, 0ms),
    transform 1.1s var(--ease-out) var(--d, 0ms);
}
.motion-ready .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Capas: entram com um fade curto e um leve zoom que se resolve. Começam antes
   de chegar à tela (Motion.jsx), então não aparece espaço em branco. O fundo
   cinza cobre o instante em que a imagem ou o vídeo ainda está carregando. */
.case-cover,
.feature-media {
  background: #f2f2f0;
}
.motion-ready .case-cover.reveal,
.motion-ready .feature-media.reveal {
  transform: none;
  transition: opacity 0.8s var(--ease-soft);
}
/* Parallax dentro das capas, com uma leve suavização. */
.case-cover,
.feature-media {
  overflow: hidden;
}
.motion-ready .case-cover img,
.motion-ready .case-cover video,
.motion-ready .feature-media img,
.motion-ready .feature-media video {
  transform: translate3d(0, calc(var(--p, 0) * -5%), 0) scale(calc(1.1 * var(--hover, 1)));
  transition: transform 0.7s var(--ease-out);
  will-change: transform;
}
.feature-media:hover img,
.feature-media:hover video {
  --hover: 1.025;
}

/* ---------- Hovers ---------- */
.arrow,
.arrow-back {
  display: inline-block;
  transition: transform 0.45s var(--ease-out);
}
a:hover .arrow {
  transform: translateX(6px);
}
a:hover .arrow-back {
  transform: translateX(-6px);
}

/* Sublinhado que cresce da esquerda para a direita. */
#content-holder .feature-title a,
#content-holder .case-next-link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.6s var(--ease-out);
}
#content-holder .feature-title a:hover,
#content-holder .case-next-link:hover {
  text-decoration: none;
  background-size: 100% 1px;
}

/* ---------- Troca de página ---------- */
#content-holder .sections {
  transition:
    opacity 0.32s var(--ease-soft),
    transform 0.32s var(--ease-soft);
}
body.is-leaving #content-holder .sections {
  opacity: 0;
  transform: translate3d(0, -14px, 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Números do painel nos cases: entrada suave, com fade e desfoque que se resolve. */
.motion-ready .case-stat .case-stat-value {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 1s var(--ease-soft) calc(var(--d, 0ms) + 180ms),
    filter 1.1s var(--ease-soft) calc(var(--d, 0ms) + 180ms),
    transform 1.2s var(--ease-out) calc(var(--d, 0ms) + 180ms);
}
.motion-ready .case-stat.is-in .case-stat-value {
  opacity: 1;
  filter: none;
  transform: none;
}

/* ---------- Rolando para cima: elementos voltam vindo de cima ---------- */
.motion-ready .reveal[data-from="top"]:not(.is-in) {
  transform: translate3d(0, -28px, 0);
}
/* Títulos ao subir: só um fade do título inteiro, sem mexer as letras
   (movimento letra a letra na leitura de baixo para cima incomoda). */
.motion-ready [data-split][data-from="top"] .split-item {
  transition: opacity 0.9s var(--ease-soft);
}
.motion-ready [data-split][data-from="top"]:not(.is-in) .split-item {
  transform: none;
}
.motion-ready .case-cover.reveal[data-from="top"]:not(.is-in),
.motion-ready .feature-media.reveal[data-from="top"]:not(.is-in) {
  transform: none;
}
.motion-ready .case-stat[data-from="top"]:not(.is-in) .case-stat-value {
  transform: translate3d(0, -10px, 0);
}

/* Números de "Resultados" na home: mesma entrada suave dos cases, um após o outro. */
.motion-ready .reveal .feature-stat-value {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 1s var(--ease-soft) calc(var(--d, 0ms) + var(--k, 180ms)),
    filter 1.1s var(--ease-soft) calc(var(--d, 0ms) + var(--k, 180ms)),
    transform 1.2s var(--ease-out) calc(var(--d, 0ms) + var(--k, 180ms));
}
.feature-stat:nth-child(3) .feature-stat-value {
  --k: 300ms;
}
.feature-stat:nth-child(4) .feature-stat-value {
  --k: 420ms;
}
.motion-ready .reveal.is-in .feature-stat-value {
  opacity: 1;
  filter: none;
  transform: none;
}
.motion-ready .reveal[data-from="top"]:not(.is-in) .feature-stat-value {
  transform: translate3d(0, -10px, 0);
}

/* Capas em vídeo: sem zoom nem parallax, para a tela do app aparecer inteira. */
.motion-ready .case-cover video,
.motion-ready .feature-media video {
  transform: none;
}
/* O fundo de carregamento fica só atrás da mídia, não na margem do bloco. */
.case-cover,
.feature-media {
  background-clip: content-box;
}