Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Tap anywhere</h1>
<label for="speed">Slow down?</label>
<input type="checkbox" role="switch" title="Change speed!" id="speed" />
<input type="checkbox" role="switch" title="Roll out!" id="transform" />
<label for="transform">
  <span>Transform</span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</label>
<div class="scene-jumper">
  <div class="scene scene--optimus optimus">
    <div class="scene-turner">
      <div class="scene-roller">
        <!-- Trick here is to map out everything in 2D. -->
        <!-- Sections based off of Optimus' core. That's where the power comes from -->
        <!-- He has the hips and he can bend forward or backward based on this point -->
        <!-- Almost detach the legs as if they aren't there as it's easy to connect them when needed -->

        <!-- Torso is where the magic happens. This part spins around on the top of the core. -->
        <!-- Does it need to though? It doesn't in real life. Only because it's a toy and physics??? -->
        <!-- Maybe we could just have it fold down like the G1 Cartoon??? -->
        <div class="optimus__core">
          <div class="core core--upper">
            <div class="optimus__torso">
              <!-- Some other spot here for a number plate or something. Bumper?? -->
              <!-- Trick here is to put the torso at the top of the grill-->
              <!-- Can always move this later if needed -->
              <div class="optimus__top">
                <div class="optimus__head">
                  <div class="optimus__head-door"></div>
                  <div class="optimus__helmet">
                    <div class="optimus__head-base"></div>
                    <div class="optimus__head-reactor">
                      <div class="optimus__head-twist">
                        <div class="optimus__neck">
                          <div class="cuboid">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                          </div>
                        </div>
                        <div class="optimus__face">
                          <div class="cuboid">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                          </div>
                        </div>
                        <div class="optimus__mouth">
                          <div class="cuboid">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                          </div>
                        </div>
                        <div class="optimus__ear optimus__ear--left">
                          <div class="cuboid">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                          </div>
                        </div>
                        <div class="optimus__ear optimus__ear--right">
                          <div class="cuboid">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                          </div>
                        </div>
                        <div class="optimus__mohawk">
                          <div class="cuboid">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                          </div>
                        </div>
                        <div class="optimus__helmet-top">
                          <div class="cuboid">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                          </div>
                        </div>
                        <div class="optimus__helmet-back">
                          <div class="cuboid">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                          </div>
                        </div>
                        <!-- Each contains the top and bottom part -->
                        <div class="optimus__helmet-side optimus__helmet-side--left">
                          <div class="optimus__helmet-side-guard">
                            <div class="cuboid">
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                            </div>
                          </div>
                          <div class="optimus__helmet-mouth-guard">
                            <div class="cuboid">
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                            </div>
                          </div>
                        </div>
                        <div class="optimus__helmet-side optimus__helmet-side--right">
                          <div class="optimus__helmet-side-guard">
                            <div class="cuboid">
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                            </div>
                          </div>
                          <div class="optimus__helmet-mouth-guard">
                            <div class="cuboid">
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="optimus__spine">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="chest">
                  <div class="cuboid">
                    <div class="cuboid__side">
                      <div class="cab-light cab-light--left">
                        <div class="cuboid">
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                        </div>
                      </div>
                      <div class="cab-light cab-light--right">
                        <div class="cuboid">
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                        </div>
                      </div>
                    </div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="hood">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="cab">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="arms">
                  <div class="arm arm--right">
                    <div class="arm-bar">
                      <div class="arm-cube">
                        <div class="cuboid">
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                        </div>
                      </div>
                      <div class="shoulder-port">
                        <div class="shoulder-gesture">
                          <div class="exhaust">
                            <div class="cuboid">
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                            </div>
                          </div>
                          <div class="shoulder">
                            <div class="cuboid">
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side">
                                <img class="logo" src="/shared/images/bear-2022--white.svg" alt="" />
                              </div>
                              <div class="cuboid__side"></div>
                            </div>
                          </div>
                          <div class="bicep">
                            <div class="bicep__strut">
                              <div class="cuboid">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                              </div>
                            </div>
                            <div class="forearm">
                              <div class="forearm-cradle">
                                <div class="forearm-gesture">
                                  <div class="forearm-strut">
                                    <div class="cuboid">
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                    </div>
                                  </div>
                                  <div class="forearm-cap">
                                    <div class="cuboid">
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                    </div>
                                  </div>
                                  <div class="fist">
                                    <div class="cuboid">
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side cuboid__side--no-filter">
                                        <div class="hand">
                                          <div class="hand__fist">
                                            <div class="cuboid">
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                            </div>
                                          </div>
                                          <div class="hand__fingers">
                                            <div class="cuboid">
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                    </div>
                                  </div>
                                  <div class="forearm-shell">
                                    <div class="cuboid">
                                      <div class="cuboid__side">
                                        <img class="bracket" src="/shared/images/code-bracket.svg" alt="" />
                                      </div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                      <div class="cuboid__side"></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="arm arm--left">
                    <div class="arm-bar">
                      <div class="arm-cube">
                        <div class="cuboid">
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                          <div class="cuboid__side"></div>
                        </div>
                      </div>
                      <div class="shoulder-port">
                        <div class="shoulder-gesture">
                          <div class="exhaust">
                            <div class="cuboid">
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                            </div>
                          </div>
                          <div class="shoulder">
                            <div class="cuboid">
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side"></div>
                              <div class="cuboid__side">
                                <img class="logo" src="/shared/images/bear-2022--white.svg" alt="" />
                              </div>
                              <div class="cuboid__side"></div>
                            </div>
                          </div>
                          <div class="bicep">
                            <div class="bicep__strut">
                              <div class="cuboid">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                              </div>
                            </div>
                            <div class="forearm">
                              <div class="forearm-cradle">
                                <div class="forearm-gesture">
                                  <div class="forearm-flip">
                                    <div class="forearm-strut">
                                      <div class="cuboid">
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                      </div>
                                    </div>
                                    <div class="forearm-cap">
                                      <div class="cuboid">
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                      </div>
                                    </div>
                                    <div class="fist">
                                      <div class="cuboid">
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side cuboid__side--no-filter">
                                          <div class="hand">
                                            <div class="cuboid">
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                              <div class="cuboid__side"></div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                      </div>
                                    </div>
                                    <div class="forearm-shell">
                                      <div class="cuboid">
                                        <div class="cuboid__side">
                                          <img class="bracket" src="/shared/images/code-bracket.svg" alt="" />
                                        </div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                        <div class="cuboid__side"></div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="core core--lower">
            <!-- Hips are static. They actually hold the side of the grill which is interesting -->
            <!-- The magic of the legs and the side piece of Optimus' grill -->
            <div class="optimus__grill-hinge">
              <div class="optimus__grill">
                <div class="cuboid">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
              <div class="optimus__plate">
                <div class="cuboid">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
            </div>
            <div class="optimus__hips hips">
              <div class="optimus__axle">
                <div class="cuboid">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
              <div class="hip hip--left">
                <div class="hip__grill">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="hip__flexor">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="hip__flexor-low">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
              </div>
              <div class="hip hip--right">
                <div class="hip__grill">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="hip__flexor">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="hip__flexor-low">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="optimus__belt">
              <div class="cuboid">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side">
                  <div class="belt__segments">
                    <div class="belt__segment"></div>
                    <div class="belt__segment"></div>
                    <div class="belt__segment"></div>
                    <div class="belt__segment"></div>
                    <div class="belt__segment"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="optimus__leg leg optimus__leg--left">
              <div class="leg__top">
                <div class="cuboid">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
              <div class="leg__bottom">
                <div class="sock">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="wheel-arch">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="tank">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="boot">
                  <div class="foot">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
                <div class="holster-wheel holster-wheel--right holster-wheel--rear-one">
                  <div class="wheel">
                    <div style="--index: 0" class="wheel__side"></div>
                    <div style="--index: 1" class="wheel__side"></div>
                    <div style="--index: 2" class="wheel__side"></div>
                    <div style="--index: 3" class="wheel__side"></div>
                    <div style="--index: 4" class="wheel__side"></div>
                    <div style="--index: 5" class="wheel__side"></div>
                    <div style="--index: 6" class="wheel__side"></div>
                    <div style="--index: 7" class="wheel__side"></div>
                    <div style="--index: 8" class="wheel__side"></div>
                    <div style="--index: 9" class="wheel__side"></div>
                  </div>
                </div>
                <div class="holster-wheel holster-wheel--right holster-wheel--rear-two">
                  <div class="wheel">
                    <div style="--index: 0" class="wheel__side"></div>
                    <div style="--index: 1" class="wheel__side"></div>
                    <div style="--index: 2" class="wheel__side"></div>
                    <div style="--index: 3" class="wheel__side"></div>
                    <div style="--index: 4" class="wheel__side"></div>
                    <div style="--index: 5" class="wheel__side"></div>
                    <div style="--index: 6" class="wheel__side"></div>
                    <div style="--index: 7" class="wheel__side"></div>
                    <div style="--index: 8" class="wheel__side"></div>
                    <div style="--index: 9" class="wheel__side"></div>
                  </div>
                </div>
              </div>
              <div class="holster-wheel holster-wheel--right">
                <div class="wheel">
                  <div style="--index: 0" class="wheel__side"></div>
                  <div style="--index: 1" class="wheel__side"></div>
                  <div style="--index: 2" class="wheel__side"></div>
                  <div style="--index: 3" class="wheel__side"></div>
                  <div style="--index: 4" class="wheel__side"></div>
                  <div style="--index: 5" class="wheel__side"></div>
                  <div style="--index: 6" class="wheel__side"></div>
                  <div style="--index: 7" class="wheel__side"></div>
                  <div style="--index: 8" class="wheel__side"></div>
                  <div style="--index: 9" class="wheel__side"></div>
                </div>
              </div>
            </div>
            <div class="optimus__leg optimus__leg--right">
              <div class="leg__top">
                <div class="cuboid">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
              <div class="leg__bottom">
                <div class="sock">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="wheel-arch">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="tank">
                  <div class="cuboid">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="boot">
                  <div class="foot">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
                <div class="holster-wheel holster-wheel--left holster-wheel--rear-one">
                  <div class="wheel">
                    <div style="--index: 0" class="wheel__side"></div>
                    <div style="--index: 1" class="wheel__side"></div>
                    <div style="--index: 2" class="wheel__side"></div>
                    <div style="--index: 3" class="wheel__side"></div>
                    <div style="--index: 4" class="wheel__side"></div>
                    <div style="--index: 5" class="wheel__side"></div>
                    <div style="--index: 6" class="wheel__side"></div>
                    <div style="--index: 7" class="wheel__side"></div>
                    <div style="--index: 8" class="wheel__side"></div>
                    <div style="--index: 9" class="wheel__side"></div>
                  </div>
                </div>
                <div class="holster-wheel holster-wheel--left holster-wheel--rear-two">
                  <div class="wheel">
                    <div style="--index: 0" class="wheel__side"></div>
                    <div style="--index: 1" class="wheel__side"></div>
                    <div style="--index: 2" class="wheel__side"></div>
                    <div style="--index: 3" class="wheel__side"></div>
                    <div style="--index: 4" class="wheel__side"></div>
                    <div style="--index: 5" class="wheel__side"></div>
                    <div style="--index: 6" class="wheel__side"></div>
                    <div style="--index: 7" class="wheel__side"></div>
                    <div style="--index: 8" class="wheel__side"></div>
                    <div style="--index: 9" class="wheel__side"></div>
                  </div>
                </div>
              </div>
              <div class="holster-wheel holster-wheel--left holster-wheel--front">
                <div class="wheel">
                  <div style="--index: 0" class="wheel__side"></div>
                  <div style="--index: 1" class="wheel__side"></div>
                  <div style="--index: 2" class="wheel__side"></div>
                  <div style="--index: 3" class="wheel__side"></div>
                  <div style="--index: 4" class="wheel__side"></div>
                  <div style="--index: 5" class="wheel__side"></div>
                  <div style="--index: 6" class="wheel__side"></div>
                  <div style="--index: 7" class="wheel__side"></div>
                  <div style="--index: 8" class="wheel__side"></div>
                  <div style="--index: 9" class="wheel__side"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                #transform {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

