/* ==========================================================
   MOTION (index-design.html uniquement, l'accueil n'est pas touché)
   ========================================================== */

/* Lenis gère le défilement doux : on coupe celui du CSS */
html.lenis, html.lenis body { height: auto; scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* barre de progression de lecture, sous la navigation */
.mo-progress {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1001;
    height: 3px;
    background: linear-gradient(90deg, #e34f26, #e0a526, #2f9e6a, #1f88d1, #7a5cc4, #c2306f);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

/* cartes projets : légère inclinaison au survol (profondeur) */
.pj-item { perspective: 1200px; }
.pj-thumb { transform-style: preserve-3d; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
    .mo-progress { display: none; }
}

/* ---------- Sections empilées ----------
   chaque section passe par-dessus la précédente, qui recule et s'assombrit */
.mo-stack {
    position: relative;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -24px 60px rgba(28, 26, 25, 0.16);
    transform-origin: 50% 0;
}

.mo-stack::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 50;
    border-radius: inherit;
    background: #0f0e0d;
    opacity: var(--mo-dim, 0);
    pointer-events: none;
}

@media (max-width: 767px) {
    .mo-stack { border-radius: 20px 20px 0 0; }
}