:root {
  --xs: 8px;
  --s: 16px;
  --m: 32px;
  --height-footer: calc(2 * var(--m));
}

*, *::before, *::after { box-sizing: border-box; }

html { height: calc(100svh - var(--offset, 0px)); transition: height 0.1s ease; overscroll-behavior: contain; }
body { background: #b8616f; margin: 0; height: 100%; overflow: hidden; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: contain; }


body { display: grid; padding: var(--xs); perspective: 500px; }
body > * { grid-area: 1 / 1; }

main { background: cornflowerblue; border-radius: var(--m); }
aside { background: #b8616f; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; row-gap: 1em; font-size: 2em; padding: var(--m); }
aside a { color: white; font-weight: bold; }

main { height: 100%; overflow-y: auto; }
aside { height: 100%; }

body.show-menu main { transform: scale(0.9) translateX(40ch) rotateY(-3deg); transform: scale(calc((100vw - 40ch) / 100vw)) translateX(40ch) rotateY(-3deg); }
body.show-menu main > * { pointer-events: none; }

button { padding: 0; margin: 0; border: none; background-color: transparent; cursor: pointer; }
button svg { display: block; }

button.add { width: var(--height-footer); height: var(--height-footer); display: flex; justify-content: center; align-items: center; }
button.menu { position: fixed; top: var(--m); left: var(--m); background-color: rgba(255,255,255,0.7); width: 3em; height: 3em; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 9999; }

footer { position: fixed; bottom: var(--s); right: var(--s); width: max-content; max-width: calc(100% - 2 * var(--s)); height: var(--height-footer); z-index: 9999; }
footer { display: flex; justify-content: center; align-items: center; }
footer { color: white; }
footer { background-color: #ccc; border-radius: var(--m); }
footer { transition-delay: 0.6s; transition: 0.1s ease height, 0.1s ease padding-bottom; }

footer .plus { display: block; }
footer .close { display: none; }
footer .input-controls { display: none; }
footer.expanded { background-color: darksalmon; width: 300px; }
footer.expanded .add { display: none; }
footer.expanded .close { display: block; }
footer.expanded .input-controls { display: block; }
.input-controls input { font-size: inherit; font-family: inherit; height: calc(2 * var(--s)); padding: var(--xs); border: none; border-radius: var(--xs); }

/* view transition */
main { view-transition-name: main; }
button.menu { view-transition-name: menu-button; }

body:not(.animating-menu) footer { view-transition-name: footer; }
body:not(.animating-menu) button.close { view-transition-name: close-button; }
body:not(.animating-menu) button.add { view-transition-name: add-button; }

::view-transition-group(footer) {
  animation-duration: .5s;
}
::view-transition-old(footer),
::view-transition-new(footer) {
  animation: none;
  mix-blend-mode: normal;
  border-radius: var(--m);
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}

::view-transition-group(main) {
  animation-duration: .7s;
}
::view-transition-old(main),
::view-transition-new(main) {
  mix-blend-mode: normal;
  object-fit: cover;
}

::view-transition-old(add-button) { animation: none; opacity: 0; }
::view-transition-new(add-button) { animation: none; opacity: 1; }