/* ============================================
   YDF — animations.css
   Animations subtiles, scroll reveal, micro-interactions
   ============================================ */


/* --------------------------------------------
   SCROLL REVEAL
   (activé par main.js via Intersection Observer)
   -------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: opacity, transform;
}

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

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }


/* --------------------------------------------
   MARQUEE (secteurs)
   -------------------------------------------- */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* --------------------------------------------
   ORBS FLOTTANTS (hero)
   -------------------------------------------- */
@keyframes float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, -20px) scale(1.05); }
}

@keyframes float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-25px, 20px) scale(1.08); }
}

@keyframes float-3 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(15px, -25px); }
}

.orb-1 { animation: float-1 12s ease-in-out infinite; }
.orb-2 { animation: float-2 14s ease-in-out infinite; }
.orb-3 { animation: float-3 10s ease-in-out infinite; }


/* --------------------------------------------
   FADE / SLIDE
   -------------------------------------------- */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in  { animation: fade-in 600ms ease both; }
.slide-up { animation: slide-up 600ms ease both; }


/* --------------------------------------------
   PULSE DOUX (badges, dots)
   -------------------------------------------- */
@keyframes pulse-dot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
}

.badge-dot {
    animation: pulse-dot 2s ease-in-out infinite;
}


/* --------------------------------------------
   COMPTEURS (stats)
   -------------------------------------------- */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

.is-counting {
    animation: pulse-soft 1.2s ease-in-out infinite;
}


/* --------------------------------------------
   SHIMMER (placeholder, hover effects premium)
   -------------------------------------------- */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}


/* --------------------------------------------
   QR — ligne de scan qui descend
   -------------------------------------------- */
@keyframes qr-scan-pass {
    0%   { top: -10%; opacity: 0; }
    10%  { opacity: 1; }
    50%  { top: 100%; opacity: 1; }
    51%  { opacity: 0; }
    100% { top: 100%; opacity: 0; }
}


/* --------------------------------------------
   GLOBE — rotation continue
   -------------------------------------------- */
@keyframes globe-spin {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}

@keyframes orbit-counter {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}


/* --------------------------------------------
   POINTS LUMINEUX (globe)
   -------------------------------------------- */
@keyframes dot-pulse {
    0%, 100% { transform: scale(1);   opacity: 0.6; }
    50%      { transform: scale(1.6); opacity: 1;   }
}


/* --------------------------------------------
   GLOW PULSANT (QR + Globe)
   -------------------------------------------- */
@keyframes pulse-glow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}


/* --------------------------------------------
   FEUILLES qui flottent (Flyers)
   -------------------------------------------- */
@keyframes paper-float {
    0%, 100% { transform: translateZ(0) translateY(0); }
    50%      { transform: translateZ(20px) translateY(-8px); }
}


/* --------------------------------------------
   FLOAT TAGS (tags autour du téléphone)
   -------------------------------------------- */
@keyframes tag-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}


/* --------------------------------------------
   BURGER 3D (qui sort de l'écran)
   -------------------------------------------- */
@keyframes burger-float {
    0%, 100% { transform: translateY(0)    rotate(-3deg) scale(1); }
    50%      { transform: translateY(-14px) rotate(2deg)  scale(1.02); }
}


/* --------------------------------------------
   FLYERS HERO (3 cards en éventail)
   -------------------------------------------- */
@keyframes flyer-float-a {
    0%, 100% { transform: translate(28%, -8%)  rotate(8deg); }
    50%      { transform: translate(28%, -12%) rotate(10deg); }
}

@keyframes flyer-float-b {
    0%, 100% { transform: translate(0, 0)    rotate(-2deg); }
    50%      { transform: translate(0, -6px) rotate(0deg); }
}

@keyframes flyer-float-c {
    0%, 100% { transform: translate(-28%, 8%)  rotate(-10deg); }
    50%      { transform: translate(-28%, 4%) rotate(-12deg); }
}


/* --------------------------------------------
   ACCESSIBILITÉ : 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 {
        opacity: 1;
        transform: none;
    }

    .orb-1, .orb-2, .orb-3 { animation: none; }
    .globe, .orbit-outer, .qr-scan, .paper-1, .globe-dot { animation: none; }
    .float-tag, .burger-3d { animation: none; }
    .flyer-large { animation: none; }
}