/* ============================================================
   SUDHEER STORE — Complete Animation Stylesheet
   Add this file: <link rel="stylesheet" href="grocery-animations.css">
   ============================================================ */

/* ── 1. BANNER: Zoom-in entrance ── */
.banner_sections .single-banner {
  overflow: hidden;
  border-radius: 8px;
}
.banner_sections .single-banner img {
  animation: bannerEntrance 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bannerEntrance {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── 2. FADE IN ON SCROLL (base) ── */
.anim-fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.anim-fadein.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 3. SLIDE IN LEFT ── */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.anim-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── 4. SLIDE IN RIGHT ── */
.anim-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.anim-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── 5. ZOOM SCALE IN ── */
.anim-zoom {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anim-zoom.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── 6. STAGGER DELAYS ── */
.delay-0  { transition-delay: 0s   !important; }
.delay-1  { transition-delay: 0.08s !important; }
.delay-2  { transition-delay: 0.16s !important; }
.delay-3  { transition-delay: 0.24s !important; }
.delay-4  { transition-delay: 0.32s !important; }
.delay-5  { transition-delay: 0.40s !important; }
.delay-6  { transition-delay: 0.48s !important; }
.delay-7  { transition-delay: 0.56s !important; }
.delay-8  { transition-delay: 0.64s !important; }
.delay-9  { transition-delay: 0.72s !important; }
.delay-10 { transition-delay: 0.80s !important; }

/* ── 7. BOUNCE/FLOAT on category & brand circles ── */
.dailyneeds_section .category-box .img-box,
.brands_section .category-box .img-box {
  animation: floatBounce 3.2s ease-in-out infinite;
}
/* Offset each item so they don't all move together */
.dailyneeds_section .category-box:nth-child(2) .img-box,
.brands_section .category-box:nth-child(2) .img-box {
  animation-delay: -0.5s;
}
.dailyneeds_section .category-box:nth-child(3) .img-box,
.brands_section .category-box:nth-child(3) .img-box {
  animation-delay: -1s;
}
.dailyneeds_section .category-box:nth-child(4) .img-box,
.brands_section .category-box:nth-child(4) .img-box {
  animation-delay: -1.5s;
}
.dailyneeds_section .category-box:nth-child(5) .img-box,
.brands_section .category-box:nth-child(5) .img-box {
  animation-delay: -2s;
}
.dailyneeds_section .category-box:nth-child(6) .img-box,
.brands_section .category-box:nth-child(6) .img-box {
  animation-delay: -2.5s;
}

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

/* ── 8. HOVER ZOOM on all category & product images ── */
.category-box .img-box {
  overflow: hidden;
  /*transition: box-shadow 0.3s ease;*/
}
.category-box .img-box img {
  /*transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);*/
  display: block;
  width: 80%;
}
.category-box:hover .img-box {
  /*box-shadow: 0 8px 24px rgba(0,0,0,0.15);*/
}
.category-box:hover .img-box img {
  /*transform: scale(1.12);*/
}

/* Hover zoom for product images */
.product_img {
  overflow: hidden;
}
.product_img img {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
  width: 100%;
}
.product:hover .product_img img {
  transform: scale(1.08);
}

/* ── 9. PRODUCT CARD hover lift ── */
.product {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

/* ── 10. SECTION HEADING underline draw ── */
.heading_s2 h2 {
  position: relative;
  display: inline-block;
}
.heading_s2 h2::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #e07b2a, #f9b34a);
  border-radius: 2px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.heading_s2 h2.visible::after {
  width: 60%;
}

/* ── 11. ADD TO CART button pulse ── */
.add-to-cart-btn {
  transition: transform 0.15s ease, background 0.2s ease;
}
.add-to-cart-btn:active {
  transform: scale(0.94);
}

/* ── 12. BRAND circle hover bounce ── */
.brands_section .category-box:hover .img-box {
  animation: none;
  transform: scale(1.1) translateY(-4px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
}

/* ── 13. Navbar logo subtle pulse on load ── */
.navbar-brand img,
header .logo img {
  animation: logoPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
@keyframes logoPop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── 14. Page fade-in on load ── */
body {
  animation: pageFadeIn 0.5s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}