/* ============================================================
   CARTPULSE — Animations & Motion
   ============================================================ */

/* ── Keyframes ── */
@keyframes cpFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cpScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes cpSlideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cpPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes cpSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Legacy aliases (kept for compatibility) ── */
@keyframes vsFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vsSlideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes av-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ── Utility animation classes ── */
.anim-fade-up   { animation: cpFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.anim-fade-in   { animation: cpFadeIn 0.5s ease both; }
.anim-scale-in  { animation: cpScaleIn 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.anim-spin      { animation: cpSpin 1s linear infinite; }
.anim-pulse     { animation: cpPulse 1.5s ease-in-out infinite; }

/* Delay helpers */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ── Hover underline grow (used on nav links) ── */
.hover-underline-link {
  position: relative;
  display: inline-block;
}
.hover-underline-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.4s ease;
}
.hover-underline-link:hover::after { width: 100%; }

/* ── Skeleton loading ── */
.skeleton {
  background: linear-gradient(90deg, #efeeec 25%, #e9e8e6 50%, #efeeec 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Page transitions ── */
.page-enter { animation: cpFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Scroll reveal (JS adds .visible class) ── */
.cp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.cp-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Legacy reveal classes ── */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }