/* ===================================
   SYNAP'KIDS - ANIMATIONS MOBILE-FIRST
   Optimisé pour les performances mobiles
   =================================== */

/* === 1. ANIMATIONS D'ENTRÉE AU SCROLL === */

/* Animation fade-in-up (apparition du bas vers le haut) */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px); /* Réduit pour mobile (était 30px) */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation fade-in (simple apparition en fondu) */
.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.fade-in.is-visible {
  opacity: 1;
}

/* Animation slide-in-left (glissement depuis la gauche) */
.slide-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Animation slide-in-right (glissement depuis la droite) */
.slide-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* === 2. DÉLAIS PROGRESSIFS POUR EFFET CASCADE === */
/* Appliqué automatiquement par le script JS */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* === 3. MICRO-INTERACTIONS SUR LES CARTES === */

/* Amélioration hover des cartes flagship (desktop uniquement) */
@media (hover: hover) and (pointer: fine) {
  .flagship-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
  }

  .flagship-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(78, 124, 216, 0.2);
  }

  /* Animation douce sur les feature-row (desktop) */
  .feature-row {
    transition: transform 0.3s ease;
  }

  .feature-row:hover {
    transform: translateY(-4px);
  }
}

/* Sur mobile: effet tactile léger au touch */
@media (hover: none) and (pointer: coarse) {
  .flagship-card:active {
    transform: scale(0.98);
    transition: transform 0.15s ease;
  }

  .btn-primary:active,
  .btn-secondary:active {
    transform: scale(0.96);
  }
}

/* === 4. ANIMATION DE "RESPIRATION" SUBTILE SUR LES BADGES === */
@keyframes pulse-soft {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* Appliqué uniquement sur desktop pour économiser les ressources mobile */
@media (min-width: 768px) {
  .flagship-card-num {
    animation: pulse-soft 3s ease-in-out infinite;
  }
}

/* === 5. ANIMATION DOUCE SUR LES TITRES ET SOUS-TITRES === */
@keyframes title-reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation du héro (au chargement de la page) */
.hero-v2-title {
  animation: title-reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.hero-v2-sub {
  animation: title-reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

/* Animation des titres de sections (au scroll) */
.section-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation des sous-titres de sections (décalée de 0.2s) */
.section-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.section-subtitle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation spécifique pour flagship-title et flagship-subtitle */
.flagship-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.flagship-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.flagship-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.flagship-subtitle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === 6. OPTIMISATIONS PERFORMANCE === */

/* Préchargement des transformations pour éviter les reflows */
.fade-in-up,
.slide-in-left,
.slide-in-right,
.flagship-card,
.feature-row,
.section-title,
.section-subtitle,
.flagship-title,
.flagship-subtitle {
  will-change: transform, opacity;
}

/* Forcer l'accélération GPU pour des animations fluides */
.fade-in-up,
.slide-in-left,
.slide-in-right {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* === 7. DÉSACTIVATION DES ANIMATIONS SUR DEVICES LOW-END === */

/* Détection des préférences utilisateur (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-in-up,
  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .section-title,
  .section-subtitle,
  .flagship-title,
  .flagship-subtitle {
    opacity: 1;
    transform: none;
  }

  /* Désactiver aussi l'animation du héro */
  .hero-v2-title,
  .hero-v2-sub {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Désactivation sur très petits écrans / devices anciens */
@media (max-width: 360px) {
  .fade-in-up,
  .slide-in-left,
  .slide-in-right {
    transition-duration: 0.3s; /* Accéléré pour devices plus lents */
  }

  .flagship-card-num {
    animation: none; /* Pas d'animation pulse sur petits devices */
  }
}

/* === 8. ANIMATION SUBTILE SUR LES BOUTONS CTA === */
@keyframes cta-glow {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(78, 124, 216, 0.32),
                0 4px 12px rgba(255, 150, 64, 0.3);
  }
  50% {
    box-shadow: 0 8px 28px rgba(78, 124, 216, 0.42),
                0 4px 16px rgba(255, 150, 64, 0.4);
  }
}

/* Uniquement sur desktop pour économiser la batterie mobile */
@media (min-width: 768px) {
  .btn-primary {
    animation: cta-glow 3s ease-in-out infinite;
  }
}

/* === 9. ANIMATION SMOOTH DES IMAGES === */
.feature-illustration,
.flagship-image,
.blog-card-img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
}

/* === 10. LOADING STATE (optionnel) === */
.loading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* === 11. ANIMATION HOVER POUR LES SECTIONS IMPORTANTES === */
@media (hover: hover) and (pointer: fine) {
  .section-title:hover::after {
    width: 70%; /* Élargit la ligne sous le titre */
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}