<div class="Cube">
  <div class="Face" front></div>
  <div class="Face" back></div>
  <div class="Face" right></div>
  <div class="Face" left></div>
  <div class="Face" top></div>
  <div class="Face" bottom></div>
</div>

:root {
  --cube-size: 20vmax;
  --light-hue: 0deg; /* Установим красный цвет */
  --light-saturation: 80%;
  --light-power: 50%;
  --faces-transparency: 50%;
}

.Cube {
  --cube-half: calc(var(--cube-size) / 2);
  --cube-z: calc(var(--cube-half) * -1);
  --light: var(--light-hue) var(--light-saturation) calc(var(--light-power) + 20%);
  --surface: var(--light-hue) var(--light-saturation) var(--light-power);
  
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(var(--cube-z));
  animation: rotation 60s infinite linear;
  animation-fill-mode: forwards;
  
  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: move 1s infinite ease-in-out alternate;
    background: radial-gradient(
      circle at center,
      white,
      hsl(var(--surface))
    );
  }
  
  &::before {
    --from-z: -3vmax;
    --to-z: 6vmax;
    
    mask-image: radial-gradient(
      transparent 0% 40%,
      black 40.1% 60%,
      transparent 60.1% 
    )
  }  

  &::after {
    --from-z: 6vmax;
    --to-z: -3vmax;
    
    mask-image: radial-gradient(
      black 0 10%,
      transparent 10.1% 20%,
      black 20.1% 30%,
      transparent 30.1%
    )
  }
}

.Face { 
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(2px);
  box-shadow: inset 0 0 3vmax -2vmax hsl(0deg 0% 100% / max(50%, var(--light-saturation)));
  background-image: linear-gradient(
    45deg,
    hsl(var(--surface)),
    hsl(var(--light) / var(--faces-transparency))
  );
}

/* Position each face to the correct side */
[front]  { transform: rotateY(0) translateZ(var(--cube-half)); }
[right]  { transform: rotateY(90deg) translateZ(var(--cube-half)); }
[back]   { transform: rotateY(180deg) translateZ(var(--cube-half)); }
[left]   { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
[top]    { transform: rotateX(90deg) translateZ(var(--cube-half)); }
[bottom] { transform: rotateX(-90deg) translateZ(var(--cube-half)); }

/* Cube animation */
@keyframes rotation { 
  0% {
    transform: translateZ(var(--cube-z)) rotateY(0deg) rotateZ(0deg);
  }

  25% {
    transform: translateZ(var(--cube-z)) rotateY(-90deg) rotateZ(90deg);
  }
  
  50% {
    transform: translateZ(var(--cube-z)) rotateY(-180deg) rotateZ(-90deg);
  }  
  
  75% {
    transform: translateZ(var(--cube-z)) rotateY(90deg) rotateZ(180deg);
  }
}

/* Cube content animation */
@keyframes move {
  from {
    transform: translateZ(var(--from-z));
  }
  
  to {
    transform: translateZ(var(--to-z));
  }
}

/* Background color */
html {
  block-size: 100%;
  inline-size: 100%;
  background: #CC4230; /* Устанавливаем красный фон */
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  box-sizing: border-box;
  display: grid;
  margin: 0;
  place-content: center;
  font-family: system-ui;
  perspective: 100vmax;
}