/* ========== Synoryx — Professional Motion System ========== */

/* ---- Core Keyframes ---- */
@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(-7px); }
}
@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); }
}
/* Page transition — smooth enter / leave */
@keyframes vsPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vsPageOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
/* Icon spin-in */
@keyframes vsSpinIn {
  from { opacity: 0; transform: rotate(-30deg) scale(0.8); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}
/* Shimmer — skeleton loading */
@keyframes vsShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
/* Slide-down for tags/badges */
@keyframes vsSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Underline expand — nav active indicator */
@keyframes vsUnderlineIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- Prevent horizontal overflow from AOS slide animations ---- */
html, body { overflow-x: hidden; }
[data-aos="fade-right"],
[data-aos="fade-left"] {
  overflow-x: clip;
}

/* ---- Page Transitions ---- */
body {
  animation: vsPageIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.page-leaving {
  animation: vsPageOut 0.28s ease forwards !important;
  pointer-events: none;
}

/* Scroll reveal logic has been migrated to AOS (Animate On Scroll) library */

/* ---- Hero — page load stagger ---- */
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(26, 21, 18, 0.1);
  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(5px); }

/* Synoryx primary/ghost buttons */
.syn-btn-primary,
.syn-btn-ghost {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.syn-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 21, 18, 0.25);
}
.syn-btn-primary .fa-arrow-right { transition: transform 0.25s ease; }
.syn-btn-primary:hover .fa-arrow-right { transform: translateX(5px); }
.syn-btn-ghost:hover { transform: translateY(-1px); }

.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); }

/* ---- BM Banner hover parallax ---- */
.bm-banner {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}
.bm-banner:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 20px 50px rgba(0,0,0,0.18); }
.bm-banner img { transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.bm-banner:hover img { transform: scale(1.06); }

/* ---- Distribution feature hover ---- */
.syn-dist-feat {
  transition: transform 0.3s ease, background 0.3s ease;
  border-radius: 8px;
  padding: 12px;
  margin: 0 -12px;
}
.syn-dist-feat:hover {
  transform: translateX(6px);
  background: rgba(255,255,255,0.05);
}
.syn-dist-feat i {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.syn-dist-feat:hover i { transform: scale(1.2) rotate(-5deg); }

/* ---- Stat number animated counter highlight ---- */
.syn-stat-box .stat-num,
.ab-stat-card .num span {
  display: inline-block;
  position: relative;
}

/* ---- About timeline card hover ---- */
.ab-tl-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.ab-tl-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(26, 21, 18, 0.12);
}

/* ---- About region hover ---- */
.ab-region {
  transition: transform 0.25s ease, background 0.25s ease;
  border-radius: 6px;
}
.ab-region:hover { transform: translateX(8px); background: rgba(255,255,255,0.05); }
.ab-region i { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ab-region:hover i { transform: scale(1.3); }

/* ---- 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 & Cart bump ---- */
.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 load stagger ---- */
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); }

/* ===== Multi-brand (tm / bm / ct / ab) pages ===== */

/* Hero load animations */
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 */
.bm-prod-card,
.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(45, 53, 32, 0.18);
}
.bm-trust-form button { transition: transform 0.25s ease, background 0.25s ease; }
.bm-trust-form button:hover { transform: translateY(-1px); }

/* Product cart button ripple */
.bm-prod-cart,
.add-to-cart {
  position: relative;
  overflow: hidden;
}
.bm-prod-cart::after,
.add-to-cart::after {
  content: '';
  position: absolute;
  inset: 50%;
  background: rgba(255,255,255,0.35);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.bm-prod-cart:active::after,
.add-to-cart:active::after {
  inset: 0;
  transform: scale(1);
  opacity: 1;
  transition: 0s;
}

/* 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 brand cards */
.tm-prod-card, .tm-brand-tile, .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; }

/* Shipping banner icon float */
.global-ship-banner i { animation: vsFloat 3.5s ease-in-out infinite; }

/* Stat cards hover lift */
.ab-stat-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.ab-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(26, 21, 18, 0.10);
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  body, body.page-leaving { animation: none !important; }
  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,
  .bm-banner:hover,
  .ab-tl-card:hover,
  .ab-region:hover,
  .syn-dist-feat:hover,
  .ab-stat-card:hover {
    transform: none;
  }
}