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

/* Tailwind Base */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Styles */
html {
  scroll-behavior: smooth;
}

body {
  background-image: url('/img/msc-city.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  color: #f8fafc;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Font Display */
.font-display {
  font-family: 'Orbitron', sans-serif;
}

/* Brand Colors */
.text-brand-cyan {
  color: #06b6d4;
}

.text-brand-purple {
  color: #7c3aed;
}

.text-brand-blue {
  color: #2563eb;
}

.text-brand-accent {
  color: #ec4899;
}

.bg-brand-cyan {
  background-color: #06b6d4;
}

.bg-brand-purple {
  background-color: #7c3aed;
}

.bg-brand-blue {
  background-color: #2563eb;
}

.bg-brand-accent {
  background-color: #ec4899;
}

.border-brand-cyan {
  border-color: #06b6d4;
}

.border-brand-purple {
  border-color: #7c3aed;
}

/* Animations */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-slow {
  animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.delay-1000 {
  animation-delay: 1000ms;
}

[style*="animation-delay:200ms"] {
  animation-delay: 200ms;
}

[style*="animation-delay:400ms"] {
  animation-delay: 400ms;
}

[style*="animation-delay:600ms"] {
  animation-delay: 600ms;
}

[style*="animation-delay:800ms"] {
  animation-delay: 800ms;
}

/* Selection */
::selection {
  background-color: #7c3aed;
  color: white;
}

/* Custom Scrollbar for Modal */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #0f172a;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}

/* Gradient Backgrounds */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-brand-blue {
  --tw-gradient-from: #2563eb;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
}

.to-brand-purple {
  --tw-gradient-to: #7c3aed;
}

.from-brand-cyan {
  --tw-gradient-from: #06b6d4;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 182, 212, 0));
}

.via-white {
  --tw-gradient-stops: var(--tw-gradient-from), white, var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

/* Background Clip Text */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.text-transparent {
  color: transparent;
}

/* Drop Shadow */
.drop-shadow-glow {
  filter: drop-shadow(0 0 30px rgba(6, 182, 212, 0.3));
}

/* Backdrop Blur */
.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Hidden on mobile/desktop */
@media (max-width: 768px) {
  .md\:hidden {
    display: none;
  }
}

@media (min-width: 768px) {
  .hidden.md\:flex {
    display: flex;
  }
  
  .hidden.md\:block {
    display: block;
  }
}

/* Smooth transitions */
button, a {
  transition: all 0.3s ease;
}

/* Focus states */
button:focus, a:focus {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}