/* ========== Peakline Store — site-wide motion ========== */

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

@keyframes vsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vsScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes vsPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

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

@keyframes vsOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Scroll reveal */
.vs-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.vs-reveal.vs-reveal-left {
  transform: translateX(-24px);
}

.vs-reveal.vs-reveal-right {
  transform: translateX(24px);
}

.vs-reveal.vs-reveal-scale {
  transform: scale(0.97);
}

.vs-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.vs-stagger > .vs-reveal:nth-child(1) { transition-delay: 0s; }
.vs-stagger > .vs-reveal:nth-child(2) { transition-delay: 0.08s; }
.vs-stagger > .vs-reveal:nth-child(3) { transition-delay: 0.16s; }
.vs-stagger > .vs-reveal:nth-child(4) { transition-delay: 0.24s; }
.vs-stagger > .vs-reveal:nth-child(5) { transition-delay: 0.32s; }
.vs-stagger > .vs-reveal:nth-child(6) { transition-delay: 0.4s; }
.vs-stagger > .vs-reveal:nth-child(n+7) { transition-delay: 0.48s; }

/* Hero — page load */
body.vs-page-ready .vs-hero .vs-hero-badge {
  animation: vsFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.vs-page-ready .vs-hero h1 {
  animation: vsFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
body.vs-page-ready .vs-hero > .container > .vs-hero-grid > div:first-child p {
  animation: vsFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
body.vs-page-ready .vs-hero-btns {
  animation: vsFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
body.vs-page-ready .vs-hero-visual {
  animation: vsScaleIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
body.vs-page-ready .vs-safety-card {
  animation: vsFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both,
             vsFloat 4s ease-in-out 1.2s infinite;
}

/* Sticky header */
.main-header,
header {
  transition: box-shadow 0.35s ease, background-color 0.35s ease, backdrop-filter 0.35s ease;
}
.main-header.scrolled,
header.scrolled {
  box-shadow: 0 4px 24px rgba(61, 90, 73, 0.12);
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px);
}

/* Buttons & links */
.vs-btn-primary,
.vs-btn-secondary,
.vs-add-cart,
.vs-newsletter-form button,
button[type="submit"].vs-animate-btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.vs-btn-primary:hover,
.vs-add-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(61, 90, 73, 0.2);
}
.vs-btn-primary:active,
.vs-add-cart:active {
  transform: translateY(0);
}
.vs-btn-primary .fa-arrow-right {
  transition: transform 0.25s ease;
}
.vs-btn-primary:hover .fa-arrow-right {
  transform: translateX(4px);
}

.vs-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vs-link .fa-arrow-right {
  transition: transform 0.25s ease;
}
.vs-link:hover .fa-arrow-right {
  transform: translateX(4px);
}

.icon-btn {
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.icon-btn:hover {
  transform: scale(1.08);
}

/* Value icons */
.vs-value-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
.vs-value-item:hover .vs-value-icon {
  transform: scale(1.1) rotate(-4deg);
  background: rgba(255, 255, 255, 0.2);
}

/* Category & product cards */
.vs-cat-tile {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.vs-cat-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.vs-cat-label {
  transition: padding 0.3s ease;
}

.vs-product-card,
.product-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.3s ease;
}
.vs-product-card:hover,
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(61, 90, 73, 0.14);
}
.vs-product-img img,
.product-img-box img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.vs-product-card:hover .vs-product-img img,
.product-card:hover .product-img-box img {
  transform: scale(1.06);
}

/* Footer social */
footer .fa-brands,
footer .fa-solid.fa-share-nodes {
  display: inline-block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
footer a:hover .fa-brands,
footer a:hover .fa-solid.fa-share-nodes {
  transform: translateY(-3px);
  opacity: 1 !important;
}

/* Search overlay */
.search-overlay.is-open {
  animation: vsOverlayIn 0.3s ease both;
}
.search-overlay.is-open .container {
  animation: vsOverlayContent 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

/* Toast */
.toast.is-showing {
  display: block !important;
  animation: vsToastIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cart-count.bump {
  animation: vsPulse 0.45s ease;
}

/* Page heroes (contact, about, shop) */
body.vs-page-ready .contact-hero .content,
body.vs-page-ready .about-hero-inner {
  animation: vsFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* FAQ accordion */
.faq-item {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.faq-item.active {
  box-shadow: var(--shadow);
}

/* Swiper pagination */
.swiper-pagination-bullet {
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.swiper-pagination-bullet-active {
  transform: scale(1.25);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vs-reveal,
  .vs-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.vs-page-ready .vs-hero *,
  body.vs-page-ready .vs-safety-card,
  .search-overlay.is-open,
  .search-overlay.is-open .container,
  .toast.is-showing {
    animation: none !important;
  }
  .vs-safety-card,
  .vs-product-card:hover,
  .product-card:hover,
  .vs-cat-tile:hover,
  .icon-btn:hover {
    transform: none;
  }
}