/* ==========================================================================
   "Sand" text reveal - text settles into place as it scrolls into view
   (client request). Driven by assets/sand.js, shared by every page.
   ========================================================================== */
.sand-word{display:inline-block;white-space:nowrap}
.sand-w,.sand-c{display:inline-block}
/* inside a link a word stays inline so the underline is not broken up */
a .sand-w{display:inline}
.sand:not(.sand-in) .sand-w,.sand:not(.sand-in) .sand-c,.sand-block:not(.sand-in){opacity:0}
.sand-in .sand-w,.sand-in .sand-c{animation:sandSettle 1s cubic-bezier(.2,.75,.25,1) var(--sd,0ms) both}
.sand-in.sand-block{animation:sandBlock 1.05s cubic-bezier(.2,.75,.25,1) both}
@keyframes sandSettle{
  from{opacity:0;filter:blur(7px);transform:translate(var(--sx,0),var(--sy,10px)) rotate(var(--sr,0))}
  55%{opacity:1}
  to{opacity:1;filter:blur(0);transform:none}
}
@keyframes sandBlock{
  from{opacity:0;filter:blur(9px);transform:translateY(16px);letter-spacing:.04em}
  to{opacity:1;filter:blur(0);transform:none;letter-spacing:normal}
}
@media (prefers-reduced-motion:reduce){
  .sand .sand-w,.sand .sand-c,.sand-block{opacity:1 !important;animation:none !important;filter:none !important;transform:none !important}
}
