/* ============================================================
   EGBÉ YPÒ ÒRUN — Microinterações
   Hover suave · Zoom em fotos · Transições elegantes
   Sem animações excessivas — movimento com propósito.
   ============================================================ */

/* ----------------------------------------------------------
   Easing customizado
   ---------------------------------------------------------- */
:root {
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

/* ----------------------------------------------------------
   Cards — hover aprimorado
   ---------------------------------------------------------- */
.card {
  transition:
    transform     280ms var(--ease-out-quart),
    box-shadow    280ms var(--ease-out-quart),
    border-color  200ms ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 2px 4px rgba(28, 16, 8, 0.04),
    0 8px 24px rgba(28, 16, 8, 0.10),
    0 0 0 1px var(--border-green);
  border-color: transparent; /* shadow cuida da borda */
}

.card:active {
  transform: translateY(-2px);
  transition-duration: 80ms;
}

/* ----------------------------------------------------------
   Imagens em seções de conteúdo — zoom suave ao hover
   ---------------------------------------------------------- */
.img-zoom {
  overflow: hidden;
  border-radius: var(--radius-2xl);
}

.img-zoom img {
  transition: transform 700ms var(--ease-out-quart);
  will-change: transform;
}

.img-zoom:hover img {
  transform: scale(1.035);
}

/* Imagens de liderança */
.card--leadership .card__image img {
  transition: transform 600ms var(--ease-out-quart);
}

.card--leadership:hover .card__image img {
  transform: scale(1.05);
}

/* Imagens em seções (quem-somos__image, etc.) */
.quem-somos__image img,
.section-image img,
[class*="__image"] img {
  transition: transform 600ms var(--ease-out-quart);
}

.quem-somos__image:hover img {
  transform: scale(1.03);
}

/* ----------------------------------------------------------
   Nav links — sublinhado animado
   ---------------------------------------------------------- */
.nav__link {
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background-color: var(--accent-text);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease-out-quart);
}

.nav__link:hover::after {
  transform: scaleX(1);
}

.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  background-color: var(--color-green);
}

/* Não aplica no CTA */
.nav__cta::after {
  display: none;
}

/* ----------------------------------------------------------
   Botões — micro-spring no hover
   ---------------------------------------------------------- */
.btn {
  transition:
    background-color 200ms ease,
    color            200ms ease,
    border-color     200ms ease,
    transform        200ms var(--ease-spring),
    box-shadow       200ms var(--ease-out-quart);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}

/* Ghost sem lift */
.btn--ghost:hover {
  transform: none;
}

/* ----------------------------------------------------------
   Links de texto — sublinhado suave
   ---------------------------------------------------------- */
.card__link {
  position: relative;
}

/* ----------------------------------------------------------
   Evento items (Agenda) — destaque de linha
   ---------------------------------------------------------- */
.evento-item {
  transition:
    border-color 200ms ease,
    box-shadow   200ms ease,
    background-color 200ms ease;
}

.evento-item:hover {
  background-color: rgba(175, 207, 30, 0.03);
}

/* ----------------------------------------------------------
   Social links
   ---------------------------------------------------------- */
.footer__social-link,
[aria-label*="Instagram"],
[aria-label*="Facebook"],
[aria-label*="YouTube"] {
  transition:
    border-color     200ms ease,
    background-color 200ms ease,
    color            200ms ease,
    transform        200ms var(--ease-spring);
}

.footer__social-link:hover {
  transform: translateY(-2px);
}

/* ----------------------------------------------------------
   Download links (docs)
   ---------------------------------------------------------- */
a[href$=".pdf"] {
  transition:
    border-color 200ms ease,
    box-shadow   200ms ease,
    transform    200ms var(--ease-spring);
}

a[href$=".pdf"]:hover {
  border-color: var(--border-green) !important;
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------
   Foto no hero interno — zoom sutil ao carregar
   (já declarado em sobre.css, mas garantindo consistência)
   ---------------------------------------------------------- */
.page-hero__bg img {
  transition: none; /* animação de entrada via keyframe, não hover */
}

/* ----------------------------------------------------------
   Sections de conteúdo — fade-in escalonado para grids
   ---------------------------------------------------------- */
.pilares__grid [data-animate]:nth-child(1) { transition-delay: 0ms; }
.pilares__grid [data-animate]:nth-child(2) { transition-delay: 80ms; }
.pilares__grid [data-animate]:nth-child(3) { transition-delay: 160ms; }

.lideranca__grid [data-animate]:nth-child(1) { transition-delay: 0ms; }
.lideranca__grid [data-animate]:nth-child(2) { transition-delay: 100ms; }
.lideranca__grid [data-animate]:nth-child(3) { transition-delay: 200ms; }

.projetos-home__grid [data-animate]:nth-child(1) { transition-delay: 0ms; }
.projetos-home__grid [data-animate]:nth-child(2) { transition-delay: 120ms; }

/* ----------------------------------------------------------
   Stats — destaque ao revelar
   ---------------------------------------------------------- */
.stat__number {
  transition: color 400ms ease;
}

[data-animate].is-visible .stat__number {
  color: var(--color-brown-dark);
}

/* ----------------------------------------------------------
   Accordion / Details — transição suave
   ---------------------------------------------------------- */
details {
  transition: box-shadow 200ms ease;
}

details:hover {
  box-shadow: var(--shadow-xs);
}

details summary {
  transition: background-color 150ms ease, color 150ms ease;
}

details summary:hover {
  background-color: var(--bg-subtle);
}

/* ----------------------------------------------------------
   Redução de movimento — respeito a preferências
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card,
  .btn,
  .nav__link::after,
  .img-zoom img,
  .card--leadership .card__image img,
  .quem-somos__image img,
  .evento-item,
  .footer__social-link,
  a[href$=".pdf"] {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}