/* ============================================================
   B.LIFTED France — Animations v3.0
   ============================================================ */

/* ── KEYFRAMES DE BASE ──────────────────────────────────── */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -4%); }
  20%  { transform: translate(4%, 2%); }
  30%  { transform: translate(-3%, 5%); }
  40%  { transform: translate(5%, -3%); }
  50%  { transform: translate(-1%, 4%); }
  60%  { transform: translate(3%, -2%); }
  70%  { transform: translate(-4%, 1%); }
  80%  { transform: translate(2%, 3%); }
  90%  { transform: translate(-3%, -1%); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes lineGrow {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes lineGrowV {
  from { height: 0; }
  to   { height: 100%; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.96); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

@keyframes heroZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

@keyframes cursorAppear {
  from { opacity: 0; scale: 0.4; }
  to   { opacity: 1; scale: 1; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes progressFill {
  from { width: 0; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-6deg) scale(0.95); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}


/* ── CLASSES D'ANIMATION ────────────────────────────────── */

/* État initial pour scroll reveal */
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(28px); }
[data-reveal="right"] { transform: translateX(-28px); }

/* Sur mobile, les translations horizontales causent un scroll lateral —
   on les convertit en translation verticale */
@media (max-width: 768px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(16px); }
}
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="rotate"]{ transform: rotate(-4deg) scale(0.96); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Délais */
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }
[data-delay="600"] { transition-delay: 0.60s; }
[data-delay="700"] { transition-delay: 0.70s; }
[data-delay="800"] { transition-delay: 0.80s; }

/* Split text — mots */
.word-wrap { overflow: hidden; display: inline-block; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.word-inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}