/* ===== HOVER LIFT (Card Effect) ===== */
.hover-lift {
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}
.hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* ===== HOVER GLOW ===== */
.hover-glow {
  position: relative;
  transition: box-shadow 0.3s var(--ease-smooth);
}
.hover-glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
  pointer-events: none;
}
.hover-glow:hover::after {
  opacity: 1;
}

/* ===== HOVER SCALE + ROTATE ===== */
.hover-spin {
  transition: transform 0.4s var(--ease-elastic);
}
.hover-spin:hover {
  transform: scale(1.1) rotate(3deg);
}

/* ===== BUTTON RIPPLE (Pure CSS) ===== */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
}
.btn-ripple:active::before {
  width: 300px;
  height: 300px;
}