/* LCP Optimization for Hero Section */

/* Critical Hero CSS - Inline these styles for immediate rendering */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #fcfcfd 0%, #f9fafb 50%, rgba(255, 87, 34, 0.05) 100%);
  overflow: hidden;
  width: 100%;
}

/* Hero Text Optimization - Remove animations and ensure immediate visibility */
.hero-title {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #030712;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  max-width: 100%;
  word-wrap: break-word;
  /* Ensure immediate visibility */
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.7;
  color: #4b5563;
  margin-bottom: 3rem;
  max-width: 600px;
  font-weight: 400;
  /* Ensure immediate visibility */
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Ensure hero content is immediately visible */
.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  opacity: 1 !important;
  transform: none !important;
}

/* Remove any fade-in animations for hero elements */
.hero-badge,
.hero-cta,
.hero-stats,
.stat-card {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Optimize font loading for hero text */
.hero-title,
.hero-subtitle {
  /* Use font-display: optional for critical text */
  font-display: optional;
  /* Add fallback fonts immediately */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Background shapes - use will-change for GPU acceleration */
.hero-shape {
  will-change: transform;
  animation: float 6s ease-in-out infinite;
  animation-play-state: paused; /* Start paused */
}

/* Start animations after LCP */
.hero-loaded .hero-shape {
  animation-play-state: running;
}

/* Defer non-critical animations */
.floating-element {
  opacity: 0;
  animation: none;
  transition: opacity 0.3s ease;
}

.hero-loaded .floating-element {
  opacity: 1;
  animation: float 6s ease-in-out infinite;
}

/* Preload critical resources hint */
@media (prefers-reduced-motion: no-preference) {
  .hero-shape,
  .floating-element {
    transform: translateZ(0); /* Enable GPU acceleration */
  }
}

/* Ensure gradient text is visible immediately */
.gradient-text {
  background: linear-gradient(135deg, #FF5722 0%, #E64A19 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  /* Fallback for browsers that don't support gradient text */
  color: #FF5722;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    color: transparent;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  /* Disable animations on mobile for better performance */
  .hero-shape,
  .floating-element {
    animation: none !important;
  }
}

/* Fix for about section image loading */
.about-visual {
  position: relative;
  width: 100%;
  min-height: 400px; /* Prevent layout shift */
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.about-visual picture,
.about-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.about-image {
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

/* Ensure AOS animations don't block image loading */
[data-aos] img,
[data-aos] picture {
  opacity: 1 !important;
  transform: none !important;
}

/* Remove AOS opacity hiding for images */
[data-aos]:not(.aos-animate) img,
[data-aos]:not(.aos-animate) picture {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Specific fix for about section */
.about-content .about-visual {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Global fix for all AOS containers with images */
[data-aos] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure all images load immediately regardless of AOS state */
[data-aos] img,
[data-aos] picture,
[data-aos] .screenshot-image,
[data-aos] .hero-image,
[data-aos] .consulting-image,
[data-aos] .about-hero-image,
[data-aos] .contact-hero-image,
[data-aos] .story-visual,
[data-aos] .hero-screenshot,
[data-aos] .course-image,
[data-aos] .solution-image {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Override AOS styles for image containers */
[data-aos]:not(.aos-animate) {
  opacity: 1 !important;
}

[data-aos]:not(.aos-animate) img,
[data-aos]:not(.aos-animate) picture {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure picture elements display properly */
picture {
  display: block;
  width: 100%;
  height: auto;
}

/* Fix for screenshot cards */
.screenshot-card,
.screenshot-item,
.course-card,
.solution-card {
  opacity: 1 !important;
  visibility: visible !important;
}

.screenshot-card img,
.screenshot-item img,
.course-card img,
.solution-card img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block;
  width: 100%;
  height: auto;
}