@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import 'tailwindcss';

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@utility text-shadow {
  text-shadow: 0 0 10px rgba(147, 51, 234, 0.5);
}

@utility text-shadow-neon {
  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px currentColor;
}

@utility backdrop-blur-xs {
  backdrop-filter: blur(1px);
  will-change: backdrop-filter;
}

@utility neon-border {
  border: 1px solid;
  border-image: linear-gradient(45deg, #9333ea, #3b82f6) 1;
  box-shadow:
    0 0 5px rgba(147, 51, 234, 0.5),
    inset 0 0 5px rgba(59, 130, 246, 0.2);
}

@utility neon-glow {
  box-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px currentColor,
    0 0 35px currentColor,
    0 0 40px currentColor;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  /* Force GPU acceleration for better scroll performance */
  body {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  /* Simple performance mode - disables backdrop-filter for users with performance issues */
  .no-backdrop-filter .backdrop-blur-xs,
  .no-backdrop-filter .backdrop-blur-sm,
  .no-backdrop-filter .backdrop-blur-md,
  .no-backdrop-filter .backdrop-blur-lg,
  .no-backdrop-filter .backdrop-blur-xl {
    backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.95);
  }

  body {
    font-family: 'Inter', sans-serif;
    background: #0a0a0a;
    color: #f0f0ff;
  }

  /* 80's Synthwave Color Variables */
  :root {
    --synthwave-pink: #ff006e;
    --synthwave-hot-pink: #ff10f0;
    --synthwave-purple: #b300ff;
    --synthwave-dark-purple: #6b00cf;
    --synthwave-blue: #00d9ff;
    --synthwave-cyan: #00ffff;
    --synthwave-sunset-orange: #ff6700;
    --synthwave-sunset-pink: #ff0080;
    --synthwave-yellow: #ffeb00;
    --synthwave-magenta: #ff00ff;
  }
}

/* Custom scrollbar with retro synthwave theme */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
  border: 1px solid var(--synthwave-hot-pink);
  box-shadow: inset 0 0 5px rgba(255, 0, 255, 0.2);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--synthwave-hot-pink), var(--synthwave-cyan));
  border-radius: 6px;
  box-shadow:
    0 0 15px var(--synthwave-hot-pink),
    0 0 30px var(--synthwave-purple);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--synthwave-magenta), var(--synthwave-blue));
  box-shadow:
    0 0 20px var(--synthwave-hot-pink),
    0 0 40px var(--synthwave-purple);
}

/* Neon animations */
@keyframes neon-flicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes grid-move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

@keyframes pulse-neon {
  0%,
  100% {
    box-shadow:
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor;
  }
  50% {
    box-shadow:
      0 0 10px currentColor,
      0 0 20px currentColor,
      0 0 30px currentColor;
  }
}

@keyframes subtle-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 1.5;
    transform: scale(1.05);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  33% {
    transform: translateY(-20px) translateX(10px);
  }
  66% {
    transform: translateY(10px) translateX(-10px);
  }
}

.animate-neon-flicker {
  animation: neon-flicker 2s infinite;
}

.animate-pulse-neon {
  animation: pulse-neon 2s infinite;
}

.animate-subtle-pulse-neon {
  animation: pulse-neon 4s infinite;
}

.animate-subtle-pulse-neon-delay-2 {
  animation: pulse-neon 4s infinite;
  animation-delay: 2s;
}

/* Animation utilities for background effects */
.animate-subtle-pulse {
  animation: subtle-pulse 4s ease-in-out infinite;
}

.animate-subtle-pulse-delay-2 {
  animation: subtle-pulse 4s ease-in-out infinite;
  animation-delay: 2s;
}

.animate-subtle-pulse-delay-3 {
  animation: subtle-pulse 4s ease-in-out infinite;
  animation-delay: 3s;
}

