.reveal-scroll {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(0.988);
  filter: blur(4px);
  transition:
    opacity 720ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

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

.reveal-scroll.reveal-tight {
  transform: translate3d(0, 18px, 0) scale(0.992);
}

.reveal-scroll.reveal-wide {
  transform: translate3d(0, 34px, 0) scale(0.985);
}

.tactile-panel {
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.tactile-drift {
  will-change: transform;
  backface-visibility: hidden;
}

@media (max-width: 720px) {
  .reveal-scroll {
    transform: translate3d(0, 16px, 0) scale(0.994);
    filter: blur(1.5px);
    transition:
      opacity 520ms cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1),
      filter 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .reveal-scroll.reveal-tight {
    transform: translate3d(0, 12px, 0) scale(0.996);
  }

  .reveal-scroll.reveal-wide {
    transform: translate3d(0, 20px, 0) scale(0.992);
  }

  .tactile-panel,
  .tactile-drift {
    will-change: auto;
    transform-style: flat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-scroll,
  .reveal-scroll.is-visible,
  .reveal-scroll.reveal-tight,
  .reveal-scroll.reveal-wide,
  .tactile-panel,
  .tactile-drift {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}