/* Educational Koncepts motion system: opt-in, JS-enhanced, and safe if scripts fail. */
.card-hover {
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}

.card-hover:hover,
.card-hover:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .14);
}

.cream .card-hover:hover,
.cream .card-hover:focus-within {
  box-shadow: 0 20px 50px rgba(24, 20, 18, .09);
}

.motion-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 700ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.motion-ready .reveal-up {
  transform: translateY(18px);
}

.motion-ready .metric-reveal {
  transform: translateY(14px);
}

.motion-ready .reveal-fade {
  transform: none;
}

.motion-ready .reveal-scale {
  transform: scale(.96);
}

.motion-ready .reveal-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.motion-ready .reveal-delay-1 {
  transition-delay: 90ms;
}

.motion-ready .reveal-delay-2 {
  transition-delay: 180ms;
}

.motion-ready .reveal-delay-3 {
  transition-delay: 270ms;
}

.motion-ready .reveal-stagger .reveal:nth-child(2) {
  transition-delay: 90ms;
}

.motion-ready .reveal-stagger .reveal:nth-child(3) {
  transition-delay: 180ms;
}

.motion-ready .reveal-stagger .reveal:nth-child(4) {
  transition-delay: 270ms;
}

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

  .card-hover,
  .motion-ready .reveal {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }
}