/* ==========================================================================
   Kings Distro motion system
   Only transform and opacity animate. Every effect has a reduced-motion state
   at the bottom of this file. Tokens below are the single source of truth.
   ========================================================================== */

:root {
  --km-ease: cubic-bezier(.16, 1, .3, 1);     /* primary */
  --km-drawer: cubic-bezier(.32, .72, 0, 1);  /* drawers / panels */
  --km-exit: cubic-bezier(.4, 0, 1, 1);       /* things leaving */
  --km-gold: #b98b46;
  --km-gold-dark: #946f38;
  --km-gold-light: #e3c07a;
}

/* Directional reveals translate sideways; keep that from creating a horizontal scrollbar.
   `clip` (not `hidden`) so no scroll container is created and position:sticky still works. */
#bwp-main { overflow-x: clip; }

/* --------------------------------------------------------------------------
   Scroll reveal. Classes are added by motion.js only, so no-JS visitors
   never see a hidden state. Hiding is instant; only the reveal transitions.
   -------------------------------------------------------------------------- */
.km-js .km-r {
  opacity: 0 !important;
  transform: translateY(34px) !important;
  transition: none !important;
}
.km-js .km-r.km-r--l { transform: translate3d(-56px, 14px, 0) scale(.965) !important; }
.km-js .km-r.km-r--r { transform: translate3d(56px, 14px, 0) scale(.965) !important; }

.km-js .km-r.km-in {
  opacity: 1 !important;
  transform: none !important;
  transition-property: opacity, transform !important;
  transition-duration: .9s, 1.05s !important;
  transition-timing-function: var(--km-ease), var(--km-ease) !important;
}

/* Elementor entrance presets are off site-wide: the reveal system above replaces them. */
.elementor-invisible { visibility: visible !important; }
.elementor-element.animated { animation: none !important; }

/* --------------------------------------------------------------------------
   Page transitions — fallback path (browsers without cross-document
   View Transitions). motion.js drives the classes.
   -------------------------------------------------------------------------- */
.km-arrive #bwp-main { opacity: 0; transform: translateY(26px) scale(.994); }
.km-arrive #bwp-header,
.km-arrive #bwp-footer { opacity: 0; }

.km-arriving #bwp-main { transition: opacity .62s var(--km-ease), transform .62s var(--km-ease); }
.km-arriving #bwp-header { transition: opacity .5s var(--km-ease); }
.km-arriving #bwp-footer { transition: opacity .5s var(--km-ease) .1s; }

.km-leaving #bwp-main {
  opacity: 0;
  transform: translateY(-18px) scale(.992);
  transition: opacity .26s var(--km-exit), transform .26s var(--km-exit);
}
.km-leaving #bwp-header,
.km-leaving #bwp-footer { opacity: .4; transition: opacity .26s var(--km-exit); }

.km-instant #bwp-main,
.km-instant #bwp-header,
.km-instant #bwp-footer { transition: none !important; }

