/* HAMI motion — transform/opacity only. Levels gated by body class. */

.hami-motion-0 .hami-reveal,
.hami-motion-0 .hami-el-marquee__track {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/*
 * Progressive enhancement: content stays visible by default.
 * Only after JS marks body.hami-motion-ready do offscreen reveals start hidden.
 */
.hami-motion-ready.hami-motion-1 .hami-reveal:not(.is-inview):not(.hami-hero),
.hami-motion-ready.hami-motion-2 .hami-reveal:not(.is-inview):not(.hami-hero),
.hami-motion-ready.hami-motion-3 .hami-reveal:not(.is-inview):not(.hami-hero),
.hami-motion-ready.hami-motion-1 .hami-story:not(.is-inview),
.hami-motion-ready.hami-motion-2 .hami-story:not(.is-inview),
.hami-motion-ready.hami-motion-3 .hami-story:not(.is-inview) {
  opacity: 0;
  transform: translateY(14px);
}

.hami-motion-1 .hami-reveal,
.hami-motion-2 .hami-reveal,
.hami-motion-3 .hami-reveal,
.hami-motion-1 .hami-story,
.hami-motion-2 .hami-story,
.hami-motion-3 .hami-story {
  transition:
    opacity calc(320ms * var(--hami-motion-scale, 1)) ease,
    transform calc(320ms * var(--hami-motion-scale, 1)) ease;
}

.hami-motion-1 .hami-reveal.is-inview,
.hami-motion-2 .hami-reveal.is-inview,
.hami-motion-3 .hami-reveal.is-inview,
.hami-motion-1 .hami-story.is-inview,
.hami-motion-2 .hami-story.is-inview,
.hami-motion-3 .hami-story.is-inview,
.hami-motion-0 .hami-reveal,
.hami-hero {
  opacity: 1;
  transform: none;
}

/* Product card lift — L1+ desktop hover */
@media (hover: hover) and (pointer: fine) {
  .hami-motion-1 ul.products li.product,
  .hami-motion-2 ul.products li.product,
  .hami-motion-3 ul.products li.product,
  .hami-motion-1 .hami-el-products__item,
  .hami-motion-2 .hami-el-products__item,
  .hami-motion-3 .hami-el-products__item {
    transition: transform calc(180ms * var(--hami-motion-scale, 1)) ease;
  }

  .hami-motion-1 ul.products li.product:hover,
  .hami-motion-2 ul.products li.product:hover,
  .hami-motion-3 ul.products li.product:hover,
  .hami-motion-1 .hami-el-products__item:hover,
  .hami-motion-2 .hami-el-products__item:hover,
  .hami-motion-3 .hami-el-products__item:hover {
    transform: translateY(-3px);
  }
}

/* Cart feedback toast */
.hami-motion-toast {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: #171717;
  color: #f5f2ec;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity calc(240ms * var(--hami-motion-scale, 1)) ease,
    transform calc(240ms * var(--hami-motion-scale, 1)) ease;
}

.hami-motion-toast.is-visible {
  opacity: 1;
  transform: none;
}

/* Magnetic target hint (JS applies transform) */
.hami-magnetic {
  will-change: transform;
}

/* L3 storytelling blocks — CSS/IO only, no GSAP */
.hami-motion-3 .hami-story {
  opacity: 0.35;
  transform: translateY(16px);
  transition:
    opacity calc(420ms * var(--hami-motion-scale, 1)) ease,
    transform calc(420ms * var(--hami-motion-scale, 1)) ease;
}

.hami-motion-3 .hami-story.is-inview {
  opacity: 1;
  transform: none;
}

.hami-motion-no-advanced .hami-story {
  opacity: 1 !important;
  transform: none !important;
}

/* Commerce-safe: kill advanced/interactive flourish on cart/checkout */
.hami-motion-commerce-safe .hami-reveal,
.hami-motion-commerce-safe .hami-story,
.hami-motion-commerce-safe .hami-el-marquee__track {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.hami-motion-force) .hami-reveal,
  body:not(.hami-motion-force) .hami-story,
  body:not(.hami-motion-force) .hami-el-marquee__track,
  body:not(.hami-motion-force) .hami-motion-toast,
  body:not(.hami-motion-force) ul.products li.product,
  body:not(.hami-motion-force) .hami-el-products__item {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}