:root {
  --reveal-distance: 18px;
  --reveal-duration: 0.8s;
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sk-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  filter: blur(2px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);
}

.sk-reveal[data-direction='left'] {
  transform: translateX(calc(var(--reveal-distance) * -1));
}

.sk-reveal[data-direction='right'] {
  transform: translateX(var(--reveal-distance));
}

.sk-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0);
}

[data-fade-out] {
  opacity: var(--fade-out-opacity, 1);
  transition: opacity 0.2s ease-out;
}

.reduced-motion .sk-reveal,
.reduced-motion [data-fade-out] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

@media (max-width: 640px) {
  .sk-reveal {
    filter: none;
    transform: translateY(10px);
  }
}