/*
 * Front page motion layer: entrance and scroll reveal for the homepage only.
 *
 * Loaded after style.css and only when the front page is rendered. The class
 * `csl-motion` on <html> is added by a small head script in functions.php, and
 * only when the visitor has not asked for reduced motion and the browser
 * supports IntersectionObserver - so the markup rests in its fully visible
 * state and nothing here is needed in order to read the page. home-motion.js
 * removes the data attributes again once an element has animated, handing it
 * back to the ordinary stylesheet, so card hover transitions keep their own
 * timing.
 */

.csl-motion {
  --csl-motion-duration: 760ms;
  --csl-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --csl-motion-shift: 18px;
}

/* Elements waiting for their entrance. They are hidden only while the marker
   class is present; without it the page is a plain, fully visible page. */
.csl-motion [data-csl-reveal],
.csl-motion [data-csl-stagger] > * {
  opacity: 0;
  transform: translate3d(0, var(--csl-motion-shift), 0);
}

/* Media keeps its opacity on purpose: the hero photograph is the largest
   paint on the page, and fading it in would hold that paint back. A slight
   scale is enough of a cue, and the image is visible from the first frame. */
.csl-motion [data-csl-media] {
  transform: scale(1.03);
}

.csl-motion [data-csl-reveal],
.csl-motion [data-csl-stagger] > *,
.csl-motion [data-csl-media] {
  transition:
    opacity var(--csl-motion-duration) var(--csl-motion-ease),
    transform var(--csl-motion-duration) var(--csl-motion-ease);
  transition-delay: var(--csl-delay, 0ms);
  will-change: opacity, transform;
}

.csl-motion [data-csl-reveal].is-in,
.csl-motion [data-csl-stagger].is-in > *,
.csl-motion [data-csl-media].is-in {
  opacity: 1;
  transform: none;
}

/* Small screens: a shorter travel over a shorter duration. */
@media (max-width: 768px) {
  .csl-motion {
    --csl-motion-duration: 620ms;
    --csl-motion-shift: 12px;
  }
}

/* Printing never scrolls, so the page has to print complete. */
@media print {
  .csl-motion [data-csl-reveal],
  .csl-motion [data-csl-stagger] > *,
  .csl-motion [data-csl-media] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* A visitor who turns motion off after the page has loaded still gets the
   static page. */
@media (prefers-reduced-motion: reduce) {
  .csl-motion [data-csl-reveal],
  .csl-motion [data-csl-stagger] > *,
  .csl-motion [data-csl-media] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}