/* ===== Effets de mouvement légers — désactivés si l'utilisateur préfère réduire le mouvement. ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition: none !important; }
    .parallax-layer { transform: none !important; }
}

/* Parallax minimal via variable CSS mise à jour par JS. */
.parallax-layer { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

/* ===== Hero — aurora mesh gradient animé. ===== */
.hero-aurora {
    background:
        radial-gradient(60% 50% at 20% 30%, rgba(16,185,129,0.18) 0%, transparent 60%),
        radial-gradient(50% 40% at 80% 20%, rgba(251,191,36,0.16) 0%, transparent 60%),
        radial-gradient(70% 60% at 50% 90%, rgba(56,189,248,0.14) 0%, transparent 60%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
    background-size: 180% 180%, 200% 200%, 160% 160%, 100% 100%;
    animation: aurora 30s ease-in-out infinite;
}
@keyframes aurora {
    0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; }
    50%      { background-position: 30% 20%, 70% 30%, 30% 80%, 0% 0%; }
}

/* Grille SVG fine en background pour donner un côté "tech". */
.hero-grid {
    background-image:
        linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 80%);
}

/* Mot-clé qui "brille" : gradient mouvant sur le texte. */
.text-shine {
    background: linear-gradient(120deg, #059669 0%, #34d399 30%, #059669 60%, #34d399 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* ===== Mockup chat — apparition séquentielle des bulles. ===== */
.chat-row { opacity: 0; transform: translateY(8px) scale(0.98); }
.chat-row.in {
    opacity: 1; transform: translateY(0) scale(1);
    transition: opacity 0.35s ease-out, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Indicateur "typing" : 3 points qui rebondissent. */
.typing-dot {
    width: 6px; height: 6px; border-radius: 9999px; background: #94a3b8;
    animation: typing 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ===== Scroll reveal générique. ===== */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }
.reveal.delay-5 { transition-delay: 0.40s; }
.reveal.delay-6 { transition-delay: 0.48s; }

/* Glow autour des cartes au hover. */
.glow-hover { position: relative; }
.glow-hover::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit;
    background: linear-gradient(120deg, rgba(16,185,129,0.4), rgba(56,189,248,0.4));
    opacity: 0; transition: opacity 0.3s; z-index: -1; filter: blur(8px);
}
.glow-hover:hover::before { opacity: 1; }