/* =========================================================================
   motion.css — animações leves, só CSS (sem bibliotecas)
   Carregamento curto, troca de página em fade, ponto do cursor e hovers discretos.
   Desligar: ?nomotion na URL ou "reduzir movimento" no sistema.
   ========================================================================= */

/* ---------- Carregamento: fundo liso + 3x3 pontos do logo; some em fade ---------- */
#mx-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--white, #fff);
  transition: opacity .5s var(--ease), visibility .5s;
  animation: mx-failsafe 0s 3s forwards; /* se o JS falhar, some sozinho */
}
#mx-loader.out { opacity: 0; visibility: hidden; }
@keyframes mx-failsafe { to { opacity: 0; visibility: hidden; } }
html.mx-off #mx-loader, html.mx-seen #mx-loader { display: none; }

.mx-mark { display: grid; grid-template-columns: repeat(3, 6px); gap: 4px; }
.mx-mark b { width: 6px; height: 6px; border-radius: 1px; background: var(--ink, #111); animation: mx-dot 1.2s ease-in-out infinite; }
/* onda diagonal pelos pontos */
.mx-mark b:nth-child(2), .mx-mark b:nth-child(4) { animation-delay: .1s; }
.mx-mark b:nth-child(3), .mx-mark b:nth-child(5), .mx-mark b:nth-child(7) { animation-delay: .2s; }
.mx-mark b:nth-child(6), .mx-mark b:nth-child(8) { animation-delay: .3s; }
.mx-mark b:nth-child(9) { animation-delay: .4s; }
@keyframes mx-dot { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* ---------- Troca de página: some em 0,18 s; blocos da nova sobem 10 px em cascata ---------- */
main { transition: opacity .18s ease; }
main.mx-leave { opacity: 0; } /* só opacidade: sem repintar a página inteira */
.mx-rise { animation: mx-rise .6s cubic-bezier(.22,1,.36,1) var(--mx-d, 0ms) both; will-change: opacity, transform; }
@keyframes mx-rise { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: none; } }

/* ---------- Página Projetos: 1ª tela direto; os próximos em fade lento, sem deslocamento ---------- */
.work-card.mx-fade { transition: opacity .9s ease var(--mx-d, 0ms); }
.work-card.mx-fade.mx-wait { opacity: 0; transition: none; will-change: opacity; } /* abaixo da tela, esperando */

/* ---------- Cursor: ponto pequeno (só mouse/trackpad) ---------- */
#mx-cursor {
  position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none;
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--ink, #111); box-shadow: 0 0 0 1px rgba(255,255,255,.6);
  opacity: 0; transition: opacity .3s;
}
#mx-cursor.on { opacity: 1; }
@media (hover: none), (pointer: coarse) { #mx-cursor { display: none; } }

/* ---------- Hover discreto ---------- */
.main-nav a { position: relative; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.main-nav a:hover::after, .main-nav a.current::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 767px) { .top-header .main-nav a::after { display: none; } }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  #mx-loader, #mx-cursor { display: none !important; }
  .mx-rise { animation: none; }
  .work-card.mx-wait { opacity: 1 !important; }
}
html.mx-off #mx-cursor { display: none !important; }
html.mx-off .work-card.mx-wait { opacity: 1 !important; }

/* texto só para leitores de tela e buscadores (ex.: título principal da página Sobre) */
.mx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }