/* ============================================================
   HERO SCENE STYLES
   Estilos para los 4 temas de fondo animado del hero
   ============================================================ */

/* ── Canvas de partículas ── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  transition: opacity 1.5s ease;
}

/* ── Sol / Luna ── */
.hero-celestial {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  transition: all 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Nubes ── */
.hero-clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 2s ease;
}

.cloud {
  position: absolute;
  transition: opacity 2s ease;
}

.cloud svg {
  width: 100%;
  height: 100%;
  transition: fill 2s ease, opacity 2s ease;
  filter: blur(6px) drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}

@keyframes heroCloudFloat1 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(40px); } }
@keyframes heroCloudFloat2 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-30px); } }
@keyframes heroCloudFloat3 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(25px); } }

/* Pulso suave del sol — corona expandiéndose y contrayéndose */
@keyframes sunPulse {
  0%,100% { box-shadow: 0 0 50px 25px rgba(255,240,100,0.50), 0 0 120px 60px rgba(255,220,0,0.20); }
  50%      { box-shadow: 0 0 70px 38px rgba(255,240,100,0.65), 0 0 160px 80px rgba(255,220,0,0.30); }
}
/* Pulso suave del sol al amanecer */
@keyframes sunPulseDawn {
  0%,100% { box-shadow: 0 0 40px 20px rgba(255,160,0,0.50), 0 0 100px 50px rgba(255,100,0,0.25); }
  50%      { box-shadow: 0 0 58px 30px rgba(255,160,0,0.68), 0 0 140px 70px rgba(255,100,0,0.38); }
}
/* Pulso suave del sol al atardecer */
@keyframes sunPulseSunset {
  0%,100% { box-shadow: 0 0 50px 25px rgba(255,120,0,0.60), 0 0 120px 60px rgba(255,60,0,0.30); }
  50%      { box-shadow: 0 0 72px 38px rgba(255,120,0,0.78), 0 0 165px 82px rgba(255,60,0,0.45); }
}
/* Halo suave de la luna */
@keyframes moonGlow {
  0%,100% { box-shadow: 0 0 25px 8px rgba(180,200,255,0.30), 0 0 70px 30px rgba(140,170,255,0.12), 0 0 120px 60px rgba(100,140,255,0.06); }
  50%      { box-shadow: 0 0 35px 14px rgba(180,200,255,0.42), 0 0 90px 40px rgba(140,170,255,0.18), 0 0 150px 75px rgba(100,140,255,0.09); }
}

/* ── SVG escena (terreno + plantas) ── */
.hero-scene-svg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 1200px;
  height: 200px;
  z-index: 3;
  pointer-events: none;
  transition: filter 2s ease;
}

/* ── Fog del terreno ── */
.hero-ground-fog {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 2;
  pointer-events: none;
  transition: background 2s ease;
}

