/* ============================================================
   RPAM – Motion Design Layer
   Animations & micro-interactions to complement existing effects
   ============================================================ */

/* ——————————————————————————————————————————
   PAGE TRANSITION
   The wrapper div is re-keyed on each route change,
   causing React to remount it and replay this animation.
—————————————————————————————————————————— */
@keyframes pageFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-transition {
  animation: pageFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ——————————————————————————————————————————
   HERO – Badge entrance (missing from pages.css)
   + smoother spring timing on all hero elements
—————————————————————————————————————————— */
.hero-identity-badge {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeInUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.2s;
}

.hero-title {
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  animation-duration: 0.9s !important;
  animation-delay: 0.42s !important;
}

.hero-subtitle {
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  animation-duration: 0.85s !important;
  animation-delay: 0.62s !important;
}

.hero-buttons {
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  animation-duration: 0.75s !important;
  animation-delay: 0.82s !important;
}

/* ——————————————————————————————————————————
   HERO PRIMARY BUTTON – Spring lift on hover
—————————————————————————————————————————— */
.hero-btn-primary {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease !important;
}

.hero-btn-primary:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 10px 30px rgba(236, 171, 35, 0.55) !important;
}

/* ——————————————————————————————————————————
   SERVICE CARDS – Deeper shadow + spring easing
—————————————————————————————————————————— */
.service-card-modern {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease !important;
}

.service-card-modern:hover {
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18) !important;
}

/* ——————————————————————————————————————————
   VALUE CARDS – Spring easing
—————————————————————————————————————————— */
.value-card {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease !important;
}

.value-card:hover {
  box-shadow: 0 24px 60px rgba(0, 81, 83, 0.2) !important;
}

/* ——————————————————————————————————————————
   OBJECTIVES CARDS (3-problèmes section)
   Transition to pair with existing :hover rule in pages.css
—————————————————————————————————————————— */
.objectives-card {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              border-color 0.3s ease;
}

/* ——————————————————————————————————————————
   WHATSAPP BUTTON – Ambient pulse ring
—————————————————————————————————————————— */
@keyframes whatsappGlow {
  0%, 100% {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3),
                0 0 0 0   rgba(37, 211, 102, 0.55);
  }
  55% {
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.3),
                0 0 0 11px rgba(37, 211, 102, 0);
  }
}

.whatsapp-float {
  animation: whatsappGlow 2.8s ease-in-out infinite;
}

/* ——————————————————————————————————————————
   REDUCED MOTION – Accessibility
—————————————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
  .page-transition,
  .for-who-item,
  .hero-identity-badge {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-title,
  .hero-subtitle,
  .hero-buttons {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
  }

  .service-card-modern,
  .value-card,
  .objectives-card,
  .hero-btn-primary,
  .whatsapp-float {
    transition: none !important;
    animation: none !important;
  }
}