/* ═══════════════════════════════════════════════════════
   EASY CLAW — ANIMATIONS
   Tous les @keyframes du projet + animations utilitaires
   ═══════════════════════════════════════════════════════ */

/* ── Orbes flottants ── */
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) }
  50%      { transform: translate(20px,-30px) }
}

/* ── Badge pulse (hero) ── */
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1) }
  50%     { opacity:.3; transform:scale(.8) }
}

/* ── Marquee cas d'usage ── */
@keyframes ucR2L {
  0%   { transform:translateX(0) }
  100% { transform:translateX(-50%) }
}
@keyframes ucL2R {
  0%   { transform:translateX(-50%) }
  100% { transform:translateX(0) }
}

/* ── Messages chat iPhone ── */
@keyframes ipIn {
  to { opacity:1; transform:translateY(0) }
}

/* ── Points de frappe ── */
@keyframes ipDot {
  0%,100% { opacity:.3; transform:translateY(0) }
  50%     { opacity:1;  transform:translateY(-2px) }
}

/* ── Curseur clignotant ── */
@keyframes ipBlink {
  0%,100% { opacity:1 }
  50%     { opacity:0 }
}

/* ── Wizard : apparition étape ── */
@keyframes obFadeIn {
  from { opacity:0; transform:translateY(12px) }
  to   { opacity:1; transform:translateY(0) }
}

/* ── Wizard : secousse validation ── */
@keyframes obShake {
  0%,100%  { transform:translateX(0) }
  20%,60%  { transform:translateX(-6px) }
  40%,80%  { transform:translateX(6px) }
}

/* ── Spinner deploy ── */
@keyframes obSpin {
  to { transform:rotate(360deg) }
}

/* ── Social proof : dot live ── */
@keyframes spP {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(0,255,136,.4) }
  50%     { opacity:.5; box-shadow:0 0 0 6px rgba(0,255,136,0) }
}

/* ── Social proof marquee ── */
@keyframes spR2L {
  0%   { transform:translateX(0) }
  100% { transform:translateX(-50%) }
}
@keyframes spL2R {
  0%   { transform:translateX(-50%) }
  100% { transform:translateX(0) }
}

/* ══ NOUVEAUX EFFETS HERO ══ */

/* Anneau lumineux rotatif autour de l'iPhone */
@keyframes glowRotate {
  from { transform:translate(-50%,-50%) rotate(0deg) }
  to   { transform:translate(-50%,-50%) rotate(360deg) }
}

/* Flottement vertical de l'iPhone */
@keyframes deviceFloat {
  0%,100% { transform:translateY(0) }
  50%     { transform:translateY(-12px) }
}

/* Bannière cookie — slide-in */
@keyframes cookieSlideIn {
  from { transform:translateX(-50%) translateY(120%); opacity:0 }
  to   { transform:translateX(-50%) translateY(0);   opacity:1 }
}