/* ── Animación respiración plantas ── */
.hero-plant {
  animation: heroBreath 6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes heroBreath {
  0%,100% { transform: perspective(100px) scaleX(1) scaleY(1); }
  50% { transform: perspective(100px) scaleX(1.03) scaleY(1.03); }
}

/* ══════════════════════════════════════════════
   TEMAS — fondos del hero-section
   Sobreescriben el background por defecto
══════════════════════════════════════════════ */

/* NOCHE */
#hero[data-scene="noche"] {
  /* Índigo profundo que nunca colapsa a negro — azul vivo en todo el cielo */
  background: radial-gradient(ellipse at 55% 100%,
    rgba(38,48,105,1) 0%,
    rgba(18,26,72,1)  35%,
    rgba(8,13,42,1)   65%,
    rgba(4,8,28,1)    100%) !important;
}
#hero[data-scene="noche"] .hero-celestial {
  /* Luna — la fase real se dibuja en canvas por JS (drawMoonPhase) */
  width: 58px; height: 58px;
  background: transparent;  /* el canvas tiene el gradiente */
  box-shadow:
    0 0 25px 8px  rgba(180,200,255,0.30),
    0 0 70px 30px rgba(140,170,255,0.12),
    0 0 120px 60px rgba(100,140,255,0.06);
  top: 6%; left: 80%;
  animation: moonGlow 8s ease-in-out infinite;
  overflow: hidden;
}
#hero[data-scene="noche"] .hero-clouds { opacity: 0; }
#hero[data-scene="noche"] .hero-scene-svg {
  /* Silhouette azul-luna: más saturado, hue hacia el azul */
  filter: brightness(0.28) saturate(0.9) hue-rotate(200deg);
}
#hero[data-scene="noche"] .hero-ground-fog {
  /* Niebla con azul profundo, no negro puro */
  background: linear-gradient(to top,
    rgba(4,8,28,0.97)  0%,
    rgba(6,11,36,0.70) 40%,
    rgba(8,14,45,0.20) 75%,
    transparent        100%);
}
#hero[data-scene="noche"] .hero-subtitle { color: rgba(190,205,255,0.90) !important; }
#hero[data-scene="noche"] .hero-title { color: #eef0ff !important; }
#hero[data-scene="noche"] .hero-description { color: rgba(200,215,250,0.80) !important; }
#hero[data-scene="noche"] .hero-stats .stat-number { color: #bcc8ff !important; }
#hero[data-scene="noche"] .hero-stats .stat-label { color: rgba(190,205,245,0.65) !important; }
#hero[data-scene="noche"] .floating-words span { color: rgba(160,185,255,0.14) !important; }
#hero[data-scene="noche"] .hero-daily-quote {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(180,200,255,0.18) !important;
}
#hero[data-scene="noche"] .hero-daily-quote .quote-text { color: rgba(230,238,255,0.92) !important; }
#hero[data-scene="noche"] .hero-daily-quote .quote-source { color: rgba(180,198,255,0.65) !important; }

