:root {
  --ease-quart-out: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 0.4s;
  --duration-base: 1s;
  --duration-slow: 1.4s;
}

a,
button,
input,
textarea,
select,
img,
.card,
[class*="card"],
.os-price-card,
.os-material,
.os-shape,
.os-block,
.os-section,
.contact-band,
.order-tiles,
[class*="hero"],
[class*="fv"],
[class*="mv"],
[class*="tile"] {
  transition:
    transform var(--duration-base) var(--ease-quart-out),
    opacity var(--duration-base) var(--ease-quart-out),
    background-color var(--duration-base) var(--ease-quart-out),
    color var(--duration-base) var(--ease-quart-out),
    border-color var(--duration-base) var(--ease-quart-out),
    box-shadow var(--duration-base) var(--ease-quart-out);
}

a:hover,
button:hover {
  opacity: 0.8;
}

.contact-band:hover {
  transform: translateY(-8px);
}

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--duration-slow) var(--ease-quart-out),
    transform var(--duration-slow) var(--ease-quart-out);
  will-change: opacity, transform;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  a,
  button,
  input,
  textarea,
  select,
  img,
  .card,
  [class*="card"],
  .os-price-card,
  .os-material,
  .os-shape,
  .os-block,
  .os-section,
  .contact-band,
  .order-tiles,
  .fade-up {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}