/* Mobile-First Responsive Enhancements for Landing Page */

/* Base mobile styles */
@media (max-width: 767px) {
  #main-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Hero section mobile optimizations */
  #hero-section h1 {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }

  #hero-section p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
  }

  /* Enhanced touch targets for mobile */
  .enhanced-button {
    min-height: 56px;
    padding: 1rem 2rem;
    font-size: 1.125rem;
  }

  /* Feature cards mobile layout */
  .enhanced-card {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

  .card-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
  }

  /* Mobile-specific animations - reduced intensity */
  .enhanced-card:hover {
    transform: translateY(-4px);
  }

  .floating {
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  /* KSB Demo mobile optimizations */
  .ksb-demo {
    padding: 2rem 1.5rem;
  }

  #ksb-input, #ksb-output {
    margin-bottom: 1.5rem;
  }

  /* Portfolio demo mobile layout */
  .portfolio-demo {
    padding: 2rem 1.5rem;
  }

  .portfolio-item {
    margin-bottom: 1rem;
    padding: 1.5rem;
  }

  .ai-review-popup {
    margin-bottom: 1rem;
    padding: 1rem;
  }

  /* Statistics counter mobile layout */
  .counter {
    font-size: 2rem;
  }
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
  #hero-section h1 {
    font-size: 3.5rem;
  }

  .enhanced-card {
    padding: 2rem;
  }

  /* Grid adjustments for tablet */
  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large screen optimizations */
@media (min-width: 1024px) {
  /* Add subtle parallax effect on large screens */
  .floating {
    animation-duration: 3s;
  }

  .floating-delayed {
    animation-duration: 3s;
    animation-delay: 1.5s;
  }

  /* Enhanced hover effects on desktop */
  .enhanced-card:hover {
    transform: translateY(-12px) scale(1.02);
  }
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .floating,
  .floating-delayed,
  .pulse-animation {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .enhanced-card {
    border: 2px solid #000;
  }

  .enhanced-button {
    border: 2px solid #000;
  }
}

/* Dark mode considerations */
@media (prefers-color-scheme: dark) {
  .portfolio-item,
  .ai-review-popup,
  .ksb-input-demo,
  .ksb-ai-output {
    background: rgba(31, 41, 55, 0.95);
    color: #f9fafb;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .enhanced-card:hover {
    transform: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  /* Increase touch targets */
  .enhanced-button {
    min-height: 44px;
    padding: 0.875rem 2rem;
  }

  /* Add touch feedback */
  .enhanced-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
  }

  .enhanced-button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease-out;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 767px) and (orientation: landscape) {
  #hero-section {
    margin-bottom: 3rem;
  }

  #hero-section h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .ksb-demo,
  .portfolio-demo {
    padding: 1.5rem;
  }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  #hero-section h1 {
    font-size: 2rem;
  }

  .enhanced-button {
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
  }

  .enhanced-card {
    padding: 1.25rem;
  }

  .ksb-demo,
  .portfolio-demo {
    padding: 1.5rem 1rem;
  }
}

/* Loading states for better perceived performance */
.skeleton-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

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

/* Focus visible for accessibility */
.enhanced-button:focus-visible,
.enhanced-card:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .floating,
  .floating-delayed,
  .pulse-animation {
    animation: none !important;
  }

  .enhanced-card {
    break-inside: avoid;
  }
}