/* Page transitions — native path (Chrome/Edge 126+, Safari 18.2+). No click is held back. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  #bwp-header { view-transition-name: km-header; }
  ::view-transition-old(root) { animation: km-page-out .26s var(--km-exit) both; }
  ::view-transition-new(root) { animation: km-page-in .62s var(--km-ease) both; }
  ::view-transition-group(km-header) { animation-duration: 0s; }
  ::view-transition-old(km-header) { animation: km-fade-out .26s var(--km-exit) both; }
  ::view-transition-new(km-header) { animation: km-fade-in .5s var(--km-ease) both; }
}
@keyframes km-page-out { to { opacity: 0; transform: translateY(-18px) scale(.992); } }
@keyframes km-page-in { from { opacity: 0; transform: translateY(26px) scale(.994); } }
@keyframes km-fade-out { to { opacity: 0; } }
@keyframes km-fade-in { from { opacity: 0; } }

/* Top progress bar. Drawn with scaleX rather than width so it stays on the compositor. */
.km-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 100000;
  pointer-events: none;
  background: linear-gradient(90deg, var(--km-gold-dark), var(--km-gold) 45%, var(--km-gold-light));
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}
.km-bar.is-arriving {
  opacity: 1;
  animation: km-bar-full .5s var(--km-ease) both, km-fade-out .3s linear .45s both;
}
.km-bar.is-leaving {
  opacity: 1;
  animation: km-bar-leave .32s var(--km-ease) both;
}
@keyframes km-bar-full { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes km-bar-leave { from { transform: scaleX(0); } to { transform: scaleX(.72); } }

/* --------------------------------------------------------------------------
   Mini cart (theme dropdown) and cart drawer (theme "popup" cart style)
   -------------------------------------------------------------------------- */
.mini-cart .cart-popup.dropdown {
  transition: opacity .24s var(--km-exit), transform .28s var(--km-exit), visibility .28s;
}
.mini-cart.open .cart-popup.dropdown {
  transition: opacity .32s var(--km-ease), transform .44s var(--km-ease), visibility .32s;
}
.mini-cart .cart-popup.popup {
  transition: transform .52s var(--km-drawer), opacity .52s var(--km-drawer), visibility .52s;
}
/* Overlay: fade instead of the theme's display:none/block snap. */
.mini-cart .remove-cart-shadow {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s var(--km-ease), visibility .5s;
}
.mini-cart.open .remove-cart-shadow,
.vitic-topcart.active .remove-cart-shadow {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Progress bar inside a cart panel, if one is added: the one place width animates. */
.km-cart-progress > span { display: block; height: 3px; background: var(--km-gold); transition: width .35s var(--km-ease); }

/* --------------------------------------------------------------------------
   Header navigation
   -------------------------------------------------------------------------- */
.bwp-navigation ul > li.level-0 .sub-menu {
  transition: opacity .24s var(--km-exit), transform .28s var(--km-exit), visibility .28s;
}
.bwp-navigation .menu-item-has-children:hover > .sub-menu {
  transition: opacity .32s var(--km-ease), transform .44s var(--km-ease), visibility .32s;
}
.wpbingo-menu-mobile .bwp-navigation span.grower { transition: transform .24s var(--km-ease); }

@media (min-width: 992px) {
  .bwp-header .bwp-navigation ul > li.level-0 > a { position: relative; }
  .bwp-header .bwp-navigation ul > li.level-0 > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: var(--km-gold);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .26s var(--km-ease);
  }
  .bwp-header .bwp-navigation ul > li.level-0:hover > a::after,
  .bwp-header .bwp-navigation ul > li.level-0 > a:focus-visible::after,
  .bwp-header .bwp-navigation ul > li.level-0.current-menu-item > a::after,
  .bwp-header .bwp-navigation ul > li.level-0.current_page_item > a::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Theme's sticky header slide-in: same keyframes, primary easing. */
.bwp-header.sticky { animation-duration: .52s; animation-timing-function: var(--km-drawer); }

/* --------------------------------------------------------------------------
   Hover micro-interactions (moves stay within a few pixels)
   -------------------------------------------------------------------------- */
.button, .btn, .elementor-button, .wpcf7-submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  transition: background-color .2s var(--km-ease), border-color .2s var(--km-ease), color .2s var(--km-ease),
              box-shadow .2s var(--km-ease), transform .18s var(--km-ease);
}

.products-list.grid .product-wapper {
  transition: transform .3s var(--km-ease), box-shadow .3s var(--km-ease);
}
.products-list.grid .product-wapper .products-thumb .woocommerce-LoopProduct-link {
  display: block;
  overflow: hidden;
}
.products-list.grid .product-wapper .products-thumb img {
  transition: transform .5s var(--km-ease), opacity .5s var(--km-ease), visibility .5s;
}
.products-list.grid .product-wapper .products-thumb .product-button > * {
  transition: opacity .2s var(--km-ease), transform .22s var(--km-ease), visibility .2s;
}

.banners-effect-6 .banners > div a img { transition: transform .5s var(--km-ease), opacity .5s var(--km-ease); }

.km-chevron { transition: transform .24s var(--km-ease); }
[aria-expanded="true"] > .km-chevron,
details[open] > summary .km-chevron { transform: rotate(180deg); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover, .btn:hover, .elementor-button:hover, .wpcf7-submit:hover,
  .woocommerce a.button:hover, .woocommerce button.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(10, 10, 10, .45);
  }
  .button:active, .btn:active, .elementor-button:active, .wpcf7-submit:active {
    transform: translateY(0) scale(.98);
    box-shadow: none;
  }
  .products-list.grid .product-wapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -22px rgba(10, 10, 10, .35);
  }
  .products-list.grid .product-wapper:hover .products-thumb img { transform: scale(1.04); }
  /* The theme scales banners to 1.1 over 1s; tone it down to a few pixels. */
  .banners-effect-6 .bwp-widget-banner:hover .banners > div a img { transform: scale3d(1.03, 1.03, 1); }
}

