<template>
  <div class="app-shell">
    <router-view v-slot="{ Component }">
      <transition name="slide" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<style lang="scss">
.app-shell {
  max-width: 430px;
  height: 100dvh;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter-from { opacity: 0; transform: translateX(30px); }
.slide-leave-to { opacity: 0; transform: translateX(-30px); }
</style>
