/**
 * animations.css — Système Global d'Animations & Micro-Interactions Premium
 * 
 * Animations subtiles, élégantes, fluides et professionnelles :
 * - Révélations progressives au scroll (IntersectionObserver)
 * - Micro-flottement délicat des logos Microsoft officiels
 * - Interactions au survol (hover) sur cartes et boutons CTA
 * - Transition fluide des accordéons et du compte à rebours
 * - Respect strict de prefers-reduced-motion: reduce
 */

/* ==========================================================================
   1. RÉVÉLATION AU SCROLL (SCROLL-TRIGGERED REVEALS)
   ========================================================================== */
.reveal-init {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease-out-smooth),
              transform 0.65s var(--ease-out-smooth);
  will-change: opacity, transform;
}

.reveal-init.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes d'apparition */
.reveal-scale {
  opacity: 0;
  transform: scale(0.95) translateY(16px);
  transition: opacity 0.6s var(--ease-out-smooth),
              transform 0.6s var(--ease-out-smooth);
}

.reveal-scale.is-revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.reveal-fade.is-revealed {
  opacity: 1;
}

/* Échelonnage temporel pour grilles d'éléments (stagger) */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }

/* ==========================================================================
   2. HERO : AMBIANCE VIVANTE ET SÉDUISANTE
   ========================================================================== */
.hero-badge-animated {
  animation: heroBadgeIn 0.8s var(--ease-out-smooth) both;
}

.hero-title-animated {
  animation: heroTitleIn 0.85s var(--ease-out-smooth) 0.1s both;
}

.hero-lead-animated {
  animation: heroLeadIn 0.9s var(--ease-out-smooth) 0.2s both;
}

.hero-cta-animated {
  animation: heroCtaIn 0.95s var(--ease-out-smooth) 0.3s both;
}

@keyframes heroBadgeIn {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroTitleIn {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroLeadIn {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroCtaIn {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Halo lumineux en dérive très lente dans le Hero */
.hero-ambient-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, 92vw);
  height: 420px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0) 65%);
  pointer-events: none;
  z-index: 0;
  animation: subtleAmbientBreathe 9s ease-in-out infinite alternate;
}

@keyframes subtleAmbientBreathe {
  0% {
    opacity: 0.6;
    transform: translateX(-50%) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.04);
  }
}

/* ==========================================================================
   3. LOGOS MICROSOFT : MICRO-FLOTTEMENT DÉLICAT
   ========================================================================== */
.hero-app-badge img,
.software-logo-animated {
  transition: transform 0.3s var(--ease-out-smooth);
}

.hero-app-badge:hover img,
.software-logo-animated:hover {
  transform: translateY(-3px) scale(1.08);
}

/* Micro-flottement échelonné pour les 5 badges du ruban Hero */
.hero-app-badge:nth-child(1) { animation: gentleLogoFloat 4.2s ease-in-out 0.0s infinite alternate; }
.hero-app-badge:nth-child(2) { animation: gentleLogoFloat 4.6s ease-in-out 0.5s infinite alternate; }
.hero-app-badge:nth-child(3) { animation: gentleLogoFloat 4.4s ease-in-out 1.0s infinite alternate; }
.hero-app-badge:nth-child(4) { animation: gentleLogoFloat 4.8s ease-in-out 1.5s infinite alternate; }
.hero-app-badge:nth-child(5) { animation: gentleLogoFloat 4.3s ease-in-out 2.0s infinite alternate; }

@keyframes gentleLogoFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3px);
  }
}

/* ==========================================================================
   4. SYSTÈME DE RANGÉES 3D & ANIMATIONS "ZOUM ET REZOUM" (ÉLÉGANT & STYLÉ)
   ========================================================================== */
