/* =========================================================
   GREEN NOOK — ANIMATIONS & MICRO-INTERACTIONS
   ========================================================= */

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes spin-grow {
  0% { transform: scale(0.85) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.1) rotate(180deg); opacity: 1; }
  100% { transform: scale(0.85) rotate(360deg); opacity: 0.7; }
}

@keyframes slideInRight {
  from { transform: translateX(60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInUp {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes bounceIn {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes leafSway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* Apply subtle entrance to cards already handled by AOS, but add hover micro-interactions */
.btn-organic, .btn-outline-organic, .nav-icon-btn, .btn-add-cart, .wishlist-btn {
  will-change: transform;
}

.cart-bump {
  animation: bounceIn 0.4s ease;
}

.shake {
  animation: shake 0.4s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.skeleton {
  background: linear-gradient(90deg, #eee 0px, #f5f5f5 40px, #eee 80px);
  background-size: 600px;
  animation: shimmer 1.4s infinite linear;
}

/* Organic SVG shape decorations used on a few sections */
.organic-shape-decor {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
}

/* Parallax-style background sections */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
@media (max-width: 768px) {
  .parallax-bg { background-attachment: scroll; }
}

/* Counter number pop */
.counter { display: inline-block; }

/* Button ripple micro-interaction (triggered via animations.js) */
.btn-ripple {
  position: absolute;
  width: 10px; height: 10px;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: rippleExpand 0.6s ease-out forwards;
}
@keyframes rippleExpand {
  to { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}