add bg anims

src/main.css

@@ -5,5 +5,6 @@
   font-style: normal;
 }
 body {
+  background-color: black;
   margin: 0;
 }

src/views/Home.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import Header from '../components/Header.vue';
 
 const curTab = ref('/')
 const isFading = ref(false)
 const isSliding = ref(false)
+const isInstantReset = ref(false)
 
 function handleCalendarClick() {
   isFading.value = true
@@ -17,62 +18,102 @@ function handleCalendarClick() {
     }, 600)
   }, 500)
 }
+
+onMounted(() => {
+  window.addEventListener('pageshow', (e) => {
+    if (e.persisted) {
+      isInstantReset.value = true
+      isFading.value = false
+      isSliding.value = false
+      nextTick(() => {
+        isInstantReset.value = false
+      })
+    }
+  })
+})
 </script>
 
 <template>
-  <div class="grid">
+  <div class="page" :class="{ 'no-transition': isInstantReset }">
-    <div class="overlay" :class="{ 'fading': isFading, 'sliding': isSliding }"></div>
+
-    <div id="vert-line" :class="{ 'fade-out': isFading }"></div>
+    <div class="bg" :class="{ 'fading': isFading }"></div>
-    <div id="hor-line" :class="{ 'fade-out': isFading }"></div>
+
-    <Header
+    <div class="grid" :class="{ 'fading': isFading }">
-      :currentTab="curTab"
+      <div id="vert-line" :class="{ 'fade-out': isFading }"></div>
-      :isFading="isFading"
+      <div id="hor-line" :class="{ 'fade-out': isFading }"></div>
-      :isSliding="isSliding"
+      <Header
-      @calendar-click="handleCalendarClick"
+        :currentTab="curTab"
-    />
+        :isFading="isFading"
-    <span class="wip" :class="{ 'fade-out': isFading }">WIP. Coming  Soon.</span>
+        :isSliding="isSliding"
-    <span class="under" :class="{ 'fade-out': isFading }">under construction</span>
+        @calendar-click="handleCalendarClick"
-    <h1 class="title" :class="{ 'fade-out': isFading }">hi, i&rsquo;m denis.</h1>
+      />
-    <div class="sub" :class="{ 'fade-out': isFading }">
+      <span class="wip" :class="{ 'fade-out': isFading }">WIP. Coming  Soon.</span>
-      <p id="sub1">making some useful/useless</p>
+      <span class="under" :class="{ 'fade-out': isFading }">under construction</span>
-      <p id="sub2">and imho.beautiful stuff.</p>
+      <h1 class="title" :class="{ 'fade-out': isFading }">hi, i&rsquo;m denis.</h1>
+      <div class="sub" :class="{ 'fade-out': isFading }">
+        <p id="sub1">making some useful/useless</p>
+        <p id="sub2">and imho.beautiful stuff.</p>
+      </div>
     </div>
+
   </div>
 </template>
 
 <style scoped>
-.grid {
+/* ===================== root ===================== */
-  display: grid;
+.page {
-  grid-template-columns: repeat(12, 1fr);
+  position: relative;
-  grid-template-rows: repeat(12, 1fr);
   width: 100vw;
   height: 100vh;
-  background: radial-gradient(483.14% 514.26% at 50% 268.58%, #3D9C55 0%, #000000 42.58%);
+  background: #000;
-  color: #ffffff;
-  font-family: monospace;
-  padding: 0%;
   overflow: hidden;
 }
 
-.overlay {
+/* при back/bfcache — мгновенно показываем всё без анимаций */
-  position: fixed;
+.page.no-transition,
+.page.no-transition * {
+  transition: none !important;
+  animation: none !important;
+}
+
+/* ===================== gradient bg ===================== */
+@keyframes bg-enter {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes bg-breathe {
+  0%, 100% { opacity: 1;    }
+  50%       { opacity: 0.72; }
+}
+
+.bg {
+  position: absolute;
   inset: 0;
-  background: #000;
-  opacity: 0;
   pointer-events: none;
-  z-index: 10;
+  background: radial-gradient(483.14% 514.26% at 50% 268.58%, #3D9C55 0%, #000000 42.58%);
-  transition: opacity 0.5s ease;
+  animation: bg-enter 1s ease-out, bg-breathe 5s ease-in-out 3s infinite;
 }
 
-.overlay.fading {
+.bg.fading {
-  opacity: 0.75;
+  animation: none;
+  opacity: 0;
+  transition: opacity 0.85s ease-in;
 }
 
-.overlay.sliding {
+/* ===================== content grid ===================== */
-  opacity: 1;
+.grid {
-  transition: opacity 0.35s ease;
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(12, 1fr);
+  color: #ffffff;
+  font-family: monospace;
 }
 
+
+/* ===================== layout ===================== */
 header {
   grid-column: 1/13;
   grid-row: 1;
@@ -104,19 +145,16 @@ span {
 }
 
 @media (max-width: 1510px) {
-  .under {
+  .under { grid-column: 10 / 13; }
-    grid-column: 10 / 13;
-  }
 }
 
 .title {
   grid-column: 2 / 7;
   grid-row: 6;
   align-self: end;
-  font-weight: bold;
+  font-weight: 666;
   font-size: 3.2rem;
   margin: 0;
-  font-weight: 666;
   transition: opacity 0.45s ease;
 }
 
@@ -128,13 +166,8 @@ span {
   transition: opacity 0.45s ease;
 }
 
-#sub1 {
+#sub1 { align-self: start; }
-  align-self: start;
+#sub2 { align-self: end; }
-}
-
-#sub2 {
-  align-self: end;
-}
 
 #vert-line {
   grid-column: 2;