/* Hennigen & Martins — micro-interações e motion
   As classes dc-* são aplicadas pelo motion.js APÓS o conteúdo renderizar.
   Se o JS não rodar, nenhum elemento recebe .dc-reveal → nada fica escondido. */

/* ---- Reveal ao rolar ---- */
.dc-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.65,.2,1),
              transform .7s cubic-bezier(.2,.65,.2,1);
}
.dc-reveal.dc-in {
  opacity: 1;
  transform: none;
}

/* ---- Cartões com elevação (áreas de atuação) ---- */
.dc-card {
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease !important;
}
.dc-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 40px rgba(14,27,54,.16) !important;
}
.dc-card:active { transform: translateY(-2px) !important; }

/* ---- Cartões de artigo ---- */
.dc-article { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.dc-article:hover { transform: translateY(-4px); }
.dc-article .gl { transition: color .2s ease; }
.dc-article:hover .gl { color: #C9A480; }
.dc-article > div:first-child { transition: width .3s cubic-bezier(.2,.7,.2,1); }
.dc-article:hover > div:first-child { width: 72px !important; }

/* ---- Imagens com zoom suave (contêiner com overflow hidden) ---- */
.dc-zoom img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.dc-zoom:hover img { transform: scale(1.045); }

/* ---- Menu: sublinhado dourado animado ---- */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: #C9A480;
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* ---- Botões: leve "press" ao clicar ---- */
.wa:active { transform: translateY(0) scale(.98) !important; }

/* ---- Navbar ganha sombra ao rolar ---- */
.navbar { transition: box-shadow .3s ease; }
.navbar.dc-scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.28); }

/* ===== Menu mobile (hambúrguer) ===== */
/* Por padrão (desktop) o botão e o overlay ficam ocultos */
.dc-burger { display: none; }
.dc-menu { display: none; }

@media (max-width: 768px) {
  /* esconde os links inline e mostra o botão ☰ ao lado do WhatsApp */
  .navbar .nav-links { display: none !important; }
  .navbar .wa { margin-left: auto; }
  .dc-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 42px; padding: 9px 10px; margin-left: 12px;
    background: transparent; border: 1px solid rgba(201,164,128,.4); border-radius: 4px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
  }
  .dc-burger span {
    display: block; height: 2px; width: 100%; background: #C9A480; border-radius: 2px;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
  }
  .dc-burger.dc-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .dc-burger.dc-active span:nth-child(2) { opacity: 0; }
  .dc-burger.dc-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .dc-menu { display: block; }
}

/* Overlay (painel lateral) */
.dc-menu { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.dc-menu-backdrop {
  position: absolute; inset: 0; background: rgba(10,20,41,.55);
  opacity: 0; transition: opacity .3s ease;
}
.dc-menu-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(82vw, 330px);
  background: #0E1B36; border-left: 1px solid rgba(201,164,128,.25);
  box-shadow: -20px 0 50px rgba(0,0,0,.42);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.7,.2,1);
  padding: 24px 26px 30px; display: flex; flex-direction: column;
  overflow-y: auto;
}
.dc-menu.dc-open { pointer-events: auto; }
.dc-menu.dc-open .dc-menu-backdrop { opacity: 1; }
.dc-menu.dc-open .dc-menu-panel { transform: none; }
.dc-menu-close {
  align-self: flex-end; background: none; border: none; color: #F5EFE6;
  font-size: 34px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.dc-menu-brand {
  font-family: 'Gloock', serif; font-size: 26px; color: #F5EFE6; margin: 4px 0 24px;
}
.dc-menu-panel ul { list-style: none; margin: 0; padding: 0; }
.dc-menu-panel li { border-bottom: 1px solid rgba(201,164,128,.14); }
.dc-menu-panel li a {
  display: block; padding: 16px 2px; color: #F5EFE6; text-decoration: none;
  font-size: 17px; transition: color .2s ease, padding-left .2s ease;
}
.dc-menu-panel li a:hover, .dc-menu-panel li a:active { color: #C9A480; padding-left: 8px; }
.dc-menu-wa {
  margin-top: 26px; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; background: #C9A480; color: #0E1B36; text-decoration: none; font-weight: 600;
  padding: 15px; border-radius: 3px;
}

/* ---- Acessibilidade: desliga tudo se o usuário pediu menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
  .dc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dc-card, .dc-article, .dc-article > div:first-child,
  .dc-zoom img, .nav-links a::after, .navbar,
  .dc-menu-backdrop, .dc-menu-panel, .dc-burger span { transition: none !important; }
}