/* =========================================================
   MISTERAYZE - animations sur telephone et tablette
   Sur ecran tactile, le script d'origine coupe le defilement
   fluide, le curseur, l'effet magnetique, l'inclinaison des
   cartes et la parallaxe. On rend du mouvement avec des
   animations liees au defilement : elles tournent sur le
   processeur graphique, donc restent fluides au doigt.
   (Repli en JS pour les navigateurs qui ne les connaissent pas.)
   ========================================================= */
@media (pointer:coarse), (max-width:760px){
@media (prefers-reduced-motion: no-preference){

  /* Retour tactile : tout ce qui se touche reagit */
  .mz-btn, .mz-add, .mz-cart-btn, .mz-duo-card, .mz-card-art, .mz-format{
    transition:transform .18s var(--mz-ease), background .3s, color .3s, box-shadow .3s;
    -webkit-tap-highlight-color:transparent;
  }
  .mz-btn:active, .mz-add:active, .mz-cart-btn:active{ transform:scale(.95); }
  .mz-card-art:active{ transform:scale(.98); }

  /* Titres : leger glissement en plus du devoilement */
  .mz-mask.is-in > span{ animation:mzm-titre 1.1s var(--mz-ease) both; }
  @keyframes mzm-titre{ from{ letter-spacing:.02em; } to{ letter-spacing:-.025em; } }

  /* Respiration lente de la video du hero */
  .mz-hero-media video, .mz-hero-media picture{ animation:mzm-souffle 18s ease-in-out infinite alternate; transform-origin:60% 40%; }
  @keyframes mzm-souffle{ from{ transform:scale(1); } to{ transform:scale(1.08); } }

  /* Nappes de couleur qui derivent */
  .mz-blob{ animation:mzm-blob 16s ease-in-out infinite alternate; }
  @keyframes mzm-blob{ from{ transform:translate3d(-6%,0,0) scale(1); } to{ transform:translate3d(8%,6%,0) scale(1.15); } }

  @supports (animation-timeline: view()){
    /* Les cadres a overflow:hidden deviennent des conteneurs de defilement :
       on accroche donc chaque animation a une frise nommee, posee sur un
       ancetre qui, lui, defile avec la page. */
    .mz-duo-card{ view-timeline-name:--mzduo; }
    .mz-card-art{ view-timeline-name:--mzcard; }
    .mz-feature-art{ view-timeline-name:--mzfeat; }
    .mz-atelier{ view-timeline-name:--mzat; }
    .mz-feature{ view-timeline-name:--mzspec; }

    /* Collections : l'oeuvre se pose en se redressant */
    .mz-duo-art{ animation:mzm-pose-g linear both; animation-timeline:--mzduo; animation-range:entry 0% cover 40%; }
    .mz-duo-card--dark .mz-duo-art{ animation-name:mzm-pose-d; }
    @keyframes mzm-pose-g{ from{ transform:translateY(70px) rotate(-8deg) scale(.86); opacity:.25; } to{ transform:rotate(-1.8deg); opacity:1; } }
    @keyframes mzm-pose-d{ from{ transform:translateY(70px) rotate(8deg) scale(.86); opacity:.25; } to{ transform:rotate(1.8deg); opacity:1; } }
    .mz-duo-num{ animation:mzm-num linear both; animation-timeline:--mzduo; animation-range:entry 5% cover 30%; }
    @keyframes mzm-num{ from{ transform:translateX(-40px); opacity:0; } to{ transform:none; opacity:1; } }

    /* Boutique : l'affiche se rapproche et prend ses couleurs en entrant */
    .mz-card-art img{ animation:mzm-zoom linear both; animation-timeline:--mzcard; animation-range:entry 0% cover 50%; }
    @keyframes mzm-zoom{ from{ transform:scale(1.3); filter:saturate(.3); } to{ transform:scale(1); filter:none; } }

    /* Piece du moment : l'oeuvre entiere se devoile (sans recadrage) */
    .mz-feature-art{ animation:mzm-devoile linear both; animation-timeline:--mzfeat; animation-range:entry 0% cover 40%; }
    @keyframes mzm-devoile{ from{ transform:translateY(50px) scale(.9); opacity:.3; clip-path:inset(12% 8% 12% 8% round 6px); } to{ transform:none; opacity:1; clip-path:inset(0 0 0 0 round 6px); } }

    /* Hero : le titre monte et s'efface en quittant l'ecran */
    .mz-hero-in{ animation:mzm-hero linear both; animation-timeline:scroll(root); animation-range:0 70vh; }
    @keyframes mzm-hero{ from{ transform:none; } to{ transform:translateY(-60px); opacity:.2; } }

    /* Chiffres de l'atelier et caracteristiques : glissement lateral en cascade */
    .mz-stats > div{ animation:mzm-glisse linear both; animation-timeline:--mzat; animation-range:entry 30% cover 55%; }
    .mz-stats > div:nth-child(2){ animation-range:entry 40% cover 62%; }
    .mz-stats > div:nth-child(3){ animation-range:entry 50% cover 69%; }
    .mz-stats > div:nth-child(4){ animation-range:entry 60% cover 76%; }
    .mz-specs li{ animation:mzm-glisse linear both; animation-timeline:--mzspec; animation-range:entry 40% cover 60%; }
    @keyframes mzm-glisse{ from{ transform:translateX(50px); opacity:0; } to{ transform:none; opacity:1; } }
  }
}
}