* {
  box-sizing: border-box;
}

body {
  background: khaki;
  padding: 1.5rem;
  scrollbar-gutter: stable;

  &:has(dialog[open]) {
    overflow: hidden;
  }
}

dialog {
  animation-duration: 2s;
  animation-fill-mode: both;
  overflow: hidden;
  max-width: 65ch;
  view-transition-name: dialog-slide;
  
  &::backdrop {
    background: hsl(0 0 0 / .5);
    backdrop-filter: blur(5px);
  }
}

dialog.is-closing {
  animation: panelClose 260ms ease-in forwards;
}

.article-banner {
  background: #fff;
  border: 10px groove darkkhaki;
  display: grid;
  padding: 3rem;
  place-items: center;
}

::view-transition-new(dialog-slide) {
  animation: slideIn 350ms ease-out;
}

::view-transition-old(dialog-slide) {
  animation: slideOut 300ms ease-in;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0%);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

@keyframes panelClose {
  from {
    opacity: 1;
    transform: translateX(0%);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}