/* art.css - High-performance GPU-accelerated animations & visual polish */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

@keyframes floatSlow {
  0%,
  100% {
    transform: translateY(0px) translateZ(0);
  }
  50% {
    transform: translateY(-8px) translateZ(0);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    transform: scale(0.97) translateZ(0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.03) translateZ(0);
    opacity: 0.9;
  }
}

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

@keyframes marqueeScroll {
  0% {
    transform: translateX(0) translateZ(0);
  }
  100% {
    transform: translateX(-50%) translateZ(0);
  }
}

.animate-float {
  animation: floatSlow 4s ease-in-out infinite;
  will-change: transform;
}

.animate-glow {
  animation: glowPulse 4s ease-in-out infinite;
  will-change: transform, opacity;
}

.animate-bounce-subtle {
  animation: bounceSubtle 2.5s ease-in-out infinite;
}

.animate-marquee {
  animation: marqueeScroll 35s linear infinite;
  will-change: transform;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

.backdrop-blur-md,
.backdrop-blur-xl {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}