/* =====================================================================
   INOVATECH — Animations globales (complément de style.css)
   Toutes les animations sont désactivées si le visiteur a demandé
   « réduire les animations » dans son système.
   ===================================================================== */

/* ---------- Barre de progression de lecture ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--brand), var(--accent), #7cc0ff);
    z-index: 2000;
    pointer-events: none;
}

/* ---------- Apparition de la page ---------- */
body.anim-ready { animation: page-in .45s ease both; }
body.anim-leaving { opacity: 0; transition: opacity .18s ease; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Apparition en cascade des cartes ---------- */
.anim-stagger { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--stagger, 0ms); }
.anim-stagger.is-in { opacity: 1; transform: none; }

/* ---------- Inclinaison 3D des cartes ---------- */
.anim-tilt { transform-style: preserve-3d; will-change: transform; }
.anim-tilt.is-tilting { transition: transform .08s linear, box-shadow .3s ease !important; }
.anim-tilt .tilt-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .35), transparent 55%);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 3;
}
.anim-tilt.is-tilting .tilt-glare { opacity: 1; }

/* ---------- Effet d'onde sur les boutons ---------- */
.btn { position: relative; overflow: hidden; }
.anim-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .45);
    animation: ripple .6s ease-out forwards;
    pointer-events: none;
}
.btn-outline-brand .anim-ripple, .btn-light .anim-ripple, .btn-outline-secondary .anim-ripple { background: rgba(21, 101, 224, .2); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- Bandeaux : halo qui suit la souris ---------- */
.hero, .page-hero { --mx: 70%; --my: 20%; }
.hero::after, .page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--mx) var(--my), rgba(47, 140, 255, .18), transparent 60%);
    transition: background .2s;
}
.page-hero h1 { position: relative; display: inline-block; }
.page-hero h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 4px;
    width: 64px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), #7cc0ff);
    transform-origin: left;
    animation: underline-in .8s .35s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes underline-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Mots qui défilent dans le titre de l'accueil */
.anim-words { display: inline-block; position: relative; }
.anim-words .w { display: inline-block; animation: word-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes word-in { from { opacity: 0; transform: translateY(.45em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Images : fondu à l'affichage ---------- */
img.anim-img { opacity: 0; transition: opacity .6s ease; }
img.anim-img.is-loaded { opacity: 1; }

/* ---------- Icônes : léger rebond au survol ---------- */
.card-x:hover .icon-box i, .rate-card:hover .rate-icon i { animation: icon-bounce .6s ease; }
@keyframes icon-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 70% { transform: translateY(2px); } }

/* ---------- Bouton WhatsApp flottant : pulsation discrète ---------- */
.whatsapp-float { animation: wa-pulse 2.8s ease-in-out infinite; }
@keyframes wa-pulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, .45); }
    50% { box-shadow: 0 10px 30px rgba(37, 211, 102, .35), 0 0 0 14px rgba(37, 211, 102, 0); }
}

/* ---------- Accessibilité : aucune animation si demandé ---------- */
@media (prefers-reduced-motion: reduce) {
    body.anim-ready, .page-hero h1::after, .anim-words .w, .whatsapp-float,
    .card-x:hover .icon-box i, .rate-card:hover .rate-icon i { animation: none !important; }
    .anim-stagger, img.anim-img { opacity: 1 !important; transform: none !important; transition: none !important; }
    .scroll-progress, .hero::after, .page-hero::after, .anim-ripple, .tilt-glare { display: none !important; }
}

/* Le halo reste derrière le texte des bandeaux */
.hero > .container, .page-hero > .container { position: relative; z-index: 1; }

/* Aucune animation latérale ne doit créer de défilement horizontal (toutes les pages) */
html { overflow-x: clip; }