the voiceover fix broke the cube

script/run.ts

@@ -263,16 +263,17 @@ export function fadeTo(newPane: Pane): void {
     const here = pane == newPane;
     const elem = document.getElementById(pane)!;
     if (here) {
-      elem.style.display = 'unset';
-      setTimeout(() => {
-        elem.dataset.selected = 'true';
-        history.replaceState(null, '🦎', `#${pane}`);
-      });
-    } else if (elem.dataset.selected == 'true') {
+      elem.dataset.state = 'entering';
+      setTimeout(() => elem.dataset.state = 'active');
+      // elem.addEventListener('transitionend',
+      //                       () => elem.dataset.state = 'active',
+      //                       {once: true});
+      history.replaceState(null, '🦎', `#${pane}`);
+    } else if (elem.dataset.state == 'active') {
       elem.addEventListener('transitionend',
-                            () => elem.style.display = 'none',
+                            () => elem.dataset.state = 'hidden',
                             {once: true});
-      elem.dataset.selected = 'false';
+      elem.dataset.state = 'leaving';
     }
   }
 }
@@ -307,8 +308,7 @@ function setup(): void {
       box.checked = true;
     } else {
       const elem = document.getElementById(pane)!;
-      elem.dataset.selected = 'false';
-      elem.style.display = 'none';
+      elem.dataset.state = 'hidden';
     }
   }
 }

style/flat.css

@@ -98,17 +98,25 @@ body {
   transition: background 0.1s ease-in;
 }
 
-#cube > section[data-selected=true] {
+#cube > :is(section[data-state=entering], #a) {
+  z-index: 1;
+  opacity: 0;
+}
+
+#cube > :is(section[data-state=active], #a) {
   z-index: 1;
   opacity: 1;
   transition: opacity 0.1s ease-in;
 }
 
-#cube > section[data-selected=false] {
+#cube > :is(section[data-state=leaving], #a) {
   z-index: -1;
   opacity: 0;
   transition: opacity 0s 0.1s ease-in;
 }
-/* todo make sure this works ok with screen readers */
+
+#cube > :is(section[data-state=hidden], #a) {
+  display: none;
+}
 
 }