/* Locally calm motion (see calm.js). Paper grain from Componentry "grain-gradient", done as a static SVG noise. */
.calm-w { display: inline-block; will-change: transform, filter, opacity; }
.calm-rise { opacity: 0; transform: translateY(12px); transition: opacity .7s cubic-bezier(0.23, 1, 0.32, 1), transform .9s cubic-bezier(0.23, 1, 0.32, 1); }
.calm-rise.calm-in { opacity: 1; transform: none; }
/* Safety net: if the script never runs, nothing stays hidden. */
html:not(.calm-on) .calm-rise { opacity: 1; transform: none; }

/* Odometer digits */
.calm-col { display: inline-grid; overflow: hidden; vertical-align: bottom; height: 1.15em; line-height: 1.15em; }
.calm-col > span { grid-area: 1 / 1; }
.calm-out.up { animation: calm-out-up .5s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.calm-new.up { animation: calm-in-up .5s cubic-bezier(0.23, 1, 0.32, 1) both; }
.calm-out.down { animation: calm-out-down .5s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.calm-new.down { animation: calm-in-down .5s cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes calm-out-up { to { transform: translateY(-100%); opacity: 0; filter: blur(2px); } }
@keyframes calm-in-up { from { transform: translateY(100%); opacity: 0; filter: blur(2px); } }
@keyframes calm-out-down { to { transform: translateY(100%); opacity: 0; filter: blur(2px); } }
@keyframes calm-in-down { from { transform: translateY(-100%); opacity: 0; filter: blur(2px); } }

/* Paper grain: fixed, very faint, never intercepts clicks. */
.calm-grain { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* Calm interaction polish: slower, softer hovers on links and buttons. */
.calm-on a, .calm-on button { transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: .25s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

@media (prefers-reduced-motion: reduce) {
  .calm-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .calm-w { opacity: 1 !important; transform: none !important; filter: none !important; }
}