/** Shopify CDN: Minification failed

Line 7:0 Unexpected "`"
Line 341:0 Unexpected "`"

**/
```css
/* =========================================================
   NOVIX — Animation CSS
   File: novix-animation.css
   ========================================================= */


/* =========================================================
   1. PRODUCT / COLLECTION CARD HOVER
   ========================================================= */

.product-card,
.collection-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition:
    transform var(--hover-transition-duration)
      var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration)
      var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
  cursor: pointer;
}


@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {

  .card-hover-effect-lift .product-card:hover,
  .card-hover-effect-lift .collection-card:hover,
  .card-hover-effect-lift
  .predictive-search-results__card:hover {
    transform:
      translateY(
        calc(-1 * var(--hover-lift-amount))
      );
  }

  .card-hover-effect-scale .product-card:hover,
  .card-hover-effect-scale .collection-card:hover,
  .card-hover-effect-scale
  .predictive-search-results__card:hover {
    transform:
      scale(var(--hover-scale-amount));
  }

  .card-hover-effect-subtle-zoom .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card__image {
    overflow: hidden;
    transition:
      transform var(--hover-transition-duration)
      var(--hover-transition-timing);
  }

  .card-hover-effect-subtle-zoom
  .product-card:hover
  .card-gallery,
  .card-hover-effect-subtle-zoom
  .collection-card:hover
  .collection-card__image,
  .card-hover-effect-subtle-zoom
  .product-card:hover
  .product-card__image {
    transform:
      scale(var(--hover-subtle-zoom-amount));
  }

}


/* =========================================================
   2. GENERAL
   ========================================================= */

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}


/* =========================================================
   3. NOVIX REVEAL
   ========================================================= */

.novix-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.novix-reveal.novix-in {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   4. NOVIX HERO
   ========================================================= */

[data-novix-hero] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

[data-novix-hero].novix-hero-in {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   5. NOVIX IMAGE SEQUENCE
   IMPORTANT:
   DO NOT ADD ANOTHER VERSION OF THESE RULES.
   ========================================================= */

.novix-image-sequence {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}


/* Sticky viewport */

.novix-image-sequence__sticky {
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;

  overflow: hidden;
}


/* Every frame sits exactly on top of the others */

.novix-image-sequence__frame {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform: none;

  transition: none;
}


/* First frame */

.novix-image-sequence__frame:first-child {
  opacity: 1;
  visibility: visible;
}


/* Images */

.novix-image-sequence__img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  object-position: center center;

  transform: none;

  transition: none;
}


/* =========================================================
   6. MOBILE IMAGE SEQUENCE
   ========================================================= */

@media screen and (max-width: 749px) {

  .novix-image-sequence__sticky {
    height: 100svh;
  }

  .novix-image-sequence__img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;
  }

}


/* =========================================================
   7. NOVIX CINEMATIC
   ========================================================= */

.novix-cinematic {
  position: relative;
  width: 100%;
}

.novix-cinematic__media {
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;

  overflow: hidden;
}


/* =========================================================
   CINEMATIC MEDIA
   Fills the entire viewport without empty space.
   The video/image is cropped when necessary.
   ========================================================= */

.novix-cinematic__media img,
.novix-cinematic__media video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  opacity: 0;

  transition:
    opacity 0.35s ease;
}

.novix-cinematic__media img.novix-active,
.novix-cinematic__media video.novix-active {
  opacity: 1;
}


/* =========================================================
   8. NOVIX PARALLAX
   ========================================================= */

[data-novix-parallax] {
  will-change: transform;
}


/* =========================================================
   9. REDUCED MOTION
   ========================================================= */

.novix-reduced-motion
.novix-reveal,
.novix-reduced-motion
[data-novix-hero] {
  opacity: 1;
  transform: none;
}

.novix-reduced-motion
.novix-image-sequence__frame {
  transition: none;
}


/* =========================================================
   10. PRODUCT IMAGE DUPLICATE FIX
   ========================================================= */

.product-card__media img:nth-of-type(n + 2),
.product-card__image:nth-of-type(n + 2),
.product-card__media .media:nth-of-type(n + 2) {
  display: none;
}
```