/* BioPepSyn motion system — restrained editorial motion */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-soft: cubic-bezier(.22, 1, .36, 1);
}

/* Only hide when the script has confirmed support, never for no-JS users. */
.motion-ready [data-motion="fade"] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 700ms var(--motion-ease-soft),
    transform 900ms var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}
.motion-ready [data-motion="fade"].is-visible {
  opacity: 1;
  transform: none;
}

.motion-ready [data-motion="mask"] {
  overflow: hidden;
}
.motion-ready [data-motion="mask"] > h1 {
  opacity: 0;
  transform: translate3d(0, 108%, 0);
  transition:
    opacity 500ms var(--motion-ease-soft),
    transform 1000ms var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}
.motion-ready [data-motion="mask"].is-visible > h1 {
  opacity: 1;
  transform: none;
}

.motion-ready [data-motion="image"] img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.035);
  transition:
    clip-path 1100ms var(--motion-ease),
    transform 1200ms var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: clip-path, transform;
}
.motion-ready [data-motion="image"].is-visible img {
  clip-path: inset(0 0 0 0);
  transform: none;
}
.motion-ready [data-motion="image"] figcaption {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms ease 380ms, transform 600ms var(--motion-ease) 380ms;
}
.motion-ready [data-motion="image"].is-visible figcaption {
  opacity: 1;
  transform: none;
}

/* Header: quiet condensation after the first fold */
.site-header {
  transition: background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.site-header.is-scrolled {
  background: rgba(255, 253, 248, .94);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(216, 210, 196, .9);
  box-shadow: 0 8px 30px rgba(23, 37, 31, .05);
}

/* Navigation underline draws instead of blinking */
.desktop-nav a {
  position: relative;
  text-decoration: none;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: #b08a4f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--motion-ease);
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Product imagery responds without lifting cards */
.home-product-image img,
.product-card img {
  transition: transform 800ms var(--motion-ease-soft), filter 800ms var(--motion-ease-soft);
  will-change: transform;
}
.home-product-image:hover img,
.home-product-image:focus-visible img,
.product-card:hover img {
  transform: scale(1.022);
}

/* Arrows and text links move a little, not bounce */
.text-link,
.button {
  transition: color 240ms ease, background-color 240ms ease, border-color 240ms ease, transform 400ms var(--motion-ease);
}
.text-link:hover,
.text-link:focus-visible {
  color: #143a2e;
}
.hero-editorial .text-link:hover,
.hero-editorial .text-link:focus-visible {
  transform: translateX(3px);
}

/* Film band: gentle scale-in, video handled by JS */
.motion-ready .film-strip .film-strip-copy > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 900ms var(--motion-ease);
}
.motion-ready .film-strip.is-visible .film-strip-copy > * {
  opacity: 1;
  transform: none;
}
.motion-ready .film-strip.is-visible .film-strip-copy > *:nth-child(1) { transition-delay: 80ms; }
.motion-ready .film-strip.is-visible .film-strip-copy > *:nth-child(2) { transition-delay: 160ms; }
.motion-ready .film-strip.is-visible .film-strip-copy > *:nth-child(3) { transition-delay: 240ms; }
.motion-ready .film-strip.is-visible .film-strip-copy > *:nth-child(4) { transition-delay: 320ms; }
.motion-ready .film-strip-video {
  opacity: 0;
  transition: opacity 900ms ease;
}
.motion-ready .film-strip.is-visible .film-strip-video {
  opacity: .96;
}

/* Avoid motion for people who ask for it */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-motion],
  .motion-ready [data-motion] *,
  .motion-ready .film-strip .film-strip-copy > *,
  .motion-ready .film-strip-video {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* PDP / collection micro-motion */
.product-detail-media { overflow: hidden; }
.product-detail-media img { transition: transform 900ms var(--motion-ease-soft); }
.product-detail-media:hover img { transform: scale(1.012); }

@media (prefers-reduced-motion: reduce) {
  .product-detail-media img,
  .product-detail-media:hover img { transform: none !important; transition: none !important; }
}