yummy.cricket/style/cube.css

@media (prefers-reduced-motion: no-preference) and
       (min-height: 650px) and (min-width: 650px) {

/* BACKGROUND STUFF */

html {
  --bg-60309: url(../media/bg/60309.png);
  --bg-kesi: url(../media/bg/kesi.png);
  --bg-korai: url(../media/bg/korai.png);
  --bg-mirai: url(../media/bg/mirai.png);
  --bg-niss: url(../media/bg/niss.png);
  --bg-niss2: url(../media/bg/niss2.png);
  --bg-nisse: url(../media/bg/nisse.png);
  --bg-prickly: url(../media/bg/prickly.png);
  --bg-qt: url(../media/bg/qt.png);
  --bg-qt2: url(../media/bg/qt2.png);
}

@media (prefers-color-scheme: dark) {
  html {
    --bg-60309: url(../media/bg/60309_neon.png);
    --bg-kesi: url(../media/bg/kesi_neon.png);
    --bg-korai: url(../media/bg/korai_neon.png);
    --bg-mirai: url(../media/bg/mirai_neon.png);
    --bg-niss: url(../media/bg/niss_neon.png);
    --bg-niss2: url(../media/bg/niss2_neon.png);
    --bg-nisse: url(../media/bg/nisse_neon.png);
    --bg-prickly: url(../media/bg/prickly_neon.png);
    --bg-qt: url(../media/bg/qt_neon.png);
    --bg-qt2: url(../media/bg/qt2_neon.png);
  }
}

html {
  background:
  /*
    url(../media/bg/kesi_sprite_front.png) top 100px right no-repeat,
    url(../media/bg/kesi_sprite_mid.png) top 150px center repeat-x,
    url(../media/bg/kesi_sprite_back.png) top 200px left no-repeat,
  */
    var(--bg-60309) bottom 29% right calc(44% - var(--half))
      / auto 17% no-repeat,
    var(--bg-kesi) bottom 23% left calc(44% - var(--half))
      / auto 20% no-repeat,
    var(--bg-korai) bottom left 7% / auto 19% no-repeat,
    var(--bg-mirai) top calc(5em + 3%) right 6% / 20% auto no-repeat,
    var(--bg-niss) top 30% left calc(31% - var(--half))
      / auto 20% no-repeat,
    var(--bg-niss2) top 51% right calc(33% - var(--half))
      / auto 20% no-repeat,
    var(--bg-nisse) top 29% right calc(36% - var(--half))
      / auto 15% no-repeat,
    var(--bg-qt) bottom 41% left calc(24% - var(--half))
      / auto 18% no-repeat,
    var(--bg-qt2) top 10% left calc(46% - var(--half))
      / auto 16% no-repeat,
    var(--bg-prickly) bottom 9% right calc(28% - var(--half))
      / auto 15% no-repeat,
    var(--base-background);
  background-blend-mode: overlay;
}

@media (prefers-color-scheme: dark) {
  html {
    background-blend-mode: soft-light;
  }
}

@media (prefers-reduced-data: reduce) {
  html {
    background: var(--base-background);
    background-blend-mode: unset;
  }
}


/* 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);
}

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

}