/* ==========================================================================
   Camada de movimento da Vitrine Caixa — Auxiliadora Predial Hugo Lange
   Animações de entrada, microinterações e a jornada guiada.
   Tudo respeita prefers-reduced-motion.
   ========================================================================== */

/* ---------- reveal on scroll (aplicado via JS) ---------- */
[data-anim]{opacity:0;will-change:opacity,transform}
[data-anim="sobe"]      {transform:translateY(26px)}
[data-anim="sobe-curto"]{transform:translateY(14px)}
[data-anim="esquerda"]  {transform:translateX(-28px)}
[data-anim="direita"]   {transform:translateX(28px)}
[data-anim="escala"]    {transform:scale(.94)}
[data-anim="borrao"]    {transform:translateY(18px);filter:blur(8px)}

[data-anim].visivel{
  opacity:1;
  transform:none;
  filter:none;
  transition:opacity .72s cubic-bezier(.22,1,.36,1),
             transform .72s cubic-bezier(.22,1,.36,1),
             filter .72s ease;
}

/* ---------- Chaveco com respiração ---------- */
.chaveco-vivo{animation:flutua 5.5s ease-in-out infinite;transform-origin:center bottom}
@keyframes flutua{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-9px) rotate(-1.6deg)}
}

/* ---------- números que contam ---------- */
.kpi b{font-variant-numeric:tabular-nums}

/* ---------- cards com profundidade ---------- */
.card{
  transition:transform .38s cubic-bezier(.22,1,.36,1),
             box-shadow .38s cubic-bezier(.22,1,.36,1);
}
.card:hover{transform:translateY(-6px) scale(1.012)}
.card .foto img{transition:transform .85s cubic-bezier(.22,1,.36,1)}
.card:hover .foto img{transform:scale(1.07)}
.card .selo{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.card:hover .selo{transform:scale(1.07)}

/* botão do WhatsApp que pulsa discretamente quando entra em cena */
.cta-zap{position:relative;overflow:hidden}
.cta-zap::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
  transform:translateX(-120%);
}
.cta-zap:hover::before{animation:varre .85s ease}
@keyframes varre{to{transform:translateX(120%)}}

