<template>
  <transition
    :name="transitionName"
    mode="out-in"
  >
    <div :key="routeKey" class="route-wrapper">
      <slot></slot>
    </div>
  </transition>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  routeKey: { type: String, required: true }
});

const transitionName = ref('route-fade');
</script>

<style scoped>
.route-wrapper {
  width: 100%;
  height: 100%;
}

/* Fast, lightweight fade transition — keeps navigation feeling instant */
.route-fade-enter-active {
  transition: opacity 0.12s ease-out;
}

.route-fade-leave-active {
  transition: opacity 0.08s ease-in;
}

.route-fade-enter-from {
  opacity: 0;
}

.route-fade-leave-to {
  opacity: 0;
}
</style>
