:root {
  --motion-ease: cubic-bezier(.22, .68, 0, 1);
  --motion-duration: 760ms;
}

.motion-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  backface-visibility: hidden;
}

.motion-reveal.motion-from-left {
  transform: translate3d(-24px, 0, 0);
}

.motion-reveal.motion-from-right {
  transform: translate3d(24px, 0, 0);
}

.motion-reveal.motion-scale {
  transform: translate3d(0, 18px, 0) scale(.975);
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-image {
  overflow: hidden;
}

.motion-image img {
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1), filter 600ms ease;
}

.motion-image:hover img {
  transform: scale(1.025);
  filter: saturate(1.03) contrast(1.02);
}

.motion-card {
  transition:
    transform 420ms var(--motion-ease),
    box-shadow 420ms ease,
    border-color 320ms ease,
    background-color 320ms ease;
  transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
  .motion-card:hover {
    transform: translate3d(0, -6px, 0) scale(1.008);
    box-shadow: 0 22px 54px rgba(23, 17, 11, .15);
  }
}

.motion-button,
button,
.btn-gold,
.btn-primary {
  transition:
    transform 260ms var(--motion-ease),
    box-shadow 260ms ease,
    color 260ms ease,
    background-color 260ms ease,
    border-color 260ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .motion-button:hover,
  button:hover,
  .btn-gold:hover,
  .btn-primary:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 10px 24px rgba(21, 15, 9, .15);
  }
}

.motion-button:active,
button:active,
.btn-gold:active,
.btn-primary:active {
  transform: translate3d(0, 0, 0) scale(.975);
  transition-duration: 100ms !important;
}

.motion-button:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid #b08d57;
  outline-offset: 4px;
}

.motion-hero-load {
  animation: motionHeroIn 900ms var(--motion-ease) both;
  animation-delay: var(--motion-delay, 0ms);
}

@keyframes motionHeroIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 768px) {
  :root { --motion-duration: 600ms; }
  .motion-reveal { transform: translate3d(0, 14px, 0); }
  .motion-reveal.motion-from-left { transform: translate3d(-12px, 0, 0); }
  .motion-reveal.motion-from-right { transform: translate3d(12px, 0, 0); }
  .motion-reveal.motion-scale { transform: translate3d(0, 10px, 0) scale(.99); }
  .motion-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-reveal.is-visible,
  .motion-hero-load,
  .motion-image img,
  .motion-card,
  .motion-button,
  button,
  .btn-gold,
  .btn-primary {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
    opacity: 1 !important;
  }
}