h1 {
  position: fixed;
  top: 2rem;
  left: 2rem;
  opacity: 0.25;
  margin: 0;
}

[for=transform] {
  color: transparent;
  position: fixed;
  inset: 0;
  color: transparent;
  font-weight: bold;
  height: 100vh;
  width: 100vw;
  cursor: pointer;
  transform: translate3d(0, 0, 500vmin);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 2;
}

body > [for=transform] span {
  display: block;
}

:root:has([for=transform] span:nth-of-type(1):hover) {
  --truck-turn: -10deg;
  --head-turn: -20deg;
}
:root:has([for=transform] span:nth-of-type(2):hover) {
  --truck-turn: -5deg;
  --head-turn: -10deg;
}
:root:has([for=transform] span:nth-of-type(3):hover) {
  --truck-turn: 0deg;
  --head-turn: 0deg;
}
:root:has([for=transform] span:nth-of-type(4):hover) {
  --truck-turn: 5deg;
  --head-turn: 10deg;
}
:root:has([for=transform] span:nth-of-type(5):hover) {
  --truck-turn: 10deg;
  --head-turn: 20deg;
}

.optimus__head-reactor {
  height: 100%;
  width: 100%;
}
:root:has(#transform:checked) .optimus__head-reactor {
  transform: rotateY(var(--head-turn, 0deg));
  transition: transform 0.125s;
}

