/* ========== BlueMountain 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(18, 21, 23, 0.12);
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border) !important;
}
.main-header.scrolled .logo a,
.main-header.scrolled .header-main-nav a,
.main-header.scrolled .header-icon-link,
.main-header.scrolled .mobile-menu-btn {
  color: var(--primary-dark) !important;
}
.main-header.scrolled .header-main-nav a {
  color: var(--text-muted) !important;
}
.main-header.scrolled .header-main-nav a:hover,
.main-header.scrolled .header-main-nav a.active {
  color: var(--primary-dark) !important;
}
.main-header.scrolled .header-main-nav a.active::after {
  background: var(--accent-peach);
}
.main-header.scrolled .header-icon-link:hover {
  background: var(--bg-light);
}
.main-header.scrolled .tm-header-search form {
  background: var(--search-bar) !important;
  border-color: transparent !important;
}
.main-header.scrolled .tm-header-search input {
  color: var(--primary-dark) !important;
}
.main-header.scrolled .tm-header-search input::placeholder {
  color: var(--text-muted) !important;
}
.main-header.scrolled .tm-header-search button,
.main-header.scrolled .tm-header-search form > i {
  color: var(--primary) !important;
}
.main-header.header-overlay.scrolled {
  position: fixed;
  left: 0;
  right: 0;
}

/* 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);
}

/* ========== Hamza Ashfaq Holdings — redesigned pages ========== */

/* Hero load animations (home / about / contact) */
body.vs-page-ready .bm-hero-content h1,
body.vs-page-ready .tm-hero .eyebrow,
body.vs-page-ready .ab-hero .eyebrow,
body.vs-page-ready .ct-hero .eyebrow {
  animation: vsFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.vs-page-ready .bm-hero-content p,
body.vs-page-ready .tm-hero h1,
body.vs-page-ready .ab-hero h1,
body.vs-page-ready .ct-hero h1 {
  animation: vsFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
body.vs-page-ready .bm-hero-content .bm-btn-sage,
body.vs-page-ready .tm-hero p,
body.vs-page-ready .ab-hero p,
body.vs-page-ready .ct-hero p {
  animation: vsFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
body.vs-page-ready .bm-hero-dots,
body.vs-page-ready .tm-hero-btns,
body.vs-page-ready .ab-hero .cta {
  animation: vsFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
body.vs-page-ready .bm-hero-content h1 {
  animation-delay: 0.05s;
}
body.vs-page-ready .bm-hero-content p {
  animation-delay: 0.18s;
}
body.vs-page-ready .bm-hero-content .bm-btn-sage {
  animation-delay: 0.32s;
}

/* BlueMountain cards & sections */
.bm-prod-card,
.bm-banner,
.bm-drinks-visual img,
.blog-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}
.bm-prod-img img,
.bm-drinks-visual img,
.bm-banner img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.bm-prod-card:hover .bm-prod-img img {
  transform: scale(1.06);
}
.bm-drinks-visual:hover img {
  transform: scale(1.04);
}
.bm-btn-sage,
.bm-btn-sage-fill,
.bm-sec-link {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.bm-btn-sage:hover,
.bm-btn-sage-fill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 98, 160, 0.18);
}
.bm-trust-form button {
  transition: transform 0.25s ease, background 0.25s ease;
}
.bm-trust-form button:hover {
  transform: translateY(-1px);
}

/* Password eye toggle — no motion */
.password-toggle-btn,
.password-toggle-btn:hover,
.password-toggle-btn:focus,
.password-toggle-btn:active {
  transition: none !important;
  animation: none !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}
.password-toggle-wrap--underline .password-toggle-btn,
.password-toggle-wrap--underline .password-toggle-btn:hover,
.password-toggle-wrap--underline .password-toggle-btn:focus,
.password-toggle-wrap--underline .password-toggle-btn:active {
  transform: none !important;
}

/* Hover lift for new cards */
.tm-prod-card, .tm-brand-tile, .ab-tl-card, .ab-member,
.shop-product-card, .ct-channel {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.tm-prod-card:hover, .tm-brand-tile:hover, .ab-member:hover,
.shop-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(20, 35, 57, 0.14);
}
.ct-channel:hover { transform: translateX(4px); box-shadow: var(--shadow); }

/* Image zoom on hover */
.tm-prod-img img, .tm-brand-tile img, .sp-img img,
.ab-member-photo img, .ct-hq-img img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-prod-card:hover .tm-prod-img img,
.tm-brand-tile:hover img,
.shop-product-card:hover .sp-img img,
.ab-member:hover .ab-member-photo img {
  transform: scale(1.06);
}

/* Gold CTA buttons */
.tm-btn-gold, .ab-cta-btns a, .ct-submit, .sp-btn, .btn-partner,
.tm-btn-ghost, .ab-hero a.cta {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.tm-btn-gold:hover, .ab-cta-btns a.gold:hover, .ct-submit:hover,
.sp-btn-cart:hover, .btn-partner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(229, 162, 26, 0.3);
}

/* Feature icon pop */
.tm-feature-icon { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tm-feature:hover .tm-feature-icon { transform: scale(1.12) rotate(-4deg); }

/* Years badge float */
.ab-years { animation: vsFloat 4.5s ease-in-out infinite; }

/* Global shipping banner subtle shine */
.global-ship-banner i { animation: vsFloat 3.5s ease-in-out infinite; }

/* 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,
  body.vs-page-ready .bm-hero-content *,
  body.vs-page-ready .bm-hero-dots,
  body.vs-page-ready .bm-hero-slide.is-active,
  body.vs-page-ready .tm-hero *,
  body.vs-page-ready .ab-hero *,
  body.vs-page-ready .ct-hero *,
  .ab-years,
  .global-ship-banner i,
  .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,
  .tm-prod-card:hover,
  .tm-brand-tile:hover,
  .ab-member:hover,
  .shop-product-card:hover,
  .ct-channel:hover {
    transform: none;
  }
}