/* =============================================
   GamesBuy — Frontend Animation Effects
   Non-destructive: only adds motion on top
   ============================================= */

/* ── Keyframes ── */
@keyframes gb-fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes gb-fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes gb-scaleIn {
  from { opacity:0; transform:scale(.92); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes gb-slideRight {
  from { opacity:0; transform:translateX(-30px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes gb-float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
@keyframes gb-shimmer {
  0%   { background-position:-400px 0; }
  100% { background-position:400px 0; }
}
@keyframes gb-pulse-ring {
  0%   { transform:scale(1);   opacity:.6; }
  100% { transform:scale(1.6); opacity:0; }
}
@keyframes gb-spin-slow {
  to { transform:rotate(360deg); }
}
@keyframes gb-bounce-in {
  0%   { transform:scale(0.3);  opacity:0; }
  50%  { transform:scale(1.05); opacity:1; }
  70%  { transform:scale(0.95); }
  100% { transform:scale(1); }
}
@keyframes gb-gradient-shift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}
@keyframes gb-particle-rise {
  0%   { transform:translateY(0) scale(1);   opacity:.7; }
  100% { transform:translateY(-120px) scale(0); opacity:0; }
}

/* ── Scroll-reveal base ── */
.gb-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.gb-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.gb-reveal-delay-1 { transition-delay: .1s; }
.gb-reveal-delay-2 { transition-delay: .2s; }
.gb-reveal-delay-3 { transition-delay: .3s; }
.gb-reveal-delay-4 { transition-delay: .4s; }

/* ── Hero / Banner ── */
.slider-area,
.home-slider-area {
  animation: gb-fadeIn .8s ease both;
}

/* ── Section headers ── */
.section-header h2,
.section-title,
.tab-title h2 {
  animation: gb-slideRight .6s cubic-bezier(.22,1,.36,1) both;
}

/* ── Product cards — lift on hover ── */
.single-product-wrap,
.product-item,
.product-card {
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              box-shadow .25s ease !important;
  will-change: transform;
}
.single-product-wrap:hover,
.product-item:hover,
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.13) !important;
}

/* ── Product image zoom ── */
.single-product-wrap .product-img img,
.product-item img {
  transition: transform .4s cubic-bezier(.22,1,.36,1) !important;
}
.single-product-wrap:hover .product-img img,
.product-item:hover img {
  transform: scale(1.06) !important;
}

/* ── Category quick-link cards ── */
.cat-quick-link,
.category-card {
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.cat-quick-link:hover,
.category-card:hover {
  transform: translateY(-5px) scale(1.03) !important;
  box-shadow: 0 12px 32px rgba(22,0,83,.15) !important;
}

/* ── Deal of the day — animated badge ── */
.deal-label {
  animation: gb-bounce-in .7s .3s cubic-bezier(.22,1,.36,1) both;
}
.deal-title  { animation: gb-fadeUp .6s .4s both; }
.deal-price  { animation: gb-fadeUp .6s .5s both; }
.deal-cta    { animation: gb-fadeUp .6s .6s both; }

/* ── Countdown timer — pulse on tick ── */
.countdown-item .count-num {
  display: inline-block;
  transition: transform .15s ease;
}
.countdown-item .count-num.tick {
  animation: gb-bounce-in .3s ease;
}

/* ── Add to cart button — ripple ── */
.add-to-cart-btn,
.btn-cart,
button[class*="cart"] {
  position: relative;
  overflow: hidden;
  transition: background .2s, transform .15s !important;
}
.add-to-cart-btn:hover,
.btn-cart:hover { transform: scale(1.04) !important; }
.add-to-cart-btn::after,
.btn-cart::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  border-radius: inherit;
  transform: scale(0);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}
.add-to-cart-btn:active::after,
.btn-cart:active::after {
  transform: scale(2);
  opacity: 0;
  transition: 0s;
}

/* ── Nav links — underline slide ── */
.main-menu ul li a,
.menu-area ul li a {
  position: relative;
}
.main-menu ul li a::after,
.menu-area ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: #fcb040;
  transition: width .25s ease;
}
.main-menu ul li a:hover::after,
.menu-area ul li a:hover::after { width: 100%; }

/* ── Footer links ── */
.footer-menu ul li a {
  transition: color .2s, padding-left .2s !important;
}
.footer-menu ul li a:hover {
  color: #fcb040 !important;
  padding-left: 6px !important;
}

/* ── Service strip icons ── */
.service-item i,
.service-icon {
  animation: gb-float 3s ease-in-out infinite;
}
.service-item:nth-child(2) i { animation-delay: .5s; }
.service-item:nth-child(3) i { animation-delay: 1s; }
.service-item:nth-child(4) i { animation-delay: 1.5s; }

/* ── Notification / badge pulse ── */
.cart-count,
.badge-count,
.notif-count-badge {
  animation: gb-bounce-in .5s ease both;
}

/* ── Page load fade ── */
body { animation: gb-fadeIn .4s ease both; }

/* ── Scroll-reveal JS trigger ── */
/* Applied via gb-animations.js */