/* Decorative background: Rubik's cubes that tumble and twist their layers */
.cube-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1000px;
  opacity: 0.16;
}

@media (prefers-color-scheme: dark) {
  .cube-bg { opacity: 0.12; }
}

/* Keep the site above the cubes */
.layout { position: relative; z-index: 1; }

.cube-float {
  position: absolute;
  animation: cube-float var(--float, 14s) ease-in-out infinite alternate;
}

.cube {
  position: relative;
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
  animation: cube-spin var(--spin, 30s) linear infinite;
}

/* One small cube ("cubie"); its position is set by the script */
.cubie {
  --s: calc(var(--size) / var(--n));
  position: absolute;
  width: var(--s);
  height: var(--s);
  left: calc(50% - var(--s) / 2);
  top: calc(50% - var(--s) / 2);
  transform-style: preserve-3d;
}

.cubie span {
  position: absolute;
  inset: 0;
  background: var(--c, #111);
  border: calc(var(--s) * 0.06) solid #111;
  border-radius: 14%;
}

.cubie span:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.cubie span:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cubie span:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cubie span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cubie span:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cubie span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

/* Shapeshift (mirror) cube: every cubie is a box with its own width (--w),
   height (--h) and depth (--d), in units of one normal cubie (--u) */
.cube.mirror .cubie {
  --u: calc(var(--size) / 3);
  --box-w: calc(var(--w) * var(--u));
  --box-h: calc(var(--h) * var(--u));
  --box-d: calc(var(--d) * var(--u));
  width: var(--box-w);
  height: var(--box-h);
  left: calc(50% - var(--box-w) / 2);
  top: calc(50% - var(--box-h) / 2);
}

.cube.mirror .cubie span {
  inset: auto;
  left: 0;
  top: 0;
  border-width: 1px;
  border-radius: 6%;
}

/* Silver, like a real mirror cube */
.cube.mirror .cubie span.outside { background: linear-gradient(135deg, #f4f5f7, #a7adb5); }

.cube.mirror .cubie span:nth-child(1),
.cube.mirror .cubie span:nth-child(2) { width: var(--box-w); height: var(--box-h); }
.cube.mirror .cubie span:nth-child(3),
.cube.mirror .cubie span:nth-child(4) { width: var(--box-d); height: var(--box-h); left: calc((var(--box-w) - var(--box-d)) / 2); }
.cube.mirror .cubie span:nth-child(5),
.cube.mirror .cubie span:nth-child(6) { width: var(--box-w); height: var(--box-d); top: calc((var(--box-h) - var(--box-d)) / 2); }

.cube.mirror .cubie span:nth-child(1) { transform: translateZ(calc(var(--box-d) / 2)); }
.cube.mirror .cubie span:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--box-d) / 2)); }
.cube.mirror .cubie span:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--box-w) / 2)); }
.cube.mirror .cubie span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--box-w) / 2)); }
.cube.mirror .cubie span:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--box-h) / 2)); }
.cube.mirror .cubie span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--box-h) / 2)); }

@keyframes cube-spin {
  from { transform: rotateX(-20deg) rotateY(0deg); }
  to { transform: rotateX(340deg) rotateY(720deg); }
}

@keyframes cube-float {
  from { transform: translateY(-30px); }
  to { transform: translateY(30px); }
}

@media (prefers-reduced-motion: reduce) {
  .cube, .cube-float { animation: none; }
  .cube { transform: rotateX(-25deg) rotateY(35deg); }
}

/* Fewer, smaller cubes on phones */
@media (max-width: 700px) {
  .cube-float:nth-child(n+3) { display: none; }
  .cube { --size: 80px !important; }
}

/* Pyraminx in the upper left corner */
.pyra-float {
  position: absolute;
  top: 10%;
  left: 6%;
  animation: cube-float 15s ease-in-out infinite alternate;
}

/* The puzzle is drawn around its centre, so move the centre into the corner */
.pyra {
  position: relative;
  left: calc(var(--size) / 2);
  top: calc(var(--size) / 2);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: cube-spin 45s linear infinite;
}

/* One triangle: a 100px right triangle that the script stretches into place */
.pyra i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  transform-origin: 0 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: var(--c, #111);
}

@media (prefers-reduced-motion: reduce) {
  .pyra-float, .pyra { animation: none; }
}

/* The corner is taken by your photo on phones */
@media (max-width: 700px) {
  .pyra-float { display: none; }
}

/* Puzzles turning to face the mouse */
/* While following the mouse, the script sets the rotation instead of the spin animation */
.follow-mouse .cube,
.follow-mouse .pyra { animation: none; }


/* Floating math symbols: static/js/symbols.js moves them around */
.symbol-bg { opacity: 0.1; }

.symbol {
  position: absolute;
  top: 0;
  left: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 90px;
  line-height: 1;
  color: var(--text, #111);
  user-select: none;
  will-change: transform;

}

.symbol.small {
  font-size: 34px;
  font-style: italic;
}

.symbol.code {
  font-family: "Fira Code", "Consolas", "Courier New", monospace;
  font-size: 20px;
  font-style: normal;
  white-space: nowrap;   /* keep the line on one row */
}

/* A long code line broken into a few rows, so it fits between the text */
.symbol.code.wrap {
  white-space: normal;
  width: 380px;
  line-height: 1.4;
}

/* Code editor colors (One Dark theme) */
.symbol.code        { color: #abb2bf; }  /* brackets, dots, plain text */
.symbol.code .kw    { color: #c678dd; }  /* keywords */
.symbol.code .fn    { color: #61afef; }  /* functions */
.symbol.code .str   { color: #98c379; }  /* strings */
.symbol.code .const { color: #d19a66; }  /* True, None, numbers */
.symbol.code .cls   { color: #e5c07b; }  /* class names */
.symbol.code .var   { color: #e06c75; }  /* variables */
.symbol.code .op    { color: #56b6c2; }  /* = + < */
.symbol.code .com   { color: #5c6370; font-style: italic; }  /* # comments */

@media (max-width: 700px) {
  .symbol { font-size: 56px; }
  .symbol:nth-of-type(n+3) { display: none; }
}