/**
 * Scroll reveal – bidirectional (down = open, up = collapse).
 * Stable: no edge flicker while resting on an item.
 */

html {
  scroll-behavior: auto;
}

.arsam-reveal {
  opacity: 0 !important;
  transform: translate3d(0, 40px, 0) !important;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

html[data-arsam-scroll-dir="up"] .arsam-reveal:not(.is-visible) {
  transform: translate3d(0, -28px, 0) !important;
}

.arsam-reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

.arsam-reveal--left {
  transform: translate3d(36px, 0, 0) !important;
}

.arsam-reveal--right {
  transform: translate3d(-36px, 0, 0) !important;
}

html[data-arsam-scroll-dir="up"] .arsam-reveal--left:not(.is-visible) {
  transform: translate3d(-28px, 0, 0) !important;
}

html[data-arsam-scroll-dir="up"] .arsam-reveal--right:not(.is-visible) {
  transform: translate3d(28px, 0, 0) !important;
}

.arsam-reveal--left.is-visible,
.arsam-reveal--right.is-visible {
  transform: translate3d(0, 0, 0) !important;
}

.arsam-reveal--scale {
  transform: translate3d(0, 28px, 0) scale(0.97) !important;
}

html[data-arsam-scroll-dir="up"] .arsam-reveal--scale:not(.is-visible) {
  transform: translate3d(0, -20px, 0) scale(0.97) !important;
}

.arsam-reveal--scale.is-visible {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.arsam-reveal-child {
  opacity: 0 !important;
  transform: translate3d(0, 22px, 0) !important;
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: calc(var(--arsam-reveal-i, 0) * 60ms) !important;
}

html[data-arsam-scroll-dir="up"] .arsam-reveal:not(.is-visible) .arsam-reveal-child {
  transform: translate3d(0, -14px, 0) !important;
  transition-delay: calc(var(--arsam-reveal-i, 0) * 35ms) !important;
}

.arsam-reveal.is-visible .arsam-reveal-child {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}