:root:not(:has(#transform:checked)) .scene-turner {
  transform: rotateZ(var(--truck-turn, 0deg));
  transition: transform 0.125s;
}

*,
*:after,
*:before {
  box-sizing: border-box;
  transform-style: preserve-3d;
  touch-action: none;
}

:root {
  --size: 4;
  --optimus-rotation-y: -24;
  --optimus-rotation-x: -32;
  /* Optimus Colors */
  
  /* Transition speed */
  --transition-speed: 0.2s;
  /* Colors */
  --blue-1: hsl(215, 100%, 45%);
  --blue-2: hsl(215, 100%, 40%);
  --blue-3: hsl(215, 100%, 35%);
  --blue-4: hsl(215, 100%, 30%);
  --blue-5: hsl(215, 100%, 25%);
  --grey-1: hsl(228, 3%, 65%);
  --grey-2: hsl(228, 3%, 60%);
  --grey-3: hsl(228, 3%, 55%);
  --grey-4: hsl(228, 3%, 50%);
  --grey-5: hsl(228, 3%, 45%);
  --red-1: hsl(0, 74%, 50%);
  --red-2: hsl(0, 74%, 45%);
  --red-3: hsl(0, 74%, 40%);
  --red-4: hsl(0, 74%, 35%);
  --red-5: hsl(0, 74%, 30%);
  --eye-blue: hsl(210 100% 70%);
  --orange: hsl(42, 99%, 45%);
  /* Sizing and random stuff */
  --size: 5;
  --cab-width: calc(var(--size) * 3.6vmin);
  --cab-multiplier: 3.6;
  --torso-depth: calc(var(--size) * 2.6);
  --core-height: calc((var(--size) * 1 / 3) * 1);
  --chest-depth: calc(var(--torso-depth) * 0.6);
  --fist-dimension: calc((var(--size) * var(--cab-multiplier) - var(--size)) / 2);
  --fist-width: calc(((var(--size) * var(--cab-multiplier) - var(--size)) / 2) * 1vmin);
  --grill-height: calc(((var(--size) / 3) * 3.5) * 1vmin);
  --cab-height: calc(var(--grill-height) * 1.4);
  --wheel-depth: calc(var(--size) * 0.4);
  --leg-height: calc(var(--size) * 6.4);
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: hsl(210 20% 88%);
}

[for=speed] {
  cursor: pointer;
  position: fixed;
  bottom: 2rem;
  right: 2.24rem;
  z-index: 10;
  font-family: sans-serif, system-ui;
  transform: translate3d(0, 0, 500vmin);
}

#speed {
  position: fixed;
  bottom: 2.2rem;
  right: 1rem;
  z-index: 10;
  transform: translate3d(0, 0, 500vmin);
}

:root:has(#speed:checked) {
  --transition-speed: 2s;
}

#speed:checked ~ .scene-jumper {
  --transition-speed: 2s;
}

.scene {
  position: relative;
}



.optimus * {
  position: absolute;
}

/* Remember: The core is based on 3.5 x 6 so percentages can base off that. */

.optimus__core {
  width: calc(var(--size) * 1vmin);
  aspect-ratio: 3 / 1;
  translate: -50% -50%;
}

.core {
  height: 100%;
  width: 100%;
}

.optimus__torso {
  width: 100%;
  height: 400%;
  bottom: 50%;
}

.optimus__grill {
  --color: var(--grey-1);
  width: 100%;
  bottom: 100%;
  height: var(--grill-height);
  --depth: calc(var(--torso-depth) * 1);
}
.optimus__grill .cuboid {
/*  transform: translate3d(0, 0, calc(var(--torso-depth) * 0.1vmin));*/
}
.optimus__grill .cuboid__side:nth-of-type(6),
.optimus__grill .cuboid__side:nth-of-type(5) {
  background: repeating-linear-gradient(var(--grey-1) 0 10%, var(--grey-5) 15% 15%);
}

.optimus__top {
  width: var(--cab-width);
  height: var(--cab-height);
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
}

@keyframes breathe {
  50% {
    transform: translateY(-2%);
  }
}

.reference-box {
  height: 100%;
  width: 100%;
  --depth: var(--torso-depth);
  --color: hsl(0 100% 50% / 0.25);
}

.reference-box .cuboid__side {
  border: 1px solid white;
}

.exhaust {
  height: 200%;
  bottom: 10%;
  width: calc(var(--fist-width) * 0.2);
  --depth: calc(var(--fist-dimension) * 0.2);
  --color: var(--grey-3);
}
.arm--right .exhaust {
  left: 100%;
}
.arm--left .exhaust {
  right: 100%;
}
.chest {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--torso-depth) * 0.1vmin));
  --depth: var(--chest-depth);
  --color: var(--red-1);
}

.chest > .cuboid > .cuboid__side:nth-of-type(1) {
  --h-stop-one: calc(50% - (var(--fist-width) * 0.5));
  --h-stop-two: calc(50% + (var(--fist-width) * 0.5));
  --v-stop-one: calc(var(--torso-depth) * 0.1vmin);
  --v-stop-two: calc(100% - (var(--torso-depth) * 0.1vmin));
  filter: none;
  background:
    linear-gradient(90deg, var(--red-1) 0 var(--h-stop-one), transparent var(--h-stop-one) var(--h-stop-two), var(--red-1) var(--h-stop-two)),
    linear-gradient(var(--red-1) 0 var(--v-stop-one), transparent var(--v-stop-one) var(--v-stop-two), var(--red-1) var(--v-stop-two));
}

.chest > .cuboid > .cuboid__side:nth-of-type(2),
.chest > .cuboid > .cuboid__side:nth-of-type(4) {
  background: linear-gradient(var(--red-1) 80%, var(--grey-1) 80%);
}

.chest > .cuboid > .cuboid__side:nth-of-type(2):after,
.chest > .cuboid > .cuboid__side:nth-of-type(4):after {
  content: "";
  height: 60%;
  left: 4%;
  top: 10%;
  position: absolute;
  background: var(--blue-5);
  border: calc(var(--torso-depth) * 0.05vmin) solid var(--grey-3);
}

.logo {
  width: 75%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  opacity: 0.8;
}

.hood {
  height: 20%;
  width: 100%;
  bottom: 0;
  --depth: calc(var(--torso-depth) * 0.1);
  --color: var(--grey-1);
  transform: translate3d(0, 0, calc(var(--torso-depth) * 0.45vmin));
}
.cab {
  height: 80%;
  width: 100%;
  top: 0;
  --depth: calc(var(--torso-depth) * 0.1);
  --color: var(--red-1);
  transform: translate3d(0, 0, calc(var(--torso-depth) * 0.45vmin));
}

.cab-light {
  height: 16%;
  width: 20%;
  bottom: 0%;
  transform: translate3d(0, 0, calc(var(--torso-depth) * 0.05vmin));
  --depth: calc(var(--torso-depth) * 0.1);
  --color: var(--red-1);
}

.cab-light .cuboid__side:nth-of-type(3) {
  background: radial-gradient(circle at 25% center, white 16%, transparent 16%),
    radial-gradient(circle at 75% center, white 16%, transparent 16%),
    var(--red-1);
}

.cab-light--left {
  left: 10%;
}
.cab-light--right {
  right: 10%;
}

