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

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

@keyframes gradientPulse {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

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

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

.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero {
  background: linear-gradient(-45deg, #050816, #0b1120, #111c34, #0b1026);
  background-size: 300% 300%;
  animation: gradientPulse 12s ease infinite;
}

.hero-card {
  animation: floating 5s ease-in-out infinite;
}

.product-card:hover,
.feature-card:hover,
.info-card:hover,
.value-card:hover,
.trust-card:hover,
.category-card:hover,
.contact-card:hover,
.summary-panel:hover,
.story-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.12), 0 18px 40px rgba(2, 6, 23, 0.32);
}

.nav-links a::after,
.footer-links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transition: transform 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after,
.footer-links a:hover::after {
  transform: scaleX(1);
}

.footer-links a,
.nav-links a {
  position: relative;
}

.shimmer {
  background: linear-gradient(90deg, #0f172a 0%, #18243c 50%, #0f172a 100%);
  background-size: 240px 100%;
  animation: shimmer 1.6s infinite linear;
}

.product-media::after,
.image-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 8, 22, 0.16) 100%);
}

.product-media,
.image-placeholder {
  position: relative;
}

.filter-tab,
.tab-btn,
.payment-card label,
.thumb-row img,
.btn,
.icon-btn,
.social-link,
.payment-badge,
.cart-row,
.toast,
.scroll-top {
  transition: all 0.28s ease;
}

.products-grid.filtered .product-card {
  animation: fadeInUp 0.45s ease;
}

.countdown-item strong {
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.countdown-item:hover strong {
  transform: rotateX(15deg) scale(1.05);
}

.logo-mark,
.feature-icon,
.value-icon,
.trust-icon,
.contact-icon {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.18);
}