.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body { font-family: 'Inter', sans-serif; background-color: #060e20; font-size: 1.125rem; }
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
.glass-panel {
    background: rgba(25, 37, 64, 0.6);
    backdrop-filter: blur(24px);
}

@keyframes nameReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nameFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes nameGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: no-preference) {
    .name-reveal {
        opacity: 0;
        transform: translateY(12px);
        background-size: 200% 200%;
        background-position: 0% 50%;
        will-change: transform, opacity, background-position;
        animation:
          nameReveal 900ms ease-out 200ms forwards,
          nameFloat 4s ease-in-out 1200ms infinite,
          nameGradient 6s ease-in-out 1200ms infinite;
    }
}