/* ============================================================
   efeitos.css — Camada visual moderna (portável)
   Micro-interações e animações discretas, todas em
   transform/opacity (GPU) para não custar desempenho.
   Funciona em qualquer site: basta copiar este arquivo
   e usar as classes. Respeita prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Entrada suave da página ---------- */
@keyframes ef-surgir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.ef-entrada { animation: ef-surgir .55s cubic-bezier(.22,.8,.36,1) both; }
.ef-entrada--2 { animation-delay: .08s; }
.ef-entrada--3 { animation-delay: .16s; }
.ef-entrada--4 { animation-delay: .24s; }

/* ---------- 2. Fundo decorativo do herói (CSS puro) ---------- */
.ef-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ef-hero::before,
.ef-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  animation: ef-flutuar 16s ease-in-out infinite alternate;
}
.ef-hero::before {
  width: 380px; height: 380px;
  left: -120px; top: -140px;
  background: radial-gradient(circle, var(--dourado, #B58E3C), transparent 65%);
}
.ef-hero::after {
  width: 460px; height: 460px;
  right: -160px; bottom: -220px;
  background: radial-gradient(circle, #4A6CF7, transparent 65%);
  animation-delay: -8s;
  opacity: .22;
}
@keyframes ef-flutuar {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(40px, 28px, 0) scale(1.15); }
}

/* Título do herói com brilho dourado varrendo o texto */
.ef-titulo-gradiente {
  background: linear-gradient(100deg,
    var(--marinho, #1A2342) 0%,
    var(--marinho, #1A2342) 38%,
    var(--dourado, #B58E3C) 50%,
    var(--marinho, #1A2342) 62%,
    var(--marinho, #1A2342) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ef-varrer 6s linear infinite;
}
@keyframes ef-varrer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* ---------- 3. Cartões com elevação e borda viva ---------- */
.ef-cartao {
  position: relative;
  transition: transform .25s cubic-bezier(.22,.8,.36,1), box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.ef-cartao:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(26, 35, 66, .14);
  border-color: var(--dourado, #B58E3C) !important;
}
.ef-cartao:active { transform: translateY(-1px); }

/* seta que desliza no hover (para links de cartão) */
.ef-cartao .ef-seta {
  display: inline-block;
  transition: transform .25s ease;
  color: var(--dourado, #B58E3C);
}
.ef-cartao:hover .ef-seta { transform: translateX(4px); }

/* ---------- 4. Botão com brilho que varre ---------- */
.ef-brilho {
  position: relative;
  overflow: hidden;
}
.ef-brilho::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
  pointer-events: none;
}
.ef-brilho:hover::after { left: 130%; }

/* ---------- 5. Área de soltar com vida ---------- */
.ef-pulso { position: relative; }
.ef-pulso:hover { border-style: solid; }
.ef-pulso::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--dourado, #B58E3C);
  opacity: 0;
  pointer-events: none;
}
.ef-pulso:hover::before,
.ef-pulso.arrastando::before {
  animation: ef-onda 1.4s ease-out infinite;
}
@keyframes ef-onda {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.035); }
}
.ef-pulso .area-soltar__icone,
.ef-pulso.arrastando .area-soltar__icone {
  transition: transform .25s ease;
}
.ef-pulso:hover .area-soltar__icone { transform: translateY(-4px); }
.ef-pulso.arrastando .area-soltar__icone { animation: ef-balancar 0.8s ease-in-out infinite; }
@keyframes ef-balancar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ---------- 6. Resultados chegando (aplicado via JS aos itens) ---------- */
@keyframes ef-chegar {
  from { opacity: 0; transform: translateX(-10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.resultado { animation: ef-chegar .35s cubic-bezier(.22,.8,.36,1) both; }

/* barra de progresso com listras em movimento */
.progresso__preenchido {
  background-image: linear-gradient(45deg,
    rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%);
  background-size: 24px 24px;
  animation: ef-listras 0.9s linear infinite;
}
@keyframes ef-listras {
  from { background-position: 0 0; }
  to   { background-position: 24px 0; }
}

/* ---------- 7. Cabeçalho que ganha sombra ao rolar ---------- */
.ef-cabecalho-rolado {
  box-shadow: 0 4px 18px rgba(26, 35, 66, .10);
  transition: box-shadow .25s ease;
}

/* ---------- 8. Sublinhado animado para links do rodapé/menu ---------- */
.ef-sublinhar {
  background-image: linear-gradient(var(--dourado, #B58E3C), var(--dourado, #B58E3C));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease;
  text-decoration: none !important;
}
.ef-sublinhar:hover { background-size: 100% 1.5px; }

/* ---------- Acessibilidade: desativa tudo se o usuário pedir ---------- */
@media (prefers-reduced-motion: reduce) {
  .ef-entrada,
  .ef-hero::before,
  .ef-hero::after,
  .ef-titulo-gradiente,
  .ef-pulso::before,
  .ef-pulso.arrastando .area-soltar__icone,
  .resultado,
  .progresso__preenchido {
    animation: none !important;
  }
  .ef-entrada { opacity: 1; transform: none; }
  .ef-cartao, .ef-cartao:hover { transform: none; }
  [data-sal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}