.js-ready [data-motion="reveal"] {
  opacity: 0;
  transform: translateY(14px);
}

.js-ready [data-motion="reveal"][data-motion-state="visible"] {
  opacity: 1;
  transform: translateY(0);
}


.card,
.palette-link,
.brand-controls select,
.rail-nav a,
.daily-cta,
.hero-cta {
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-3px);
  }

  .rail-nav a:hover,
  .palette-link:hover,
  .daily-cta:hover,
  .hero-cta:hover {
    opacity: 0.62;
  }
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-ready [data-motion="reveal"] {
    opacity: 1;
    transform: none;
  }
}