/* SCROLL REVEAL (see assets/scripts/reveal.js for the data attributes) */

:root {
  --reveal-distance: 32px;
  --reveal-duration: 750ms;
  --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 640px) {
  :root {
    --reveal-distance: 24px;
  }
}

/* Translate never creates a horizontal scrollbar: clip (not hidden) keeps sticky/anchors working */
.site-main,
.site-footer {
  overflow-x: clip;
}

/* Travel direction (the element starts offset and moves to its place) */
[data-reveal],
[data-reveal-stagger] {
  --reveal-x: 0px;
  --reveal-y: var(--reveal-distance);
}

[data-reveal='down'],
[data-reveal-stagger='down'] {
  --reveal-y: calc(var(--reveal-distance) * -1);
}

[data-reveal='left'],
[data-reveal-stagger='left'] {
  --reveal-x: calc(var(--reveal-distance) * -1);
  --reveal-y: 0px;
}

[data-reveal='right'],
[data-reveal-stagger='right'] {
  --reveal-x: var(--reveal-distance);
  --reveal-y: 0px;
}

[data-reveal='fade'],
[data-reveal-stagger='fade'] {
  --reveal-y: 0px;
}

/* Hidden state: only with JS (class set in <head>) and only until the script reveals it */
html.js:not(.reveal-failed) [data-reveal]:not(.is-revealed),
html.js:not(.reveal-failed) [data-reveal-stagger]:not(.is-revealed) > * {
  opacity: 0;
  translate: var(--reveal-x) var(--reveal-y);
  will-change: opacity, translate;
}

html.js:not(.reveal-failed) [data-reveal],
html.js:not(.reveal-failed) [data-reveal-stagger] > * {
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0ms),
    translate var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0ms);
}

html.js .reveal-instant,
html.js .reveal-instant > * {
  transition: none !important;
}

/* Printing or saving a PDF before scrolling must not leave blank gaps */
@media print {
  html.js [data-reveal],
  html.js [data-reveal-stagger] > * {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal-stagger] > * {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}