/* Efeitos de interface (site público). Tudo é melhoria progressiva: sem JS ou com "reduzir movimento", a página fica estática. */

/* entrada do selo (uma vez) */
@keyframes selo-entra { from { opacity: 0; filter: blur(6px) drop-shadow(0 8px 24px rgba(0,0,0,.45)); } to { opacity: 1; } }
html.js .selo-hero { animation: selo-entra .9s cubic-bezier(.2,.7,.2,1) both; will-change: transform; }

/* brilho dourado que acompanha o ponteiro (usa o próprio selo como máscara: sem imagem extra) */
.selo-brilho {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  -webkit-mask: url(/static/selo-prova-de-campo.webp) center / contain no-repeat;
          mask: url(/static/selo-prova-de-campo.webp) center / contain no-repeat;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,244,205,.95) 0%, rgba(255,226,140,.55) 22%, transparent 52%);
  mix-blend-mode: screen;
}
.selo-brilho.ativo { opacity: 1; }

/* aparecer ao rolar */
html.js .revelar { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
html.js .revelar.visivel { opacity: 1; transform: none; }

/* cartões: foco de luz que segue o cursor */
.cartao { position: relative; overflow: hidden; transition: border-color .25s ease, transform .25s ease; }
.cartao::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(201,162,75,.16), transparent 70%);
}
.cartao:hover::before { opacity: 1; }
.cartao:hover { border-color: rgba(201,162,75,.55); }

/* botões: leve elevação e halo dourado */
.btn { transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,162,75,.22); }
.btn:active { transform: none; }

/* foco visível (acessibilidade) */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 2px solid #dfbb63; outline-offset: 3px; border-radius: 6px; }

/* galeria: leve zoom */
.galeria img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.galeria figure { overflow: hidden; border-radius: 6px; }
.galeria figure:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  html.js .selo-hero { animation: none; }
  html.js .revelar { opacity: 1; transform: none; transition: none; }
  .cartao::before, .selo-brilho { display: none; }
  .btn, .galeria img { transition: none; }
  .btn:hover { transform: none; }
  .galeria figure:hover img { transform: none; }
}

/* rodapé enxuto */
.rodape-novo { background: #0d0c09; color: #cfc6ac; padding: 34px 0 22px; border-top: 1px solid #2a251c; }
.r-topo { display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap; }
.r-marca { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: #f7edd2; }
.r-marca img { width: 56px; height: 56px; flex: none; }
.r-marca b { display: block; font: 700 1.05rem var(--serif); letter-spacing: .01em; }
.r-marca small { display: block; font: 500 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #a89a73; margin-top: 2px; }
.r-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.r-links a, .r-base a { color: #cfc6ac; text-decoration: none; font-size: .92rem; transition: color .2s ease; }
.r-links a:hover, .r-base a:hover { color: #dfbb63; }
.r-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; padding-top: 16px; border-top: 1px solid #2a251c; font-size: .84rem; color: #8f8466; }
.r-base i { font-style: normal; margin: 0 8px; color: #5a4a1e; }
@media (max-width: 640px) { .r-topo { flex-direction: column; align-items: flex-start; } }