/* ============================================================
   EPYK — Animations & Transitions
   ============================================================ */

/* --- Reveal au scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* --- Fade in simple --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Slide up --- */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Animation d'entrée de la nav --- */
.nav {
  animation: fadeIn 0.4s ease forwards;
}

/* --- Curseur personnalisé (optionnel) --- */
/* Décommenter pour activer le curseur custom
body { cursor: none; }
.cursor {
  width: 8px;
  height: 8px;
  background: var(--color-gold);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.15s ease, height 0.15s ease, opacity 0.15s ease;
}
.cursor.hover {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}
*/

/* --- Hover scale subtil pour les visuels mock --- */
.phone-mock,
.bilan-vis {
  transition: transform 0.4s ease;
}

.feat-visual:hover .phone-mock,
.feat-visual:hover .bilan-vis {
  transform: translateY(-4px);
}

/* --- Pulsation dot rouge --- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.badge-dot {
  animation: pulse 2s ease-in-out infinite;
}

/* --- Ligne de séparation animée au chargement --- */
@keyframes lineExpand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}