/* =========================================================
   ATAWLA — animations.css v2
   ========================================================= */

/* ----- Badge Hero ----- */
@keyframes badgeFloat {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%       { transform: rotate(-8deg) translateY(-7px); }
}
.hero__badge { animation: badgeFloat 3.5s ease-in-out infinite; }

/* ----- Hero title entrance ----- */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow { animation: heroIn 0.7s ease both; animation-delay: 0.1s; }
.hero__title   { animation: heroIn 0.8s ease both; animation-delay: 0.25s; }

/* ----- Wizard panel transitions ----- */
@keyframes panelIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes panelInBack {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.wizard-panel.is-active { animation: panelIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; }
.wizard-panel.is-active.from-back { animation: panelInBack 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* ----- Form success ----- */
@keyframes successPop {
  0%   { transform: scale(0.85); opacity: 0; }
  65%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
.form-success.is-visible { animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }


/* ----- Card formule hover tag ----- */
.card-formule__tag { transition: letter-spacing 0.3s ease; }
.card-formule:hover .card-formule__tag { letter-spacing: 0.28em; }

/* ----- Nav link hover underline ----- */
.nav__links a::after { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* ----- Spinner ----- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Prefers reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .hero__badge, .mobile-cta { animation: none; }
  .hero__eyebrow, .hero__title { animation: none; }
  .wizard-panel.is-active, .wizard-panel.is-active.from-back { animation: none; }
  .form-success.is-visible { animation: none; }
}