<script setup lang="ts">
import MyHead from "@/components/MyHead.vue";
import MyFooter from "@/components/MyFooter.vue";
import { useRoute } from "vue-router";

const route = useRoute();
</script>

<template>
  <div class="app-shell">
    <div class="bg-orb bg-orb-left"></div>
    <div class="bg-orb bg-orb-right"></div>
    <el-container class="shell-container">
      <el-header class="shell-header">
        <MyHead />
      </el-header>
      <el-main class="shell-main">
        <Transition name="fade-up" mode="out-in">
          <RouterView :key="route.fullPath" />
        </Transition>
      </el-main>
      <el-footer class="shell-footer">
        <MyFooter />
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.app-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.shell-container {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.shell-header {
  height: auto;
  padding: 18px 20px 0;
}

.shell-main {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px 24px;
}

.shell-footer {
  height: auto;
  padding: 0 20px 18px;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  z-index: 0;
  pointer-events: none;
}

.bg-orb-left {
  width: 300px;
  height: 300px;
  top: -120px;
  left: -90px;
  background: radial-gradient(circle at center, rgba(47, 143, 104, 0.35), transparent 70%);
}

.bg-orb-right {
  width: 360px;
  height: 360px;
  right: -130px;
  bottom: -170px;
  background: radial-gradient(circle at center, rgba(67, 168, 121, 0.3), transparent 70%);
}

@media (max-width: 768px) {
  .shell-header {
    padding: 12px 12px 0;
  }

  .shell-main {
    padding: 12px 12px 18px;
  }

  .shell-footer {
    padding: 0 12px 12px;
  }
}
</style>
