:root {
  color-scheme: dark;
  --scene-x: 0px;
  --scene-y: 0px;
  --edge: #020604;
  background: var(--edge);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--edge);
}

body {
  min-height: 100dvh;
  touch-action: manipulation;
}

main {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--edge);
  outline: none;
  isolation: isolate;
}

.transition-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.018);
  transform-origin: center;
  transition: transform 900ms cubic-bezier(.2, .72, .18, 1);
}

body.is-returned main {
  cursor: pointer;
}

body.is-leaving .transition-field {
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.022);
}

@media (hover: none), (pointer: coarse) {
  .transition-field {
    transform: scale(1.012);
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .transition-field {
    transform: none;
    transition: none;
  }
}