@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; }
}

}