/* ================= ANIMAÇÕES DE SCROLL ================= */
/*
 * Sistema de animação de entrada baseado em Intersection Observer.
 * Adicione a classe .reveal a qualquer elemento que queira animar.
 * Variações: .reveal-left, .reveal-right, .reveal-scale
 * Delay sequencial para grupos: .delay-1, .delay-2, .delay-3, .delay-4
 */

/* Estado inicial (invisível, deslocado) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

/* Estado final (visível) */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* Delays sequenciais para grupos de cards */
.delay-1 { transition-delay: 0.05s; }
.delay-2 { transition-delay: 0.12s; }
.delay-3 { transition-delay: 0.19s; }
.delay-4 { transition-delay: 0.26s; }
.delay-5 { transition-delay: 0.33s; }
.delay-6 { transition-delay: 0.40s; }

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ================= HOVER SUAVE NOS CARDS ================= */

/* Cards de processo (home) */
.card-processo {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.card-processo:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 125, 195, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Cards de fundo (fundos.html) */
.fundo-destaque {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fundo-destaque:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* Itens de diferencial (allocation, prev, prospera) */
.item-diferencial {
  transition: transform 0.25s ease;
}

.item-diferencial:hover {
  transform: translateX(4px);
}

/* ================= FADE DO HEADER ================= */

/* Suavizar aparecimento do header ao rolar */
header {
  transition: background-color 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease;
}

header.rolagem {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(9, 27, 53, 0.92) !important;
}

/* ================= BOTÕES COM RIPPLE VISUAL ================= */

.btn-primary,
.btn-cta-blue,
.btn-outline-light,
.btn-outline,
.btn-doc,
.btn-whatsapp {
  position: relative;
  overflow: hidden;
}

/* ================= SKIP LINK ACESSIBILIDADE ================= */

.skip-link {
  position: absolute;
  top: -60px;
  left: 0;
  background: var(--cor-primaria, #127DC3);
  color: #fff;
  padding: 10px 20px;
  font-weight: 700;
  z-index: 9999;
  border-radius: 0 0 6px 0;
  transition: top 0.2s ease;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ================= SCROLL TO TOP ================= */

.btn-scroll-top {
  align-items: center;
  background-color: var(--cor-primaria, #127DC3);
  border: none;
  border-radius: 50%;
  bottom: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 30px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  width: 48px;
  z-index: 500;
}

.btn-scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.btn-scroll-top:hover {
  transform: translateY(-3px);
  background-color: #0e6299;
}

.btn-scroll-top svg {
  height: 20px;
  width: 20px;
}