/* =====================================================================
   MOTION — vocabulário ÚNICO de movimento do site.
   Lei: "sutil, rápido, com propósito". A microinteração SERVE (revela,
   conduz o olho, dá vida) — nunca enfeita nem performa pra si.
   Só transform/opacity (zero layout shift -> Core Web Vitals).
   Cravado na home; internas herdam exatamente isto.
   ===================================================================== */

/* Estado inicial só quando há JS (sem JS, conteúdo aparece normal -> sem FOIT) */
.has-js [data-enter] { will-change: transform, opacity; }

/* fade — entrada serena (blocos, parágrafos, cards) */
.has-js [data-enter="fade"] {
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* rise — linha que sobe mascarada (títulos: envolver em .mask{overflow:hidden}) */
.has-js [data-enter="rise"] {
  opacity: 0; transform: translateY(110%);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* draw — risco/sublinha que se desenha (template tachado, linha do mecanismo) */
.has-js [data-enter="draw"] {
  transform: scaleX(0) rotate(var(--draw-rot, 0deg));
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}

/* estado revelado (comum) */
.has-js [data-enter].is-in {
  opacity: 1;
  transform: none;
}
.has-js [data-enter="draw"].is-in {
  transform: scaleX(1) rotate(var(--draw-rot, 0deg));
}

/* SOFT — reveals fora do hero (entram no scroll). Mais discretos e rápidos,
   sem espera: deslocamento menor + duração curta, pra não atrapalhar a
   navegação no scroll rápido. O hero NÃO recebe is-soft (cascata intacta). */
.has-js [data-enter].is-soft { transition-duration: .4s; }
.has-js [data-enter="fade"].is-soft:not(.is-in) { transform: translateY(7px); }
.has-js [data-enter="rise"].is-soft:not(.is-in) { transform: translateY(45%); }

/* máscara pras linhas de título */
.mask { display: block; overflow: hidden; padding-block: .04em; }

/* float — flutuação leve e contínua, onde fizer sentido (sem exagero) */
@keyframes yep-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.has-js [data-float] { animation: yep-float 6s ease-in-out infinite; }
[data-float="slow"] { animation-duration: 9s; }

/* hover dos cards — resposta sutil e CONSISTENTE em todo o site */
.u-hover-card { transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.u-hover-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 18px 50px rgba(0,0,0,.4); }

/* Respeito total a quem pede menos movimento */
@media (prefers-reduced-motion: reduce) {
  .has-js [data-enter],
  .has-js [data-enter="draw"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .has-js [data-float] { animation: none !important; }
}