/* =========================================================
   WA Cushion — Motion Plus 20260729
   Quiet-luxury presence: clean scroll rises, stronger hero,
   card hover life. Load LAST after btn-contrast.
   ========================================================= */

html.has-motion.fx-force:not(.nofx) {
  --mp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mp-rise: 2.4rem;
}

/* ---------- Kill weird text clip-wipes; keep clean rise ---------- */
html.has-motion.fx-force:not(.nofx) .reveal:not(.is-visible):not(.reveal--clip):not([data-reveal-media]),
html.has-motion.fx-force:not(.nofx) a.col-item.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) a.pcat-cat.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .feat-card.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .pcat-card.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .pcat-feat-card.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .gallery-item.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .pcat-gallery__item.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .why-strip__item.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) h2.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .home-about__copy > *:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .home-section-head.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .eyebrow.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .lead.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .link-arrow.reveal:not(.is-visible) {
  opacity: 0 !important;
  transform: translate3d(0, var(--mp-rise), 0) !important;
  clip-path: none !important;
  filter: none !important;
  transition:
    opacity 0.95s var(--mp-ease),
    transform 0.95s var(--mp-ease) !important;
  transition-delay: var(--delay, 0ms) !important;
  will-change: opacity, transform;
}

html.has-motion.fx-force:not(.nofx) .reveal.is-visible:not(.reveal--clip):not([data-reveal-media]),
html.has-motion.fx-force:not(.nofx) a.col-item.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) a.pcat-cat.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) .feat-card.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) .pcat-card.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) .pcat-feat-card.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) .gallery-item.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) .pcat-gallery__item.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) .why-strip__item.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) h2.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) .home-about__copy > *.is-visible,
html.has-motion.fx-force:not(.nofx) .home-section-head.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) .eyebrow.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) .lead.reveal.is-visible,
html.has-motion.fx-force:not(.nofx) .link-arrow.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* Media keeps cinematic clip wipe */
html.has-motion.fx-force:not(.nofx) .reveal--clip:not(.is-visible),
html.has-motion.fx-force:not(.nofx) [data-reveal-media]:not(.is-in):not(.is-visible) {
  opacity: 1 !important;
  transform: scale(1.08) !important;
  clip-path: inset(10% 8% 10% 8%) !important;
  filter: brightness(0.9) !important;
  transition:
    clip-path 1.2s var(--mp-ease),
    transform 1.2s var(--mp-ease),
    filter 1.2s var(--mp-ease) !important;
}

html.has-motion.fx-force:not(.nofx) .reveal--clip.is-visible,
html.has-motion.fx-force:not(.nofx) [data-reveal-media].is-in,
html.has-motion.fx-force:not(.nofx) [data-reveal-media].is-visible {
  transform: none !important;
  clip-path: inset(0 0 0 0) !important;
  filter: none !important;
}

/* ---------- Hero: clearer staggered entrance ---------- */
html.has-motion.fx-force:not(.nofx) .home-hero:not(.is-ready) .home-hero__copy > *,
html.has-motion.fx-force:not(.nofx) [data-hero-content]:not(.is-hero-in) > * {
  opacity: 0 !important;
  transform: translate3d(0, 2.25rem, 0) !important;
  filter: blur(2px) !important;
}

html.has-motion.fx-force:not(.nofx) .home-hero.is-ready .home-hero__copy > *,
html.has-motion.fx-force:not(.nofx) [data-hero-content].is-hero-in > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition:
    opacity 1.05s var(--mp-ease),
    transform 1.05s var(--mp-ease),
    filter 1.05s var(--mp-ease) !important;
}

html.has-motion.fx-force:not(.nofx) .home-hero.is-ready .home-hero__copy > *:nth-child(1),
html.has-motion.fx-force:not(.nofx) [data-hero-content].is-hero-in > *:nth-child(1) {
  transition-delay: 0.12s !important;
}
html.has-motion.fx-force:not(.nofx) .home-hero.is-ready .home-hero__copy > *:nth-child(2),
html.has-motion.fx-force:not(.nofx) [data-hero-content].is-hero-in > *:nth-child(2) {
  transition-delay: 0.28s !important;
}
html.has-motion.fx-force:not(.nofx) .home-hero.is-ready .home-hero__copy > *:nth-child(3),
html.has-motion.fx-force:not(.nofx) [data-hero-content].is-hero-in > *:nth-child(3) {
  transition-delay: 0.46s !important;
}
html.has-motion.fx-force:not(.nofx) .home-hero.is-ready .home-hero__copy > *:nth-child(4),
html.has-motion.fx-force:not(.nofx) [data-hero-content].is-hero-in > *:nth-child(4) {
  transition-delay: 0.62s !important;
}

