/**
 * assets/css/animations.css — GalerieGRAPH Phase 1
 * Hero entrance, scroll reveal, mobile menu, FAQ, modal.
 * CSS natif uniquement — aucune dépendance externe.
 */

/* ── 0. Réduction mouvement (accessibilité) ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .gg-hero-enter > *,
  .gg-reveal,
  #mobile-menu,
  details[open] > *:not(summary),
  .gg-modal,
  .gg-modal-content {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* ── 1. Keyframes ───────────────────────────────────────── */
@keyframes gg-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gg-accordion-open {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 2. Hero entrance (stagger 5 enfants) ───────────────── */
.gg-hero-enter > * {
  opacity: 0;
  animation: gg-fade-up 0.55s ease-out forwards;
}

.gg-hero-enter > *:nth-child(1) { animation-delay: 0.05s; }
.gg-hero-enter > *:nth-child(2) { animation-delay: 0.20s; }
.gg-hero-enter > *:nth-child(3) { animation-delay: 0.35s; }
.gg-hero-enter > *:nth-child(4) { animation-delay: 0.48s; }
.gg-hero-enter > *:nth-child(5) { animation-delay: 0.62s; }

/* ── 3. Scroll reveal (classes gérées par animations.js) ── */
.gg-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

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

/* ── 4. Mobile menu slide ───────────────────────────────── */
#mobile-menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
  pointer-events: none;
}

#mobile-menu.menu-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── 5. FAQ / <details> accordion ──────────────────────── */
details[open] > *:not(summary) {
  animation: gg-accordion-open 0.28s ease-out forwards;
}

/* ── 6. Modal (opacity-driven, display:flex en permanence) ─ */
.gg-modal {
  transition: opacity 0.22s ease-out;
}

.gg-modal:not(.open) {
  opacity: 0;
  pointer-events: none;
}

.gg-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.gg-modal-content {
  transform: scale(0.97);
  transition: transform 0.22s ease-out;
}

.gg-modal.open .gg-modal-content {
  transform: scale(1);
}

/* ── 7. Section With Mockup ─────────────────────────────── */

/* États initiaux — opacity:0 avant déclenchement IntersectionObserver */
.gg-section-mockup .gg-mockup-text,
.gg-section-mockup .gg-mockup-main,
.gg-section-mockup .gg-mockup-bg {
  opacity: 0;
}

/* Keyframes */
@keyframes gg-mockup-enter-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gg-mockup-enter-bg {
  from {
    opacity: 0;
    transform: scale(0.96) translateX(24px);
  }
  to {
    opacity: 0.45;
    transform: scale(1) translateX(0);
  }
}

/* Classes activées par animations.js → IntersectionObserver */
.gg-section-mockup .gg-mockup-text.is-visible {
  animation: gg-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gg-section-mockup .gg-mockup-main.is-visible {
  animation: gg-mockup-enter-right 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gg-section-mockup .gg-mockup-bg.is-visible {
  animation: gg-mockup-enter-bg 1s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards;
}

/* Reduced motion — affichage direct, aucun mouvement */
@media (prefers-reduced-motion: reduce) {
  .gg-section-mockup .gg-mockup-text,
  .gg-section-mockup .gg-mockup-main {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .gg-section-mockup .gg-mockup-bg {
    opacity: 0.45 !important;
    transform: none !important;
    animation: none !important;
  }
}