na

app/assets/stylesheets/application.css

@@ -95,6 +95,50 @@
   font: 10px/1.3 var(--ff-ikea);
 }
 
+.turbo-progress-bar {
+  height: 3px;
+  background-color: #0058a3;
+}
+
+header {
+  view-transition-name: none;
+}
+
+main {
+  view-transition-name: main;
+}
+
+footer {
+  view-transition-name: none;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;          /* takes them out of the overlay tree */
+}
+
+::view-transition-old(main) {
+  z-index: 1;
+}
+
+::view-transition-new(main) {
+  z-index: 2;
+}
+
+@keyframes slide-in  { from { transform: translateY(100dvh); } to { transform: translateY(0); } }
+@keyframes slide-out { from { transform: translateY(0); }       to { transform: translateY(-100dvh); } }
+
+/* Forward nav (normal clicks) */
+html[data-turbo-visit-direction="forward"] {
+  &::view-transition-new(main) { animation: slide-in  .4s ease-out both; }
+  &::view-transition-old(main) { animation: slide-out .4s ease-in  both; }
+}
+
+/* Back button reverses the sense */
+html[data-turbo-visit-direction="back"] {
+  &::view-transition-new(main),
+  &::view-transition-old(main) { animation: slide-in .4s ease-out both reverse; }
+}
 
 body {
   background-color: var(--clr-dark-yellow);
@@ -122,7 +166,8 @@ ul[class] {
 header {
   padding: 1.2rem;
   flex-grow: 0;  
-
+  z-index: 11;
+  position: absolute;
   & svg {
     width: 203px;
     height: auto;
@@ -152,7 +197,7 @@ footer {
   font-family: var(--ff-ikea);
   writing-mode: vertical-rl;  
   text-orientation: mixed;
-  z-index: -1
+  z-index: 10
 }
 
 
@@ -233,18 +278,21 @@ main {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  justify-content: end;
+  justify-content: end;  
+
+  
+
 }
 
+
 .background-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
   pointer-events: none;
-
+  z-index: -1;
   & img {
     display: block;
     width: 100%;
@@ -253,6 +301,7 @@ main {
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
     
+    
     &.loaded {
       opacity: 1;
     }

app/views/layouts/application.html.erb

@@ -11,6 +11,7 @@
     
     <meta name="turbo-prefetch" content="false">
     <meta name="turbo-cache-control" content="no-cache">
+    <meta name="view-transition" content="same-origin">
     
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>