.row-3d,
.course-card,
.module-card,
.curriculum-card,
.access-step-card,
.bonus-card,
.bonus-card-item,
.bonus-value-block,
.why-card,
.how-step-card,
.offer-box,
.offer-central-box,
.offer-curriculum-box,
.offer-final-card,
.offer-final-cta-block,
.market-final-cta-card,
.mobile-module-accordion,
.faq-item,
.faq-accordion-item,
.market-faq-item {
  position: relative;
  background: var(--bg-card, #FFFFFF);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--radius-xl, 20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background-color 0.25s ease;
  will-change: transform, box-shadow;
}

/* Effet de profondeur : reflet de lumière physique supérieur subtil */
.row-3d::after,
.course-card::after,
.module-card::after,
.bonus-card::after,
.bonus-card-item::after,
.offer-box::after,
.offer-central-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* Interaction au survol / focus (Légère élévation -2px et ombre raffinée) */
@media (hover: hover) and (pointer: fine) {
  .row-3d:hover,
  .course-card:hover,
  .module-card:hover,
  .curriculum-card:hover,
  .access-step-card:hover,
  .bonus-card:hover,
  .bonus-card-item:hover,
  .why-card:hover,
  .how-step-card:hover,
  .offer-box:hover,
  .offer-central-box:hover,
  .market-final-cta-card:hover,
  .mobile-module-accordion:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: #CBD5E1;
  }
}

/* Micro-enfoncement au clic */
.row-3d:active,
.course-card:active,
.module-card:active,
.bonus-card:active,
.bonus-card-item:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Pulsation d'ambiance discrète "Zoum & Rezoum" sur les cartes principales */
.zoom-rezoom-pulse {
  animation: zoomRezoomPulse 6s ease-in-out infinite;
}

@keyframes zoomRezoomPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.018);
  }
}

/* ==========================================================================
   4.1 APPARITION AU SCROLL DU CONTENU DES RANGÉES (CHILD STAGGER & REVEAL)
   ========================================================================== */
.row-reveal-ready {
  opacity: 0;
  transform: translateY(28px) scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.row-reveal-ready.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Les contenus enfants internes de chaque rangée apparaissent avec délai étagé au scroll */
.row-reveal-ready .row-child-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.row-reveal-ready.is-inview .row-child-reveal {
  opacity: 1;
  transform: translateY(0);
}

.row-reveal-ready.is-inview .row-child-reveal:nth-child(1) { transition-delay: 0.08s; }
.row-reveal-ready.is-inview .row-child-reveal:nth-child(2) { transition-delay: 0.16s; }
.row-reveal-ready.is-inview .row-child-reveal:nth-child(3) { transition-delay: 0.24s; }
.row-reveal-ready.is-inview .row-child-reveal:nth-child(4) { transition-delay: 0.32s; }
.row-reveal-ready.is-inview .row-child-reveal:nth-child(5) { transition-delay: 0.40s; }

/* ==========================================================================
   5. BOUTONS D'ACTION (CTA HOVER & ACTIVE)
   ========================================================================== */
.btn-cta {
  transition: transform 0.2s var(--ease-out-smooth),
              box-shadow 0.2s var(--ease-out-smooth),
              filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px var(--color-cta-shadow);
    filter: brightness(1.03);
  }
}

.btn-cta:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 4px 10px var(--color-cta-shadow);
}

/* ==========================================================================
   6. COUNTDOWN : TRANSITION DISCRÈTE DES CHIFFRES
   ========================================================================== */
.timer-num,
.offer-timer-num {
  display: inline-block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.timer-num.number-changed,
.offer-timer-num.number-changed {
  animation: numberPulse 0.3s ease;
}

@keyframes numberPulse {
  0% {
    opacity: 0.6;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   7. RESPECT STRICT DE PREFERS-REDUCED-MOTION
   ========================================================================== */
@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;
  }

  .reveal-init,
  .reveal-scale,
  .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-app-badge,
  .hero-ambient-glow {
    animation: none !important;
    transform: none !important;
  }

  .btn-cta:hover {
    transform: none !important;
  }
}