/* VPDS motion primitives */

@keyframes vp-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes vp-ripple {
  to { transform: scale(2.4); opacity: 0; }
}

@keyframes vp-count-tick {
  from { transform: scale(1.06); opacity: 0.75; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes vp-glow-sweep {
  0%, 100% { opacity: 0.35; transform: translateX(-30%) skewX(-12deg); }
  50% { opacity: 0.7; transform: translateX(30%) skewX(-12deg); }
}

@keyframes vp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes vp-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes vp-success-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.vp-animate-fade-up {
  animation: vp-fade-up var(--vp-duration-slow) var(--vp-ease) both;
}

.vp-animate-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: vp-shimmer 1.6s ease-in-out infinite;
}

.vp-animate-float { animation: vp-float 4s ease-in-out infinite; }
.vp-animate-breathe { animation: vp-breathe 3s ease-in-out infinite; }
.vp-animate-count { animation: vp-count-tick 0.35s var(--vp-ease); }

.vp-stagger > *:nth-child(1) { animation-delay: 0ms; }
.vp-stagger > *:nth-child(2) { animation-delay: 60ms; }
.vp-stagger > *:nth-child(3) { animation-delay: 120ms; }
.vp-stagger > *:nth-child(4) { animation-delay: 180ms; }
.vp-stagger > *:nth-child(5) { animation-delay: 240ms; }
.vp-stagger > *:nth-child(6) { animation-delay: 300ms; }

.vp-glow-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.vp-glow-layer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    color-mix(in srgb, var(--vp-secondary, #d4af37) 22%, transparent) 50%,
    transparent 60%
  );
  animation: vp-glow-sweep 15s ease-in-out infinite;
}

.vp-ripple { position: relative; overflow: hidden; }
.vp-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 10%, transparent 10%);
  transform: scale(0);
  opacity: 0.6;
  pointer-events: none;
}
.vp-ripple:active::after {
  animation: vp-ripple 0.5s ease-out;
}