/*
  Elemento-assinatura do BarberFlow: a faixa "navalha" — listras diagonais
  em movimento contínuo, referência direta ao poste giratório de barbearia,
  usada com moderação: no destaque da home e como indicador de carregamento.
*/
.faixa-navalha {
  position: relative;
  height: 6px;
  border-radius: var(--raio-pill);
  overflow: hidden;
  background: repeating-linear-gradient(
    -45deg,
    var(--vermelho-navalha) 0 10px,
    var(--latao) 10px 20px,
    var(--texto) 20px 30px
  );
  background-size: 200% 100%;
  animation: deslizar-navalha 3.2s linear infinite;
  opacity: 0.9;
}

.faixa-navalha--fina { height: 3px; }

@keyframes deslizar-navalha {
  from { background-position: 0 0; }
  to { background-position: -42px 0; }
}

@keyframes entrar-cima {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.entra {
  animation: entrar-cima var(--vel-lenta) both;
}

.entra-atraso-1 { animation-delay: 60ms; }
.entra-atraso-2 { animation-delay: 120ms; }
.entra-atraso-3 { animation-delay: 180ms; }
.entra-atraso-4 { animation-delay: 240ms; }

@keyframes pulsar-suave {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

.pulsar { animation: pulsar-suave 2.6s ease-in-out infinite; }

@keyframes girar {
  to { transform: rotate(360deg); }
}

.girando { animation: girar 0.85s linear infinite; }

@keyframes esqueleto {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.esqueleto {
  background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie) 37%, var(--superficie-2) 63%);
  background-size: 400% 100%;
  animation: esqueleto 1.4s ease infinite;
  border-radius: var(--raio-sm);
}

@keyframes deslizar-modal {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-entra { animation: deslizar-modal var(--vel-lenta) both; }

@keyframes marca-check {
  0% { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

.check-animado path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: marca-check 0.5s ease-out 0.15s forwards;
}