.loader {
  --paper: #f0f0f0;
  --ink: #1a1a1a;
  --cyan: #00ffff;
  --magenta: #ff00ff;
  --yellow: #ffee00;
  --size: 120px;
  --half: 60px;
  --smooth-ease: cubic-bezier(0.8, 0, 0.2, 1);
  margin: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  background-image: radial-gradient(var(--ink) 1px, transparent 1px);
  background-size: 24px 24px;
  overflow: hidden;
  perspective: 1500px;
}
.action-space {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  animation: worldShake 6s ease-in-out infinite;
}

@keyframes worldShake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(2px, -2px) rotate(0.5deg);
  }
  50% {
    transform: translate(-3px, 3px) rotate(-0.5deg);
  }
  75% {
    transform: translate(1px, 1px) rotate(0.2deg);
  }
}

.speed-lines {
  position: absolute;
  width: 600px;
  height: 600px;
  transform-style: preserve-3d;
  opacity: 0;
  animation: linesFlash 4s var(--smooth-ease) infinite;
}

@keyframes linesFlash {
  0%,
  40%,
  60%,
  100% {
    opacity: 0;
    transform: scale(0.8) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(15deg);
  }
}

.line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 300px;
  background: var(--ink);
  transform-origin: top center;
}

.line:nth-child(1) {
  transform: rotate(0deg) translateY(-300px);
}
.line:nth-child(2) {
  transform: rotate(45deg) translateY(-300px);
}
.line:nth-child(3) {
  transform: rotate(90deg) translateY(-300px);
}
.line:nth-child(4) {
  transform: rotate(135deg) translateY(-300px);
}
.line:nth-child(5) {
  transform: rotate(180deg) translateY(-300px);
}
.line:nth-child(6) {
  transform: rotate(225deg) translateY(-300px);
}
.line:nth-child(7) {
  transform: rotate(270deg) translateY(-300px);
}
.line:nth-child(8) {
  transform: rotate(315deg) translateY(-300px);
}

.cube-panel {
  position: relative;
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
  animation: panelLogic 4s var(--smooth-ease) infinite;
}

@keyframes panelLogic {
  0%,
  100% {
    transform: rotateX(-20deg) rotateY(45deg) scale3d(1, 1, 1);
  }
  25% {
    transform: rotateX(-15deg) rotateY(135deg) scale3d(0.85, 0.85, 0.85);
  }
  50% {
    transform: rotateX(160deg) rotateY(225deg) scale3d(1.4, 1.4, 1.4);
  }
  75% {
    transform: rotateX(155deg) rotateY(315deg) scale3d(0.85, 0.85, 0.85);
  }
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 6px solid var(--ink);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: visible;
  overflow: hidden;
  transition: border-color 0.4s var(--smooth-ease);
}

.face::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink) 20%, transparent 20%);
  background-size: 6px 6px;
  opacity: 0.1;
}

.face::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid var(--cyan);
  box-shadow: 15px 15px 0 var(--magenta);
  opacity: 0.3;
  pointer-events: none;
  transition: transform 0.4s var(--smooth-ease);
}

.content {
  font-family: "Arial Black", sans-serif;
  font-size: 32px;
  color: var(--ink);
  text-transform: uppercase;
  transform: skew(-10deg);
  z-index: 2;
}

.f-f {
  transform: rotateY(0deg) translateZ(var(--half));
}
.f-b {
  transform: rotateY(180deg) translateZ(var(--half));
}
.f-r {
  transform: rotateY(90deg) translateZ(var(--half));
}
.f-l {
  transform: rotateY(-90deg) translateZ(var(--half));
}
.f-t {
  transform: rotateX(90deg) translateZ(var(--half));
}
.f-bt {
  transform: rotateX(-90deg) translateZ(var(--half));
}

.f-f {
  background: var(--yellow);
}
.f-r {
  background: var(--cyan);
}
.f-l {
  background: var(--magenta);
}

.onomatopoeia {
  position: absolute;
  color: #fff;
  background: var(--ink);
  padding: 5px 15px;
  font-family: "Arial Black", sans-serif;
  font-size: 18px;
  border: 3px solid #fff;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-15deg);
  opacity: 0;
  animation: popText 4s var(--smooth-ease) infinite;
}

@keyframes popText {
  0%,
  42%,
  58%,
  100% {
    opacity: 0;
    transform: scale(0) rotate(-15deg) translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(10deg) translate(60px, -90px);
  }
}