/* =====================================================================
   Pug IT Solution — motion: scroll reveal
   ---------------------------------------------------------------------
   Content is only ever hidden while the site scripts are known to be
   running: js/shared/site.js sets the "js" class on <html> in its first
   statement, before anything that could fail to parse, and takes it away
   again when a component it starts did not load. Blocked, broken or
   switched-off JavaScript therefore leaves the page fully visible rather
   than blank.
   ===================================================================== */
.reveal {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}
/* The hint is released again once the element has arrived, so a long page
   does not keep dozens of elements on their own compositing layer. */
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}