.cab .cuboid .cuboid__side:nth-of-type(2),
.cab .cuboid__side:nth-of-type(4) {
  filter: none !important;
}
.cab .cuboid__side:nth-of-type(2):after,
.cab .cuboid__side:nth-of-type(4):after {
  content: "";
  position: absolute;
  height: 40%;
  left: 50%;
  width: 80%;
  top: 26%;
  background: var(--grey-2);
  transform-origin: 0 50%;
  transform: rotateY(-70deg);
}
.cab .cuboid__side:nth-of-type(4):after {
  transform: rotateY(70deg);
}

.cab .cuboid__side:nth-of-type(5):after,
.cab .cuboid__side:nth-of-type(5):before {
  position: absolute;
  content: "";
  width: 40%;
  height: 70%;
  top: 50%;
  translate: 0 -50%;
  background: var(--blue-5);
  border: calc(var(--cab-height) * 0.05) solid var(--grey-1);
}
.cab .cuboid__side:nth-of-type(5):after {
  left: 55%;
}
.cab .cuboid__side:nth-of-type(5):before {
  background: linear-gradient(-40deg, transparent 0 50%, hsl(0 0% 100% / 0.75) 50% 70%, transparent 70% 80%, hsl(0 0% 100% / 0.75) 80% 90%, transparent 90%), var(--blue-5);
  right: 55%;
}



.cab .cuboid__side:nth-of-type(6) {
  display: none;
}

.optimus__spine {
  height: 100%;
  width: calc(100% - (2 * var(--fist-width)));
  left: 50%;
  translate: -50% 0;
  transform: translate3d(0, 0, calc(var(--torso-depth) * -0.35vmin));
  --depth: calc(var(--torso-depth) * 0.3);
  --color: var(--red-2);
}
.optimus__head {
  width: var(--fist-width);
  height: var(--cab-height);
  left: 50%;
  translate: -50% 0;
  top: 0;
}

.optimus__helmet {
  height: 100%;
  width: 100%;
}

.optimus__neck {
  bottom: 0;
  left: 50%;
  height: 12%;
  width: 50%;
  translate: -50% 0;
  --depth: calc(var(--head-depth) * 0.5);
  --color: var(--grey-4);
}

.optimus__face {
  bottom: 12%;
  width: 60%;
  height: 46%;
  left: 50%;
  translate: -50% 0;
  --depth: calc(var(--head-depth) * 0.5);
  --color: var(--grey-5);
}

.optimus__face .cuboid__side:nth-of-type(5):after {
  content: "";
  height: 14%;
  left: 50%;
  translate: -50% -50%;
  background: linear-gradient(90deg, var(--eye-blue) 0 40%, transparent 20% 60%, var(--eye-blue) 60%);
  top: 20%;
  position: absolute;
  width: 80%;
} 

.optimus__mouth {
  top: 58%;
  width: 60%;
  height: 32%;
  left: 50%;
  translate: -50% 0;
  transform: translate3d(0, 0, calc(var(--head-depth) * 0.3vmin));
  --depth: calc(var(--head-depth) * 0.2);
  --color: var(--grey-2);
}

.optimus__mouth .cuboid__side:nth-of-type(5) {
  background: linear-gradient(-90deg, var(--grey-2) 50%, var(--grey-4) 50.5%);
}

.optimus__ear {
  height: 80%;
  top: 1%;
  width: 10%;
  --depth: calc(var(--head-depth) * 0.2);
  --color: var(--blue-4);
}

.optimus__ear--left {
  left: 0%;
}

.optimus__ear--right {
  right: 0%;
}

.optimus__mohawk {
  width: 25%;
  height: 25%;
  left: 50%;
  translate: -50% 0;
  bottom: 58%;

  --depth: calc(var(--head-depth) * 1);
  --color: var(--blue-2);
}

.optimus__helmet-side-guard {
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, calc(var(--head-depth) * -0.15vmin));
  --depth: calc(var(--head-depth) * 0.6);
  --color: var(--blue-3); 
}
.optimus__helmet-mouth-guard {
  width: 100%;
  bottom: 0;
  height: 50%;
  --depth: calc(var(--head-depth) * 1);
  --color: var(--blue-4); 
}

.optimus__helmet-back {
  width: 70%;
  bottom: 12%;
  height: 58%;
  left: 50%;
  translate: -50% 0;
  transform: translate3d(0, 0, calc(var(--head-depth) * -0.36vmin));
  --depth: calc(var(--head-depth) * 0.2);
  --color: var(--blue-3); 
}

.optimus__helmet-top {
  height: 12%;
  width: 70%;
  left: 50%;
  translate: -50% 0;
  bottom: 58%;
  --depth: calc(var(--head-depth) * 0.8);
  --color: var(--blue-1);
}

.optimus__helmet-side {
  bottom: 12%;
  width: 10%;
  height: 50%;
}
.optimus__helmet-side--left {
  left: 10%;
}
.optimus__helmet-side--right {
  right: 10%;
}

.optimus__head {
  --head-depth: calc(var(--torso-depth) * 0.4);
}
.optimus__head .reference-box {
  --depth: calc(var(--torso-depth) * 0.4);
}

/* Arms are interesting, gotta be rotate off of a spindle etc. */

.arms {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--torso-depth) * 0.1vmin));
}
.arm {
  height: 20%;
  width: var(--fist-width);
  top: calc(var(--fist-width) * 0.5);
}

.arm-bar {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
}

.arm-cube {
  height: 100%;
  width: 100%;
  --depth: calc(var(--torso-depth) * 0.1);
  --color: var(--grey-4);
}

.arm--right .arm-bar {
  left: 0;
}

.arm--left .arm-bar {
  right: 0;
}

.shoulder-port {
  width: var(--fist-width);
  aspect-ratio: 1;
  top: 50%;
/*  translate: calc(var(--torso-depth) * -0.1vmin) -50%;*/
  transform-origin: 0 50%;
}

.shoulder-gesture {
  height: 100%;
  width: 100%;
}

.arm--right .shoulder-port {
  left: 100%;
}

.arm--left .shoulder-port {
  right: 100%;
}

.shoulder {
  height: 100%;
  width: 100%;
  --depth: var(--fist-dimension);
  --color: var(--red-1);
}

.bicep {
  width: 100%;
  height: calc(var(--cab-height) + var(--grill-height));
  top: 0%;
  left: 50%;
  translate: -50% 0;
}

.bicep__strut {
  --depth: calc(var(--fist-dimension) * 0.4);
  --color: var(--grey-2);
  width: 40%;
  height: calc(100% - (var(--fist-width) * 0.6));
  left: 50%;
  top: calc(var(--fist-width) * 0.2);
  translate: -50% 0;
}

.arm--right .forearm {
  right: 0;
}

.arm--left .forearm {
  left: 0;
}

.forearm {
  height: calc(var(--grill-height) * 1);
  bottom: 0;
  width: calc((var(--torso-depth) * 0.7vmin) + var(--fist-width));
}

:is(.forearm-cradle, .forearm-gesture) {
  height: 100%;
  width: 100%;
}

.forearm-cap {
  width: 18%;
  height: 100%;
  left: 62%;
  --depth: calc(var(--fist-dimension) * 0.75);
  --color: var(--red-5);
}

