@tailwind base;
@tailwind components;
@tailwind utilities;

.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@keyframes cinematic-pan {
  0% {
    transform: scale(1.1) translateX(-5%);
  }

  50% {
    transform: scale(1.1) translateX(5%);
  }

  100% {
    transform: scale(1.1) translateX(-5%);
  }
}

@keyframes cinematic-zoom {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes cinematic-float {
  0% {
    transform: translateY(0) scale(1.05);
  }

  50% {
    transform: translateY(-10px) scale(1.05);
  }

  100% {
    transform: translateY(0) scale(1.05);
  }
}

.animate-cinematic-pan {
  animation: cinematic-pan 10s ease-in-out infinite;
}

.animate-cinematic-zoom {
  animation: cinematic-zoom 15s ease-in-out infinite alternate;
}

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