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

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body.mobile-menu-open {
  overflow: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

@media (max-width: 639px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .fc .fc-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
  }

  .fc .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
  }

  .fc .fc-toolbar-title { font-size: 1.1rem; }
  .fc .fc-button { padding: 0.4em 0.55em; }
}

/* 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;
  }
}