/* Visible by default. JavaScript re-arms reveals after elements leave the viewport. */
[data-reveal]{
  --reveal-distance:14px;
  --reveal-duration:680ms;
}
[data-reveal="card"]{
  --reveal-distance:24px;
  --reveal-duration:760ms;
}
[data-reveal].reveal-pending{
  opacity:0;
  translate:0 var(--reveal-distance);
}
[data-reveal].is-revealed{
  animation:portfolio-reveal var(--reveal-duration) cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms) backwards;
}
@keyframes portfolio-reveal{
  from{opacity:0;translate:0 var(--reveal-distance)}
  to{opacity:1;translate:0 0}
}
@media(max-width:760px){
  [data-reveal]{--reveal-distance:10px;--reveal-duration:560ms}
  [data-reveal="card"]{--reveal-distance:18px;--reveal-duration:640ms;--reveal-delay:0ms!important}
}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{animation:none!important;opacity:1!important;translate:none!important}
}
@media print{
  [data-reveal]{animation:none!important;opacity:1!important;translate:none!important}
}