/* Unified motion system — website, catalogue and product detail. */

body.market-ui {
  --motion-fast: 180ms;
  --motion-base: 360ms;
  --motion-slow: 720ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-spring: cubic-bezier(.2, .9, .25, 1.15);
}

/* Route/page entrance */
#app.page-entering > * {
  animation: motion-page-in .58s var(--motion-ease) both;
}

@keyframes motion-page-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal variants. These only hide content after JavaScript opts in. */
.motion-enhanced .reveal-item {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(30px);
  transition:
    opacity var(--motion-slow) var(--motion-ease) var(--reveal-delay, 0ms),
    transform var(--motion-slow) var(--motion-ease) var(--reveal-delay, 0ms),
    filter var(--motion-slow) var(--motion-ease) var(--reveal-delay, 0ms),
    clip-path calc(var(--motion-slow) + 90ms) var(--motion-ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.motion-enhanced .reveal-item[data-motion="scale"] {
  transform: translateY(26px) scale(.965);
}

.motion-enhanced .reveal-item[data-motion="left"] {
  transform: translateX(-34px);
}

.motion-enhanced .reveal-item[data-motion="right"] {
  transform: translateX(34px);
}

.motion-enhanced .reveal-item[data-motion="clip"] {
  clip-path: inset(0 0 18% 0 round 20px);
  transform: translateY(18px) scale(.985);
}

.motion-enhanced .reveal-item.is-visible {
  opacity: 1;
  filter: blur(0);
  clip-path: inset(0 0 0 0 round 0);
  transform: translate3d(0, 0, 0) scale(1);
}

/* Progressive image reveal and gallery switching */
.motion-enhanced img.motion-image {
  opacity: 0;
  scale: .985;
  transition: opacity .55s ease, scale .7s var(--motion-ease);
}

.motion-enhanced img.motion-image.is-loaded {
  opacity: 1;
  scale: 1;
}

.gallery-swap-in {
  animation: gallery-swap-in .46s var(--motion-ease) both;
}

@keyframes gallery-swap-in {
  from { opacity: 0; transform: scale(.94) translateY(8px); filter: blur(7px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* Header progress, compact state and menu icon morph */
body.market-ui .site-header::after {
  height: 3px;
  background: var(--market-lime);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
  transition: transform 90ms linear;
}

body.market-ui .site-header,
body.market-ui .market-header-main,
body.market-ui .brand-mark,
body.market-ui .header-search-form {
  transition: box-shadow var(--motion-base) ease, background var(--motion-base) ease, border-color var(--motion-base) ease;
}

body.market-ui .site-header.is-compact {
  box-shadow: 0 12px 34px rgba(1, 47, 44, .2);
}

body.market-ui .menu-toggle span {
  transition: transform var(--motion-base) var(--motion-ease), opacity var(--motion-fast) ease;
}

body.market-ui.menu-open .menu-toggle span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

body.market-ui.menu-open .menu-toggle span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Home hero: layered movement rather than one repeated float. */
body.market-ui .market-hero {
  background-size: 115% 115%;
  animation: hero-gradient-breathe 10s ease-in-out infinite alternate;
}

body.market-ui .market-hero-copy > * {
  transform-origin: left center;
}

body.market-ui .market-hero-visual > img {
  animation: product-breathe 5.8s ease-in-out 1s infinite;
}

body.market-ui .market-orbit.one {
  animation: orbit-drift-one 16s linear infinite;
}

body.market-ui .market-orbit.two {
  animation: orbit-drift-two 13s linear infinite reverse;
}

body.market-ui .market-hero-visual > a b,
body.market-ui .market-section-head > a,
body.market-ui .market-directory-copy > a,
body.market-ui .market-proof-bar > a b,
body.market-ui .market-banner-row > a > b,
body.market-ui .market-directory-list b,
body.market-ui .market-need-grid b {
  display: inline-block;
  transition: transform var(--motion-base) var(--motion-ease);
}

body.market-ui .market-hero-visual > a:hover b,
body.market-ui .market-section-head > a:hover,
body.market-ui .market-directory-copy > a:hover,
body.market-ui .market-proof-bar > a:hover b,
body.market-ui .market-banner-row > a:hover > b,
body.market-ui .market-directory-list > a:hover b,
body.market-ui .market-need-grid > a:hover b {
  transform: translateX(5px);
}

@keyframes hero-gradient-breathe {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes product-breathe {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 0 -10px; rotate: 1deg; }
}

@keyframes orbit-drift-one {
  0% { translate: 0 0; scale: .98; }
  50% { translate: -14px 8px; scale: 1.025; }
  100% { translate: 0 0; scale: .98; }
}

@keyframes orbit-drift-two {
  0% { translate: 0 0; scale: 1; }
  50% { translate: 11px -9px; scale: .96; }
  100% { translate: 0 0; scale: 1; }
}

/* Cards and directories */
body.market-ui .product-card,
body.market-ui .market-category-rail > a,
body.market-ui .market-need-grid > a,
body.market-ui .market-directory-list > a,
body.market-ui .article-card,
body.market-ui .review-card,
body.market-ui .story-gallery-grid figure {
  transform-origin: center bottom;
  transition:
    transform var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) ease,
    border-color var(--motion-base) ease,
    background var(--motion-base) ease;
}

@media (hover: hover) {
  body.market-ui .product-card:hover,
  body.market-ui .market-category-rail > a:hover,
  body.market-ui .market-directory-list > a:hover,
  body.market-ui .article-card:hover,
  body.market-ui .review-card:hover,
  body.market-ui .story-gallery-grid figure:hover {
    transform: translateY(-7px) scale(1.012);
    box-shadow: 0 25px 54px rgba(4, 71, 66, .14);
  }

  body.market-ui .market-need-grid > a:hover {
    transform: translateY(-8px) rotate(-.35deg);
    box-shadow: 0 27px 58px rgba(2, 56, 53, .22);
  }

  body.market-ui .product-card:hover .product-media > img,
  body.market-ui .story-gallery-grid figure:hover img {
    transform: scale(1.065) rotate(-1deg);
  }
}

body.market-ui .product-media > img,
body.market-ui .story-gallery-grid figure img,
body.market-ui .market-directory-list > a > i,
body.market-ui .market-need-grid > a > i {
  transition: transform .55s var(--motion-ease), filter .55s ease;
}

body.market-ui .market-directory-list > a:hover > i,
body.market-ui .market-need-grid > a:hover > i {
  transform: rotate(-6deg) scale(1.08);
}

body.market-ui .quick-arrow {
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--motion-spring), background var(--motion-fast) ease;
}

body.market-ui .product-card:hover .quick-arrow {
  opacity: 1;
  transform: scale(1) rotate(8deg);
}

/* Magnetic buttons and soft sheen */
.motion-magnetic {
  transform: translate(var(--motion-x, 0), var(--motion-y, 0));
  transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-base) ease, background var(--motion-fast) ease;
}

body.market-ui .market-primary,
body.market-ui .header-cta,
body.market-ui .submit-button,
body.market-ui .mobile-product-bar button,
body.market-ui .filters button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.market-ui .market-primary::after,
body.market-ui .header-cta::after,
body.market-ui .submit-button::after,
body.market-ui .mobile-product-bar button::after,
body.market-ui .filters button::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -35%;
  z-index: -1;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
  transform: skewX(-20deg) translateX(-180%);
  transition: transform .7s var(--motion-ease);
}

body.market-ui .market-primary:hover::after,
body.market-ui .header-cta:hover::after,
body.market-ui .submit-button:hover::after,
body.market-ui .mobile-product-bar button:hover::after,
body.market-ui .filters button:hover::after {
  transform: skewX(-20deg) translateX(620%);
}

body.market-ui button:active,
body.market-ui .button:active,
body.market-ui .market-primary:active,
body.market-ui .market-secondary:active {
  scale: .975;
}

/* Forms, filters, variants and tabs */
body.market-ui input,
body.market-ui textarea,
body.market-ui select,
body.market-ui .option-value,
body.market-ui .thumbs button,
body.market-ui .category-tabs a,
body.market-ui .product-jump-nav a {
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}

body.market-ui .option-value:hover,
body.market-ui .thumbs button:hover,
body.market-ui .category-tabs a:hover,
body.market-ui .product-jump-nav a:hover {
  transform: translateY(-2px);
}

body.market-ui .option-value.selected {
  animation: option-selected .34s var(--motion-spring) both;
}

body.market-ui .variant-status.available,
body.market-ui #form-status.success {
  animation: status-pop .42s var(--motion-spring) both;
}