.forearm-shell {
  width: 90%;
  height: 100%;
  right: 0;
  z-index: 2;
  --color: var(--red-1);
  --depth: var(--fist-dimension);
}

.forearm-shell .cuboid__side:nth-of-type(4) {
  display: none;
}

.forearm-shell .cuboid__side:nth-of-type(3) {
  mask: linear-gradient(90deg, white 10%, transparent 10% 58%, white 58%);
}

.forearm-shell .cuboid__side:nth-of-type(6),
.forearm-shell .cuboid__side:nth-of-type(5) {
  clip-path: polygon(0 0, 0% 100%, 12% 100%, 16% 55%, 54% 55%, 58% 100%, 100% 100%, 100% 0);
}
.forearm-shell .cuboid__side:nth-of-type(6) {
  --b: 0.7;
  clip-path: polygon(100% 0, 100% 100%, 88% 100%, 84% 55%, 46% 55%, 42% 100%, 0% 100%, 0 0);

}

.forearm-strut {
  width: 70%;
  height: calc(var(--fist-width) * 0.32);
  right: calc(var(--fist-width) * 0.5);
  top: 50%;
  translate: 0 -50%;
  --depth: calc(var(--fist-dimension) * 0.32);
  --color: var(--grey-3);
}

.fist {
  height: 100%;
  left: 10%;
  width: 10%;
  top: 0%;
  transform-origin: 0 50%;
  --depth: var(--fist-dimension);
  --color: var(--red-2);
}

.fist > .cuboid > .cuboid__side:nth-of-type(3) {
  --b: 1.1;
  background: var(--red-1);
}

.fist > .cuboid > .cuboid__side:nth-of-type(2):after {
  content: "";
  position: absolute;
  height: 30%;
  width: 60%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border: calc(var(--cab-height) * 0.05) solid var(--grey-1);
}

.hand {
  top: 50%;
  left: 50%;
  width: 50%;
  aspect-ratio: 1;
  translate: -50% -50%;
  rotate: -20deg;
  transform: translate3d(0, 0, calc(var(--fist-dimension) * -0.25vmin));
  --depth: calc(var(--fist-dimension) * 0.5);
  --color: var(--blue-5);
}
.arm--left .hand {
  rotate: 20deg;
}

/* Lower half things */

.core--lower {
  width: var(--cab-width);
  height: 100%;
  translate: -50% 0;
  left: 50%;
}


/*2.5x8*/
.optimus__hips {
  width: 100%;
  height: 100%;
}

.hip {
  position: absolute;
  width: var(--fist-width);
  aspect-ratio: 1;
  bottom: 50%;
}

.optimus__axle {
  height: 100%;
  width: calc(100% - (var(--size) * 0.4vmin));
  background: yellow;
  left: 50%;
  translate: -50% 0;
  --depth: var(--core-height);
  --color: var(--grey-4);
}

.hip__grill {
  height: calc(var(--core-height) * 1vmin);
  width: 100%;
  transform: translate3d(0, 0, calc(var(--core-height) * 0.5vmin));
  top: 0;
  --depth: calc(var(--core-height) * 2);
  --color: var(--grey-4);
}

.hip__grill .cuboid__side:nth-of-type(1):after {
  content: "";
  height: 25%;
  width: 25%;
  background: var(--orange);
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.hip--left .hip__grill .cuboid__side:nth-of-type(1):after {
  left: 10%;
}
.hip--right .hip__grill .cuboid__side:nth-of-type(1):after {
  right: 10%;
}

.hip__flexor {
  top: calc(var(--core-height) * 1vmin);
  height: calc(var(--core-height) * 0.9vmin);
  transform: translate3d(0, 0, calc(var(--core-height) * 0.5vmin));
  width: 100%;
  --depth: calc(var(--core-height) * 2);
  --color: var(--red-4);
}

.hip__flexor .cuboid__side:nth-of-type(2),
.hip__flexor .cuboid__side:nth-of-type(4) {
  background: var(--grey-4);
}

.hip__flexor-low {
  top: calc(var(--core-height) * 1vmin);
  width: 60%;
  bottom: 0;
  --depth: var(--core-height);
  --color: var(--red-4);
}
.hip--right .hip__flexor-low {
  left: 0;
}
.hip--left .hip__flexor-low {
  right: 0;
}

/*.hip--right .hip__flexor .cuboid__side:nth-of-type(2) {
  background: linear-gradient(var(--red-4) 0 30%, transparent 30%);
}
.hip--right .hip__flexor .cuboid__side:nth-of-type(5) {
  clip-path: polygon(0 0, 100% 0%, 100% 20%, 60% 100%, 0% 100%);
}*/

.hip--right {
  right: 0;
}

.hip--left {
  left: 0;
}


.holster-wheel {
  width: calc(var(--size) * 1.25vmin);
  aspect-ratio: 1;
  top: calc(var(--core-height) * 0.5vmin);
  transform: translateY(0%) rotateY(90deg);
  --depth: var(--wheel-depth);
}


.holster-wheel--rear-one {
  top: 40%;
}
.holster-wheel--rear-two {
  top: 75%;
}

.wheel {
  transform: translate3d(0, 0, calc(var(--depth) * 0.5vmin));
  height: 100%;
  width: 100%;
}
.leg__bottom .holster-wheel--left .wheel {
  transform: translate3d(0, 0, calc(var(--depth) * 1vmin));
}
.leg__bottom .holster-wheel--right .wheel {
  transform: translate3d(0, 0, calc(var(--depth) * -0vmin));
}
.wheel__side {
  height: 100%;
  width: 100%;
  background: black;
  border-radius: 50%;
  transform: translate3d(0, 0, calc((var(--depth) * -0.1vmin) * var(--index)));
}

.wheel:before,
.wheel:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: 
    radial-gradient(circle at center, var(--grey-1) 30%, transparent 30.5%),
    radial-gradient(circle at center, silver 40%, black 40.5%) black;
}

.wheel:before {
  transform: translate3d(0, 0, calc(var(--depth) * -1vmin));
}

.holster-wheel--right {
  left: 0;
  translate: -50% -50%;
}

.holster-wheel--left {
  right: 0;
  translate: 50% -50%;
}

.optimus__leg {
  transform-origin: 50% 0;
  height: calc(var(--leg-height) * 1vmin);
  width: 50%;
}
.optimus__leg--left {
  left: 0;
}
.optimus__leg--right {
  right: 0;
}
/* Upper half things */
.optimus__grill-hinge {
  width: calc(var(--size) * 1vmin);
  height: 100%;
  translate: -50% 0;
  transform-origin: 50% 50%;
  left: 50%;
}

.optimus__plate {
  width: 100%;
  height: 200%;
  transform: translate3d(0, 0, calc((var(--torso-depth) * 0.45vmin) - (var(--core-height) * 0.5vmin))) rotateX(0deg);
  --depth: calc(var(--core-height) * 2);
  --color: var(--grey-1);
}

.optimus__plate .cuboid__side:nth-of-type(5):after {
  content: "JH3YY";
  font-family: monospace;
  font-weight: bold;
  padding: calc(var(--core-height) * 0.2vmin);
  background: var(--blue-5);
  font-size: calc(var(--size) * 0.25vmin);
  color: var(--orange);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;

}



