/* Motion changes presentation only; the native forms and layout remain intact. */
:root { --motion-ease: cubic-bezier(.25,.46,.45,.94); --motion-fill: cubic-bezier(.785,.135,.15,.86); }
.hero { overflow: clip; overflow-clip-margin: 26px; }
.hero-slide { overflow: hidden; }
.hero-slide.is-leaving { pointer-events: none; }
.motion-pending { opacity: 0; }
.product-card__hover { transition: opacity .1s ease-in-out; }
.quick-add { transition: opacity .2s ease, transform .2s ease; }
.mosaic-tile .cover, .pdp-collections img, .article-grid article img { transition: transform 1.5s cubic-bezier(.22,.61,.36,1); }
.mega-menu { animation: colmond-menu-in .35s var(--motion-ease) both; }
.mega-menu > * { animation: colmond-content-in .45s var(--motion-ease) both; }
.mega-menu > :nth-child(2) { animation-delay: .06s; }
.mega-menu > :nth-child(3) { animation-delay: .12s; }
.collection-tabs button { position: relative; border-bottom-color: transparent !important; }
.collection-tabs button::after { content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--motion-ease); }
.collection-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.rail-navigation button { transition: opacity .2s, background-color .2s, transform .3s var(--motion-ease); }
.rail-navigation button:hover { transform: scale(1.06); }

/* The reference's directional button fill, using each button's own theme colours. */
.button[data-motion-button] {
  background-image: linear-gradient(var(--motion-hover-bg),var(--motion-hover-bg));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0 100%;
  transition: background-size .45s var(--motion-fill), color .45s var(--motion-fill), border-color .45s var(--motion-fill);
}
@media (hover: hover) and (pointer: fine) {
  .button[data-motion-button]:hover, .woocommerce .button[data-motion-button]:hover {
    background-color: var(--motion-base-bg);
    background-position: left center;
    background-size: 100% 100%;
    color: var(--motion-hover-color);
  }
  .pdp-collections a:hover img, .article-grid article a:hover img { transform: scale(1.03); }
}
.button[data-motion-button]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@keyframes colmond-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes colmond-content-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .motion-pending { opacity: 1; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}