/*
  hero.css - Hero section overlay y transiciones de scroll
  Prioridad: ABOVE THE FOLD
  Tamaño: ~3.5KB
*/

/* ============================================
   HERO SECTION OVERLAY
   Dark overlay para mejor legibilidad del texto
   ============================================ */
.home-landing .hero-section {
  position: relative;
  isolation: isolate;
}

.home-landing .hero-overlay {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.50) 40%,
      rgba(0, 0, 0, 0.45) 70%,
      rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(circle at 15% 20%,
      rgba(255, 122, 0, 0.08) 0%,
      transparent 50%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.35) 100%);
  backdrop-filter: blur(2px) saturate(0.95);
  -webkit-backdrop-filter: blur(2px) saturate(0.95);
  pointer-events: none;
  z-index: 0;
}

/* Subtle texture overlay */
.home-landing .hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 2px);
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .home-landing .hero-overlay {
    background:
      linear-gradient(135deg,
        rgba(0, 0, 0, 0.70) 0%,
        rgba(0, 0, 0, 0.58) 50%,
        rgba(0, 0, 0, 0.65) 100%),
      radial-gradient(circle at 20% 15%,
        rgba(255, 122, 0, 0.06) 0%,
        transparent 45%);
  }
}

/* ============================================
   HERO SCROLL TRANSITION
   Transición sofisticada al hacer scroll
   ============================================ */
.home-landing .hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(var(--hero-scale));
  filter: blur(var(--hero-blur));
  opacity: var(--hero-opacity);
  transition: transform 0.2s ease-out, filter 0.2s ease-out, opacity 0.2s ease-out;
}

.home-landing .hero-section>section {
  position: relative;
  z-index: 10;
  transform: translateY(calc(var(--hero-transition-progress) * -20px));
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  filter: none;
}

.home-landing .hero-section .hero-overlay {
  opacity: calc(0.45 + (var(--hero-overlay-opacity) * 0.55));
  transition: opacity 0.3s ease-out;
  will-change: opacity;
}

/* Content emergence effect */
.home-landing .content-transition-wrapper {
  position: relative;
  z-index: 20;
  opacity: calc(0.3 + (var(--content-transition-progress) * 0.7));
  transform: translateY(calc((1 - var(--content-transition-progress)) * 40px));
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.home-landing .hero-section.transition-complete {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}

.home-landing .content-transition-wrapper.content-active {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .home-landing .hero-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .home-landing .hero-section,
  .home-landing .hero-section::before,
  .home-landing .hero-section>section,
  .home-landing .content-transition-wrapper {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  .home-landing .hero-section.transitioning {
    opacity: 0.5;
  }

  .home-landing .hero-section.transition-complete {
    opacity: 0;
    transform: none;
  }
}

/* Mobile performance optimizations */
@media (max-width: 768px) {
  .home-landing .hero-section::before {
    filter: blur(calc(var(--hero-blur) * 0.7));
  }

  .home-landing .content-transition-wrapper {
    transform: translateY(calc((1 - var(--content-transition-progress)) * 25px));
  }
}

/* ============================================
   BEMCO OVERRIDES
   ============================================ */

.home-landing .hero-overlay {
  background:
    linear-gradient(135deg,
      rgba(0, 32, 91, 0.88) 0%,
      rgba(0, 32, 91, 0.70) 38%,
      rgba(0, 58, 140, 0.60) 68%,
      rgba(0, 32, 91, 0.84) 100%),
    radial-gradient(circle at 18% 18%,
      rgba(0, 58, 140, 0.30) 0%,
      transparent 45%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(0, 32, 91, 0.22) 100%);
}

@media (max-width: 768px) {
  .home-landing .hero-overlay {
    background:
      linear-gradient(135deg,
        rgba(0, 32, 91, 0.92) 0%,
        rgba(0, 32, 91, 0.80) 50%,
        rgba(10, 30, 78, 0.90) 100%),
      radial-gradient(circle at 20% 15%,
        rgba(0, 58, 140, 0.24) 0%,
        transparent 48%);
  }
}