body.market-ui .variant-status.unavailable,
body.market-ui #form-status.error {
  animation: status-shake .34s ease both;
}

@keyframes option-selected {
  0% { transform: scale(.94); }
  65% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes status-pop {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes status-shake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
}

/* FAQ, modal and sticky contact */
body.market-ui .faq-list details[open] > p {
  transform-origin: top;
  animation: accordion-open .42s var(--motion-ease) both;
}

@keyframes accordion-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

body.market-ui .purchase-contact-dialog[open]::backdrop {
  animation: backdrop-in .28s ease both;
}

body.market-ui .purchase-contact-dialog[open] .purchase-channel {
  animation: channel-in .4s var(--motion-ease) both;
}

body.market-ui .purchase-contact-dialog[open] .purchase-channel:nth-child(2) {
  animation-delay: 70ms;
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

body.market-ui .floating-action {
  animation: floating-contact-breathe 3s ease-in-out infinite;
}

body.market-ui .floating-action:nth-child(2) {
  animation-delay: -1.5s;
}

@keyframes floating-contact-breathe {
  0%, 100% { transform: translateY(0); box-shadow: 0 10px 28px rgba(0, 55, 52, .18); }
  50% { transform: translateY(-3px); box-shadow: 0 15px 34px rgba(0, 55, 52, .25); }
}

@media (max-width: 760px) {
  .motion-enhanced .reveal-item[data-motion="left"],
  .motion-enhanced .reveal-item[data-motion="right"] {
    transform: translateY(24px);
  }

  .motion-enhanced .reveal-item.is-visible[data-motion="left"],
  .motion-enhanced .reveal-item.is-visible[data-motion="right"] {
    transform: translateY(0);
  }

  body.market-ui .market-hero-visual > img {
    animation-duration: 7s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app.page-entering > *,
  body.market-ui .market-hero,
  body.market-ui .market-hero-visual > img,
  body.market-ui .market-orbit,
  body.market-ui .floating-action,
  body.market-ui .purchase-contact-dialog[open]::backdrop,
  body.market-ui .purchase-contact-dialog[open] .purchase-channel,
  body.market-ui .faq-list details[open] > p,
  .gallery-swap-in {
    animation: none !important;
  }

  .motion-enhanced .reveal-item,
  .motion-enhanced img.motion-image {
    opacity: 1 !important;
    scale: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}