/** Shopify CDN: Minification failed

Line 24:8 Expected identifier but found whitespace
Line 24:10 Unexpected "{"
Line 24:12 Expected identifier but found "'x'"

**/
/*
  Harvest Moon: how the menu trigger reacts to hover and to scrolling.
  On hover the word smears sideways: a ghost copy pulls away and fades, the
  letters spread and snap back, and a pencil scribble strikes through.
*/

header-drawer.hm-menu .hm-trig {
  position: relative;
}

/* The ghost copy that drags away from the word */
header-drawer.hm-menu .hm-trig::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 0;
  color: {{ 'x' | default: 'x' }};
  color: #b79662;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

header-drawer.hm-menu .hm-trig:hover::after,
header-drawer.hm-menu .hm-trig:focus-visible::after {
  animation: hm-smear 420ms cubic-bezier(0.26, 0.9, 0.4, 1) both;
}

@keyframes hm-smear {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  22% {
    opacity: 0.75;
    transform: translateX(0.16em);
  }
  60% {
    opacity: 0.4;
    transform: translateX(0.42em);
  }
  100% {
    opacity: 0;
    transform: translateX(0.62em);
  }
}

/* The letters themselves pull apart, then close up again */
.hm-trig__l {
  display: inline-block;
  will-change: transform;
}

header-drawer.hm-menu .hm-trig:hover .hm-trig__l,
header-drawer.hm-menu .hm-trig:focus-visible .hm-trig__l {
  animation: hm-spread 400ms cubic-bezier(0.26, 0.9, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}

@keyframes hm-spread {
  0% {
    transform: none;
  }
  30% {
    transform: translateX(0.09em) skewX(-6deg);
  }
  65% {
    transform: translateX(-0.03em) skewX(2deg);
  }
  100% {
    transform: none;
  }
}

/* The other two step back while one is pointed at */
header-drawer.hm-menu.is-hovering .hm-trig {
  opacity: 0.45;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

header-drawer.hm-menu.is-hovering .hm-trig.is-hot {
  opacity: 1;
  transform: translateX(0.5rem);
}

/* Once the page has moved, the stack settles down and gets out of the way */
.scrolled-past-header header-drawer.hm-menu .hm-trig {
  font-size: 1.1rem;
  opacity: 0.72;
  transition: opacity 0.3s ease, font-size 0.3s ease;
}

.scrolled-past-header header-drawer.hm-menu:hover .hm-trig,
.scrolled-past-header header-drawer.hm-menu:focus-within .hm-trig {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  header-drawer.hm-menu .hm-trig::after {
    display: none;
  }

  header-drawer.hm-menu .hm-trig:hover .hm-trig__l,
  header-drawer.hm-menu .hm-trig:focus-visible .hm-trig__l {
    animation: none;
  }

  header-drawer.hm-menu.is-hovering .hm-trig,
  header-drawer.hm-menu.is-hovering .hm-trig.is-hot {
    opacity: 1;
    transform: none;
  }
}