/* ═══ Animaciones de imágenes (js/img-motion.js) — solo transform/opacity ═══ */

/* 1) Foto que vuela de la tarjeta a la galería del detalle */
.im-fly{position:fixed;z-index:600;object-fit:cover;pointer-events:none;margin:0;box-shadow:0 14px 34px rgba(0,0,0,.28);will-change:left,top,width,height;}
@keyframes imRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
#sDetail.im-zoom .detail-body{animation:imRise .38s cubic-bezier(.22,.61,.36,1) .1s backwards;}

/* 2) Carrusel del detalle */
.im-gal{overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.im-gal img{-webkit-user-drag:none;}
.im-gal .detail-gallery-img{will-change:transform;}
.im-nb{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;z-index:1;transform:translateX(100%);}
.im-gal .gallery-dots,.im-gal .gallery-prev,.im-gal .gallery-next,.im-gal .gallery-count{z-index:2;}
.gdot{transition:width .25s cubic-bezier(.22,.8,.3,1),background .25s;}
.gallery-count{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);letter-spacing:.3px;pointer-events:none;}

/* 3) Visor (lightbox) */
.lightbox-img{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;will-change:transform;cursor:default;}
@keyframes imFade{from{opacity:0;}to{opacity:1;}}
@keyframes imFadeOut{from{opacity:1;}to{opacity:0;}}
@keyframes imPop{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}
@keyframes imPopOut{from{opacity:1;transform:none;}to{opacity:0;transform:scale(.94);}}
.lightbox.open{animation:imFade .22s ease-out;}
.lightbox.open .lightbox-img{animation:imPop .3s cubic-bezier(.2,.9,.3,1);}
.lightbox.open.closing{animation:imFadeOut .2s ease-in forwards;pointer-events:none;}
.lightbox.closing .lightbox-img{animation:imPopOut .2s ease-in forwards;}
.lightbox.closing.drag .lightbox-img{animation:none;}
.lightbox.lb-single .lightbox-prev,.lightbox.lb-single .lightbox-next{display:none;}
.lightbox-dot{transition:background .2s,transform .2s;}
.lightbox-dot.on{transform:scale(1.35);}

/* 4) Carga suave de fotos de tarjetas y colecciones */
@keyframes imBlurIn{from{opacity:0;filter:blur(8px);transform:scale(1.04);}to{opacity:1;filter:blur(0);transform:none;}}
@keyframes imFadeIn{from{opacity:0;}to{opacity:1;}}
.im-in{animation:imBlurIn .45s cubic-bezier(.22,.61,.36,1) backwards;}
.pcard-img-el.im-in{animation:imBlurIn .45s cubic-bezier(.22,.61,.36,1) backwards,skel-shimmer 1.6s ease-in-out infinite;}
.im-in-lite{animation:imFadeIn .35s ease-out backwards;}
.pcard-img-el.im-in-lite{animation:imFadeIn .35s ease-out backwards,skel-shimmer 1.6s ease-in-out infinite;}

@media (prefers-reduced-motion: reduce){
  .lightbox.open,.lightbox.open .lightbox-img,.lightbox.closing,.lightbox.closing .lightbox-img,
  .im-in,.im-in-lite,.pcard-img-el.im-in,.pcard-img-el.im-in-lite,#sDetail.im-zoom .detail-body{animation:none !important;}
  .gdot,.lightbox-dot{transition:none;}
}