/* ============================================================
   DevAlpha — animations.css   Subtiles & propres
   ============================================================ */

/* ----- Scroll progress ----- */
/* (dans main.css) */

/* ----- Entrées scroll (remplace AOS) ----- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Délais optionnels */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ----- Fade in simple ----- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.5s ease forwards; }

/* ----- Navbar scrolled ----- */
.navbar.scrolled {
  padding: 0 2rem;
}

/* ----- Particules hero (très subtiles) ----- */
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: particle-drift var(--dur, 10s) var(--delay, 0s) infinite ease-in-out;
}
@keyframes particle-drift {
  0%   { opacity: 0;    transform: translateY(0)     scale(0.5); }
  30%  { opacity: 0.08; }
  70%  { opacity: 0.04; }
  100% { opacity: 0;    transform: translateY(-80px) scale(1); }
}

/* ----- Blob morphing (about) ----- */
@keyframes morphBlob {
  0%,100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  33%     { border-radius: 48% 52% 42% 58% / 58% 42% 58% 42%; }
  66%     { border-radius: 54% 46% 60% 40% / 44% 62% 38% 56%; }
}

/* ----- Float (contact blob) ----- */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

/* ----- Pulse dot disponibilité ----- */
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,184,64,0.55); }
  50%     { box-shadow: 0 0 0 5px rgba(232,184,64,0); }
}

/* ----- Modal entrée ----- */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ----- Curseur typewriter ----- */
@keyframes blink-cursor {
  0%,100% { border-color: var(--accent); }
  50%     { border-color: transparent; }
}

/* ----- Hover service card : top bar ----- */
.service-card::before {
  transition: transform 0.32s ease;
}

/* ----- Bounce scroll arrow ----- */
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(7px); }
}

/* ----- Spin (badge circulaire) ----- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spin-center {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* ----- Pop entrée (devis success) ----- */
@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ----- Step panel transition ----- */
@keyframes stepIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}