/* =========================================================================
   NYAMTECHS — motion.css
   Motion system unifié — "expressive but gravity-weighted".
   Chargé EN DERNIER. Décélération lente et lourde, zéro rebond.
   Réf : background-color/color sur hover · opacity sur reveals ·
         transform sur parallax. Pas de spring, pas d'overshoot.
   ========================================================================= */

:root {
  /* ── Courbes d'easing gravity-weighted ──
     La matière "tombe" et s'arrête net — jamais de rebond.        */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);   /* easeOutExpo — décél. lourde */
  --ease-in:     cubic-bezier(0.50, 0, 0.75, 0);   /* accélération franche        */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);   /* symétrique, posé            */
  --ease-spring: cubic-bezier(0.16, 1, 0.30, 1);   /* alias — on retire le ressort */

  /* ── Durées (lentes = gravity-weighted) ── */
  --t-micro:   140ms;   /* couleurs, petits états               */
  --t-hover:   260ms;   /* hover cards, boutons                 */
  --t-reveal:  720ms;   /* entrées de section (opacity+transl.) */
  --t-slow:    900ms;   /* gros éléments / images parallax      */
}

/* ─── 1. REVEALS — style Apple : fade + translate + scale + blur-to-sharp ── */
/* Décélération longue et lourde, netteté progressive. Très cinématique.     */

.reveal-up,
.reveal-left,
.reveal-scale {
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity   var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out),
    filter    var(--t-reveal) var(--ease-out);
  will-change: opacity, transform, filter;
}

/* Mouvements amples mais lents → poids + profondeur */
.reveal-up    { transform: translateY(48px) scale(0.985); }
.reveal-left  { transform: translateX(-48px); }
.reveal-scale { transform: scale(0.92); }

.reveal-up.in,
.reveal-left.in,
.reveal-scale.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Une fois révélé, on libère la couche GPU */
.reveal-up.in,
.reveal-left.in,
.reveal-scale.in { will-change: auto; }

/* ─── 2. HOVER — couleurs d'abord, transform discret ────────────────────── */

/* Cards : la couleur de fond/bordure bouge (gravity), lift minimal */
.svc,
.sec-item,
.zf-module,
.kpi-card,
.pipeline .pipeline-step,
.tech-badge,
.chip,
article {
  transition:
    background-color var(--t-hover) var(--ease-out),
    border-color     var(--t-hover) var(--ease-out),
    color            var(--t-hover) var(--ease-out),
    box-shadow       var(--t-hover) var(--ease-out),
    transform        var(--t-hover) var(--ease-out);
}

/* Boutons — couleur + lift posé */
.btn {
  transition:
    background-color var(--t-hover) var(--ease-out),
    border-color     var(--t-hover) var(--ease-out),
    color            var(--t-hover) var(--ease-out),
    box-shadow       var(--t-hover) var(--ease-out),
    transform        var(--t-hover) var(--ease-out);
}

/* Flèches — glissement lent, pas de snap */
.btn svg,
.pipeline-arrow svg {
  transition: transform var(--t-hover) var(--ease-out);
}

/* Liens nav / footer — couleur + soulignement lents */
.hdr-nav a,
.hdr-nav a::after,
.ftr a,
.ci-val,
.mobile-nav a {
  transition:
    color            var(--t-micro) var(--ease-out),
    background-color var(--t-micro) var(--ease-out),
    padding-left     var(--t-hover) var(--ease-out),
    transform        var(--t-hover) var(--ease-out);
}

/* ─── 3. IMAGE PARALLAX (mainframe + visuels) ───────────────────────────── */

/* Float au scroll géré par data-scroll-speed dans parallax.js.
   Transition courte pour lisser le rAF sans traîner (effet Apple subtil). */
[data-scroll-speed] {
  transition: transform 180ms linear;
  will-change: transform;
}

/* ─── 4. CURSOR GLOW — fondu posé ───────────────────────────────────────── */

.hero-glow {
  transition: opacity var(--t-slow) var(--ease-out);
}

/* ─── 5. CARTE TILT — reset lent (gravity) ──────────────────────────────── */

.tilt-card.tilt-reset {
  transition: transform var(--t-hover) var(--ease-out),
              box-shadow var(--t-hover) var(--ease-out);
}

/* ─── 6. HERO ENTRANCE — courbe lourde ──────────────────────────────────── */

.hero-animate {
  animation-timing-function: var(--ease-out);
  animation-duration: 0.85s;
}

/* ─── 7. PAGE FADE-IN au chargement ─────────────────────────────────────── */
/* Fallback 100% CSS : le body se révèle même si le JS ne charge JAMAIS.
   L'animation `forwards` garantit opacity:1 → zéro risque de page blanche. */

body {
  opacity: 0;
  animation: body-fade-in 460ms var(--ease-out) 60ms forwards;
}
@keyframes body-fade-in {
  to { opacity: 1; }
}
body.page-loaded { opacity: 1; }

/* Neutralise l'ancien système page-exit (plus utilisé, anti-page-blanche) */
body.page-exit { opacity: 1 !important; }

/* ─── 8. SCROLL hint & micro-loops conservés ────────────────────────────── */
/* (gérés dans animations.css — durées déjà lentes, on ne touche pas) */

/* ─── 9. REDUCED MOTION — tout coupé ────────────────────────────────────── */

@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;
  }
  body { opacity: 1 !important; }
  .reveal-up, .reveal-left, .reveal-scale { transform: none !important; opacity: 1 !important; }
  .mainframe-grid:hover img { transform: none !important; }
}