/* Menu motion — hero drift, chips, card reveal, image parallax */

:root {
  --menu-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --menu-hero-drift-duration: 20s;
}

/* PHP body class or #roots-menu in DOM */
body:is(.roots-menu-motion, :has(#roots-menu)) .roots-hero {
  overflow: hidden;
}

/* Hero — 2% up/down, 20s (pure CSS, matches home bg drift) */
body:is(.roots-menu-motion, :has(#roots-menu)) .roots-hero__img {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: menu-hero-drift var(--menu-hero-drift-duration) ease-in-out infinite;
  animation: menu-hero-drift var(--menu-hero-drift-duration) ease-in-out infinite;
}

@-webkit-keyframes menu-hero-drift {
  0%,
  100% {
    -webkit-transform: scale(1.06) translate3d(0, 0, 0);
    transform: scale(1.06) translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: scale(1.06) translate3d(0, -2%, 0);
    transform: scale(1.06) translate3d(0, -2%, 0);
  }
}

@keyframes menu-hero-drift {
  0%,
  100% {
    -webkit-transform: scale(1.06) translate3d(0, 0, 0);
    transform: scale(1.06) translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: scale(1.06) translate3d(0, -2%, 0);
    transform: scale(1.06) translate3d(0, -2%, 0);
  }
}

/* Category chips — always visible (no entrance delay) */
body:is(.roots-menu-motion, :has(#roots-menu)) .roots-chip,
body:is(.roots-menu-motion, :has(#roots-menu)) .wcg-category-grid__button {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@-webkit-keyframes menu-chip-pulse {
  0%,
  100% {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  50% {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
  }
}

@keyframes menu-chip-pulse {
  0%,
  100% {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  50% {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
  }
}

body:is(.roots-menu-motion, :has(#roots-menu)) .roots-chip.is-active,
body:is(.roots-menu-motion, :has(#roots-menu)) .wcg-category-grid__button.is-active {
  -webkit-animation: menu-chip-pulse 2.6s var(--menu-motion-ease) infinite;
  animation: menu-chip-pulse 2.6s var(--menu-motion-ease) infinite;
  z-index: 1;
}

/* Card reveal */
body:is(.roots-menu-motion, :has(#roots-menu)) .roots-card {
  will-change: transform, opacity;
  transform-origin: center center;
}

body:is(.roots-menu-motion, :has(#roots-menu)).is-menu-motion-booted
  .roots-card:not(.is-card-revealed) {
  opacity: 0;
  -webkit-transform: translate3d(0, 40px, 0) rotate(var(--card-tilt, 0.5deg));
  transform: translate3d(0, 40px, 0) rotate(var(--card-tilt, 0.5deg));
}

body:is(.roots-menu-motion, :has(#roots-menu)) .roots-card.is-card-revealed {
  opacity: 1;
  -webkit-transform: translate3d(0, var(--card-float-y, 0), 0) rotate(0deg);
  transform: translate3d(0, var(--card-float-y, 0), 0) rotate(0deg);
  -webkit-transition:
    -webkit-transform 0.5s var(--menu-motion-ease),
    opacity 0.35s var(--menu-motion-ease);
  transition:
    transform 0.5s var(--menu-motion-ease),
    opacity 0.35s var(--menu-motion-ease);
}

/* No mouse hover lift */
body:is(.roots-menu-motion, :has(#roots-menu)) .roots-chip:hover,
body:is(.roots-menu-motion, :has(#roots-menu)) .wcg-category-grid__button:hover,
body:is(.roots-menu-motion, :has(#roots-menu)) .roots-nav .roots-chip:hover,
body:is(.roots-menu-motion, :has(#roots-menu)) .roots-bar-main .roots-chip:hover,
body:is(.roots-menu-motion, :has(#roots-menu)) .roots-card:hover {
  -webkit-transform: none !important;
  transform: none !important;
  filter: none !important;
  box-shadow: var(--roots-card-shadow) !important;
}

/* Internal image parallax */
body:is(.roots-menu-motion, :has(#roots-menu)) .roots-card__media {
  overflow: hidden;
}

body:is(.roots-menu-motion, :has(#roots-menu)) .roots-card__img {
  will-change: transform;
  -webkit-transform: translate3d(0, var(--img-parallax-y, 0), 0) scale(1.08);
  transform: translate3d(0, var(--img-parallax-y, 0), 0) scale(1.08);
  -webkit-transition: -webkit-transform 0.12s linear;
  transition: transform 0.12s linear;
}

@media (prefers-reduced-motion: reduce) {
  body:is(.roots-menu-motion, :has(#roots-menu)) .roots-hero__img,
  body:is(.roots-menu-motion, :has(#roots-menu)) .roots-chip,
  body:is(.roots-menu-motion, :has(#roots-menu)) .wcg-category-grid__button,
  body:is(.roots-menu-motion, :has(#roots-menu)) .roots-card,
  body:is(.roots-menu-motion, :has(#roots-menu)) .roots-card__img {
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    opacity: 1 !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}