:root {
  --aimar-morph-ms: 420ms;
  --aimar-morph-ease: cubic-bezier(.16, 1, .3, 1);
}

body.aimar-morph-ready main section {
  overscroll-behavior: contain;
}

body.aimar-morph-ready main section > div:first-child {
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

body.aimar-morph-ready main section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(119,247,255,.13), transparent 36%),
    linear-gradient(110deg, transparent 0 43%, rgba(119,247,255,.11) 50%, transparent 57%);
  mix-blend-mode: screen;
  transition: opacity var(--aimar-morph-ms) var(--aimar-morph-ease);
}

body.aimar-morph-forward main section::before,
body.aimar-morph-back main section::before {
  opacity: .72;
}

body.aimar-morph-forward main section > div:first-child {
  animation: aimarMorphForward var(--aimar-morph-ms) var(--aimar-morph-ease) both;
}

body.aimar-morph-back main section > div:first-child {
  animation: aimarMorphBack var(--aimar-morph-ms) var(--aimar-morph-ease) both;
}

body.aimar-morph-settle main section > div:first-child {
  animation: aimarMorphSettle 340ms var(--aimar-morph-ease) both;
}

@keyframes aimarMorphForward {
  0% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  44% { opacity: .54; transform: translate3d(-24px,0,0) scale(.984); }
  56% { opacity: .42; transform: translate3d(22px,0,0) scale(.982); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes aimarMorphBack {
  0% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  44% { opacity: .54; transform: translate3d(24px,0,0) scale(.984); }
  56% { opacity: .42; transform: translate3d(-22px,0,0) scale(.982); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes aimarMorphSettle {
  0% { opacity: .74; transform: translate3d(0,7px,0) scale(.992); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

body.aimar-morph-ready footer::before {
  content: 'scroll / swipe to route modules';
  margin-right: auto;
  margin-left: 1rem;
  color: rgba(148,163,184,.42);
  font: 10px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  body.aimar-morph-ready main section {
    overscroll-behavior: none;
  }

  body.aimar-morph-ready main section::before {
    opacity: 0 !important;
    display: none;
  }

  body.aimar-morph-ready footer::before { display: none; }

  body.aimar-morph-forward main section > div:first-child,
  body.aimar-morph-back main section > div:first-child,
  body.aimar-morph-settle main section > div:first-child {
    animation-duration: 300ms !important;
  }

  @keyframes aimarMorphForward {
    0% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
    50% { opacity: .72; transform: translate3d(0,-10px,0) scale(.994); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  }
  @keyframes aimarMorphBack {
    0% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
    50% { opacity: .72; transform: translate3d(0,10px,0) scale(.994); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  }
  @keyframes aimarMorphSettle {
    0% { opacity: .82; transform: translate3d(0,5px,0) scale(.996); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.aimar-morph-forward main section > div:first-child,
  body.aimar-morph-back main section > div:first-child,
  body.aimar-morph-settle main section > div:first-child {
    animation: none !important;
  }
}