.tank {
  height: 24%;
  width: calc(var(--wheel-depth) * 1vmin);
  top: 0;
  translate: 0 -25%;
  --depth: calc(var(--wheel-depth) * 1);
  --color: var(--grey-4);
}

.tank .cuboid__side:nth-of-type(2),
.tank .cuboid__side:nth-of-type(4) {
  background: repeating-linear-gradient(90deg, var(--grey-3) 0 15%, var(--grey-5) 15% 20%);
}
.optimus__leg--left .tank {
  right: 100%;
}
.optimus__leg--right .tank {
  left: 100%;
}

.boot {
  width: 100%;
  height: 16%;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  --depth: calc(var(--size) * 1);
  --color: var(--blue-5);
}
.foot {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--size) * -0.5vmin));
}

.optimus__belt {
  width: calc(100% - (var(--wheel-depth) * 1.5vmin));
  height: 260%;
  left: 50%;
  translate: -50% 0;
  transform: translate3d(0, 0, calc(var(--size) * -0.5vmin));
  --depth: calc(var(--size) * 1);
  --color: var(--grey-4);
}

.belt__segments {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template: 1fr 1fr / 1fr 2fr 1fr;
  gap: calc(var(--core-height) * 0.25vmin);
  padding: calc(var(--core-height) * 0.5vmin);
}

.belt__segment {
  position: static;
  background: var(--orange);
  width: 100%;
  height: 100%;
  max-width: 100%;
}
.belt__segment:nth-of-type(2) {
  grid-row: span 2;
}
.belt__segment:nth-of-type(4) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 40%);
}
.belt__segment:nth-of-type(5) {
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}

/*.optimus__leg--right .foot {
  translate: calc(-50% - (var(--wheel-depth) * -0.25vmin)) 0;
}
.optimus__leg--left .foot {
  translate: calc(-50% - (var(--wheel-depth) * 0.25vmin)) 0;
}*/


.wheel-arch {
  height: 75%;
  width: 100%;
  top: 20%;
  transform: translate3d(0, 0, calc(var(--size) * -0.65vmin));
  --color: var(--blue-5);
  --depth: calc(var(--size) * 0.5);
}

.wheel-arch .cuboid__side:nth-of-type(5) {
  display: none;
}

.optimus__leg--right .wheel-arch .cuboid__side:nth-of-type(2),
.optimus__leg--left .wheel-arch .cuboid__side:nth-of-type(4) {
  background:
    linear-gradient(270deg, var(--blue-5) 45%, transparent 20%),
    linear-gradient(var(--blue-5) 5%, transparent 5% 95%, var(--blue-5) 95%);
}

.optimus__leg--right .wheel-arch .cuboid__side:nth-of-type(6):after,
.optimus__leg--left .wheel-arch .cuboid__side:nth-of-type(6):after {
  content: "";
  width: 40%;
  height: 70%;
  background:
    repeating-linear-gradient(var(--grey-4) 0 2%, var(--grey-1) 2% 10%),
    var(--grey-1);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -60%;
}

.optimus__leg--left .wheel-arch {
  translate: calc(var(--wheel-depth) * -0.5vmin) 0;
  left: 0;
}
.optimus__leg--right .wheel-arch {
  translate: calc(var(--wheel-depth) * 0.5vmin) 0;
  right: 0;
}

.leg__top {
  width: calc(100% - (var(--wheel-depth) * 2vmin));
  width: calc(var(--size) * 0.9vmin);
  height: 40%;
  left: 50%;
  translate: -50% 0;
  --depth: calc(var(--size) * 0.9);
  --color: var(--grey-2);
}

.leg__bottom {
  top: 40%;
  width: calc(100% - (var(--wheel-depth) * 1vmin));
  height: 60%;
  left: 50%;
  translate: -50% 0;

  --depth: calc(var(--size) * 1.1);
  --color: var(--blue-4);
}

.sock {
  height: 100%;
  width: 100%;
}

/* Cuboid boilerplate code */
.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side--no-filter {
  filter: none !important;
}
.cuboid__side {
  background: var(--color);
  filter: brightness(var(--b, 1));
  position: absolute;
}
.cuboid__side:nth-of-type(1) {
  --b: 1.1;
  height: calc(var(--depth, 20) * 1vmin);
  width: 100%;
  top: 0;
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  --b: 0.9;
  height: 100%;
  width: calc(var(--depth, 20) * 1vmin);
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  --b: 0.5;
  width: 100%;
  height: calc(var(--depth, 20) * 1vmin);
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  --b: 1;
  height: 100%;
  width: calc(var(--depth, 20) * 1vmin);
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
  --b: 0.8;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--depth, 20) * 0.5vmin));
  top: 0;
  left: 0;
}
.cuboid__side:nth-of-type(6) {
  --b: 1.2;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--depth, 20) * -0.5vmin)) rotateY(180deg);
  top: 0;
  left: 0;
}



/* START MOVING PARTS */
.optimus__head-door {
  background: var(--red-1);
  height: calc(var(--torso-depth) * 0.42vmin);
  width: 102%;
  transform-origin: 50% 0;
  transform: rotateX(90deg) translateY(calc(var(--torso-depth) * -0.1vmin));
}

.optimus__head-base {
  height: calc(var(--torso-depth) * 0.4vmin);
  width: 100%;
  background: var(--red-5);
  transform-origin: 50% 100%;
  transform: rotateX(90deg) translateY(50%);
  bottom: 0;
}

/*.arm {
  transform: rotateY(calc(var(--optimus-arm, 0) * 90deg));
}*/

.arm--right {
  translate: 50% -50%;
  right: 0;
  transform-origin: 0 50%;
}
.arm--left {
  left: 0;
  transform-origin: 100% 50%;
  translate: -50% -50%;
}
.arm--right {
  --arm-destination: 90deg;
  --arm-tilt: 89deg;
  --shoulder-multiplier: -0.1vmin;
  --bar-multiplier: -0.1;
}
.arm--left {
/*  --forearm-start: -180deg;*/
  --arm-destination: -90deg;
  --arm-tilt: -89deg;
  --shoulder-multiplier: 0.1vmin;
  --bar-multiplier: 0.1;
}

.arm--right .forearm {
  transform-origin: calc(100% - (var(--fist-width) * 0.5)) 50%;
}

.arm--left .forearm {
  transform-origin: calc(var(--fist-width) * 0.5) 50%;
}

.forearm-flip {
  height: 100%;
  width: 100%;
  transform: rotateY(180deg);
}

.bracket {
  width: 25%;
  rotate: 90deg;
  top: 50%;
  left: 50%;
  translate: -100% -50%;
  opacity: 0.8;
}

.arm--right :is(.forearm-cradle, .forearm-gesture) {
  transform-origin: calc(100% - (var(--fist-width) * 0.5)) 50%;
}
.arm--left :is(.forearm-cradle, .forearm-gesture) {
  transform-origin: calc(var(--fist-width) * 0.5) 50%;
}

