/* Mobile-First Hero Optimization CSS */

/* Critical mobile hero styles - loads instantly */
@media (max-width: 768px) {
  .hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    min-height: 80vh;
    padding: 1rem 0;
    /* Remove transitions for instant loading */
    transition: none;
  }

  .hero::before {
    display: none !important; /* Remove background image completely on mobile */
  }

  .hero-content {
    padding: 1rem;
    max-width: 100%;
  }

  /* Disable heavy animations on mobile for better performance */
  .hero-title,
  .hero-subtitle,
  .hero-stats,
  .hero-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .floating-elements {
    display: none !important; /* Hide floating elements completely */
  }

  /* Optimized typography for mobile */
  .hero-title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-weight: 700; /* Slightly lighter for mobile */
  }

  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
    opacity: 0.95;
  }

  /* Compact stats layout */
  .hero-stats {
    gap: 1rem;
    margin: 2rem 0;
    justify-content: space-around;
    flex-wrap: nowrap;
  }

  .stat-item {
    flex: 1;
    min-width: 80px;
  }

  .stat-number {
    font-size: 1.8rem !important;
    font-weight: 700;
  }

  .stat-label {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  /* Mobile-optimized CTA buttons */
  .hero-cta {
    gap: 1rem;
    margin-top: 2rem;
    flex-direction: column;
    align-items: center;
  }

  .cta-primary,
  .cta-secondary {
    width: 100%;
    max-width: 280px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    min-height: 48px; /* Touch-friendly */
    border-radius: 8px;
    /* Simplified hover effects for mobile */
    transition: background-color 0.2s ease;
  }

  .cta-primary:hover {
    transform: none; /* Remove transform on mobile */
    box-shadow: none; /* Simplify shadows */
  }

  .cta-secondary:hover {
    transform: none;
  }

  .scroll-indicator {
    bottom: 1rem;
    font-size: 1.2rem;
    animation: none; /* Disable bounce animation on mobile */
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .hero {
    min-height: 70vh;
    padding: 1.5rem 0 1rem;
  }

  .hero-title {
    font-size: 1.8rem;
    line-height: 1.1;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    padding: 0 1rem;
  }

  .hero-stats {
    gap: 0.5rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
  }

  .stat-item {
    flex: 0 1 30%;
    min-width: 70px;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.7rem;
    line-height: 1.2;
  }

  .cta-primary,
  .cta-secondary {
    padding: 0.9rem 1.2rem;
    font-size: 0.95rem;
  }
}

/* Performance optimizations */
.hero * {
  will-change: auto; /* Reset will-change to prevent unnecessary compositing */
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero *::before,
  .hero *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}