.slide { opacity: 0; pointer-events: none; }
.slide.is-active { opacity: 1; pointer-events: auto; }
.slide video { width: 100%; height: 100%; object-fit: cover; }
.fade-up { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.fade-up.in { opacity: 1; transform: none; }
.mesh {
  background:
    radial-gradient(800px 380px at 8% -8%, rgba(59,130,246,.14), transparent 55%),
    radial-gradient(640px 320px at 96% 0%, rgba(191,219,254,.45), transparent 48%),
    #f7f9fc;
}
.sidebar {
  transform: translateX(100%);
  transition: transform .32s ease;
}
.sidebar.open { transform: translateX(0); }
.scrim {
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
.scrim.open {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .sidebar, .scrim { transition: none; }
}