/* Product Grid Animation Keyframes */

/* --- Slide --- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-60px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeftBig {
  from { opacity: 0; transform: translateX(-200px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRightBig {
  from { opacity: 0; transform: translateX(200px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUpBig {
  from { opacity: 0; transform: translateY(200px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInDownBig {
  from { opacity: 0; transform: translateY(-200px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Fade --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUpBig {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDownBig {
  from { opacity: 0; transform: translateY(-80px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* --- Zoom --- */
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes zoomInUp {
  from { opacity: 0; transform: scale(0.5) translateY(60px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes zoomInDown {
  from { opacity: 0; transform: scale(0.5) translateY(-60px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes zoomInLeft {
  from { opacity: 0; transform: scale(0.5) translateX(-60px); }
  to { opacity: 1; transform: scale(1) translateX(0); }
}
@keyframes zoomInRight {
  from { opacity: 0; transform: scale(0.5) translateX(60px); }
  to { opacity: 1; transform: scale(1) translateX(0); }
}
@keyframes zoomInRotate {
  from { opacity: 0; transform: scale(0.5) rotate(-15deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- Bounce --- */
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes bounceInUp {
  0% { opacity: 0; transform: translateY(60px); }
  60% { opacity: 1; transform: translateY(-10px); }
  80% { transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes bounceInDown {
  0% { opacity: 0; transform: translateY(-60px); }
  60% { opacity: 1; transform: translateY(10px); }
  80% { transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes bounceInLeft {
  0% { opacity: 0; transform: translateX(-60px); }
  60% { opacity: 1; transform: translateX(10px); }
  80% { transform: translateX(-5px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes bounceInRight {
  0% { opacity: 0; transform: translateX(60px); }
  60% { opacity: 1; transform: translateX(-10px); }
  80% { transform: translateX(5px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes bounceInScale {
  0% { opacity: 0; transform: scale(0.5); }
  50% { transform: scale(1.1); }
  70% { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Flip --- */
@keyframes flipInX {
  from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
  to { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}
@keyframes flipInY {
  from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  to { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}
@keyframes flipInXBig {
  from { opacity: 0; transform: perspective(400px) rotateX(180deg); }
  to { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}
@keyframes flipInYBig {
  from { opacity: 0; transform: perspective(400px) rotateY(180deg); }
  to { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

/* --- Rotate --- */
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-200deg); }
  to { opacity: 1; transform: rotate(0deg); }
}
@keyframes rotateInDownLeft {
  from { opacity: 0; transform-origin: left bottom; transform: rotate(-45deg); }
  to { opacity: 1; transform-origin: left bottom; transform: rotate(0deg); }
}
@keyframes rotateInDownRight {
  from { opacity: 0; transform-origin: right bottom; transform: rotate(45deg); }
  to { opacity: 1; transform-origin: right bottom; transform: rotate(0deg); }
}
@keyframes rotateInUpLeft {
  from { opacity: 0; transform-origin: left bottom; transform: rotate(45deg); }
  to { opacity: 1; transform-origin: left bottom; transform: rotate(0deg); }
}

/* --- Roll & Special --- */
@keyframes rollIn {
  from { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
  to { opacity: 1; transform: translateX(0) rotate(0deg); }
}
@keyframes lightSpeedInLeft {
  from { opacity: 0; transform: translateX(-100%) skewX(30deg); }
  60% { opacity: 1; transform: translateX(0) skewX(-10deg); }
  80% { transform: skewX(5deg); }
  to { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes lightSpeedInRight {
  from { opacity: 0; transform: translateX(100%) skewX(-30deg); }
  60% { opacity: 1; transform: translateX(0) skewX(10deg); }
  80% { transform: skewX(-5deg); }
  to { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes jackInTheBox {
  0% { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; }
  50% { transform: rotate(-10deg); }
  70% { transform: rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes rubberBand {
  0% { transform: scale(1); }
  30% { transform: scaleX(1.25) scaleY(0.75); }
  40% { transform: scaleX(0.75) scaleY(1.25); }
  50% { transform: scaleX(1.15) scaleY(0.85); }
  65% { transform: scaleX(0.95) scaleY(1.05); }
  75% { transform: scaleX(1.05) scaleY(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes jello {
  0%, 100% { transform: translateX(0); }
  11.1% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  22.2% { transform: skewX(6.25deg) skewY(6.25deg); }
  33.3% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  44.4% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  55.5% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  66.6% { transform: skewX(0.390625deg) skewY(0.390625deg); }
  77.7% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Stagger variations (same animations but slower for stagger effect) --- */
@keyframes staggerFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes staggerSlideLeft {
  from { opacity: 0; transform: translateX(-80px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes staggerSlideRight {
  from { opacity: 0; transform: translateX(80px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes staggerZoomIn {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes staggerBounceIn {
  0% { opacity: 0; transform: translateY(50px); }
  60% { opacity: 1; transform: translateY(-8px); }
  80% { transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes staggerFlipIn {
  from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  to { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}