background

script/cube.ts

@@ -218,8 +218,8 @@ export function animateMoveWith(ds: RotateXY[], rs: RotateZ[]): void {
   const cube  = document.getElementById('cube')!;
 
   cube.dataset.moving = 'true';
-  cube.style.transition  = '0.4s cubic-bezier(.4, -0.29, .43, 1.26)';
+  cube.style.transition  = '0.6s cubic-bezier(.4, -0.29, .43, 1.26)';
-  outer.style.transition = `0.4s 0.25s cubic-bezier(.48, 0, .44, 1.07)`;
+  outer.style.transition = `0.4s 0.5s cubic-bezier(.48, 0, .44, 1.07)`;
 
   function transitionListener(elem: HTMLElement): () => void {
     function handler(e: Event) { if (e.target == elem) { finish(); } }

style/base.css

@@ -21,8 +21,17 @@ actually exists
     min-height: 100lvh;
     margin: 0;
     scrollbar-gutter: stable;
+
+    cursor:
+      image-set("../media/tail.png" 1x, "../media/tail.2x.png" 2x) 34 1,
+      auto;
+    --pointer:
+      image-set("../media/hand.png" 1x, "../media/hand.2x.png" 2x) 31 1,
+      auto;
   }
 
+  a { cursor: var(--pointer); }
+
   :root {
     font-size: large;
 
@@ -50,12 +59,14 @@ actually exists
     }
 
     --shadow-hsl: 330deg 40% 40%;
-    --base-background: var(--gradient) fixed;
+    --base-background: url(../media/church.png), var(--gradient) fixed;
     background: var(--base-background);
 
     font-family: Muller, sans-serif;
     font-weight: 500;
+
     @media (prefers-reduced-data: reduce) {
+      --base-background: var(--gradient) fixed;
       font-family: sans-serif;
       font-weight: normal;
     }
@@ -90,7 +101,7 @@ actually exists
       }
     }
 
-    input, label { cursor: pointer; }
+    input, label { cursor: var(--pointer); }
 
     input {
       appearance: none;
@@ -536,7 +547,7 @@ actually exists
 }
 
 @layer faces.six {
-  #six, #six ::selection {
+  #six {
     --hue: 250deg;
     --bg-angle: 130deg;
 

style/cube.css

@@ -114,7 +114,7 @@
   #cube {
     position: relative;
 
-    > section {
+    > section, &::after {
       position: absolute;
       inset: 5vh 5vw;
       overflow: auto;
@@ -128,6 +128,14 @@
     }
   }
 
+  #outer::after {
+    content: ' ';
+    position: absolute;
+    inset: 0;
+    background: url(../media/blackhole.png) center / 60% no-repeat;
+    transform: translateZ(var(--nhalf));
+  }
+
   @keyframes breathe {
     40% { transform: var(--base-transform) translateZ(var(--breathe)); }
   }

style/flat.css

@@ -118,3 +118,5 @@
     }
   }
 }
+
+} /* (the media query) */

style/properties.css

@@ -1,3 +1,9 @@
+@property --base-background {
+  syntax: "*";
+  inherits: false;
+  initial-value: transparent;
+}
+
 /* face backgrounds */
 
 @property --hue {