@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@700&display=swap');

:root {
  --midnight: #020617;
  --crimson: #DC2626;
  --chrome: #E2E8F0;
  --azure: #38BDF8;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
}

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

@layer base {
  body {
    @apply bg-midnight text-chrome font-sans overflow-x-hidden;
    font-family: 'Inter', sans-serif;
  }

  h1,
  h2,
  h3,
  h4,
  .font-display {
    font-family: 'Space Grotesk', sans-serif;
  }
}

@layer components {
  .hero-mosaic {
    @apply relative grid gap-1 overflow-hidden pointer-events-none;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
    height: 100vh;
  }

  .mosaic-tile {
    @apply bg-midnight/20 border border-white/5 transition-all duration-700 pointer-events-auto;
    backdrop-filter: blur(8px);
  }

  .mosaic-tile:hover {
    @apply bg-transparent border-azure/30;
    backdrop-filter: blur(0px);
    transform: scale(1.05);
    z-index: 10;
  }

  .glass-card {
    @apply bg-white/5 border border-white/10 backdrop-blur-md rounded-2xl transition-all duration-300;
  }

  .glass-card:hover {
    @apply bg-white/10 border-white/20 -translate-y-1;
  }

  .widget-highlight {
    @apply bg-midnight/90 border-2 border-crimson/50 shadow-[0_0_50px_rgba(220, 38, 36, 0.2)] rounded-2xl transition-all duration-500;
    backdrop-filter: blur(20px);
  }

  .widget-highlight:hover {
    @apply border-crimson shadow-[0_0_70px_rgba(220, 38, 36, 0.4)];
    transform: translateY(-5px) scale(1.02);
  }

  .btn-primary {
    @apply bg-crimson text-white px-8 py-4 rounded-full font-bold transition-all duration-300 flex items-center justify-center gap-2 hover:bg-red-700 hover:shadow-lg hover:shadow-crimson/20 active:scale-95;
  }

  .btn-secondary {
    @apply bg-white/10 text-white px-8 py-4 rounded-full font-bold border border-white/20 transition-all duration-300 flex items-center justify-center gap-2 hover:bg-white/20 active:scale-95;
  }

  .nav-link {
    @apply text-white/70 hover:text-white transition-colors duration-300 relative py-2;
  }

  .nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-crimson transition-all duration-300;
  }

  .nav-link:hover::after {
    @apply w-full;
  }
}

/* Custom Animations */
@keyframes float {
  0% {
    transform: translateY(0px);
  }

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

  100% {
    transform: translateY(0px);
  }
}

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

/* Scroll Snap */
.snap-section {
  scroll-snap-align: start;
}

.snap-container {
  scroll-snap-type: y mandatory;
}

/* Fleet Perspective */
.fleet-card-inner {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}

.fleet-card:hover .fleet-card-inner {
  transform: rotateY(10deg) rotateX(5deg);
}