/* Shared motion for every page: scroll progress bar, reveal on scroll, a soft glow that follows the pointer, a page-enter
   animation and cross-page transitions. It is all switched off for people who ask for less motion. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mo-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: mo-in .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes mo-out { to { opacity: 0; transform: translateY(-8px) scale(.995); filter: blur(3px); } }
@keyframes mo-in { from { opacity: 0; transform: translateY(18px) scale(.995); filter: blur(4px); } }

html.smooth-js { scroll-behavior: auto !important; }

.mo-bar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #7c6cff, #4da3ff, #22d3ee); box-shadow: 0 0 12px rgba(77, 163, 255, .7); }

/* Reveal on scroll. Hidden only once the script is running, so the page is never blank without it. */
html.mo [data-rv] { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(5px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1), filter .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--rv, 0) * 70ms); will-change: opacity, transform; }
html.mo [data-rv].in { opacity: 1; transform: none; filter: none; will-change: auto; }

/* Page enter: the headline, the lead and the buttons arrive one after another. */
html.mo .mo-hero > * { animation: mo-rise .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
@keyframes mo-rise { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } }

/* A glow that follows the pointer across cards. */
@media (hover: hover) and (pointer: fine) {
  .mo-glow { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 108, 255, .13), transparent 62%); background-repeat: no-repeat; }
  .mo-tilt { transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, border-color .2s ease; }
  .mo-tilt:hover { transform: translateY(-3px); }
}

/* Slow drifting colour behind public pages. */
.mo-aurora { position: fixed; inset: -20vmax; z-index: -1; pointer-events: none; opacity: .55; filter: blur(60px);
  background: radial-gradient(40vmax 30vmax at 20% 20%, rgba(124, 108, 255, .35), transparent 70%), radial-gradient(35vmax 28vmax at 80% 30%, rgba(34, 211, 238, .22), transparent 70%), radial-gradient(40vmax 30vmax at 50% 90%, rgba(77, 163, 255, .25), transparent 70%);
  animation: mo-drift 28s ease-in-out infinite alternate; }
:root[data-theme="light"] .mo-aurora { opacity: .3; }
@keyframes mo-drift { to { transform: translate3d(4vmax, -3vmax, 0) rotate(8deg) scale(1.08); } }

/* Buttons press in, and a ripple spreads from where you clicked. */
.mo-ripple-host { position: relative; overflow: hidden; }
.mo-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .35); transform: scale(0); animation: mo-ripple .6s ease-out forwards; }
@keyframes mo-ripple { to { transform: scale(1); opacity: 0; } }
.btn:active, button.go:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .mo-bar, .mo-aurora { display: none; }
  html.mo [data-rv] { opacity: 1; transform: none; filter: none; transition: none; }
  html.mo .mo-hero > * { animation: none; }
  .mo-ripple { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}