/* ==========================================================================
   Mawadda — la peinture qui révèle (assets/js/peinture.js)
   Les images apparaissent comme peintes à l'aquarelle : une tache qui
   s'étale (cartes, fiches) ou un coup de pinceau (grandes images, titre de
   l'accueil), avec le vrai pinceau qui passe sur les grands moments.
   Les étapes de la peinture sont dans deux planches d'images
   (assets/img/peinture/trait.webp et tache.webp, 20 étapes chacune).
   ========================================================================== */

/* avant d'être peint : invisible (étape 0) */
.mw-pt-tache,.mw-pt-trait{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:2000% 100%;mask-size:2000% 100%;
  -webkit-mask-position:0 0;mask-position:0 0}
.mw-pt-tache{-webkit-mask-image:url(../img/peinture/tache.webp);mask-image:url(../img/peinture/tache.webp)}
.mw-pt-trait{-webkit-mask-image:url(../img/peinture/trait.webp);mask-image:url(../img/peinture/trait.webp)}
/* le trait seul, qui garde sa forme de coup de pinceau à la fin (titre de l'accueil) */
.mw-pt-trait.mw-pt-seul{-webkit-mask-image:url(../img/peinture/trait-seul.webp);mask-image:url(../img/peinture/trait-seul.webp)}

/* Avant même le script (pas d'image qui s'affiche puis disparaît) : la
   classe mw-pt-js est posée dans le <head>. Si le script ne démarrait pas,
   tout apparaît quand même au bout de 8 secondes. */
html.mw-pt-js :is(ul.products li.product a img,.woocommerce-product-gallery__image img,.mwc-visuel,.porte img):not(.mw-pt-fini){
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:2000% 100%;mask-size:2000% 100%;
  -webkit-mask-position:0 0;mask-position:0 0;
  -webkit-mask-image:url(../img/peinture/tache.webp);mask-image:url(../img/peinture/tache.webp);
  animation:mw-pt-secours .01s steps(1) 8s forwards}
html.mw-pt-js .porte img:not(.mw-pt-fini){-webkit-mask-image:url(../img/peinture/trait.webp);mask-image:url(../img/peinture/trait.webp)}
@keyframes mw-pt-secours{to{-webkit-mask-position:100% 0;mask-position:100% 0}}

/* on peint */
/* (sélecteur renforcé : il doit passer devant la règle d'attente plus bas) */
html .mw-pt-tache.mw-pt-go.mw-pt-go.mw-pt-go.mw-pt-go,
html .mw-pt-trait.mw-pt-go.mw-pt-go.mw-pt-go.mw-pt-go{
  animation:mw-pt-peint var(--mw-pt-duree,1.1s) steps(20,jump-none) var(--mw-pt-delai,0s) forwards}
@keyframes mw-pt-peint{
  from{-webkit-mask-position:0 0;mask-position:0 0}
  to{-webkit-mask-position:100% 0;mask-position:100% 0}}

/* une fois peint, plus aucun masque */
.mw-pt-fini{-webkit-mask:none!important;mask:none!important;animation:none!important}

/* — le pinceau qui passe — */
.mw-pt-cadre{position:relative;display:block}
.mw-pt-pinceau{position:absolute;z-index:3;left:-4%;bottom:42%;width:clamp(120px,34%,300px);height:auto;
  max-width:none;margin:0;pointer-events:none;opacity:0;transform-origin:4% 96%;
  filter:drop-shadow(0 14px 16px rgba(46,27,28,.25))}
.mw-pt-pinceau.mw-pt-go{animation:mw-pt-passe var(--mw-pt-duree,1.1s) cubic-bezier(.45,.05,.4,1) var(--mw-pt-delai,0s) forwards}
@keyframes mw-pt-passe{
  0%{left:-6%;opacity:0;transform:translateY(-6%) rotate(-4deg)}
  10%{opacity:1}
  30%{transform:translateY(4%) rotate(2deg)}
  55%{transform:translateY(-3%) rotate(-2deg)}
  80%{opacity:1;transform:translateY(3%) rotate(1deg)}
  100%{left:96%;opacity:0;transform:translateY(-12%) rotate(8deg)}}

/* — le trait rose sous le titre de l'accueil — */
.hero h1.hero-titre .hero-marque{position:relative;display:inline-block;padding:0 .2em;isolation:isolate}
.mw-pt-surligne{position:absolute;z-index:-1;left:-10%;right:-10%;top:30%;bottom:-12%;
  background:var(--rose,#E3C3CC);opacity:.9}

@media (prefers-reduced-motion:reduce){
  .mw-pt-tache,.mw-pt-trait{-webkit-mask:none!important;mask:none!important}
  .mw-pt-pinceau{display:none}
}