/* Interação dos cartões e entradas progressivas na página institucional. */
.area-card {
  position: relative;
  transition: translate .28s ease, box-shadow .28s ease;
}
.area-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.area-card > svg { transform-origin: center; transition: transform .28s ease; }
@media (hover: hover) and (pointer: fine) {
  .area-card:hover { translate: 0 -8px; box-shadow: 0 18px 32px #16181a26; }
  .area-card:hover::after { opacity: .25; }
  .area-card:hover > svg { transform: translateY(-3px) rotate(-5deg) scale(1.06); }
  .button:hover { translate: 0 -3px; box-shadow: 0 8px 20px #16181a24; }
}
.button { transition: background .2s ease, color .2s ease, translate .25s ease, box-shadow .25s ease; }

/* Só o JavaScript ativa o estado oculto; sem JavaScript tudo fica visível. */
[data-reveal] {
  transition: opacity .65s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].reveal-pending { opacity: 0; transform: translateY(24px); }
[data-reveal].reveal-visible {
  opacity: 1;
  transform: none;
  transition-delay: var(--reveal-delay, 0ms);
}
/* Mantém independentes a entrada do cartão e a reação ao cursor. */
.area-card[data-reveal] {
  transition: opacity .65s ease, transform .65s cubic-bezier(.22, 1, .36, 1), translate .28s ease, box-shadow .28s ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0s, 0s;
}
[data-reveal]:focus-within { opacity: 1; transform: none; transition: none; }
@media (max-width: 580px) {
  [data-reveal] { --reveal-delay: 0ms !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].reveal-pending { opacity: 1; transform: none; }
  .area-card:hover, .button:hover { translate: none; }
  .area-card:hover > svg { transform: none; }
}
@media print {
  [data-reveal].reveal-pending { opacity: 1; transform: none; }
}