@media (prefers-reduced-motion: no-preference) {
  .uff-mosaic__item {
    transition: opacity 0.35s ease;
  }

  .uff-btn {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  .uff-btn:hover {
    transform: translateY(-1px);
  }

  .uff-btn--solid:hover {
    background: var(--uff-rose-deep);
    box-shadow: 0 10px 22px rgb(168 123 118 / 0.28);
  }

  .uff-nav__link,
  .uff-legal__link,
  .uff-text-link,
  .uff-footer a {
    transition: color 0.2s ease;
  }

  .uff-mosaic__item img,
  .uff-filter__card img,
  .uff-gallery__item img,
  .uff-extra img,
  .uff-jewelry__media img {
    transition: scale 0.55s ease;
  }

  .uff-mosaic__item:hover img,
  .uff-filter__card:hover img,
  .uff-gallery__item:hover img,
  .uff-extra:hover img {
    scale: 1.045;
  }

  .uff-lightbox,
  .uff-dialog {
    opacity: 0;
    transform: scale(0.96);
    transition-property: opacity, transform, display, overlay;
    transition-duration: 0.28s;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
  }

  .uff-lightbox[open],
  .uff-dialog[open] {
    opacity: 1;
    transform: scale(1);

    @starting-style {
      opacity: 0;
      transform: scale(0.96);
    }
  }

  .uff-lightbox::backdrop,
  .uff-dialog::backdrop {
    background-color: rgb(58 42 38 / 0);
    transition: display 0.28s allow-discrete, overlay 0.28s allow-discrete, background-color 0.28s ease-out;
  }

  .uff-lightbox[open]::backdrop {
    background-color: rgb(58 42 38 / 0.72);

    @starting-style {
      background-color: rgb(58 42 38 / 0);
    }
  }

  .uff-dialog[open]::backdrop {
    background-color: rgb(58 42 38 / 0.48);

    @starting-style {
      background-color: rgb(58 42 38 / 0);
    }
  }

  @keyframes uff-hero-in {
    from {
      opacity: 0;
      translate: 0 0.7rem;
    }
  }

  @keyframes uff-hero-breathe {
    from {
      scale: 1;
    }

    to {
      scale: 1.045;
    }
  }

  .uff-hero__copy,
  .uff-hero__grid > .uff-hero__script {
    animation: uff-hero-in 0.85s ease both;
  }

  .uff-hero__grid > .uff-hero__script {
    animation-delay: 0.18s;
  }

  .uff-hero__media img {
    transform-origin: 78% 48%;
    animation: uff-hero-breathe 22s ease-in-out alternate infinite;
  }

  @media (max-width: 859px) {
    .uff-hero__media img {
      transform-origin: 50% 48%;
    }

    .uff-hero__copy {
      animation: none;
    }

    .uff-hero__title,
    .uff-hero__kicker,
    .uff-hero__grid > .uff-hero__script,
    .uff-hero__actions {
      animation: uff-hero-in 0.75s ease both;
    }

    .uff-hero__title {
      animation-delay: 0.06s;
    }

    .uff-hero__grid > .uff-hero__script {
      animation-delay: 0.12s;
    }

    .uff-hero__actions {
      animation-delay: 0.18s;
    }
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes uff-rise {
      from {
        opacity: 0;
        translate: 0 1.1rem;
      }
    }

    .uff-feature,
    .uff-piercing__intro,
    .uff-filter__card,
    .uff-jewelry__copy,
    .uff-extra,
    .uff-visit__copy,
    .uff-review,
    .uff-footer__col,
    .uff-cta h2 {
      animation: uff-rise auto linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}

.uff-reveal {
  opacity: 0;
  translate: 0 0.85rem;
  transition: opacity 0.55s ease, translate 0.55s ease;
}

.uff-reveal.is-in {
  opacity: 1;
  translate: 0;
}

@media (prefers-reduced-motion: reduce) {
  .uff-hero__copy,
  .uff-hero__grid > .uff-hero__script,
  .uff-hero__media img,
  .uff-mosaic__item img,
  .uff-gallery__item img,
  .uff-extra img {
    animation: none;
    transition: none;
    scale: 1;
    opacity: 1;
    translate: 0;
  }

  .uff-btn:hover {
    transform: none;
  }
}