/* AMANECER */
#hero[data-scene="amanecer"] {
  background:
    radial-gradient(ellipse at 15% 90%, rgba(255,120,50,0.9) 0%, transparent 45%),
    radial-gradient(ellipse at 0% 100%, rgba(255,60,20,0.6) 0%, transparent 40%),
    linear-gradient(to top, #ff6b35 0%, #ff9a5c 15%, #ffb347 28%, #e8a0d0 50%, #9b72cf 70%, #3d1f6e 100%) !important;
}
#hero[data-scene="amanecer"] .hero-celestial {
  width: 80px; height: 80px;
  background: radial-gradient(circle at 40% 40%, #fff5c0, #ffdf00 40%, #ff9900 75%, #ff5500);
  box-shadow: 0 0 40px 20px rgba(255,160,0,0.5), 0 0 100px 50px rgba(255,100,0,0.25);
  bottom: 10%; left: 8%; top: auto;
  animation: sunPulseDawn 7s ease-in-out infinite;
}
#hero[data-scene="amanecer"] .hero-clouds { opacity: 0.85; }
#hero[data-scene="amanecer"] .cloud svg { fill: rgba(255,220,180,0.65); }
#hero[data-scene="amanecer"] .hero-scene-svg { filter: brightness(0.5) saturate(0.8) sepia(0.3); }
#hero[data-scene="amanecer"] .hero-ground-fog {
  background: linear-gradient(to top, rgba(80,30,10,0.9) 0%, rgba(120,50,20,0.35) 50%, transparent 100%);
}
#hero[data-scene="amanecer"] .hero-subtitle { color: rgba(255,220,120,0.95) !important; }
#hero[data-scene="amanecer"] .hero-title { color: #fff8f0 !important; text-shadow: 0 2px 20px rgba(0,0,0,0.35); }
#hero[data-scene="amanecer"] .hero-title .gradient-text {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
#hero[data-scene="amanecer"] .hero-description { color: rgba(255,240,220,0.85) !important; }
#hero[data-scene="amanecer"] .hero-stats .stat-number { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(0,0,0,0.3); }
#hero[data-scene="amanecer"] .hero-stats .stat-label { color: rgba(255,255,255,0.85) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
#hero[data-scene="amanecer"] .floating-words span { color: rgba(255,200,150,0.12) !important; }
#hero[data-scene="amanecer"] .cta-btn.secondary { color: #fff !important; border-color: rgba(255,255,255,0.7) !important; }
#hero[data-scene="amanecer"] .hero-daily-quote { background: rgba(0,0,0,0.25) !important; border-color: rgba(255,200,100,0.35) !important; }
#hero[data-scene="amanecer"] .hero-daily-quote .quote-text { color: rgba(255,250,230,0.95) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
#hero[data-scene="amanecer"] .hero-daily-quote .quote-source { color: rgba(255,220,100,0.95) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* MEDIODÍA */
#hero[data-scene="mediodia"] {
  background: linear-gradient(to bottom, #1a6bd1 0%, #3a8ee8 30%, #6fb3f5 60%, #b8d9f8 85%, #dceffe 100%) !important;
}
#hero[data-scene="mediodia"] .hero-celestial {
  width: 70px; height: 70px;
  background: radial-gradient(circle at 45% 40%, #fffff0, #fff8c0 50%, #ffe566);
  box-shadow: 0 0 50px 25px rgba(255,240,100,0.5), 0 0 120px 60px rgba(255,220,0,0.2);
  top: 6%; left: 50%; transform: translateX(-50%);
  animation: sunPulse 6s ease-in-out infinite;
}
#hero[data-scene="mediodia"] .hero-clouds { opacity: 1; }
#hero[data-scene="mediodia"] .cloud svg { fill: rgba(255,255,255,0.92); }
#hero[data-scene="mediodia"] .hero-scene-svg { filter: brightness(0.85) saturate(1.4); }
#hero[data-scene="mediodia"] #hero-ground { fill: url(#grassGradient) !important; }
#hero[data-scene="mediodia"] .hero-scene-svg path:not(#hero-ground) { fill: #3a7a20 !important; }
#hero[data-scene="mediodia"] .hero-ground-fog {
  background: linear-gradient(to top, rgba(30,80,30,0.85) 0%, rgba(40,100,40,0.3) 50%, transparent 100%);
}
#hero[data-scene="mediodia"] .hero-subtitle { color: rgba(160,60,0,0.9) !important; }
#hero[data-scene="mediodia"] .hero-title { color: #1a1a2e !important; }
#hero[data-scene="mediodia"] .hero-title .gradient-text {
  background: linear-gradient(135deg, #c0392b, #8b0000) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
#hero[data-scene="mediodia"] .hero-description { color: rgba(20,40,80,0.8) !important; }
#hero[data-scene="mediodia"] .floating-words span { color: rgba(20,60,120,0.1) !important; }
#hero[data-scene="mediodia"] .hero-daily-quote { background: rgba(255,255,255,0.5) !important; border-color: rgba(100,150,200,0.4) !important; }
#hero[data-scene="mediodia"] .hero-daily-quote .quote-text { color: rgba(20,40,80,0.9) !important; }

/* ATARDECER */
#hero[data-scene="atardecer"] {
  background:
    radial-gradient(ellipse at 82% 88%, rgba(255,80,20,0.95) 0%, transparent 40%),
    radial-gradient(ellipse at 100% 100%, rgba(200,30,10,0.6) 0%, transparent 40%),
    linear-gradient(to top, #c0392b 0%, #e74c3c 10%, #e67e22 22%, #f39c12 35%, #d35400 50%, #8e44ad 70%, #2c1654 100%) !important;
}
#hero[data-scene="atardecer"] .hero-celestial {
  width: 90px; height: 90px;
  background: radial-gradient(circle at 45% 45%, #fff0a0, #ffcc00 30%, #ff8800 60%, #ff4400);
  box-shadow: 0 0 50px 25px rgba(255,120,0,0.6), 0 0 120px 60px rgba(255,60,0,0.3);
  bottom: 7%; right: 8%; top: auto; left: auto;
  animation: sunPulseSunset 5s ease-in-out infinite;
}
#hero[data-scene="atardecer"] .hero-clouds { opacity: 0.75; }
#hero[data-scene="atardecer"] .cloud svg { fill: rgba(255,140,70,0.6); }
#hero[data-scene="atardecer"] .hero-scene-svg { filter: brightness(0.4) saturate(0.7) sepia(0.5); }
#hero[data-scene="atardecer"] .hero-ground-fog {
  background: linear-gradient(to top, rgba(60,15,5,0.95) 0%, rgba(100,30,10,0.45) 50%, transparent 100%);
}
#hero[data-scene="atardecer"] .hero-subtitle { color: rgba(255,200,80,0.95) !important; }
#hero[data-scene="atardecer"] .hero-title { color: #fff5e0 !important; text-shadow: 0 2px 20px rgba(0,0,0,0.4); }
#hero[data-scene="atardecer"] .hero-title .gradient-text {
  background: linear-gradient(135deg, #ffd700, #ff6600) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
#hero[data-scene="atardecer"] .hero-description { color: rgba(255,235,210,0.85) !important; }
#hero[data-scene="atardecer"] .hero-stats .stat-number { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(0,0,0,0.3); }
#hero[data-scene="atardecer"] .hero-stats .stat-label { color: rgba(255,255,255,0.85) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
#hero[data-scene="atardecer"] .floating-words span { color: rgba(255,180,100,0.1) !important; }
#hero[data-scene="atardecer"] .cta-btn.secondary { color: #fff !important; border-color: rgba(255,255,255,0.65) !important; }
#hero[data-scene="atardecer"] .hero-daily-quote { background: rgba(0,0,0,0.28) !important; border-color: rgba(255,160,60,0.35) !important; }
#hero[data-scene="atardecer"] .hero-daily-quote .quote-text { color: rgba(255,248,230,0.95) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
#hero[data-scene="atardecer"] .hero-daily-quote .quote-source { color: rgba(255,220,100,0.95) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* ══════════════════════════════════════════════
   SWITCHER DE TEMAS (botones pequeños en el hero)
══════════════════════════════════════════════ */
/* Clima: pausar pulso del sol/luna cuando está cubierto */
#hero[data-weather="llovizna"] .hero-celestial { animation-play-state: paused; }
#hero[data-weather="lluvia"]   .hero-celestial { animation-play-state: paused; }
#hero[data-weather="tormenta"] .hero-celestial { animation-play-state: paused; }

.scene-switcher {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  gap: 6px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 5px;
}

.scene-theme-btn {
  border: none;
  border-radius: 50px;
  width: 32px; height: 32px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  background: transparent;
  opacity: 0.55;
  display: flex; align-items: center; justify-content: center;
}

.scene-theme-btn:hover { opacity: 0.9; background: rgba(255,255,255,0.12); }
.scene-theme-btn.active {
  opacity: 1;
  background: rgba(255,255,255,0.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}

/* En mediodía el switcher más oscuro */
#hero[data-scene="mediodia"] .scene-switcher {
  background: rgba(0,0,80,0.2);
  border-color: rgba(0,50,150,0.2);
}

/* ══════════════════════════════════════════════
   TRANSICIÓN SUAVE entre temas
══════════════════════════════════════════════ */
#hero {
  transition: background 2s ease !important;
}
#hero .hero-celestial,
#hero .hero-clouds,
#hero .hero-ground-fog,
#hero .hero-scene-svg {
  transition: all 2s ease;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MÓVIL
