@charset "utf-8";
/* ============================================================
   ACT · ARCONTEC — Sistema de movimento
   Implementa a especificação de `gerar-frontend/sistema-de-movimento.md`
   (geração N). O código de `motion/` daquele pacote é a geração N−1 e não
   possui gate, split de título, variantes soft/fig/mask, tilt nem cursor-bolha;
   além disso traz lightbox/menu/header próprios que colidiriam com os deste
   site. Por isso a spec foi implementada aqui, com prefixo `act-`.

   Princípios (doc §0): movimento curto, easing longo. Deslocamento 24–26px,
   blur 5px, 0.8–1.05s. Uma ideia de movimento por seção. Nada depende de
   animação para existir — todo estado inicial invisível vive atrás do gate
   `html[data-motion]`.
   ============================================================ */

:root {
  --act-e:  cubic-bezier(.16, .84, .28, 1);  /* entradas, reveals, pins  */
  --act-e2: cubic-bezier(.4, 0, .2, 1);      /* UI: header, hover, chrome */
}

/* ============================================================
   1. REVEALS
   Estado inicial só existe com o gate. Sem JS (ou se o motor cair),
   nenhuma destas regras se aplica e a página fica 100% legível.
   ============================================================ */

html[data-motion] [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(5px);
  transition:
    opacity .85s var(--act-e),
    transform .85s var(--act-e),
    filter .85s var(--act-e);
  transition-delay: var(--act-d, 0ms);
  will-change: opacity, transform;
}

/* soft — só opacidade. Para blocos que contêm título dividido em palavras:
   o texto carrega o movimento, o bloco em volta não duplica deslocamento. */
html[data-motion] [data-reveal="soft"] {
  transform: none;
  filter: none;
  transition: opacity 1s var(--act-e);
  transition-delay: var(--act-d, 0ms);
}

/* fig — imagens. Anima o <figure>/wrapper, nunca o <img>, para preservar
   o zoom de hover da galeria (armadilha nº 5 do doc). */
html[data-motion] [data-reveal="fig"] {
  transform: scale(.965);
  filter: blur(4px);
  transition:
    opacity .9s var(--act-e),
    transform .9s var(--act-e),
    filter .9s var(--act-e);
  transition-delay: var(--act-d, 0ms);
}

/* mask — cortina. `round` dentro do inset porque clip-path mata o
   border-radius (armadilha nº 4 do doc). */
html[data-motion] [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 101% 0 round 8px);
  transition: clip-path 1.5s var(--act-e);
  transition-delay: var(--act-d, 0ms);
}
html[data-motion] [data-reveal="mask"] > img,
html[data-motion] [data-reveal="mask"] .act-mask-inner {
  transform: scale(1.08);
  transition: transform 1.5s var(--act-e);
  transition-delay: var(--act-d, 0ms);
}

/* deslocamento lateral para colunas lado a lado */
html[data-motion] [data-reveal][data-rv="left"]  { transform: translateX(-26px); }
html[data-motion] [data-reveal][data-rv="right"] { transform: translateX(26px); }

/* ---- estado revelado ---- */
html[data-motion] [data-reveal][data-on] {
  opacity: 1;
  transform: none;
  filter: none;
}
html[data-motion] [data-reveal="mask"][data-on] { clip-path: inset(0 0 0 0 round 8px); }
html[data-motion] [data-reveal="mask"][data-on] > img,
html[data-motion] [data-reveal="mask"][data-on] .act-mask-inner { transform: none; }

/* ============================================================
   2. TÍTULOS PALAVRA POR PALAVRA
   ============================================================ */
.act-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;   /* descendentes (g, p, q) não são cortados */
  margin-bottom: -.06em;
}
.act-w > i {
  display: inline-block;
  font-style: inherit;
}
html[data-motion] .act-w > i {
  transform: translateY(108%);
  transition: transform .9s var(--act-e);
  transition-delay: var(--act-wd, 0ms);
}
html[data-motion] [data-on] .act-w > i,
html[data-motion] .act-w[data-on] > i { transform: translateY(0); }

/* ============================================================
   3. HEADER (doc §5)
   ============================================================ */
.cabecalho {
  transition:
    background-color .45s var(--act-e2),
    border-color .45s var(--act-e2),
    box-shadow .45s var(--act-e2),
    transform .45s var(--act-e2);
}
/* O estado sólido/sombra fica em style.css (classe .rolou, controlada pelo
   main.js): é affordance, não movimento, e precisa valer com reduced-motion.
   Aqui só o esconde-ao-descer, que é movimento. */
/* esconde ao descer, volta ao subir — só a partir de 260px */
html[data-motion] .cabecalho[data-oculto="true"] { transform: translateY(-100%); }

/* ============================================================
   4. TILT nos cards (doc §5) — máximo 2.4°
   Nunca dispara antes do reveal: exige [data-on].
   ============================================================ */
.act-tilt { transform-style: preserve-3d; }
.act-tilt[data-tilting] { transition: transform .14s linear; }

/* ============================================================
   5. CURSOR-BOLHA "Ampliar" na galeria (doc §5)
   ============================================================ */
.act-bolha {
  position: fixed; left: 0; top: 0; z-index: 95;
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--act-vermelho); color: #fff;
  font-family: var(--fonte-titulo); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.5);
  transition: opacity .28s var(--act-e2), transform .28s var(--act-e2);
}
.act-bolha[data-on] { opacity: 1; transform: translate(-50%, -50%) scale(1); }
html[data-motion] .galeria[data-bolha] .galeria__item { cursor: none; }

/* ============================================================
   6. MARQUEE — 42s (doc §5)
   ============================================================ */
.marquee { --vel: 42s; }

/* ============================================================
   7. ACESSIBILIDADE (doc §6) — padrão BuildV: respeitar sempre.
   Com reduced-motion o motor é desligado no JS; aqui garantimos que
   nenhum estado inicial invisível sobreviva.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html[data-motion] [data-reveal],
  html[data-motion] [data-reveal="soft"],
  html[data-motion] [data-reveal="fig"],
  html[data-motion] [data-reveal="mask"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  html[data-motion] [data-reveal="mask"] > img,
  html[data-motion] .act-w > i { transform: none !important; transition: none !important; }
  html[data-motion] .cabecalho[data-oculto="true"] { transform: none; }
  .act-bolha { display: none; }
  html[data-motion] .galeria[data-bolha] .galeria__item { cursor: pointer; }
}