.animate-subtle-pulse-delay-4 {
  animation: subtle-pulse 4s ease-in-out infinite;
  animation-delay: 4s;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-delay-1 {
  animation: float 6s ease-in-out infinite;
  animation-delay: 1s;
}

.animate-float-delay-2 {
  animation: float 6s ease-in-out infinite;
  animation-delay: 2s;
}

.animate-float-delay-3 {
  animation: float 6s ease-in-out infinite;
  animation-delay: 3s;
}

.animate-float-slow {
  animation: float 8s ease-in-out infinite;
}

.animate-float-slow-delay-2 {
  animation: float 8s ease-in-out infinite;
  animation-delay: 2s;
}

/* Smooth transitions */
* {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
    transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Selection styling */
::selection {
  background: rgba(147, 51, 234, 0.3);
  color: #dbeafe;
}

/* Focus styles */
button:focus,
a:focus {
  outline: none;
}

/* Retro text effect */
.retro-text {
  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px currentColor,
    0 0 35px currentColor,
    0 0 40px currentColor;
  animation: neon-flicker 3s infinite alternate;
}

/* Synthwave gradient backgrounds */
.synthwave-bg {
  background: linear-gradient(
    180deg,
    #0a0a0a 0%,
    #1a0033 20%,
    #330066 40%,
    #4d0099 60%,
    #1a0033 80%,
    #0a0a0a 100%
  );
}

.synthwave-sunset {
  background: linear-gradient(
    180deg,
    #120458 0%,
    #4e0d5f 20%,
    #891652 40%,
    #c91f47 60%,
    #ff6b35 80%,
    #ffeb00 100%
  );
}

.synthwave-miami {
  background: linear-gradient(
    135deg,
    var(--synthwave-dark-purple) 0%,
    var(--synthwave-hot-pink) 25%,
    var(--synthwave-cyan) 50%,
    var(--synthwave-hot-pink) 75%,
    var(--synthwave-dark-purple) 100%
  );
}

/* Glitch effect for special elements */
@keyframes glitch {
  0% {
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
  20% {
    transform: translate(-2px, 2px);
    filter: hue-rotate(90deg) saturate(1.5);
  }
  40% {
    transform: translate(-2px, -2px);
    filter: hue-rotate(180deg) saturate(2);
  }
  60% {
    transform: translate(2px, 2px);
    filter: hue-rotate(270deg) saturate(1.5);
  }
  80% {
    transform: translate(2px, -2px);
    filter: hue-rotate(360deg) saturate(1);
  }
  100% {
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
}

.glitch:hover {
  animation: glitch 0.3s infinite;
}

@keyframes grid-move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

/* 80's Chrome Text Effect */
.chrome-text {
  background: linear-gradient(180deg, #eee 0%, #999 50%, #777 51%, #555 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25);
}

/* Scanline Effect */
@keyframes scanlines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 10px;
  }
}

.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 0, 255, 0.03) 2px,
    rgba(255, 0, 255, 0.03) 4px
  );
  animation: scanlines 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* VHS Tracking Effect */
@keyframes vhs-tracking {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.vhs-effect {
  position: relative;
}

.vhs-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 2px,
    transparent 5px,
    rgba(0, 0, 0, 0.1) 6px,
    transparent 7px
  );
  animation: vhs-tracking 3s linear infinite;
  pointer-events: none;
}

/* Retro Grid with Perspective */
.retro-grid {
  background-image:
    linear-gradient(rgba(255, 0, 255, 0.3) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 0, 255, 0.3) 2px, transparent 2px);
  background-size: 50px 50px;
  background-position: -1px -1px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center center;
}

/* Neon Text Variants */
.neon-pink {
  color: var(--synthwave-hot-pink);
  text-shadow:
    0 0 10px var(--synthwave-hot-pink),
    0 0 20px var(--synthwave-hot-pink),
    0 0 30px var(--synthwave-hot-pink),
    0 0 40px var(--synthwave-purple),
    0 0 70px var(--synthwave-purple),
    0 0 80px var(--synthwave-purple),
    0 0 100px var(--synthwave-purple),
    0 0 150px var(--synthwave-purple);
}

