/* ============================================================
   MOTION DESIGN DES PROJETS : de courtes boucles silencieuses en tête de fiche projet (champ motion dans data.js).
   Simples : un seul geste par boucle, la courbe du site, rien qui clignote. Sans mouvement si l'appareil le demande.
   ============================================================ */
.pm-motion{padding:clamp(24px,4vw,48px);display:grid;place-items:center}

/* ---------- Metrön : un téléphone, les écrans de l'app défilent comme un vrai glissement ---------- */
.mo-phone{position:relative;height:min(560px,64svh);aspect-ratio:1170/2532;border-radius:clamp(26px,3.4vw,40px);overflow:hidden;background:#fff;box-shadow:0 0 0 9px #111,0 0 0 10px rgba(255,255,255,.25),0 40px 70px -30px rgba(20,24,60,.45)}
.mo-track{display:flex;height:100%;animation:mo-swipe 12s cubic-bezier(.65,0,.35,1) infinite}
.mo-track img{flex:none;width:100%;height:100%;object-fit:cover;object-position:50% 0;mix-blend-mode:normal!important;max-height:none!important}
/* 4 écrans + le premier répété : on reste 2,4 s sur chacun, le passage dure 0,6 s */
@keyframes mo-swipe{
  0%,20%{transform:translateX(0)}
  25%,45%{transform:translateX(-100%)}
  50%,70%{transform:translateX(-200%)}
  75%,95%{transform:translateX(-300%)}
  100%{transform:translateX(-400%)}
}

/* ---------- L'affiche : elle se construit calque par calque, puis repart ---------- */
.mo-poster{position:relative;height:min(560px,64svh);aspect-ratio:1778/2480;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 60px -28px rgba(20,24,60,.35)}
.mo-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal!important;max-height:none!important;opacity:0;animation:10s cubic-bezier(.22,1,.36,1) infinite}
/* chaque calque est la même affiche, découpée sur sa zone */
.mo-house{clip-path:polygon(48% 13.6%,79.8% 25.4%,79.8% 67.6%,20% 67.6%,20% 25.4%);animation-name:mo-house!important;z-index:2}
.mo-shapes{clip-path:inset(1.6% 2.4% 32% 2.4%);animation-name:mo-shapes!important;z-index:1}
.mo-title{clip-path:inset(71% 6% 20% 6%);animation-name:mo-title!important;z-index:3}
.mo-date{clip-path:inset(79.5% 34% 16% 34%);animation-name:mo-date!important;z-index:3}
.mo-foot{clip-path:inset(87% 24% 6.5% 24%);animation-name:mo-foot!important;z-index:3}
/* 1. le bâtiment monte ; 2. les formes turquoise s'ouvrent derrière lui depuis le centre ; 3. le titre, la date, les logos ; tout reste, puis s'efface ensemble */
@keyframes mo-house{0%{opacity:0;transform:translateY(5%)}4%{opacity:0;transform:translateY(5%)}16%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes mo-shapes{0%,14%{opacity:0;clip-path:inset(1.6% 50% 32% 50%)}16%{opacity:1}30%,88%{opacity:1;clip-path:inset(1.6% 2.4% 32% 2.4%)}96%,100%{opacity:0;clip-path:inset(1.6% 2.4% 32% 2.4%)}}
@keyframes mo-title{0%,30%{opacity:0;transform:translateY(2%)}40%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes mo-date{0%,36%{opacity:0;transform:translateY(2%)}45%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes mo-foot{0%,42%{opacity:0;transform:translateY(2%)}51%,88%{opacity:1;transform:none}96%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .mo-track{animation:none}
  .mo-poster img{animation:none;opacity:1}
}

/* un écran complet de l app, dans un téléphone dessiné (galerie des fiches) */
.mo-phone.mo-static{margin:10px auto 0;height:min(600px,62svh)}
.mo-phone.mo-static img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}