/* ================================================================
   BEN-BATI — SYSTÈME D'ANIMATIONS INTERACTIVES
   Scroll reveals + hover effects + CTA pulse + fond blueprint vivant
   60 FPS — utilise transform & opacity uniquement (GPU-accelerated)
   ================================================================ */

/* ================================================================
   1. SCROLL REVEAL — Fade-in + slide-up (Intersection Observer)
   ================================================================ */

/* État initial : invisible, décalé vers le bas */
.anim-fade-up {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* État visible : animé par JS (Intersection Observer) */
.anim-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variante avec délai progressif (appliqué par data-delay) */
.anim-fade-up[data-delay="100"]  { transition-delay: 0.1s; }
.anim-fade-up[data-delay="200"]  { transition-delay: 0.2s; }
.anim-fade-up[data-delay="300"]  { transition-delay: 0.3s; }
.anim-fade-up[data-delay="400"]  { transition-delay: 0.4s; }
.anim-fade-up[data-delay="500"]  { transition-delay: 0.5s; }
.anim-fade-up[data-delay="600"]  { transition-delay: 0.6s; }

/* Variante depuis la gauche */
.anim-fade-left {
    opacity: 0;
    transform: translateX(-32px);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* Variante depuis la droite */
.anim-fade-right {
    opacity: 0;
    transform: translateX(32px);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* Variante scale-in (zoom subtil) */
.anim-scale-in {
    opacity: 0;
    transform: scale(0.94);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ================================================================
   2. STAGGER — Animation séquentielle des enfants
   ================================================================ */

/* Conteneur avec stagger : chaque enfant direct s'anime l'un après l'autre */
.anim-stagger > .anim-stagger-item {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Délais générés par le JS selon l'index de l'enfant */
.anim-stagger.is-visible > .anim-stagger-item:nth-child(1)  { transition-delay: 0.00s; }
.anim-stagger.is-visible > .anim-stagger-item:nth-child(2)  { transition-delay: 0.10s; }
.anim-stagger.is-visible > .anim-stagger-item:nth-child(3)  { transition-delay: 0.20s; }
.anim-stagger.is-visible > .anim-stagger-item:nth-child(4)  { transition-delay: 0.30s; }
.anim-stagger.is-visible > .anim-stagger-item:nth-child(5)  { transition-delay: 0.40s; }
.anim-stagger.is-visible > .anim-stagger-item:nth-child(6)  { transition-delay: 0.50s; }
.anim-stagger.is-visible > .anim-stagger-item:nth-child(7)  { transition-delay: 0.60s; }
.anim-stagger.is-visible > .anim-stagger-item:nth-child(8)  { transition-delay: 0.70s; }
.anim-stagger.is-visible > .anim-stagger-item:nth-child(9)  { transition-delay: 0.80s; }
.anim-stagger.is-visible > .anim-stagger-item:nth-child(10) { transition-delay: 0.90s; }

.anim-stagger.is-visible > .anim-stagger-item {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================================
   3. HOVER EFFECTS — Élévation + glow sur les cartes
   ================================================================ */

/* Hover lift : élévation subtile */
.anim-hover-lift {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
}

.anim-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 180, 216, 0.08);
}

/* Hover glow : brillance cyan sur le bord */
.anim-hover-glow {
    position: relative;
    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.anim-hover-glow::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 220, 255, 0.25),
        rgba(245, 158, 11, 0.15),
        rgba(0, 220, 255, 0.1)
    );
    z-index: -1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.anim-hover-glow:hover {
    border-color: rgba(0, 220, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 180, 216, 0.12);
}

.anim-hover-glow:hover::after {
    opacity: 1;
}

/* Hover zoom d'image — déjà géré dans blueprint.css, renforcé ici */
.anim-img-zoom {
    overflow: hidden;
}

.anim-img-zoom img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-img-zoom:hover img {
    transform: scale(1.06);
}

/* ================================================================
   4. CTA PULSE — Animation de pulsation sur les boutons
   ================================================================ */

/* Pulse d'attention (sans l'anneau expansif, plus subtil) */
.anim-cta-pulse {
    animation: btn-soft-pulse 3s ease-in-out infinite;
}

@keyframes btn-soft-pulse {
    0%, 100% {
        box-shadow:
            0 6px 28px rgba(245, 158, 11, 0.45),
            0 2px 8px rgba(0, 0, 0, 0.35);
    }
    50% {
        box-shadow:
            0 6px 40px rgba(245, 158, 11, 0.65),
            0 0 0 10px rgba(245, 158, 11, 0.06),
            0 2px 8px rgba(0, 0, 0, 0.35);
    }
}

/* ================================================================
   5. BLUEPRINT GRID — Dynamisme subtil du fond
   ================================================================ */

/* Micro-mouvement de la grille fine (celle de html::after à 20px) */
@media (prefers-reduced-motion: no-preference) {
    /* La grille majeure (60px) reste fixe */
    /* La grille fine (20px) a un drift ultra-lent */

    html::after {
        animation: grid-drift 60s linear infinite;
    }

    @keyframes grid-drift {
        0%   { background-position: 0 0, 0 0; }
        100% { background-position: -20px -20px, 0 0; }
    }
}

/* Particules lumineuses flottantes — ambiance chantier technique */
.blueprint-particles {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.blueprint-particles__dot {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(0, 220, 255, 0.25);
    border-radius: 50%;
    animation: particle-float linear infinite;
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10vh) translateX(40px);
        opacity: 0;
    }
}

/* ================================================================
   6. HERO PARALLAX SUBTIL
   ================================================================ */

/* Léger mouvement de l'image hero au scroll */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .hero__image {
        transition: transform 0.1s linear;
    }
}

/* ================================================================
   7. STAT COUNTER — Animation de compteur
   ================================================================ */

.stat__number.anim-counter {
    transition: none;
}

/* ================================================================
   8. RÉDUCTION DE MOUVEMENT — Respect des préférences système
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .anim-fade-up,
    .anim-fade-left,
    .anim-fade-right,
    .anim-scale-in,
    .anim-stagger > .anim-stagger-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .anim-cta-pulse {
        animation: none !important;
    }

    html::after {
        animation: none !important;
    }

    .modal-cta-float {
        animation: none !important;
    }

    .btn--cta::after,
    .btn--cta-tel::after,
    .btn--cta-mail::after {
        animation: none !important;
        display: none !important;
    }
}