/* Window sizing */
:root {
  --transform: 1;
}
:root:has(#transform:checked) {
  --transform: 0;
}
#transform:checked ~ .scene-jumper {
  --transform: 0;
}
/* END ARM MOVING PARTS */

/* Transition stuff... */

/* List of things that are moving */
/**
 * 1. .boot 
 * 2. .chest .cuboid__side:nth-of-type(2,4):after === Windows 
 * 3. .forearm-shell === slight rotation for face on view...?
 * 4. .forearm-shell .cuboid__side:nth-of-type(2) === Forearm shell arm clipping BACK CAP
 * 5. .forearm-shell .cuboid__side:nth-of-type(1) === Forearm shell arm clipping TOP ELBOW SLOT
 * 6. .forearm-cradle === ARM TURNING DOWN AT THE ELBOW
 * 7. .forearm === ARM TURNING OUT AT THE ELBOW 
 * 8. .arm === Turning the arms back into the cab
 * 9. .arm-bar === Moving the bar on a translation and tucking it in
 * 10. .fist === Spinning the fist around 
 * 11. .core-upper === Hip tilt 
 * 12. grill__hinge === Hip tilt
 * 13. .optimus__helmet === Head popping up. Make sure to transition trapdoor as well for this
 * 14. .core-lower === Hip spin */

/**/

:root {
  --transition-speed: 0.35s;
}
.scene--optimus {
  transform:
    translate3d(0, calc(((1 - var(--transform)) * (var(--leg-height)) * 0.45) * -1vmin), 200vmin)
    rotateX(calc(var(--optimus-rotation-y, 0) * 1deg))
    rotateY(calc(var(--optimus-rotation-x, 0) * 1deg))
    rotateX(calc(var(--transform, 0) * -90deg))
    scale(var(--optimus-scale, 1))
    scaleZ(var(--optimus-scale, 1));
}

.core--lower {
  transform: rotateY(calc((1 - var(--transform)) * -180deg));
}

.fist > .cuboid > .cuboid__side:nth-of-type(2):after {
  background: hsl(0 0% calc(((80 + (var(--transform) * 20)) * 1%)));
}

.boot {
  transform: translate3d(0, 0, calc(var(--size) * -0.5vmin)) rotateX(calc(var(--transform) * 120deg));
}

.chest .cuboid__side:nth-of-type(2):after,
.chest .cuboid__side:nth-of-type(4):after {
  width: calc(30% + (var(--transform) * 20%));
}

.forearm-cradle {
  transform: rotate(calc((1 - var(--transform, 0)) * (var(--arm-destination) * -1)));
}

/*.arm--left .forearm-gesture {
  rotate: -60deg;
}
.arm--right .forearm-gesture {
  rotate: 60deg;
}*/

.forearm-shell .cuboid__side:nth-of-type(2) {
  clip-path: inset(calc((1 - var(--transform, 0)) * 100%) 0 0 0);
}
.forearm-shell .cuboid__side:nth-of-type(1) {
  --b: 0.9;
  clip-path: inset(0 calc((1 - var(--transform)) * 25%) 0 0);
}

.fist {
  rotate: calc(var(--transform) * -180deg);
}

.shoulder-port {
  translate: calc((var(--torso-depth) * (var(--transform, 0) * var(--bar-multiplier))) * 1vmin) -50%;
}
.arm {
  transform: rotateY(calc(var(--transform) * var(--arm-destination)));
}
.arm-bar {
  translate: calc((var(--torso-depth) * (var(--transform) * var(--bar-multiplier))) * 1vmin);
}

.forearm {
  transform: rotateY(calc((1 - var(--transform, 0)) * (var(--arm-tilt))));
}

.optimus__head-door {
  clip-path: inset(0 0 calc((1 - var(--transform, 0)) * 100%) 0);
}

.optimus__helmet {
  transform: translate3d(0, 0, calc(var(--torso-depth) * 0.1vmin)) translateY(calc((1 - var(--transform, 0)) * -100%));
}

.optimus__head-twist {
  height: 100%;
  width: 100%;
  transform: rotateY(calc((1 - var(--transform)) * 25deg));
}

.core--upper {
  transform-origin: 50% 50%;
  transform: rotateX(calc(var(--transform) * 90deg));
}

.arm--right .forearm-gesture {
  rotate: calc((1 - var(--transform)) * 70deg);
}
.arm--right .shoulder-gesture {
  transform: rotateX(calc((1 - var(--transform)) * 20deg)) rotateY(calc((1 - var(--transform)) * 20deg)) rotate(calc((1 - var(--transform)) * -10deg));
}
.arm--right .hand {
  rotate: calc(-20deg + ((1 - var(--transform)) * -80deg)) ;
}

.arm--left .shoulder-gesture {
  transform: rotateX(calc((1 - var(--transform)) * 10deg)) rotateY(calc((1 - var(--transform)) * -20deg)) rotate(calc((1 - var(--transform)) * 16deg));
}
.arm--left .forearm-gesture {
  rotate: calc((1 - var(--transform)) * -20deg);
}

.hand__fist {
  height: 100%;
  width: 100%;
}

.hand__fingers {
  width: 150%;
  height: 25%;
  background: orange;
  left: 50%;
  translate: -50% 50%;
  --depth: calc(var(--fist-dimension) * 0.25);
}

.optimus__grill-hinge {
  transform: rotateX(calc(var(--transform) * 90deg));
}

