/*
  backgrounds.css - Patrones de fondo y grid fotovoltaico
  Prioridad: ABOVE THE FOLD
  Tamaño: ~2KB
*/

/* ============================================
   BASE BACKGROUND LAYERS
   Simula un panel fotovoltaico con grid sutil
   ============================================ */
.home-landing-bg-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 8% 6%, var(--emat-solar-soft) 0%, rgba(255, 122, 0, 0) 22%),
    linear-gradient(120deg, rgba(255, 230, 200, 0.03), rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(90deg, transparent 0 59px, var(--emat-grid-line) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 59px, var(--emat-grid-line) 59px 60px);
  background-size: auto, auto, 60px 60px, 60px 60px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  mix-blend-mode: normal;
  opacity: 0.95;
}

/* ============================================
   PANEL GLOSS EFFECT
   Brillo sutil en la parte superior de paneles
   ============================================ */
.home-landing-bg-pattern .panel-gloss::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  mix-blend-mode: overlay;
}

/* ============================================
   OPT-IN GLOSS UTILITY
   ============================================ */
.home-landing-bg-pattern .opt-in-gloss {
  position: relative;
}

.home-landing-bg-pattern .opt-in-gloss::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   Grid más grueso en móviles para reducir ruido visual
   ============================================ */
@media (max-width: 640px) {
  .home-landing-bg-pattern::before {
    background-image:
      radial-gradient(circle at 10% 6%, var(--emat-solar-soft) 0%, rgba(255, 122, 0, 0) 20%),
      linear-gradient(120deg, rgba(255, 230, 200, 0.02), rgba(255, 255, 255, 0) 40%),
      repeating-linear-gradient(90deg, transparent 0 99px, var(--emat-grid-line) 99px 100px),
      repeating-linear-gradient(0deg, transparent 0 99px, var(--emat-grid-line) 99px 100px);
    background-size: auto, auto, 100px 100px, 100px 100px;
    opacity: 0.9;
  }
}

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

.home-landing-bg-pattern::before {
  background-image:
    radial-gradient(circle at 8% 6%, rgba(249, 176, 63, 0.10) 0%, rgba(249, 176, 63, 0) 24%),
    linear-gradient(120deg, rgba(0, 58, 140, 0.05), rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(0, 32, 91, 0.045) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 59px, rgba(0, 32, 91, 0.045) 59px 60px);
}

@media (max-width: 640px) {
  .home-landing-bg-pattern::before {
    background-image:
      radial-gradient(circle at 10% 6%, rgba(249, 176, 63, 0.09) 0%, rgba(249, 176, 63, 0) 20%),
      linear-gradient(120deg, rgba(0, 58, 140, 0.04), rgba(255, 255, 255, 0) 40%),
      repeating-linear-gradient(90deg, transparent 0 99px, rgba(0, 32, 91, 0.045) 99px 100px),
      repeating-linear-gradient(0deg, transparent 0 99px, rgba(0, 32, 91, 0.045) 99px 100px);
  }
}