/* Site-wide motion, driven by /assets/motion.js. Everything here only applies for people who haven't asked for
   reduced motion, and every element ends at its own normal look. Rising uses `translate`, and the tilt keeps each
   element's own transform underneath (--mo-base), so neither fights a page's existing styles. */

.mo-glare{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(152,16,250,.13),rgba(152,16,250,0) 55%)}
.mo-drift{display:none}

@media (prefers-reduced-motion:no-preference){
  .js-motion [data-reveal]{opacity:0;translate:0 18px;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
  .js-motion [data-reveal].in{opacity:1;translate:none}

  .js-motion [data-tilt].tilting{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px) var(--mo-base,translateZ(0));transition:transform .1s ease-out}
  .js-motion [data-tilt].mo-settle{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
  .mo-glare{transition:opacity .3s}
  .tilting>.mo-glare{opacity:1}

  .mo-drift-host{position:relative;isolation:isolate}
  .mo-drift{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:180% 180%;
    background-image:radial-gradient(circle at 30% 40%,rgba(246,51,154,.28),rgba(246,51,154,0) 35%),radial-gradient(circle at 70% 60%,rgba(152,16,250,.3),rgba(152,16,250,0) 38%);
    animation:mo-drift 18s ease-in-out infinite alternate}
}
@keyframes mo-drift{0%{background-position:0% 0%}50%{background-position:100% 30%}100%{background-position:40% 100%}}