══════════════════════════════════════════════ */
/* ── Tablet / Móvil grande (≤768px) ── */
@media (max-width: 768px) {

  /* Luna/Sol: esquina superior derecha, sin tapar texto */
  #hero[data-scene="noche"] .hero-celestial {
    width: 38px !important;
    height: 38px !important;
    top: 4% !important;
    left: auto !important;
    right: 12px !important;
  }

  #hero[data-scene="amanecer"] .hero-celestial {
    width: 52px !important;
    height: 52px !important;
    bottom: 12% !important;
    left: 12px !important;
    right: auto !important;
  }

  #hero[data-scene="mediodia"] .hero-celestial {
    width: 48px !important;
    height: 48px !important;
    top: 3% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #hero[data-scene="atardecer"] .hero-celestial {
    width: 58px !important;
    height: 58px !important;
    bottom: 10% !important;
    right: 12px !important;
    left: auto !important;
    top: auto !important;
  }

  /* Switcher: vertical, esquina derecha */
  .scene-switcher {
    bottom: auto !important;
    top: 95px !important;
    right: 8px !important;
    left: auto !important;
    transform: none !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 4px !important;
    background: transparent !important;
    border-color: transparent !important;
    opacity: 0.7 !important;
    transition: opacity 0.3s ease !important;
  }

  .scene-switcher:hover,
  .scene-switcher:active {
    opacity: 1 !important;
    background: rgba(0,0,0,0.3) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }

  .scene-theme-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
}