.neon-cyan {
  color: var(--synthwave-cyan);
  text-shadow:
    0 0 10px var(--synthwave-cyan),
    0 0 20px var(--synthwave-cyan),
    0 0 30px var(--synthwave-cyan),
    0 0 40px var(--synthwave-blue),
    0 0 70px var(--synthwave-blue),
    0 0 80px var(--synthwave-blue),
    0 0 100px var(--synthwave-blue),
    0 0 150px var(--synthwave-blue);
}

/* Outrun Sun Effect */
@keyframes sun-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.2);
  }
}

.outrun-sun {
  background: linear-gradient(
    180deg,
    var(--synthwave-yellow) 0%,
    var(--synthwave-sunset-orange) 50%,
    var(--synthwave-sunset-pink) 100%
  );
  border-radius: 50%;
  box-shadow:
    0 0 60px var(--synthwave-sunset-orange),
    0 0 100px var(--synthwave-sunset-pink),
    0 0 140px var(--synthwave-hot-pink);
  animation: sun-pulse 4s ease-in-out infinite;
}

/* Subtle Animated Synthwave Background */
@keyframes synthwave-beat {
  0%,
  100% {
    opacity: 0.4;
    transform: scaleY(1) perspective(800px) rotateX(30deg);
  }
  25% {
    opacity: 0.6;
    transform: scaleY(1.02) perspective(800px) rotateX(30deg);
  }
  50% {
    opacity: 0.5;
    transform: scaleY(0.98) perspective(800px) rotateX(30deg);
  }
  75% {
    opacity: 0.7;
    transform: scaleY(1.01) perspective(800px) rotateX(30deg);
  }
}

@keyframes synthwave-pulse {
  0%,
  100% {
    opacity: 0.3;
    filter: brightness(1);
  }
  50% {
    opacity: 0.5;
    filter: brightness(1.2);
  }
}

@keyframes synthwave-flow {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-64px);
  }
}

.synthwave-animated-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1000px;
  filter: brightness(0.5);
}

/* Horizontal synthwave grid lines with glow */
.synthwave-animated-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--synthwave-hot-pink) 0px,
    var(--synthwave-hot-pink) 2px,
    transparent 2px,
    transparent 32px,
    var(--synthwave-cyan) 32px,
    var(--synthwave-cyan) 34px,
    transparent 34px,
    transparent 64px
  );
  opacity: 0.3;
  filter: blur(0.5px) drop-shadow(0 0 6px var(--synthwave-hot-pink))
    drop-shadow(0 0 6px var(--synthwave-cyan));
  animation: synthwave-flow 12s linear infinite;
}

/* Vertical synthwave grid lines */
.synthwave-lines {
  position: absolute;
  bottom: 0;
  left: -50%;
  right: -50%;
  height: 60%;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 59px,
    var(--synthwave-purple) 59px,
    var(--synthwave-purple) 61px,
    transparent 61px,
    transparent 119px,
    var(--synthwave-blue) 119px,
    var(--synthwave-blue) 121px,
    transparent 121px
  );
  transform: perspective(400px) rotateX(75deg);
  transform-origin: bottom;
  opacity: 0.25;
  filter: blur(0.5px) drop-shadow(0 0 8px var(--synthwave-purple))
    drop-shadow(0 0 8px var(--synthwave-blue));
  animation: synthwave-beat 3s ease-in-out infinite;
}

.synthwave-gradient-animated {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top, transparent 0%, rgba(179, 0, 255, 0.1) 50%, transparent 100%),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 0, 110, 0.03) 30%,
      rgba(255, 0, 255, 0.05) 40%,
      rgba(0, 217, 255, 0.03) 50%,
      rgba(179, 0, 255, 0.08) 70%,
      rgba(0, 0, 0, 0.5) 100%
    );
  animation: synthwave-pulse 4s ease-in-out infinite;
}