/* Title words rise */
html.has-motion.fx-force:not(.nofx) .home-hero .split-word {
  display: inline-block !important;
  overflow: hidden !important;
  vertical-align: bottom !important;
}

html.has-motion.fx-force:not(.nofx) .home-hero .split-word__inner {
  display: inline-block !important;
  transform: translate3d(0, 110%, 0) !important;
  transition: transform 1s var(--mp-ease) !important;
  transition-delay: var(--wdelay, 0ms) !important;
}

html.has-motion.fx-force:not(.nofx) .home-hero .split-word.is-in .split-word__inner {
  transform: none !important;
}

/* Stronger Ken Burns on home hero */
html.has-motion.fx-force:not(.nofx) .home-hero__media {
  animation: wa-mp-ken 26s var(--mp-ease) both !important;
}

@keyframes wa-mp-ken {
  0% { transform: scale(1.14) translate3d(0, 2%, 0); }
  100% { transform: scale(1.02) translate3d(0, 0, 0); }
}

/* ---------- Collection cards: hover life ---------- */
@media (hover: hover) and (pointer: fine) {
  html.has-motion.fx-force:not(.nofx) a.col-item {
    transition: transform 0.55s var(--mp-ease) !important;
  }

  html.has-motion.fx-force:not(.nofx) a.col-item .col-item__img,
  html.has-motion.fx-force:not(.nofx) a.col-item .col-item__media {
    transition: transform 0.9s var(--mp-ease) !important;
    will-change: transform;
  }

  html.has-motion.fx-force:not(.nofx) a.col-item:hover {
    transform: translate3d(0, -4px, 0) !important;
  }

  html.has-motion.fx-force:not(.nofx) a.col-item:hover .col-item__img {
    transform: scale(1.06) !important;
  }

  /* Gallery / product cards */
  html.has-motion.fx-force:not(.nofx) .gallery-item__media,
  html.has-motion.fx-force:not(.nofx) .pcat-card__media,
  html.has-motion.fx-force:not(.nofx) .pcat-feat-card__media,
  html.has-motion.fx-force:not(.nofx) .feat-card__media,
  html.has-motion.fx-force:not(.nofx) .pcat-gallery__media {
    overflow: hidden !important;
    position: relative !important;
    z-index: 0 !important;
    /* Frame must never scale — only the image inside */
    transform: none !important;
  }

  html.has-motion.fx-force:not(.nofx) .pcat-card__body,
  html.has-motion.fx-force:not(.nofx) .pcat-feat-card__body,
  html.has-motion.fx-force:not(.nofx) .feat-card__body,
  html.has-motion.fx-force:not(.nofx) .gallery-item__body {
    position: relative !important;
    z-index: 1 !important;
  }

  html.has-motion.fx-force:not(.nofx) .gallery-item__media > *,
  html.has-motion.fx-force:not(.nofx) .pcat-card__media > *,
  html.has-motion.fx-force:not(.nofx) .pcat-feat-card__media > *,
  html.has-motion.fx-force:not(.nofx) .feat-card__media > *,
  html.has-motion.fx-force:not(.nofx) .pcat-gallery__media > *,
  html.has-motion.fx-force:not(.nofx) .gallery-item__img,
  html.has-motion.fx-force:not(.nofx) .pcat-card__img,
  html.has-motion.fx-force:not(.nofx) .pcat-cat__img {
    transition: transform 1s var(--mp-ease) !important;
  }

  /* Scale only the image — never the media frame (frame scale spills over card copy) */
  html.has-motion.fx-force:not(.nofx) .gallery-item:hover .gallery-item__img,
  html.has-motion.fx-force:not(.nofx) .gallery-item:hover .gallery-item__media > *,
  html.has-motion.fx-force:not(.nofx) .pcat-card:hover .pcat-card__img,
  html.has-motion.fx-force:not(.nofx) .pcat-card:hover .pcat-card__media > *,
  html.has-motion.fx-force:not(.nofx) .pcat-feat-card:hover .pcat-feat-card__media > *,
  html.has-motion.fx-force:not(.nofx) .feat-card:hover .feat-card__media > *,
  html.has-motion.fx-force:not(.nofx) .pcat-cat:hover .pcat-cat__img {
    transform: scale(1.05) !important;
  }

  html.has-motion.fx-force:not(.nofx) .gallery-item__cta,
  html.has-motion.fx-force:not(.nofx) .pcat-card__cta {
    transition:
      transform 0.45s var(--mp-ease),
      letter-spacing 0.45s ease,
      box-shadow 0.45s var(--mp-ease) !important;
  }

  html.has-motion.fx-force:not(.nofx) .gallery-item:hover .gallery-item__cta,
  html.has-motion.fx-force:not(.nofx) .pcat-card:hover .pcat-card__cta {
    transform: translate3d(0, -2px, 0) !important;
  }

  /* Magnetic CTA feel */
  html.has-motion.fx-force:not(.nofx) a.hero-cta,
  html.has-motion.fx-force:not(.nofx) .hero-cta {
    transition:
      transform 0.35s var(--mp-ease),
      box-shadow 0.45s var(--mp-ease),
      letter-spacing 0.4s ease,
      background-color 0.35s ease !important;
  }

  html.has-motion.fx-force:not(.nofx) a.hero-cta:hover,
  html.has-motion.fx-force:not(.nofx) .hero-cta:hover {
    transform: translate3d(0, -3px, 0) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32) !important;
    letter-spacing: 0.18em !important;
  }

  html.has-motion.fx-force:not(.nofx) a.hero-cta:hover .hero-cta__arrow {
    transform: translateX(6px) !important;
  }

  html.has-motion.fx-force:not(.nofx) .hero-cta__arrow {
    display: inline-block !important;
    transition: transform 0.4s var(--mp-ease) !important;
  }

  /* Link arrows */
  html.has-motion.fx-force:not(.nofx) .link-arrow {
    transition: letter-spacing 0.4s var(--mp-ease), transform 0.4s var(--mp-ease) !important;
  }

  html.has-motion.fx-force:not(.nofx) .link-arrow:hover {
    letter-spacing: 0.06em !important;
  }
}

