/* Animations mavelyx.fr — scènes GetLayers + apparitions au défilement.
   Tout reste visible si le JavaScript ne s'exécute pas : rien n'est masqué sans la classe .mx-js. */

/* ---- héros de l'accueil : scène 3D « Blocky Grid » derrière le carrousel ---- */
.showcase-hero .mx-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;opacity:0;transition:opacity 1.2s cubic-bezier(.2,.7,.2,1)}
.showcase-hero.mx-scene-ready .mx-scene{opacity:1}

/* ---- pages intérieures : bandeau « Bisque » derrière l'en-tête ---- */
.mx-band{position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.4s cubic-bezier(.2,.7,.2,1);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.mx-band canvas{display:block;width:100%;height:100%}
.mx-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.28) 100%)}
.mx-band.mx-band-ready{opacity:1}
body.mx-has-band main{position:relative;z-index:1}
@media (max-width:760px){.mx-band::after{background:rgba(255,255,255,.55)}}

/* ---- apparition de l'en-tête au chargement (pas d'écran de chargement : le contenu est là tout de suite) ---- */
@keyframes mx-rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}35%{opacity:1}to{opacity:1;transform:none;filter:none}}
.mx-js .showcase-slide:not([hidden]) .showcase-caption>div>*,
.mx-js .showcase-slide:not([hidden]) .showcase-window,
.mx-js main>section:first-of-type:not(.showcase-hero)>*,
.mx-js main>.manual-intro>*{animation:mx-rise .95s cubic-bezier(.2,.7,.2,1) both}
.mx-js .showcase-slide:not([hidden]) .showcase-caption>div>:nth-child(2),.mx-js main>section:first-of-type:not(.showcase-hero)>:nth-child(2),.mx-js main>.manual-intro>:nth-child(2){animation-delay:.09s}
.mx-js .showcase-slide:not([hidden]) .showcase-caption>div>:nth-child(3),.mx-js main>section:first-of-type:not(.showcase-hero)>:nth-child(3),.mx-js main>.manual-intro>:nth-child(3){animation-delay:.18s}
.mx-js .showcase-slide:not([hidden]) .showcase-caption>div>:nth-child(4),.mx-js main>section:first-of-type:not(.showcase-hero)>:nth-child(4),.mx-js main>.manual-intro>:nth-child(4){animation-delay:.27s}
.mx-js .showcase-slide:not([hidden]) .showcase-caption>div>:nth-child(n+5),.mx-js main>section:first-of-type:not(.showcase-hero)>:nth-child(n+5),.mx-js main>.manual-intro>:nth-child(n+5){animation-delay:.34s}
.mx-js .showcase-slide:not([hidden]) .showcase-window{animation-duration:1.2s;animation-delay:.12s}

/* ---- apparitions au défilement (posées par motion.js, uniquement sous la ligne de flottaison) ---- */
.mx-js .mx-pre{opacity:0;transform:translateY(16px)}
.mx-js .mx-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--mx-d,0s)}

@media (prefers-reduced-motion:reduce){
  .mx-js *{animation:none!important}
  .mx-js .mx-pre{opacity:1;transform:none}
  .mx-band,.showcase-hero .mx-scene{display:none}
}