/* ── Móvil pequeño (≤480px) ── */
@media (max-width: 480px) {

  /* Celestial más pequeño — pantalla angosta */
  #hero[data-scene="noche"] .hero-celestial {
    width: 30px !important;
    height: 30px !important;
    top: 3% !important;
    right: 8px !important;
    box-shadow:
      0 0 15px 5px  rgba(180,200,255,0.25),
      0 0 40px 15px rgba(140,170,255,0.10) !important;
  }

  #hero[data-scene="amanecer"] .hero-celestial {
    width: 40px !important;
    height: 40px !important;
    bottom: 10% !important;
    left: 8px !important;
  }

  #hero[data-scene="mediodia"] .hero-celestial {
    width: 38px !important;
    height: 38px !important;
    top: 2% !important;
  }

  #hero[data-scene="atardecer"] .hero-celestial {
    width: 44px !important;
    height: 44px !important;
    bottom: 8% !important;
    right: 8px !important;
  }

  /* Switcher más compacto */
  .scene-switcher {
    top: 76px !important;
    right: 4px !important;
    gap: 2px !important;
  }

  .scene-theme-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  /* Noche: gradiente ligeramente más luminoso en pantalla pequeña
     (OLED puede comprimir el negro — compensar para que se vea el azul) */
  #hero[data-scene="noche"] {
    background: radial-gradient(ellipse at 55% 100%,
      rgba(42,54,118,1) 0%,
      rgba(22,32,82,1)  35%,
      rgba(10,16,52,1)  65%,
      rgba(5,10,34,1)   100%) !important;
  }

  /* Fog más sutil en móvil para no aplastar el cielo en pantalla pequeña */
  #hero[data-scene="noche"] .hero-ground-fog {
    background: linear-gradient(to top,
      rgba(4,8,28,0.90)  0%,
      rgba(5,10,32,0.55) 35%,
      transparent        70%) !important;
  }
}

/* ══════════════════════════════════════════════
   LEGIBILIDAD — text-shadow por tema
══════════════════════════════════════════════ */

/* NOCHE — stats con sombra sutil */
#hero[data-scene="noche"] .stat-number,
#hero[data-scene="noche"] .stat-label {
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

/* MEDIODÍA — stats en rojo oscuro legible sobre terreno verde */
#hero[data-scene="mediodia"] .hero-stats .stat-number {
  color: #8b0000 !important;
  text-shadow: 0 1px 3px rgba(255,255,255,0.4) !important;
}
#hero[data-scene="mediodia"] .hero-stats .stat-label {
  color: rgba(100,0,0,0.85) !important;
  text-shadow: 0 1px 3px rgba(255,255,255,0.4) !important;
}