/* --------------------------------------------------------------------------
   Auto-scrolling marquee (opt-in component — see README)
   -------------------------------------------------------------------------- */
.km-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.km-marquee__track { display: flex; width: max-content; }
.km-marquee.is-ready .km-marquee__track { animation: km-marquee 80s linear infinite; }
.km-marquee--reverse.is-ready .km-marquee__track { animation-direction: reverse; }
.km-marquee:hover .km-marquee__track,
.km-marquee:focus-within .km-marquee__track,
.km-marquee.is-offscreen .km-marquee__track { animation-play-state: paused; }
@keyframes km-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Decorative background video (opt-in). The poster is the container's CSS background,
   so each breakpoint can set its own crop without downloading both. */
.km-bgvideo { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.km-bgvideo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Reduced motion: a considered static state, not a blanket kill-switch.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  /* Reveals: visible, in place, no transition. */
  .km-js .km-r,
  .km-js .km-r.km-r--l,
  .km-js .km-r.km-r--r,
  .km-js .km-r.km-in { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Page transitions off; progress bar hidden. */
  .km-arrive #bwp-main, .km-leaving #bwp-main { opacity: 1 !important; transform: none !important; }
  .km-arrive #bwp-header, .km-arrive #bwp-footer,
  .km-leaving #bwp-header, .km-leaving #bwp-footer { opacity: 1 !important; }
  .km-bar { display: none !important; }

  /* Marquee: stops and becomes a horizontally scrollable row. */
  .km-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .km-marquee .km-marquee__track { animation: none !important; }
  .km-marquee [data-km-clone] { display: none !important; }

  /* Decorative video: hidden, the poster background shows. */
  .km-bgvideo > video { display: none !important; }

  /* Theme motion: carousels change slides without sliding, menus fade without moving,
     the sticky header appears in place, hover states change colour only. */
  .slick-track { transition-duration: 0s !important; }
  .swiper-wrapper { transition-duration: 0ms !important; }
  .bwp-header.sticky { animation: none !important; }
  .bwp-navigation ul > li.level-0 .sub-menu,
  .bwp-navigation .menu-item-has-children:hover > .sub-menu,
  .bwp-navigation ul > li.level-0.mega-menu.mega-menu-fullwidth-width > .sub-menu,
  .bwp-navigation ul > li.level-0.mega-menu.mega-menu-fullwidth-width:hover > .sub-menu { transform: none !important; }
  .mini-cart .cart-popup.dropdown { transform: none !important; }
  .mini-cart .cart-popup.popup { transition: opacity .2s linear, visibility .2s !important; }
  .products-list.grid .product-wapper .products-thumb .product-button > * { transform: none !important; }
  .banners-effect-6 .bwp-widget-banner:hover .banners > div a img { transform: none !important; }
  .bwp-header .bwp-navigation ul > li.level-0 > a::after,
  .km-chevron { transition: none !important; }
}

@media print {
  .km-js .km-r { opacity: 1 !important; transform: none !important; }
  .km-bar { display: none !important; }
}