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

/* Custom components */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }

  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
  }

  .input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm;
  }

  .label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  /* Video Hero Container */
  .video-hero-container {
    @apply relative w-full overflow-hidden;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
  }

  .video-hero-container video {
    @apply absolute inset-0 w-full h-full object-cover;
    object-position: center;
  }

  /* Hero Video Performance Optimizations */
  .hero-video {
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Hero Pin Container Performance */
  .hero-pin-container {
    will-change: transform;
    transform: translateZ(0);
  }

  /* Hero Headline Performance */
  .hero-headline {
    will-change: opacity, transform;
  }

  /* Scroll Hint Animation */
  .scroll-hint {
    animation: fadeInOut 2s ease-in-out infinite;
  }

  /* Content Section Base Styles */
  .content-section {
    @apply relative;
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Animated Cards */
  .animate-card {
    @apply relative;
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Smooth Scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Remove scroll-behavior for reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    .scroll-hint {
      animation: none;
    }
  }

  /* Backdrop Blur Support */
  @supports (backdrop-filter: blur(10px)) {
    .backdrop-blur-sm {
      backdrop-filter: blur(10px);
    }
  }
}

/* Custom Animations */
@layer utilities {
  /* Fade In/Out for Scroll Hint */
  @keyframes fadeInOut {
    0%, 100% {
      opacity: 0.7;
      transform: translateY(0);
    }
    50% {
      opacity: 1;
      transform: translateY(-5px);
    }
  }

  /* Gradient Animation */
  @keyframes gradientShift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  .gradient-animate {
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
  }

  /* Performance Optimizations */
  .gpu-accelerate {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
}