/* GV Máquinas — menu alinhado + movimento (revelações, transições de página)
   Carregado por último em todas as páginas. */

/* ---------- Menu: itens na mesma linha, sublinhado animado ---------- */
.nav { align-items: center; }
.nav .tem-sub { display: flex; align-items: center; }
.nav > a:not(.btn), .nav .tem-sub > a {
  display: inline-flex; align-items: center; height: 72px; padding: 0; line-height: 1; position: relative;
  border-bottom: 0;
}
.nav > a:not(.btn):hover, .nav .tem-sub > a:hover { border-bottom: 0; }
.nav > a:not(.btn)::after, .nav .tem-sub > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 2px;
  background: var(--steel-300); transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease);
}
.nav > a:not(.btn):hover::after, .nav .tem-sub:hover > a::after, .nav .tem-sub:focus-within > a::after,
.nav > a:not(.btn):focus-visible::after { transform: scaleX(1); }
.header.solid .nav > a:not(.btn)::after, .header.scrolled .nav > a:not(.btn)::after,
.header.solid .nav .tem-sub > a::after, .header.scrolled .nav .tem-sub > a::after { background: var(--steel); }
.home .header.scrolled .nav > a:not(.btn)::after, .home .header.scrolled .nav .tem-sub > a::after { background: var(--steel-300); }
.nav .btn { align-self: center; }

/* ---------- Transição entre páginas ---------- */

/* ---------- Revelações no scroll (CSS; o JS só marca .in) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(54px); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } }
@keyframes wipe-up { from { clip-path: inset(100% 0 0 0); } }
@keyframes draw-x { from { clip-path: inset(0 100% 0 0); } }
@keyframes draw-y { from { clip-path: inset(0 0 100% 0); } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }
@keyframes zoom-out { from { transform: scale(1.22); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.js .reveal:not(.in) { opacity: 0; }
.reveal.in { animation: rise .95s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 85ms); }

/* linhas de cota desenhando */
.js .dim:not(.in) { clip-path: inset(0 100% 0 0); }
.dim.in { animation: draw-x 1.3s var(--ease) backwards; }

/* fotos das máquinas: aproximam ao entrar */
.js .tile:not(.in) .t-photo img { transform: scale(1.22); }
.tile.in .t-photo img { animation: zoom-out 1.4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 85ms); }

/* sobre: foto abre da esquerda para a direita */
.js .about-photo:not(.in) { clip-path: inset(0 100% 0 0); }
.about-photo.in { animation: wipe 1.5s var(--ease) backwards; }

/* ensaio: trilho desenha e os nós aparecem em sequência */
.steps::before { clip-path: inset(0 0 0 0); }
.js .steps:not(.in)::before { clip-path: inset(0 100% 0 0); }
.steps.in::before { animation: draw-x 1.8s var(--ease) .1s backwards; }
.js .steps:not(.in) li::before { opacity: 0; }
.steps.in li::before { animation: pop .6s var(--ease) backwards; }
.steps.in li:nth-child(1)::before { animation-delay: .15s; }
.steps.in li:nth-child(2)::before { animation-delay: .85s; }
.steps.in li:nth-child(3)::before { animation-delay: 1.55s; }
@media (max-width: 900px) {
  .js .steps:not(.in)::before { clip-path: inset(0 0 100% 0); }
  .steps.in::before { animation-name: draw-y; }
}

/* insumos: círculo entra e o anel tracejado gira */
.js .supply-photo:not(.in) { opacity: 0; transform: scale(.82); }
.supply-photo.in { animation: pop-circle 1.1s var(--ease) backwards; }
@keyframes pop-circle { from { opacity: 0; transform: scale(.82); } }
.supply-photo::before { animation: spin 40s linear infinite; }
.supply-photo img { animation: float 6s ease-in-out infinite; }

/* contato e rodapé */
.js .contact-list > div:not(.in) { opacity: 0; }
.js .cols > div:not(.in) { opacity: 0; }

/* botão do WhatsApp: pulso suave */
@keyframes pulse { 0% { box-shadow: 0 12px 28px -8px rgba(0,0,0,.5), 0 0 0 0 rgba(31,175,84,.55); } 70%, 100% { box-shadow: 0 12px 28px -8px rgba(0,0,0,.5), 0 0 0 18px rgba(31,175,84,0); } }
.wa-fab { animation: pulse 2.8s ease-out infinite; }

/* cartões: realce suave */
.tile, .tile .t-photo img, .t-go svg, .btn { will-change: transform; }

/* movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.in), .js .contact-list > div:not(.in), .js .cols > div:not(.in) { opacity: 1; }
  .reveal.in, .dim.in, .tile.in .t-photo img, .about-photo.in, .steps.in::before, .steps.in li::before, .supply-photo.in { animation: none; }
  .js .dim:not(.in), .js .about-photo:not(.in), .js .steps:not(.in)::before { clip-path: none; }
  .js .tile:not(.in) .t-photo img { transform: none; }
  .js .steps:not(.in) li::before { opacity: 1; }
  .js .supply-photo:not(.in) { opacity: 1; transform: none; }
  .supply-photo::before, .supply-photo img, .wa-fab { animation: none; }
}

.about-photo img { inset: -8% 0; height: 116%; }
.supply-photo img { width: 68%; height: 68%; mix-blend-mode: normal; }

.nav a[aria-current="page"]::after { transform: scaleX(1); }