/* Animações e estados interativos. Tudo é desligado por prefers-reduced-motion (base.css). */

/* Entrada ao rolar: a classe .reveal só é posta pelo JS, então sem JS tudo aparece normalmente */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Fichas com destino (com o link do pé, .item-foot) acendem e sobem ao passar o mouse, e a ficha inteira
   vira o link (o ::after do pé cobre a ficha; o foco continua no próprio pé). Só onde há mouse: no toque o
   "hover" grudava, e a cobertura atrapalharia o arrasto da faixa de Serviços do celular. Ficha sem destino
   (ex.: Núcleo em Projetos) não reage */
.item { transition: border-color .2s, box-shadow .25s, transform .25s; }
.perk::before { transition: transform .3s; }
@media (hover: hover) {
  .item { position: relative; }
  .item-foot::after { content: ""; position: absolute; inset: 0; }
  /* Outro link ou botão dentro da ficha (ex.: "Conhecer a Pesquisa de Campo" em Projetos) fica por cima da
     cobertura do pé: o clique nele vai para o destino dele, não para o do pé */
  .item :is(a[href], button):not(.item-foot) { position: relative; z-index: 1; }
  .item:has(> .item-foot):hover { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent-soft), 0 18px 50px -20px var(--color-accent-soft); transform: translateY(-3px); }
  .item.exotic:has(> .item-foot):hover { border-color: var(--color-exotic); box-shadow: 0 0 0 1px var(--color-exotic-soft), 0 18px 50px -20px var(--color-exotic-soft); }
  .item:has(> .item-foot):hover .perk::before { transform: rotate(135deg); }
}
.step .diamond { transition: transform .4s, background .3s; }
@media (hover: hover) { .step:hover .diamond { transform: rotate(225deg); background: var(--color-accent); } }

/* Botão do topo: preenchimento ao segurar E */
.btn-hold { position: relative; overflow: hidden; }
.btn-hold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-soft);
  transform: scaleX(var(--hold, 0));
  transform-origin: left;
  pointer-events: none;
}
.btn-hold > * { position: relative; }

/* Transição entre páginas (card de serviço ↔ página do serviço). Navegador sem suporte troca de página normalmente */
@view-transition { navigation: auto; }
[data-vt="svc-landing"] { view-transition-name: svc-landing; }
[data-vt="svc-system"] { view-transition-name: svc-system; }
[data-vt="svc-maintenance"] { view-transition-name: svc-maintenance; }
/* Nome do Salão: da vitrine de produtos ao título da página dele */
[data-vt="salao"] { view-transition-name: salao; }
[data-vt="campo"] { view-transition-name: campo; }
/* O título do card cresce até virar o título da página; o resto da página desce e sobe no lugar */
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root) { animation: vt-out .3s ease both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2, .7, .2, 1) .08s both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* A home sendo construída pelo Núcleo (build-page.js). Antes do script rodar, as peças já
   começam escondidas (recortadas até sumir); o script vai abrindo o recorte */
.building .hero h1, .building .hero .lead, .building .hero .btn-hold, .building .hero .hero-more, .building .nav-links a, .building .menu-toggle, .building .nav-cta { clip-path: inset(0 100% 0 0); }
/* Segurança: se o script falhar, a página aparece sozinha depois de 12 s */
.building .hero h1, .building .hero .lead, .building .hero .btn-hold, .building .hero .hero-more, .building .nav-links a, .building .menu-toggle, .building .nav-cta { animation: build-failsafe 0s 12s forwards; }
@keyframes build-failsafe { to { clip-path: none; } }