/**
 * MyAssurBox — Animations CSS
 * Design "Final v3" : animations fluides, teintes bleu/violet
 */

/* === Animations au scroll (Intersection Observer) === */
.animate-on-scroll {
    opacity: 0;
    transition: opacity var(--transition-smooth), transform var(--transition-smooth);
    will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Fade in + slide up */
.fade-in-up { transform: translateY(24px); }
.fade-in-left { transform: translateX(-30px); }
.fade-in-right { transform: translateX(30px); }
.scale-in { transform: scale(0.95); }

/* Slide in depuis la droite (carte hero) */
.slide-in-right {
    transform: translateX(40px);
    opacity: 0;
}

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

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.36s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }

/* === Hero animations === */
@keyframes heroFadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroSlideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.hero-animate {
    opacity: 0;
    animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-animate--delay-1 { animation-delay: 0.1s; }
.hero-animate--delay-2 { animation-delay: 0.3s; }
.hero-animate--delay-3 { animation-delay: 0.5s; }

.hero-animate-card {
    opacity: 0;
    animation: heroSlideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

/* === Float animation (formes décoratives) === */
@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-15px) rotate(5deg); }
}

/* Float shapes (v3 — rotation) */
@keyframes float-shapes {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

/* Card float (carte glass hero) */
@keyframes cardFloat {
    0% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-18px) rotate(1.5deg) rotateY(5deg); }
    66% { transform: translateY(-8px) rotate(-1deg); }
    100% { transform: translateY(-22px) rotate(0.5deg); }
}

.card-float {
    animation: cardFloat 7s ease-in-out infinite alternate;
}

/* === Gradient shift (fond hero) === */
@keyframes gradient-shift {
    0% { opacity: 0.6; transform: scale(1) translate(0, 0); }
    33% { opacity: 0.8; transform: scale(1.1) translate(5%, -5%); }
    66% { opacity: 0.6; transform: scale(0.95) translate(-5%, 5%); }
    100% { opacity: 0.6; transform: scale(1) translate(0, 0); }
}

/* === Fade in up keyframe === */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Pulse badge === */
@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* === Hover lift (cartes produit) === */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

/* === Hover glow (éléments glass) === */
.hover-glow {
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.hover-glow:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 20px var(--color-accent-glow);
}

/* === Pulse glow (bouton CTA principal) === */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35); }
    50% { box-shadow: 0 8px 40px rgba(14, 165, 233, 0.55); }
}

.pulse-glow {
    animation: pulseGlow 2.5s ease-in-out infinite;
}

/* === Slide down (header sticky) === */
@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.slide-down {
    animation: slideDown 0.3s ease-out;
}

/* === Smooth underline (liens navigation) === */
.smooth-underline {
    position: relative;
}

.smooth-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width var(--transition-base);
}

.smooth-underline:hover::after {
    width: 100%;
}

/* === Respect prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .stagger-children > *,
    .hover-lift,
    .hero-animate,
    .hero-animate-card,
    .card-float {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .pulse-glow {
        animation: none;
    }

    .hero::before {
        animation: none !important;
    }
}