.logo-stage {
position: relative;
width: min(540px, 86%);
margin: .35rem 0 .1rem;
perspective: 1150px;
perspective-origin: 50% 42%;
}
.logo-tilt { transform-style: preserve-3d; will-change: transform; }
.logo3d {
position: relative;
transform-style: preserve-3d;
animation: logo3d-sway 9s ease-in-out infinite;
will-change: transform;
}
.logo3d img { display: block; width: 100%; height: auto; }
.logo3d img.lyr { position: absolute; inset: 0; pointer-events: none; }
.logo3d::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
transform: translateZ(34px);
background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .5) 47%, rgba(255, 255, 255, .06) 54%, transparent 68%);
background-size: 260% 100%;
background-position: 130% 0;
mix-blend-mode: screen;
animation: logo3d-shine 5.6s ease-in-out infinite;
}
@keyframes logo3d-sway {
0%, 100% { transform: rotateX(6deg) rotateY(-14deg) translateY(0); }
50% { transform: rotateX(2.5deg) rotateY(14deg) translateY(-11px); }
}
@keyframes logo3d-shine {
0%, 18% { background-position: 130% 0; }
52%, 100% { background-position: -40% 0; }
}
.logo-shadow {
width: 64%; height: 26px; margin: 16px auto 0;
background: radial-gradient(ellipse at center, rgba(3, 10, 20, .5), transparent 68%);
filter: blur(5px);
animation: logo3d-shadow 9s ease-in-out infinite;
}
@keyframes logo3d-shadow {
0%, 100% { transform: scaleX(1); opacity: .85; }
50% { transform: scaleX(.82); opacity: .55; }
}
.checker-strip {
height: 14px; max-width: 540px; margin: 1.05rem 0 .2rem;
background-image: repeating-conic-gradient(#F5F0E3 0% 25%, #0A1E32 0% 50%);
background-size: 28px 28px;
outline: 1px solid rgba(245, 240, 227, .35);
animation: checker-pan 7s linear infinite;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
@keyframes checker-pan { to { background-position-x: 280px; } }
.cube { position: absolute; z-index: 1; transform-style: preserve-3d; pointer-events: none; }
.cube i {
position: absolute; inset: 0; display: block;
border: 1px solid rgba(245, 240, 227, .28);
background: rgba(18, 54, 90, .9);
}
.cube i:nth-child(1) { transform: rotateY(0deg) translateZ(calc(var(--s) / 2)); background: rgba(236, 50, 9, .92); }
.cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); background: rgba(10, 30, 50, .94); }
.cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: rgba(252, 188, 18, .92); }
.cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background: rgba(18, 54, 90, .94); }
.cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: rgba(255, 122, 26, .9); }
.cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: rgba(7, 20, 38, .95); }
.cube.c1 { --s: 34px; width: 34px; height: 34px; top: 12%; right: 6%; animation: cube-spin1 13s linear infinite; }
.cube.c2 { --s: 22px; width: 22px; height: 22px; top: 58%; left: 3.5%; animation: cube-spin2 17s linear infinite; }
.cube.c3 { --s: 16px; width: 16px; height: 16px; bottom: 10%; right: 13%; animation: cube-spin1 10s linear infinite reverse; }
@keyframes cube-spin1 {
0% { transform: translateY(0) rotateX(-18deg) rotateY(0deg); }
50% { transform: translateY(-16px) rotateX(-18deg) rotateY(180deg); }
100% { transform: translateY(0) rotateX(-18deg) rotateY(360deg); }
}
@keyframes cube-spin2 {
0% { transform: translateY(0) rotateX(24deg) rotateY(360deg); }
50% { transform: translateY(12px) rotateX(24deg) rotateY(180deg); }
100% { transform: translateY(0) rotateX(24deg) rotateY(0deg); }
}
@media (max-width: 900px) {
.logo-stage { width: min(480px, 92%); margin-inline: auto; }
.checker-strip { margin-inline: auto; }
}
@media (max-width: 640px) {
.cube { display: none; }
.logo-stage { width: 94%; }
.checker-strip { height: 10px; background-size: 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
.logo3d, .logo3d::after, .logo-shadow, .checker-strip, .cube { animation: none; }
}