/* ============================================================
   MOTION — couche d'animation premium (mini-app)
   GPU uniquement (transform / opacity / filter). Tout est coupé
   avec prefers-reduced-motion. Chargé après cp.css et present.css.
   ============================================================ */

:root{
  --mo-ease: cubic-bezier(.22,.9,.28,1.15);
  --mo-spring: cubic-bezier(.2,.9,.25,1.4);
}

/* Les entrées cp.css gardent fill-mode « both » : elles figeraient le transform
   et empêcheraient le tilt. On ne garde que l'état de départ. */
.cp-cat, .cp-prod{ animation-fill-mode: backwards; }

/* 2. Retour tactile : chaque élément cliquable s'enfonce */
.cp-cat, .cp-prod, .cta, .cp-order-open, .btn, .qty-btn, .cp-tab, .cart-item, .cart-remove{
  -webkit-tap-highlight-color: transparent;
  transition: scale .18s var(--mo-spring), translate .3s var(--mo-ease), filter .2s ease, box-shadow .25s ease;
}
.cp-cat:active, .cp-prod:active, .cta:active, .cp-order-open:active,
.btn:active, .qty-btn:active, .cart-remove:active{ scale: .965; }
.cp-tab:active{ scale: .9; }

/* 3. Tilt 3D + reflet qui suit le doigt/curseur (souris uniquement) */
.mo-tilt{ position: relative; }
@media (hover:hover) and (pointer:fine){
  .mo-tilt{
    transform: perspective(900px) rotateX(var(--mo-rx,0deg)) rotateY(var(--mo-ry,0deg));
    transition: transform .45s var(--mo-ease), box-shadow .35s ease;
    transform-style: preserve-3d;
    will-change: transform;
  }
  .mo-tilt:hover{ box-shadow: 0 22px 46px -18px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); }
  .mo-tilt::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: radial-gradient(260px circle at var(--mo-mx,50%) var(--mo-my,50%), rgba(255,255,255,.22), transparent 55%);
    opacity:0; transition: opacity .3s ease; z-index: 3; mix-blend-mode: soft-light;
  }
  .mo-tilt:hover::after{ opacity:1; }
}

/* 4. Reflet qui balaie les boutons d'action */
.cta, .cp-order-open{ position: relative; overflow: hidden; isolation: isolate; }
.cta::before, .cp-order-open::before{
  content:""; position:absolute; top:-10%; bottom:-10%; left:-60%; width:38%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.42) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events:none; z-index: 0;
  animation: mo-sheen 3.6s ease-in-out infinite;
}
@keyframes mo-sheen{
  0%, 55%{ left: -60%; }
  100%{ left: 130%; }
}

/* 5. Confettis d'ajout au panier */
.mo-confetti{
  position: fixed; z-index: 9999; pointer-events: none;
  width: 8px; height: 12px; border-radius: 2px;
  left: 0; top: 0; will-change: transform, opacity;
}
.mo-plus{
  position: fixed; z-index: 9999; pointer-events: none;
  font: 800 15px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #fff; text-shadow: 0 0 12px rgba(255,140,60,.95), 0 2px 6px rgba(0,0,0,.6);
  will-change: transform, opacity;
}

/* 6. Badge et icône panier : rebond + onde quand un produit arrive */
.mo-wobble{ animation: mo-wobble .7s var(--mo-spring); }
@keyframes mo-wobble{
  0%{ transform: rotate(0) scale(1); }
  20%{ transform: rotate(-14deg) scale(1.12); }
  40%{ transform: rotate(12deg) scale(1.12); }
  60%{ transform: rotate(-7deg) scale(1.05); }
  80%{ transform: rotate(3deg) scale(1); }
  100%{ transform: rotate(0) scale(1); }
}
.mo-badge-pop{ animation: mo-badge-pop .6s var(--mo-spring); }
@keyframes mo-badge-pop{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.55); box-shadow: 0 0 0 8px rgba(255,140,60,.35); }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255,140,60,0); }
}

/* 7. Curseur lumineux (souris uniquement) */
.mo-glow{
  position: fixed; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px;
  border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(circle, rgba(255,120,60,.16), rgba(90,140,255,.08) 40%, transparent 65%);
  transition: opacity .4s ease; will-change: transform;
}
.mo-glow.on{ opacity: 1; }

/* 8. Barre de progression du scroll */
.mo-progress{
  position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 9998;
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, #ff9a3d, #ff4fa3, #3ec8ff);
  box-shadow: 0 0 10px rgba(255,120,60,.8);
}

/* 9. Retrait d'une ligne du panier */
.mo-removing{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .cta::before, .cp-order-open::before, .mo-wobble, .mo-badge-pop{ animation: none !important; }
  .mo-tilt, .mo-tilt::after, .mo-glow, .mo-progress{ display: none !important; }
  .cp-cat, .cp-prod{ animation-fill-mode: both; }
}