canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #353C40 !important;
margin: 0;
padding: 0;
overflow: hidden;
}
.cube-container {
display: flex;
align-items: center;
perspective: 500px;
}
.matrix-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
#cube {
margin: auto;
position: relative;
transform-style: preserve-3d;
transform: translate3d(-50%, -50%, 0);
animation: rotate 5s infinite linear;
}
.face {
position: absolute;
border: 2px solid #353C40;
overflow: hidden;
transition: background-color 0.5s ease;
}
@keyframes rotate {
0% { transform: rotateX(0) rotateY(0); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
#cube .front { transform: translateZ(70px); }
#cube .back { transform: rotateY(180deg) translateZ(70px); }
#cube .right { transform: rotateY(90deg) translateZ(70px); }
#cube .left { transform: rotateY(-90deg) translateZ(70px); }
#cube .top { transform: rotateX(90deg) translateZ(70px); }
#cube .bottom { transform: rotateX(-90deg) translateZ(70px); }
#cube.move-out .front { animation: moveOutFront 3s forwards; }
#cube.move-out .back { animation: moveOutBack 3s forwards; }
#cube.move-out .right { animation: moveOutRight 3s forwards; }
#cube.move-out .left { animation: moveOutLeft 3s forwards; }
#cube.move-out .top { animation: moveOutTop 3s forwards; }
#cube.move-out .bottom { animation: moveOutBottom 3s forwards; }
#cube.move-in .front { animation: moveInFront 3s forwards; }
#cube.move-in .back { animation: moveInBack 3s forwards; }
#cube.move-in .right { animation: moveInRight 3s forwards; }
#cube.move-in .left { animation: moveInLeft 3s forwards; }
#cube.move-in .top { animation: moveInTop 3s forwards; }
#cube.move-in .bottom { animation: moveInBottom 3s forwards; }
.text-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
font-size: 12px;
font-family: monospace;
white-space: normal;
line-height: 1.2;
letter-spacing: 10px;
overflow: hidden;
text-align: justify;
text-justify: inter-character;
animation: blinkingEffect 5s linear infinite;
user-select: none;
font-weight: bold;
}
@keyframes blinkingEffect {
0%, 100% { color: #353C40; }
50% { color: var(--matrix-letter-color); }
}
.glowing-oval {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 100vw;
height: 100vh;
opacity: 1;
z-index: 2;
transition: transform 0.3s, opacity 0.3s;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
overflow: hidden;
}
.inscription {
font-size: 2.5vw;
font-family: monospace;
line-height: 1.2;
white-space: pre-wrap;
text-align: center;
z-index: 4;
opacity: 1;
user-select: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
}
@media (min-width: 1000px) {
.inscription {
font-size: 20px;
}
}
@keyframes expandOval {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes contractOval {
0% { transform: translate(-50%, -50%) scale(1); }
100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}