/* ---------- Eyebrow line draw (ensure visible) ---------- */
html.has-motion.fx-force:not(.nofx) .eyebrow {
  position: relative !important;
  display: inline-block !important;
}

html.has-motion.fx-force:not(.nofx) .eyebrow::after {
  content: "" !important;
  display: block !important;
  width: 2.25rem !important;
  height: 1px !important;
  margin-top: 0.55rem !important;
  background: currentColor !important;
  opacity: 0.55 !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.85s var(--mp-ease) 0.12s !important;
}

html.has-motion.fx-force:not(.nofx) .reveal.is-visible .eyebrow::after,
html.has-motion.fx-force:not(.nofx) .eyebrow.reveal.is-visible::after,
html.has-motion.fx-force:not(.nofx) .home-section-head.is-visible .eyebrow::after,
html.has-motion.fx-force:not(.nofx) .home-about__copy .eyebrow.is-visible::after,
html.has-motion.fx-force:not(.nofx) .is-ready .eyebrow::after {
  transform: scaleX(1) !important;
}

/* ---------- Why list stagger breath ---------- */
html.has-motion.fx-force:not(.nofx) .why-strip__item.reveal:not(.is-visible),
html.has-motion.fx-force:not(.nofx) .home-why li.reveal:not(.is-visible) {
  transform: translate3d(0, 1.5rem, 0) !important;
  opacity: 0 !important;
}

/* ---------- Nav hover underline draw ---------- */
@media (hover: hover) and (pointer: fine) {
  html.has-motion.fx-force:not(.nofx) .site-header .nav a,
  html.has-motion.fx-force:not(.nofx) .site-header .header-cats a {
    position: relative !important;
    transition: color 0.35s ease, opacity 0.35s ease !important;
  }

  html.has-motion.fx-force:not(.nofx) .site-header .nav a::after,
  html.has-motion.fx-force:not(.nofx) .site-header .header-cats a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -0.25rem !important;
    height: 1px !important;
    background: currentColor !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform 0.4s var(--mp-ease) !important;
    opacity: 0.85 !important;
  }

  html.has-motion.fx-force:not(.nofx) .site-header .nav a:hover::after,
  html.has-motion.fx-force:not(.nofx) .site-header .nav a.is-active::after,
  html.has-motion.fx-force:not(.nofx) .site-header .nav a[aria-current="page"]::after,
  html.has-motion.fx-force:not(.nofx) .site-header .header-cats a:hover::after {
    transform: scaleX(1) !important;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.has-motion:not(.fx-force) .reveal:not(.is-visible),
  html.has-motion:not(.fx-force) .reveal.is-visible,
  html.has-motion:not(.fx-force) .home-hero__copy > *,
  html.has-motion:not(.fx-force) .home-hero__media {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}
