/* Calm motion for every page. Only opacity, blur, translate and scale, so nothing shifts the layout.
   Hero: plays on load (the hv-js class is set before first paint, so there is no flash).
   Below the fold: StaticPage adds .hvr to elements and .in when they scroll into view. */

@keyframes hv-rise { from { opacity: 0; translate: 0 18px; filter: blur(8px) } to { opacity: 1; translate: 0 0; filter: blur(0) } }
@keyframes hv-settle { from { scale: 1.06 } to { scale: 1 } }

.hv-js :is(.hv-page, .hv-page > div) > section:first-of-type :is(h1, h1 ~ *, :has(+ h1)) { animation: hv-rise 1s cubic-bezier(.2, .7, .2, 1) both }
.hv-js :is(.hv-page, .hv-page > div) > section:first-of-type :has(+ h1) { animation-delay: .05s }
.hv-js :is(.hv-page, .hv-page > div) > section:first-of-type h1 { animation-delay: .15s }
.hv-js :is(.hv-page, .hv-page > div) > section:first-of-type h1 ~ * { animation-delay: .35s }
.hv-js :is(.hv-page, .hv-page > div) > section:first-of-type h1 ~ * ~ * { animation-delay: .5s }
.hv-js :is(.hv-page, .hv-page > div) > section:first-of-type h1 ~ * ~ * ~ * { animation-delay: .65s }
.hv-js :is(.hv-page, .hv-page > div) > section:first-of-type > :is(img, video)[aria-hidden="true"] { animation: hv-settle 2.8s cubic-bezier(.2, .7, .2, 1) both }

.hvr { opacity: 0; translate: 0 22px; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1), filter 1s cubic-bezier(.2, .7, .2, 1), scale .9s cubic-bezier(.2, .7, .2, 1) }
.hvr-blur { filter: blur(10px) }
.hvr-pol { scale: .95 }
.hvr.in { opacity: 1; translate: 0 0; filter: none; scale: 1 }

@media (prefers-reduced-motion: reduce) {
  .hv-js :is(.hv-page, .hv-page > div) > section:first-of-type *, .hv-js :is(.hv-page, .hv-page > div) > section:first-of-type > * { animation: none !important }
  .hvr { opacity: 1 !important; translate: none !important; filter: none !important; scale: none !important; transition: none !important }
}