.logo-tilt { width: min(280px, 65vw); margin: 0 auto; transform: perspective(650px) translate(var(--look-x, 0px), var(--look-y, 0px)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .24s ease-out; }
.logo-art { position: relative; animation: logo-float 7s ease-in-out infinite; }
.logo-art img { width: 100%; margin: 0; }
.logo-glow, .logo-shimmer { position: absolute; inset: 0; pointer-events: none; }
.logo-glow::before, .logo-shimmer::before { content: ''; position: absolute; inset: 0; mask: url('logo.png') center / contain no-repeat; mask-mode: luminance; }
.logo-glow { opacity: 0; filter: blur(5px); }
.logo-glow::before { background: #dceaff; }
.logo-shimmer { opacity: 0; }
.logo-shimmer::before { background: linear-gradient(110deg, transparent 35%, #94a6bf88 43%, #fff 49%, #c4d7eb 53%, transparent 62%); background-size: 300% 100%; background-position: 100% 0; }
.logo-tilt.charging .logo-glow { animation: logo-charge 6.5s ease-in both; }
.logo-tilt.burst .logo-glow { animation: logo-afterglow 4.5s ease-out both; }
.logo-tilt.burst .logo-shimmer { animation: logo-shimmer-opacity 4.5s linear both; }
.logo-tilt.burst .logo-shimmer::before { animation: logo-sweep 4.5s ease-in-out both; }
.logo-tilt.burst .logo-art img { animation: logo-chrome 4.5s ease-in-out both; }
@keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes logo-charge { from { opacity: 0; } to { opacity: .7; } }
@keyframes logo-afterglow { 0%, 20% { opacity: .7; } 26% { opacity: 1; filter: blur(7px); } 55% { opacity: .45; } 100% { opacity: 0; filter: blur(5px); } }
@keyframes logo-shimmer-opacity { 0%, 20%, 75%, 100% { opacity: 0; } 26%, 55% { opacity: 1; } }
@keyframes logo-sweep { 0%, 20% { background-position: 100% 0; } 65%, 100% { background-position: 0 0; } }
@keyframes logo-chrome { 0%, 18%, 100% { filter: brightness(1); } 25% { filter: brightness(.7); } 40% { filter: brightness(.86); } 70% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .logo-tilt { transform: none; transition: none; } .logo-art, .logo-tilt.charging .logo-glow, .logo-tilt.burst .logo-glow, .logo-tilt.burst .logo-shimmer, .logo-tilt.burst .logo-shimmer::before, .logo-tilt.burst .logo-art img { animation: none; } }