/* Plan out the desired order and choreography on #transform:checked here */
:root:has(#transform:checked) :is(.scene-roller) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 0);
}
#transform:checked ~ .scene-jumper :is(.scene-roller) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 0);
}
#transform:checked ~ .scene-jumper .fist > .cuboid > .cuboid__side:nth-of-type(2):after {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 1),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 1),
    rotate var(--transition-speed) calc(var(--transition-speed) * 1),
    translate var(--transition-speed) calc(var(--transition-speed) * 1);
}
:root:has(#transform:checked) .fist > .cuboid > .cuboid__side:nth-of-type(2):after {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 1),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 1),
    rotate var(--transition-speed) calc(var(--transition-speed) * 1),
    translate var(--transition-speed) calc(var(--transition-speed) * 1);
}
:root:has(#transform:checked) :is(.arm-bar, .forearm) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 1),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 1),
    rotate var(--transition-speed) calc(var(--transition-speed) * 1),
    translate var(--transition-speed) calc(var(--transition-speed) * 1);
}
#transform:checked ~ .scene-jumper :is(.arm-bar, .forearm) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 1),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 1),
    rotate var(--transition-speed) calc(var(--transition-speed) * 1),
    translate var(--transition-speed) calc(var(--transition-speed) * 1);
}
#transform:checked ~ .scene-jumper .chest .cuboid__side:nth-of-type(2):after,
#transform:checked ~ .scene-jumper .chest .cuboid__side:nth-of-type(4):after {
  transition:
    width var(--transition-speed) calc(var(--transition-speed) * 1.5);
}
:root:has(#transform:checked) .chest .cuboid__side:nth-of-type(2):after,
:root:has(#transform:checked) .chest .cuboid__side:nth-of-type(4):after {
  transition:
    width var(--transition-speed) calc(var(--transition-speed) * 1.5);
}
:root:has(#transform:checked) :is(.arm, .shoulder-port, .optimus__head-door, .fist, .forearm-shell .cuboid__side:nth-of-type(1), .forearm-shell .cuboid__side:nth-of-type(2), .boot) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 1.5),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5),
    rotate var(--transition-speed) calc(var(--transition-speed) * 1.5),
    translate var(--transition-speed) calc(var(--transition-speed) * 1.5);
}
#transform:checked ~ .scene-jumper :is(.arm, .shoulder-port, .optimus__head-door, .fist, .forearm-shell .cuboid__side:nth-of-type(1), .forearm-shell .cuboid__side:nth-of-type(2), .boot) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 1.5),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5),
    rotate var(--transition-speed) calc(var(--transition-speed) * 1.5),
    translate var(--transition-speed) calc(var(--transition-speed) * 1.5);
}
:root:has(#transform:checked) :is(.optimus__helmet, .optimus__grill-hinge, .core--upper) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 2),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 2),
    rotate var(--transition-speed) calc(var(--transition-speed) * 2),
    translate var(--transition-speed) calc(var(--transition-speed) * 2);  
}
#transform:checked ~ .scene-jumper :is(.optimus__helmet, .optimus__grill-hinge, .core--upper) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 2),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 2),
    rotate var(--transition-speed) calc(var(--transition-speed) * 2),
    translate var(--transition-speed) calc(var(--transition-speed) * 2);  
}
:root:has(#transform:checked) :is(.forearm-cradle, .core--lower, .scene--optimus) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 2.5),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 2.5),
    rotate var(--transition-speed) calc(var(--transition-speed) * 2.5),
    translate var(--transition-speed) calc(var(--transition-speed) * 2.5);  
}
#transform:checked ~ .scene-jumper :is(.forearm-cradle, .core--lower, .scene--optimus) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 2.5),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 2.5),
    rotate var(--transition-speed) calc(var(--transition-speed) * 2.5),
    translate var(--transition-speed) calc(var(--transition-speed) * 2.5);  
}
/* Extras... */
:root:has(#transform:checked) :is(.arm--right .forearm-gesture, .arm--right .shoulder-gesture, .arm--left .shoulder-gesture, .arm--left .forearm-gesture, .arm--right .hand, .optimus__head-twist) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 3.5),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 3.5),
    rotate var(--transition-speed) calc(var(--transition-speed) * 3.5),
    translate var(--transition-speed) calc(var(--transition-speed) * 3.5);  
}
#transform:checked ~ .scene-jumper :is(.arm--right .forearm-gesture, .arm--right .shoulder-gesture, .arm--left .shoulder-gesture, .arm--left .forearm-gesture, .arm--right .hand, .optimus__head-twist) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 3.5),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 3.5),
    rotate var(--transition-speed) calc(var(--transition-speed) * 3.5),
    translate var(--transition-speed) calc(var(--transition-speed) * 3.5);  
}

/* Back to being a transformer */
:is(.forearm-cradle, .core--lower, .scene--optimus, .arm--right .forearm-gesture, .arm--right .shoulder-gesture, .arm--right .hand, .arm--left .shoulder-gesture, .arm--left .forearm-gesture, .optimus__head-twist) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 0),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 0),
    rotate var(--transition-speed) calc(var(--transition-speed) * 0),
    translate var(--transition-speed) calc(var(--transition-speed) * 0);  
}
:is(.optimus__helmet, .optimus__grill-hinge, .core--upper) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 1),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 1),
    rotate var(--transition-speed) calc(var(--transition-speed) * 1),
    translate var(--transition-speed) calc(var(--transition-speed) * 1);  
}
.chest .cuboid__side:nth-of-type(2):after,
.chest .cuboid__side:nth-of-type(4):after {
  transition:
    width var(--transition-speed) calc(var(--transition-speed) * 1.5);
}
:is(.arm, .shoulder-port, .optimus__head-door, .fist, .forearm-shell .cuboid__side:nth-of-type(1), .forearm-shell .cuboid__side:nth-of-type(2), .boot) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 1.5),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 1.5),
    rotate var(--transition-speed) calc(var(--transition-speed) * 1.5),
    translate var(--transition-speed) calc(var(--transition-speed) * 1.5);
}
:is(.arm-bar, .forearm) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 2),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 2),
    rotate var(--transition-speed) calc(var(--transition-speed) * 2),
    translate var(--transition-speed) calc(var(--transition-speed) * 2);
}
.fist > .cuboid > .cuboid__side:nth-of-type(2):after {
  transition:
    background var(--transition-speed) calc(var(--transition-speed) * 4),
    transform var(--transition-speed) calc(var(--transition-speed) * 4),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 4),
    rotate var(--transition-speed) calc(var(--transition-speed) * 4),
    translate var(--transition-speed) calc(var(--transition-speed) * 4);
}
.scene-roller {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 4.5);

}
/*:root:has(#transform:checked) :is(.scene--optimus) {
  transition:
    transform var(--transition-speed) calc(var(--transition-speed) * 3),
    clip-path var(--transition-speed) calc(var(--transition-speed) * 3),
    rotate var(--transition-speed) calc(var(--transition-speed) * 3),
    translate var(--transition-speed) calc(var(--transition-speed) * 3);  
}*/


/* Hack to get the arms to show at rotation */
/*.arm--left .forearm-shell {
  transform: rotateY(calc(1deg + ((1 - var(--transform)) * 1deg)));
}
.forearm-shell {
  transform: rotateY(calc(-1deg + ((1 - var(--transform)) * 1deg)));
}*/
/* Random animations */

.scene-roller {
  transform: translate3d(0, calc((var(--transform)) * (var(--leg-height) * -0.4vmin)), 0vmin);
}

:root:has(#transform:checked) .scene-jumper {
  animation: jump var(--transition-speed) calc(var(--transition-speed) * 2.5);
}
#transform:checked ~ .scene-jumper {
  animation: jump var(--transition-speed) calc(var(--transition-speed) * 2.5);
}

:root:has(#transform:checked) .arm--right .hand {
  animation: ehhh 1s calc(var(--transition-speed) * 6) infinite linear;
}
#transform:checked ~ .scene-jumper .arm--right .hand {
  animation: ehhh 1s calc(var(--transition-speed) * 6) infinite linear;
}

@keyframes ehhh {
  50% { transform: rotateZ(-35deg); }
}

@keyframes jump {
  50% {
    transform: translateY(calc(var(--core-height) * -10vmin));
  }
}

.optimus__mouth {
  animation: mouth-breathe 3s infinite linear;
}
.optimus__face .cuboid__side:nth-of-type(5):after {
  animation: blink 6s -2s infinite;
}

@keyframes mouth-breathe {
  50% {
    translate: -50% 5%;
  }
}

@keyframes blink {
  0%, 46%, 48%, 50%, 100% {
    scale: 1 1;
  }
  47%, 49% {
    scale: 1 0.01;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console