/* Add horizon glow effect */
.synthwave-horizon {
  position: absolute;
  bottom: 40%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--synthwave-hot-pink) 20%,
    var(--synthwave-cyan) 50%,
    var(--synthwave-hot-pink) 80%,
    transparent 100%
  );
  filter: blur(2px);
  opacity: 0.6;
  animation: synthwave-pulse 3s ease-in-out infinite;
}

.synthwave-horizon::after {
  content: '';
  position: absolute;
  inset: -10px 0;
  background: inherit;
  filter: blur(20px);
  opacity: 0.5;
}

/* Music visualizer bars */
@keyframes bar-dance-1 {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  25% {
    transform: scaleY(0.7);
  }
  50% {
    transform: scaleY(0.5);
  }
  75% {
    transform: scaleY(0.6);
  }
}

@keyframes bar-dance-2 {
  0%,
  100% {
    transform: scaleY(0.5);
  }
  25% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(0.7);
  }
  75% {
    transform: scaleY(0.4);
  }
}

@keyframes bar-dance-3 {
  0%,
  100% {
    transform: scaleY(0.6);
  }
  25% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(0.3);
  }
  75% {
    transform: scaleY(0.7);
  }
}

.music-bars {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  perspective: 800px;
  transform: rotateX(20deg);
  pointer-events: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.music-bar {
  width: 3px;
  background: linear-gradient(
    to top,
    var(--synthwave-hot-pink) 0%,
    var(--synthwave-purple) 50%,
    var(--synthwave-cyan) 100%
  );
  transform-origin: bottom;
  border-radius: 2px 2px 0 0;
  box-shadow:
    0 0 5px var(--synthwave-hot-pink),
    0 0 10px var(--synthwave-purple),
    0 0 15px var(--synthwave-cyan);
  animation: musicBarPulse 1s ease-in-out infinite;
}

.music-bar:nth-child(3n) {
  animation: bar-dance-1 2s ease-in-out infinite;
}

.music-bar:nth-child(3n + 1) {
  animation: bar-dance-2 2s ease-in-out infinite;
  animation-delay: 0.2s;
}

.music-bar:nth-child(3n + 2) {
  animation: bar-dance-3 2s ease-in-out infinite;
  animation-delay: 0.4s;
}

/* HomePage custom classes */
.synthwave-logo-glow {
  filter: drop-shadow(0 0 30px var(--synthwave-hot-pink))
    drop-shadow(0 0 60px var(--synthwave-cyan)) drop-shadow(0 0 90px var(--synthwave-purple));
}

.text-shadow-cyan {
  text-shadow:
    0 0 20px var(--synthwave-cyan),
    0 0 40px var(--synthwave-cyan);
}

.text-shadow-pink {
  text-shadow:
    0 0 20px var(--synthwave-hot-pink),
    0 0 40px var(--synthwave-hot-pink);
}

.text-shadow-pink-sm {
  text-shadow: 0 0 10px var(--synthwave-hot-pink);
}

.font-orbitron {
  font-family: 'Orbitron', sans-serif;
}

.font-audiowide {
  font-family: 'Audiowide', sans-serif;
}

.btn-synthwave-primary {
  background: linear-gradient(135deg, var(--synthwave-hot-pink), var(--synthwave-purple));
  border: 2px solid var(--synthwave-cyan);
  box-shadow:
    0 0 20px var(--synthwave-hot-pink),
    0 0 40px var(--synthwave-purple),
    inset 0 0 20px rgba(255, 0, 255, 0.2);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.btn-synthwave-primary:hover {
  transform: scale(1.05);
}

.btn-synthwave-primary-glow {
  background: linear-gradient(135deg, var(--synthwave-hot-pink), var(--synthwave-purple));
}

.btn-synthwave-secondary {
  border: 2px solid var(--synthwave-cyan);
  color: var(--synthwave-cyan);
  background-color: rgba(0, 255, 255, 0.1);
  box-shadow:
    0 0 15px var(--synthwave-cyan),
    inset 0 0 15px rgba(0, 255, 255, 0.1);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.btn-synthwave-secondary:hover {
  transform: scale(1.05);
  color: var(--synthwave-cyan);
  background-color: rgba(0, 255, 255, 0.15);
}

.btn-synthwave-secondary-glow {
  background: transparent;
  border: 2px solid var(--synthwave-cyan);
  box-shadow: 0 0 20px var(--synthwave-cyan);
}

.link-synthwave-cyan {
  background: rgba(0, 255, 255, 0.1);
  border: 2px solid var(--synthwave-cyan);
  box-shadow: 0 0 10px var(--synthwave-cyan);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.link-synthwave-cyan:hover {
  transform: scale(1.05);
}

.link-synthwave-pink {
  background: rgba(255, 0, 255, 0.1);
  border: 2px solid var(--synthwave-hot-pink);
  box-shadow: 0 0 10px var(--synthwave-hot-pink);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.link-synthwave-pink:hover {
  transform: scale(1.05);
}

.link-synthwave-yellow {
  background: rgba(255, 235, 0, 0.1);
  border: 2px solid var(--synthwave-yellow);
  box-shadow: 0 0 10px var(--synthwave-yellow);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.link-synthwave-yellow:hover {
  transform: scale(1.05);
}

.link-synthwave-orange {
  background: rgba(255, 235, 0, 0.1);
  border: 2px solid var(--synthwave-sunset-orange);
  box-shadow: 0 0 10px var(--synthwave-sunset-orange);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.link-synthwave-orange:hover {
  transform: scale(1.05);
}

.text-synthwave-pink {
  color: var(--synthwave-hot-pink);
}

.text-synthwave-cyan {
  color: var(--synthwave-cyan);
}

.text-synthwave-yellow {
  color: var(--synthwave-yellow);
}

.text-synthwave-orange {
  color: var(--synthwave-sunset-orange);
}

/* Performance Optimization Classes */

/* Pause animations when element is not visible */
.animations-paused,
.animations-paused * {
  animation-play-state: paused !important;
}

/* Reduced motion support */
.reduced-motion {
  animation-duration: 0.01s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01s !important;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }

  .music-bar {
    animation: none !important;
  }

  .synthwave-animated-bg * {
    animation: none !important;
  }

  [class*='animate-'] {
    animation: none !important;
  }
}

/* Advanced Performance Optimizations */

/* Force GPU acceleration for smooth animations */
.gpu-accelerated {
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  contain: layout style;
}

/* Contain layout and paint for better performance */
.performance-contain {
  contain: layout style paint;
}

/* Optimize style recalculation performance */
.music-bar {
  contain: layout style;
  isolation: isolate;
}

.synthwave-animated-bg {
  contain: layout style paint;
}

/* Reduce composite layer creation */
[class*='animate-'] {
  contain: layout;
}

/* Lazy blur - start with no blur, add it when visible */
.lazy-blur {
  filter: none !important;
  transition: filter 0.3s ease-out;
}

.lazy-blur.blur-loaded {
  filter: var(--blur-amount, blur(8px));
}

/* Optimized mobile performance - animations are simplified, not removed */
@media (max-width: 768px) {
  /* Reduce blur intensity on mobile for better performance */
  .blur-xl {
    filter: blur(8px) !important;
  }
  .blur-lg {
    filter: blur(6px) !important;
  }
  .blur-md,
  .blur-sm {
    filter: blur(4px) !important;
  }

  /* Optimize animations for mobile - use GPU-accelerated properties only */
  [class*='animate-'] {
    animation-duration: 2s !important; /* Slower animations = less GPU load */
    animation-timing-function: linear !important;
  }

  /* Optimize synthwave logo glow for mobile */
  .synthwave-logo-glow {
    filter: drop-shadow(0 0 20px rgba(255, 0, 204, 0.6)) !important;
    animation: synthwave-glow-mobile 3s ease-in-out infinite;
  }

  /* Optimize button glows for mobile */
  .btn-synthwave-primary-glow,
  .btn-synthwave-secondary-glow {
    filter: blur(8px) !important;
  }

  /* Optimize text shadows for mobile */
  .text-shadow-cyan {
    text-shadow:
      0 0 15px rgba(0, 255, 255, 0.6),
      0 0 30px rgba(0, 255, 255, 0.3) !important;
  }
  .text-shadow-pink {
    text-shadow:
      0 0 15px rgba(255, 0, 204, 0.6),
      0 0 30px rgba(255, 0, 204, 0.3) !important;
  }

  /* Optimize music bar animations on mobile */
  .music-bar {
    animation-name: musicBarPulse !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    /* animation-delay and animation-duration set via inline styles */
    box-shadow: 0 0 5px currentColor !important;
    width: 4px !important; /* Slightly wider on mobile for visibility */
  }

  /* Optimize music bars container for mobile */
  .music-bars {
    transform: none !important; /* Remove 3D transform on mobile */
    perspective: none !important;
    height: 60px !important; /* Shorter on mobile */
    gap: 3px !important; /* Tighter spacing */
    justify-content: center !important;
    align-items: flex-end !important;
  }

  /* Optimize synthwave background for mobile */
  .synthwave-animated-bg::before,
  .synthwave-lines {
    opacity: 0.6 !important;
    animation-duration: 30s !important; /* Much slower animation */
  }

  /* Show simplified gradient animation */
  .synthwave-gradient-animated {
    opacity: 0.7 !important;
    animation: synthwave-gradient-mobile 10s ease-in-out infinite !important;
  }
}

/* Mobile-optimized animations */
@keyframes synthwave-glow-mobile {
  0%,
  100% {
    filter: drop-shadow(0 0 20px rgba(255, 0, 204, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(255, 0, 204, 0.8));
  }
}

@keyframes musicBarPulse {
  0% {
    transform: scaleY(0.3);
    opacity: 0.6;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.3);
    opacity: 0.6;
  }
}

@keyframes synthwave-gradient-mobile {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Firefox-specific optimizations - Firefox has poor animation performance */
@-moz-document url-prefix() {
  /* Disable heavy animations in Firefox */
  [class*='animate-'] {
    animation-duration: 0.1s !important;
    animation-iteration-count: 1 !important;
  }

  /* Simplify transforms in Firefox */
  .music-bars {
    transform: none !important;
    perspective: none !important;
  }

  /* Disable blur effects in Firefox for better performance */
  .blur-xl,
  .blur-lg {
    filter: blur(4px) !important;
  }

  /* Remove complex gradients in Firefox */
  .synthwave-gradient-animated {
    opacity: 0.3 !important;
  }
}

/* Safari-specific optimizations */
@supports (-webkit-appearance: none) and (not (appearance: none)) {
  /* Older Safari versions - disable heavy effects */
  .blur-xl {
    filter: blur(8px) !important;
  }

  /* Optimize webkit transforms */
  .gpu-accelerated {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
  }
}

/* iOS-specific optimizations */
@supports (-webkit-touch-callout: none) {
  /* iOS devices - optimize animations instead of disabling */
  [class*='animate-'] {
    -webkit-animation-fill-mode: both !important;
    animation-fill-mode: both !important;
    -webkit-transform: translateZ(0); /* Force GPU acceleration */
    transform: translateZ(0);
  }

  .blur-xl,
  .blur-lg,
  .blur-md {
    filter: none !important;
  }

  .music-bar {
    box-shadow: none !important;
  }
}
