/*
 * Section Blocks Animations - Scroll Reveal
 * Joseph Ventures - Animations pour les blocs de sections
 * Fonctionne sur mobile ET desktop
 */

/* ========================================
   VARIABLES D'ANIMATION
   ======================================== */

:root {
  --block-anim-duration: 0.8s;
  --block-anim-delay: 0.1s;
  --block-anim-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --block-anim-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   ÉTAT INITIAL - BLOCS CACHÉS
   ======================================== */

.section-block {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity var(--block-anim-duration) var(--block-anim-easing),
              transform var(--block-anim-duration) var(--block-anim-easing);
  will-change: opacity, transform;
  /* S'assurer que les blocs sont visibles pour l'IntersectionObserver */
  visibility: visible;
}

/* ========================================
   ÉTAT ANIMÉ - BLOCS VISIBLES
   ======================================== */

.section-block.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* ========================================
   DÉLAIS STAGGER - ANIMATION EN CASCADE
   ======================================== */

.section-block:nth-child(1) {
  transition-delay: 0s;
}

.section-block:nth-child(2) {
  transition-delay: 0.1s;
}

.section-block:nth-child(3) {
  transition-delay: 0.2s;
}

.section-block:nth-child(4) {
  transition-delay: 0.3s;
}

.section-block:nth-child(5) {
  transition-delay: 0.4s;
}

.section-block:nth-child(6) {
  transition-delay: 0.5s;
}

.section-block:nth-child(7) {
  transition-delay: 0.6s;
}

/* ========================================
   VARIANTES D'ANIMATION
   ======================================== */

/* Fade Up (par défaut) */
.section-block[data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(60px);
}

.section-block[data-anim="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In */
.section-block[data-anim="fade-in"] {
  opacity: 0;
  transform: none;
}

.section-block[data-anim="fade-in"].is-visible {
  opacity: 1;
}

/* Slide Left */
.section-block[data-anim="slide-left"] {
  opacity: 0;
  transform: translateX(60px);
}

.section-block[data-anim="slide-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide Right */
.section-block[data-anim="slide-right"] {
  opacity: 0;
  transform: translateX(-60px);
}

.section-block[data-anim="slide-right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Zoom In */
.section-block[data-anim="zoom-in"] {
  opacity: 0;
  transform: scale(0.95);
}

.section-block[data-anim="zoom-in"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Fade Up avec Blur */
.section-block[data-anim="fade-up-blur"] {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(10px);
  transition: opacity var(--block-anim-duration) var(--block-anim-easing),
              transform var(--block-anim-duration) var(--block-anim-easing),
              filter var(--block-anim-duration) var(--block-anim-easing);
}

.section-block[data-anim="fade-up-blur"].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ========================================
   OPTIMISATIONS MOBILE
   ======================================== */

@media (max-width: 639px) {
  .section-block {
    transform: translateY(40px) !important; /* Réduire la distance sur mobile */
    transition-duration: 0.6s !important; /* Animation plus rapide sur mobile */
    opacity: 0 !important; /* Forcer l'état initial */
  }
  
  .section-block.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  .section-block[data-anim="slide-left"],
  .section-block[data-anim="slide-right"] {
    transform: translateX(30px) !important; /* Réduire la distance sur mobile */
  }
  
  .section-block[data-anim="slide-right"] {
    transform: translateX(-30px) !important;
  }
  
  .section-block[data-anim="slide-left"].is-visible,
  .section-block[data-anim="slide-right"].is-visible {
    transform: translateX(0) !important;
  }
}

/* ========================================
   OPTIMISATIONS TABLETTE
   ======================================== */

@media (min-width: 640px) and (max-width: 1023px) {
  .section-block {
    transform: translateY(50px);
  }
}

/* ========================================
   OPTIMISATIONS DESKTOP
   ======================================== */

@media (min-width: 1024px) {
  .section-block {
    transform: translateY(80px) !important; /* Plus de distance sur desktop */
    transition-duration: 1s !important; /* Animation plus lente sur desktop */
    opacity: 0 !important; /* Forcer l'état initial */
  }
  
  .section-block.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  .section-block[data-anim="slide-left"],
  .section-block[data-anim="slide-right"] {
    transform: translateX(80px) !important;
  }
  
  .section-block[data-anim="slide-right"] {
    transform: translateX(-80px) !important;
  }
  
  .section-block[data-anim="slide-left"].is-visible,
  .section-block[data-anim="slide-right"].is-visible {
    transform: translateX(0) !important;
  }
}

/* ========================================
   RESPECT PREFERENCES UTILISATEUR
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .section-block {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }
}

/* ========================================
   EFFETS SUPPLÉMENTAIRES
   ======================================== */

/* Effet de glow subtil au scroll */
.section-block.is-visible::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(44, 41, 170, 0.1), rgba(184, 165, 136, 0.1));
  border-radius: 8px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.section-block.is-visible:hover::before {
  opacity: 1;
}