/* ============================================================
   HERO SCENE — EXTENSIÓN DE CLIMA v2.0
   Añadir al final de hero-scene.css
   Requiere: hero-scene.js v2.0
   ============================================================ */

/* ══════════════════════════════════════════════
   OVERLAY OSCURECEDOR DE CLIMA
   Inyectado dinámicamente por JS
══════════════════════════════════════════════ */
.hero-weather-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: transparent;
  transition: background 6s ease, opacity 6s ease;
}

#hero[data-weather="lluvia"]   .hero-weather-overlay {
  background: rgba(60, 70, 90, 0.40);
}
#hero[data-weather="tormenta"] .hero-weather-overlay {
  background: rgba(10, 10, 22, 0.62);
}

/* ══════════════════════════════════════════════
   FLASH DE RAYO
   Inyectado dinámicamente por JS
══════════════════════════════════════════════ */
.hero-lightning-flash {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: rgba(200, 220, 255, 1);
  opacity: 0;
  transition: opacity 0.04s linear;
}

/* ══════════════════════════════════════════════
   SOL / LUNA — SE OCULTAN BAJO LAS NUBES
══════════════════════════════════════════════ */
#hero .hero-celestial {
  transition: opacity 2s ease, filter 2s ease,
              top 2.5s cubic-bezier(0.4,0,0.2,1),
              bottom 2.5s cubic-bezier(0.4,0,0.2,1),
              left 2.5s cubic-bezier(0.4,0,0.2,1),
              right 2.5s cubic-bezier(0.4,0,0.2,1),
              width 2.5s ease, height 2.5s ease,
              background 2.5s ease, box-shadow 2.5s ease;
}
/* Lluvia: sol/luna casi oculto, difuminado detrás de nubes */
#hero[data-weather="lluvia"] .hero-celestial {
  opacity: 0.12 !important;
  filter: blur(8px) !important;
}
/* Tormenta: completamente invisible */
#hero[data-weather="tormenta"] .hero-celestial {
  opacity: 0 !important;
  filter: blur(14px) !important;
}

/* ══════════════════════════════════════════════
   NUBES — MÁS OSCURAS Y DENSAS EN MAL TIEMPO
══════════════════════════════════════════════ */
#hero[data-weather="lluvia"]   .hero-clouds { opacity: 0.95 !important; }
#hero[data-weather="tormenta"] .hero-clouds { opacity: 1   !important; }

/* Lluvia: nubes grises plomizas */
#hero[data-weather="lluvia"]   .cloud svg {
  fill: rgba(80, 85, 100, 0.88) !important;
}
/* Tormenta: nubes casi negras, muy densas */
#hero[data-weather="tormenta"] .cloud svg {
  fill: rgba(30, 30, 45, 0.95) !important;
}

/* Noche despejada: nubes ocultas */
#hero[data-scene="noche"][data-weather="despejado"] .hero-clouds { opacity: 0; }
/* Noche con lluvia/tormenta: nubes visibles pero muy oscuras */
#hero[data-scene="noche"][data-weather="lluvia"]   .hero-clouds { opacity: 0.85 !important; }
#hero[data-scene="noche"][data-weather="tormenta"] .hero-clouds { opacity: 1   !important; }

/* ══════════════════════════════════════════════
   NIEBLA DEL TERRENO — SE EXPANDE EN LLUVIA
══════════════════════════════════════════════ */
#hero[data-weather="lluvia"] .hero-ground-fog {
  height: 150px !important;
  opacity: 1.0 !important;
}
#hero[data-weather="tormenta"] .hero-ground-fog {
  height: 180px !important;
  opacity: 1.0 !important;
}

/* ══════════════════════════════════════════════
   ANIMACIONES DE PLANTAS — 3 INTENSIDADES
   Controladas por data-weather en #hero

   .pg         → transform-box + transform-origin base
   .pg-1a/1b   → grupo 1 (plantas grandes, izq)
   .pg-2a/2b   → grupo 2 (plantas medianas, centro)
   .pg-3a      → grupo 3 (plantas pequeñas, der)
   .pg-4a      → grupo 4 (plantas pequeñas, izq)
══════════════════════════════════════════════ */