/* ---------- a jornada guiada ---------- */
.jornada{
  margin-top:38px;background:#fff;border-radius:16px;padding:34px 30px;
  box-shadow:0 1px 3px rgba(16,32,48,.08),0 8px 24px rgba(16,32,48,.06);
  position:relative;overflow:hidden;
}
.jornada::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#0B4F9E,#F39200,#128C4A);
  transform:scaleX(0);transform-origin:left;
}
.jornada.visivel::before{transition:transform 1.5s cubic-bezier(.22,1,.36,1) .2s;transform:scaleX(1)}
.jornada .cabeca{text-align:center;max-width:660px;margin:0 auto 30px}
.jornada .selo-marca{
  display:inline-block;background:#EAF1FA;color:#0B4F9E;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.9px;padding:6px 14px;border-radius:20px;margin-bottom:12px;
}
.jornada h2{font-size:24px;font-weight:800;letter-spacing:-.5px;margin-bottom:8px;line-height:1.25}
.jornada h2 em{font-style:normal;color:#0B4F9E}
.jornada .sub{font-size:15px;color:#6B7785;line-height:1.6}

.trilha{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:8px}
.trilha::before{
  content:"";position:absolute;top:26px;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,#E3E8EE,#0B4F9E 50%,#128C4A);
  transform:scaleX(0);transform-origin:left;
}
.jornada.visivel .trilha::before{transition:transform 1.8s cubic-bezier(.22,1,.36,1) .5s;transform:scaleX(1)}

.etapa{text-align:center;position:relative;opacity:0;transform:translateY(18px)}
.jornada.visivel .etapa{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.jornada.visivel .etapa:nth-child(1){transition-delay:.55s}
.jornada.visivel .etapa:nth-child(2){transition-delay:.75s}
.jornada.visivel .etapa:nth-child(3){transition-delay:.95s}
.jornada.visivel .etapa:nth-child(4){transition-delay:1.15s}
.jornada.visivel .etapa:nth-child(5){transition-delay:1.35s}

.etapa .bolha{
  width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid #0B4F9E;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
  font-size:22px;position:relative;z-index:2;
  box-shadow:0 4px 14px rgba(11,79,158,.16);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
}
.etapa:hover .bolha{transform:translateY(-4px) scale(1.09);box-shadow:0 8px 22px rgba(11,79,158,.26)}
.etapa:last-child .bolha{border-color:#128C4A;box-shadow:0 4px 14px rgba(18,140,74,.2)}
.etapa .n{
  position:absolute;top:-4px;right:calc(50% - 34px);width:22px;height:22px;border-radius:50%;
  background:#0B4F9E;color:#fff;font-size:11.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;z-index:3;
}
.etapa:last-child .n{background:#128C4A}
.etapa h3{font-size:14px;font-weight:700;margin-bottom:5px;letter-spacing:-.1px}
.etapa p{font-size:12.5px;color:#6B7785;line-height:1.5}

.jornada .fecho{
  margin-top:30px;padding-top:24px;border-top:1px solid #E3E8EE;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;text-align:center;
}
.jornada .fecho .frase{font-size:15.5px;font-weight:600;max-width:520px;line-height:1.55}
.jornada .fecho .frase b{color:#0B4F9E}
.jornada .fecho .zap-jornada{
  display:inline-flex;align-items:center;gap:9px;background:#128C4A;color:#fff;
  font-size:15px;font-weight:800;padding:14px 26px;border-radius:10px;text-decoration:none;
  min-height:50px;box-shadow:0 4px 16px rgba(18,140,74,.3);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,background .2s;
}
.jornada .fecho .zap-jornada:hover{background:#0E7A40;transform:translateY(-3px);box-shadow:0 8px 24px rgba(18,140,74,.38)}
.jornada .fecho .zap-jornada svg{width:19px;height:19px;fill:#fff;flex:none}

/* ---------- barra de progresso de leitura ---------- */
.progresso{
  position:fixed;top:0;left:0;height:3px;z-index:99;width:0;
  background:linear-gradient(90deg,#0B4F9E,#F39200);
  transition:width .12s linear;
}

/* ---------- entrada dos cards em cascata ---------- */
.grade .card{opacity:0;transform:translateY(20px)}
.grade .card.entrou{
  opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
}

/* ---------- respeitando quem prefere menos movimento ---------- */
@media(prefers-reduced-motion:reduce){
  [data-anim],[data-anim].visivel,
  .grade .card,.grade .card.entrou,
  .etapa,.jornada.visivel .etapa{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important;
  }
  .chaveco-vivo,.cta-zap::before{animation:none!important}
  .jornada::before,.trilha::before{transform:scaleX(1)!important;transition:none!important}
  .progresso{display:none}
  .card:hover,.card:hover .foto img,.etapa:hover .bolha{transform:none!important}
}

@media(max-width:760px){
  .jornada{padding:26px 18px;margin-top:26px;border-radius:14px}
  .jornada h2{font-size:19px}
  .jornada .sub{font-size:13.5px}
  .trilha{grid-template-columns:1fr 1fr;gap:20px 12px}
  .trilha::before{display:none}
  .etapa .bolha{width:46px;height:46px;font-size:19px}
  .etapa .n{right:calc(50% - 30px);width:20px;height:20px;font-size:10.5px}
  .etapa h3{font-size:13px}
  .etapa p{font-size:11.5px}
  .jornada .fecho{gap:14px}
  .jornada .fecho .frase{font-size:14px}
  .jornada .fecho .zap-jornada{width:100%;justify-content:center}
}
@media(max-width:380px){
  .trilha{grid-template-columns:1fr}
}