/* ============================================================
   ANIMATIONS.CSS — Reusable keyframes & motion utilities
   ============================================================ */

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(40px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeInDown{ from{opacity:0; transform:translateY(-40px);} to{opacity:1; transform:translateY(0);} }
@keyframes scaleIn{ from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);} }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes shimmer{
  0%{ background-position: -400px 0; }
  100%{ background-position: 400px 0; }
}
@keyframes floatY{
  0%,100%{ transform: translateY(0);}
  50%{ transform: translateY(-10px);}
}

.fade-in{ animation: fadeIn var(--dur-med) var(--ease) both; }
.fade-in-up{ animation: fadeInUp var(--dur-med) var(--ease) both; }
.float{ animation: floatY 4s ease-in-out infinite; }

/* Skeleton shimmer (used while product images lazy-load) */
.skeleton{
  background: linear-gradient(90deg, #161616 25%, #201c14 37%, #161616 63%);
  background-size: 800px 100%;
  animation: shimmer 1.6s linear infinite;
}

/* Image zoom-on-hover helper (used broadly via inline classes too) */
.zoom-hover{ overflow:hidden; }
.zoom-hover img{ transition: transform .8s var(--ease); }
.zoom-hover:hover img{ transform: scale(1.08); }

/* Gold underline draw */
.draw-underline{ position:relative; }
.draw-underline::after{
  content:''; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background: var(--gold); transform: scaleX(0); transform-origin:left;
  transition: transform .5s var(--ease);
}
.draw-underline:hover::after{ transform: scaleX(1); }

/* Fade-in on scroll base classes already defined in style.css (.reveal) */