move styles and scripts into directories

style/cube.css

@@ -0,0 +1,97 @@
+@media (prefers-reduced-motion: no-preference) and
+       (min-height: 650px) and (min-width: 650px) {
+
+/* LAYOUT BASICS */
+
+body {
+  display: grid;
+  grid-template-rows: 5em 1fr;
+
+  perspective: 440vw;
+  perspective-origin: 50% 120%;
+}
+
+/* MENU ANIMATION */
+
+.menu label { position: relative; }
+.menu label::after {
+  content: ' ';
+  z-index: -1;
+  position: absolute;
+  inset: 0 0 100% 0;
+  background: hsl(var(--menu-bg-hsl));
+  transition: inset .15s linear;
+}
+.menu :checked + label::after {
+  bottom: 0;
+}
+
+
+/* CUBE ASSEMBLY */
+/* the rest is in cube.ts */
+
+html {
+  --side: min(65vh, 70vw);
+  --half: calc(var(--side) * .5);
+  --nhalf: calc(0em - var(--half));
+  --breathe: calc(var(--side) * .1);
+}
+
+/* cube shadow */
+html {
+  background:
+    radial-gradient(circle, hsl(var(--shadow-hsl) / 70%), transparent 58%),
+    var(--gradient);
+  background-blend-mode: multiply;
+}
+
+#outer {
+  --transform-origin: 50% 50% calc(var(--nhalf) - min(6vh, 6vw));
+}
+
+#outer, #cube {
+  transform-style: preserve-3d;
+  transform-origin: var(--transform-origin);
+  width:  calc(var(--side) + 10vw);
+  height: calc(var(--side) + 10vh);
+  margin: auto;
+}
+
+#cube {
+  position: relative;
+}
+
+#cube > section {
+  position: absolute;
+  inset: 5vh 5vw;
+  overflow: auto;
+  transform-origin: var(--transform-origin);
+  transform: var(--base-transform);
+  overscroll-behavior: contain;
+}
+
+@supports (scrollbar-color: pink orange) { /* safari detector */
+  #cube:not([data-moving]) > section {
+    animation: breathe 9s infinite ease-in-out;
+  }
+}
+
+@keyframes breathe {
+  35% { transform: translateZ(var(--breathe)) var(--base-transform); }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .zoom * { transition: all 0.25s ease-in; }
+  .zoom > :hover {
+    scale: 110%;
+    filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%));
+  }
+  .zoom > :hover:nth-child(5n) { rotate: 4deg; }
+  .zoom > :hover:nth-child(5n+1) { rotate: -2deg; }
+  .zoom > :hover:nth-child(5n+2) { rotate: 1deg; }
+  .zoom > :hover:nth-child(5n+3) { rotate: -3deg; }
+  .zoom > :hover:nth-child(10n+4) { rotate: 4deg; }
+  .zoom > :hover:nth-child(10n+9) { rotate: -1deg; }
+}
+
+}