.pg {
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* ── BRISA SUAVE (despejado) ── */
@keyframes brisaA {
  0%,100% { transform: skewX(0deg)  translateX(0px); }
  50%      { transform: skewX(9deg)  translateX(-7px); }
}
@keyframes brisaB {
  0%,100% { transform: skewX(0deg)  translateX(0px); }
  50%      { transform: skewX(13deg) translateX(-10px); }
}

/* ── VIENTO MODERADO (lluvia) ── */
@keyframes vientoA {
  0%,100% { transform: skewX(0deg)  translateX(0px);  }
  40%      { transform: skewX(20deg) translateX(-16px); }
  60%      { transform: skewX(16deg) translateX(-12px); }
}
@keyframes vientoB {
  0%,100% { transform: skewX(0deg)  translateX(0px);  }
  40%      { transform: skewX(26deg) translateX(-20px); }
  60%      { transform: skewX(20deg) translateX(-15px); }
}

/* ── RÁFAGAS DE TORMENTA (irregular, violento) ── */
@keyframes rafagaA {
  0%   { transform: skewX(0deg)  translateX(0px);  }
  10%  { transform: skewX(28deg) translateX(-22px); }
  18%  { transform: skewX(20deg) translateX(-16px); }
  30%  { transform: skewX(38deg) translateX(-30px); }
  42%  { transform: skewX(22deg) translateX(-18px); }
  55%  { transform: skewX(42deg) translateX(-34px); }
  65%  { transform: skewX(30deg) translateX(-24px); }
  78%  { transform: skewX(36deg) translateX(-28px); }
  88%  { transform: skewX(18deg) translateX(-14px); }
  100% { transform: skewX(0deg)  translateX(0px);  }
}
@keyframes rafagaB {
  0%   { transform: skewX(0deg)  translateX(0px);  }
  8%   { transform: skewX(32deg) translateX(-25px); }
  20%  { transform: skewX(24deg) translateX(-19px); }
  35%  { transform: skewX(44deg) translateX(-35px); }
  48%  { transform: skewX(26deg) translateX(-20px); }
  60%  { transform: skewX(40deg) translateX(-32px); }
  72%  { transform: skewX(28deg) translateX(-22px); }
  85%  { transform: skewX(35deg) translateX(-28px); }
  92%  { transform: skewX(14deg) translateX(-11px); }
  100% { transform: skewX(0deg)  translateX(0px);  }
}

/* ── DESPEJADO: brisa lenta y suave ── */
#hero[data-weather="despejado"] .pg-1a { animation: brisaA 5.5s ease-in-out infinite 0s; }
#hero[data-weather="despejado"] .pg-1b { animation: brisaB 5.0s ease-in-out infinite 0.3s; }
#hero[data-weather="despejado"] .pg-2a { animation: brisaA 6.0s ease-in-out infinite 1.0s; }
#hero[data-weather="despejado"] .pg-2b { animation: brisaB 5.5s ease-in-out infinite 1.3s; }
#hero[data-weather="despejado"] .pg-3a { animation: brisaA 5.0s ease-in-out infinite 2.0s; }
#hero[data-weather="despejado"] .pg-4a { animation: brisaB 6.5s ease-in-out infinite 0.5s; }

/* ── LLUVIA: viento constante y sostenido ── */
#hero[data-weather="lluvia"] .pg-1a { animation: vientoA 2.6s ease-in-out infinite 0s; }
#hero[data-weather="lluvia"] .pg-1b { animation: vientoB 2.3s ease-in-out infinite 0.2s; }
#hero[data-weather="lluvia"] .pg-2a { animation: vientoA 2.8s ease-in-out infinite 0.5s; }
#hero[data-weather="lluvia"] .pg-2b { animation: vientoB 2.5s ease-in-out infinite 0.7s; }
#hero[data-weather="lluvia"] .pg-3a { animation: vientoA 2.4s ease-in-out infinite 1.0s; }
#hero[data-weather="lluvia"] .pg-4a { animation: vientoB 2.9s ease-in-out infinite 0.3s; }

/* ── TORMENTA: ráfagas irregulares y violentas ── */
#hero[data-weather="tormenta"] .pg-1a { animation: rafagaA 1.8s ease-in-out infinite 0s; }
#hero[data-weather="tormenta"] .pg-1b { animation: rafagaB 1.6s ease-in-out infinite 0.15s; }
#hero[data-weather="tormenta"] .pg-2a { animation: rafagaA 2.0s ease-in-out infinite 0.4s; }
#hero[data-weather="tormenta"] .pg-2b { animation: rafagaB 1.7s ease-in-out infinite 0.6s; }
#hero[data-weather="tormenta"] .pg-3a { animation: rafagaA 1.9s ease-in-out infinite 0.9s; }
#hero[data-weather="tormenta"] .pg-4a { animation: rafagaB 1.5s ease-in-out infinite 0.25s; }

/* ══════════════════════════════════════════════
   CANVAS — más visible en tormenta (lleva overlay)
══════════════════════════════════════════════ */
#hero[data-weather="tormenta"] #hero-canvas {
  opacity: 0.6;
}

/* ══════════════════════════════════════════════
   NUBES — ADAPTACIÓN MÓVIL
   Las nubes tienen tamaños fijos en px en el HTML.
   En pantallas pequeñas se escalan para no apilar.
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Reducir todas las nubes al 55% de su tamaño */
  .hero-clouds .cloud {
    transform: scale(0.55) !important;
    transform-origin: center top !important;
  }

  /* Reposicionar para que no se acumulen en la parte superior */
  .hero-clouds .cloud:nth-child(1) { top: 2%  !important; left: 0%   !important; }
  .hero-clouds .cloud:nth-child(2) { top: 15% !important; left: 20%  !important; }
  .hero-clouds .cloud:nth-child(3) { top: 2%  !important; left: 45%  !important; }
  .hero-clouds .cloud:nth-child(4) { top: 18% !important; left: 65%  !important; }
  .hero-clouds .cloud:nth-child(5) { top: 8%  !important; left: 78%  !important; }
  .hero-clouds .cloud:nth-child(6) { top: 24% !important; left: 38%  !important; opacity: 0.35 !important; }
}

@media (max-width: 480px) {
  /* Pantallas muy pequeñas: reducir aún más y ocultar nube extra */
  .hero-clouds .cloud {
    transform: scale(0.45) !important;
  }
  /* Ocultar la nube más pequeña para no saturar */
  .hero-clouds .cloud:nth-child(4) { opacity: 0 !important; }
  .hero-clouds .cloud:nth-child(6) { opacity: 0 !important; }
}