<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <Transition name="view-transition" mode="out-in">
        <component :is="Component" />
      </Transition>
    </router-view>
    <!-- Developer Tools Panel (development + authenticated production) -->
    <DeveloperTools />
  </div>
</template>

<script setup>
import DeveloperTools from './components/DeveloperTools.vue';

// App now acts as the router container with transitions
</script>

<style>
/* Global styles and transitions */
html,
body {
  margin: 0;
  padding: 0;
}

/* Transition animations for view changes */
.view-transition-enter-active {
  animation: slideIn 0.5s ease-out;
}

.view-transition-leave-active {
  animation: dropOut 0.4s ease-in;
}

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

@keyframes dropOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
}
</style>
