yummy.cricket/style/cube.css

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

@layer outer {
  :root {
    --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) {
      --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);
    }

    background-blend-mode: overlay;

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

    background:
      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);

    @media ((prefers-reduced-data: reduce),
            (prefers-reduced-transparency: reduce)) {
      background: var(--base-background);
      background-blend-mode: initial;
    }
  }

  body {
    display: grid;
    grid-template-rows: 5em 1fr;

    perspective: 440vw;
    perspective-origin: 50% 120%;
  }

  menu {
    label {
      position: relative;
      &::after {
        content: ' ';
        z-index: -1;
        position: absolute;
        inset: 0 0 100% 0;
        background: hsl(var(--menu-bg-hsl));

        @media not (prefers-reduced-motion: reduce) {
          transition: inset .15s linear;
        }
      }
    }

    :checked + label::after {
      bottom: 0;
    }
  }
}

@layer cube {
  :root {
    --side: min(65vh, 70vw);
    --half: calc(var(--side) * .5);
    --nhalf: calc(0em - var(--half));
    --breathe: calc(var(--side) * 0.02);
  }

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

    > section {
      position: absolute;
      inset: 5vh 5vw;
      overflow: auto;
      transform-origin: var(--transform-origin);
      transform: var(--base-transform);
      overscroll-behavior: contain;
    }

    &:not([data-moving]) > section:not([data-state=active]) {
      animation: breathe 7.5s infinite ease-in-out;
    }
  }

  @keyframes breathe {
    40% { transform: var(--base-transform) translateZ(var(--breathe)); }
  }

  @media not (prefers-reduced-motion: reduce) {
    .zoom * { transition: all 0.25s ease-in; }
    .zoom > :hover {
      scale: 110%;
      filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%));
      &:nth-child(5n)    { rotate: 4deg; }
      &:nth-child(5n+1)  { rotate: -2deg; }
      &:nth-child(5n+2)  { rotate: 1deg; }
      &:nth-child(5n+3)  { rotate: -3deg; }
      &:nth-child(10n+4) { rotate: 4deg; }
      &:nth-child(10n+9) { rotate: -1deg; }
    }
  }
}