/* ═══════════════════════════════════════════════════════════
   GasteizBerri Eguraldia – Cabecera meteorológica
   ═══════════════════════════════════════════════════════════ */

/* --- HEADER BASE --- */
.weather-header {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  transition: background 1.2s ease;
}

/* --- CIELOS --- */
.weather-header.sunny   { background: linear-gradient(180deg, #1a8fe0 0%, #56b4f5 40%, #87ceeb 70%, #c4e4f7 100%); }
.weather-header.cloudy  { background: linear-gradient(180deg, #5a6a7a 0%, #7a8a9a 40%, #8e9eae 70%, #a0aab4 100%); }
.weather-header.rainy   { background: linear-gradient(180deg, #2c3e50 0%, #3d5466 30%, #4a6274 60%, #5a7284 100%); }
.weather-header.stormy  { background: linear-gradient(180deg, #1a1a2e 0%, #2d2d44 30%, #3a3a55 60%, #252538 100%); }
.weather-header.snowy   { background: linear-gradient(180deg, #7a8ea0 0%, #95a8b8 35%, #b0c0cc 65%, #c8d4dc 100%); }
.weather-header.foggy   { background: linear-gradient(180deg, #8a9aa8 0%, #9aabb8 40%, #aabbca 70%, #bcccd8 100%); }
.weather-header.night   { background: linear-gradient(180deg, #0a0a1a 0%, #101030 30%, #1a1a40 60%, #0e0e25 100%); }
.weather-header.sunset  { background: linear-gradient(180deg, #1a3a5c 0%, #c0392b 30%, #e67e22 55%, #f39c12 75%, #f5d76e 100%); }

/* --- SOL --- */
.gb-sun {
  position: absolute;
  top: 40px; right: 15%;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5c0 0%, #ffd700 40%, #ffb300 100%);
  box-shadow: 0 0 60px 20px rgba(255,215,0,0.4), 0 0 120px 60px rgba(255,183,0,0.15);
  opacity: 0; transform: scale(0.5);
  transition: opacity 0.8s ease, transform 0.8s ease;
  animation: gb-sun-pulse 4s ease-in-out infinite;
  z-index: 3;
}
.sunny .gb-sun, .sunset .gb-sun { opacity: 1; transform: scale(1); }
.sunset .gb-sun {
  top: auto; bottom: 80px;
  background: radial-gradient(circle, #fff5c0 0%, #ff8c00 50%, #e74c3c 100%);
  box-shadow: 0 0 80px 30px rgba(255,100,0,0.5);
}
@keyframes gb-sun-pulse {
  0%, 100% { box-shadow: 0 0 60px 20px rgba(255,215,0,0.4), 0 0 120px 60px rgba(255,183,0,0.15); }
  50% { box-shadow: 0 0 80px 30px rgba(255,215,0,0.5), 0 0 150px 80px rgba(255,183,0,0.2); }
}

/* Rayos de sol */
.gb-sun-rays {
  position: absolute; top: 40px; right: 15%;
  width: 80px; height: 80px;
  opacity: 0; transition: opacity 0.8s ease; z-index: 2;
}
.sunny .gb-sun-rays { opacity: 1; }
.gb-sun-rays::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,215,0,0.08) 10deg, transparent 20deg);
  animation: gb-rotate-rays 20s linear infinite;
}
@keyframes gb-rotate-rays { to { transform: rotate(360deg); } }

/* --- LUNA --- */
.gb-moon {
  position: absolute; top: 35px; right: 18%;
  width: 55px; height: 55px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f5f0d0 0%, #e8e0b0 50%, #d4ca90 100%);
  box-shadow: 0 0 30px 10px rgba(245,240,208,0.2), 0 0 60px 30px rgba(245,240,208,0.08);
  opacity: 0; transition: opacity 0.8s ease; z-index: 3;
}
.night .gb-moon { opacity: 1; }

/* --- ESTRELLAS --- */
.gb-stars {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity 1s ease;
}
.night .gb-stars { opacity: 1; }
.gb-star {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff; border-radius: 50%;
  animation: gb-twinkle 3s ease-in-out infinite;
}
@keyframes gb-twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* --- NUBES SVG --- */
.gb-clouds {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 5;
}
.gb-cloud-svg {
  position: absolute;
  opacity: 0; transition: opacity 0.8s ease;
}
.cloudy .gb-cloud-svg, .rainy .gb-cloud-svg,
.stormy .gb-cloud-svg, .snowy .gb-cloud-svg { opacity: 1; }
.sunny .gb-cloud-svg  { opacity: 0.35; }
.sunset .gb-cloud-svg { opacity: 0.5; }

/* Colores por condición */
.stormy .gb-cloud-body { fill: rgba(45,45,65,0.9) !important; }
.rainy .gb-cloud-body  { fill: rgba(120,140,160,0.85) !important; }
.snowy .gb-cloud-body  { fill: rgba(180,195,210,0.9) !important; }

/* Capa trasera */
.gb-cloud-back-1 { width: 420px; height: 140px; top: -15px; left: -5%; filter: blur(3px); animation: gb-cloud-slow 80s linear infinite; }
.gb-cloud-back-2 { width: 380px; height: 120px; top: 5px; right: -10%; filter: blur(4px); animation: gb-cloud-slow 90s linear infinite; animation-delay: -35s; animation-direction: reverse; }
/* Capa media */
.gb-cloud-mid-1 { width: 300px; height: 110px; top: 15px; left: 10%; filter: blur(1.5px); animation: gb-cloud-mid 55s linear infinite; animation-delay: -8s; }
.gb-cloud-mid-2 { width: 340px; height: 120px; top: 30px; left: 45%; filter: blur(1px); animation: gb-cloud-mid 48s linear infinite; animation-delay: -22s; }
/* Capa frontal */
.gb-cloud-front-1 { width: 220px; height: 80px; top: 40px; left: -8%; filter: blur(0.5px); animation: gb-cloud-fast 36s linear infinite; animation-delay: -5s; }

@keyframes gb-cloud-slow { from { transform: translateX(-500px); } to { transform: translateX(calc(100vw + 500px)); } }
@keyframes gb-cloud-mid  { from { transform: translateX(-400px); } to { transform: translateX(calc(100vw + 400px)); } }
@keyframes gb-cloud-fast { from { transform: translateX(-300px); } to { transform: translateX(calc(100vw + 300px)); } }

/* --- LLUVIA --- */
.gb-rain {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 6;
  opacity: 0; transition: opacity 0.6s ease;
}
.rainy .gb-rain, .stormy .gb-rain { opacity: 1; }

.gb-raindrop {
  position: absolute; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(174,194,224,0.6));
  animation: gb-fall linear infinite;
}
@keyframes gb-fall { to { transform: translateY(350px); } }

/* --- RELÁMPAGOS --- */
.gb-lightning {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0);
  z-index: 7; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease;
}
.stormy .gb-lightning { opacity: 1; animation: gb-flash 6s infinite; }
@keyframes gb-flash {
  0%, 94%, 100% { background: rgba(255,255,255,0); }
  95% { background: rgba(255,255,255,0.3); }
  95.5% { background: rgba(255,255,255,0); }
  96% { background: rgba(255,255,255,0.15); }
  96.5% { background: rgba(255,255,255,0); }
}

/* --- NIEVE --- */
.gb-snow {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 6;
  opacity: 0; transition: opacity 0.6s ease;
}
.snowy .gb-snow { opacity: 1; }
.gb-snowflake {
  position: absolute;
  background: #fff; border-radius: 50%;
  animation: gb-snowfall linear infinite;
  filter: blur(0.5px);
}
@keyframes gb-snowfall { to { transform: translateY(350px) translateX(30px) rotate(360deg); } }

/* --- NIEBLA --- */
.gb-fog {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 8;
  opacity: 0; transition: opacity 1s ease;
}
.foggy .gb-fog { opacity: 1; }
.gb-fog-layer {
  position: absolute; width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(200,210,220,0.4) 20%, rgba(200,210,220,0.6) 40%, rgba(200,210,220,0.3) 60%, rgba(200,210,220,0.5) 80%, transparent 100%);
}
.gb-fog-layer:nth-child(1) { animation: gb-fog-drift 25s linear infinite; top: 20%; }
.gb-fog-layer:nth-child(2) { animation: gb-fog-drift 35s linear infinite reverse; top: 50%; opacity: 0.7; }
.gb-fog-layer:nth-child(3) { animation: gb-fog-drift 20s linear infinite; top: 70%; opacity: 0.5; }
@keyframes gb-fog-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* --- SKYLINE (para tu SVG propio) --- */
.gb-skyline {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 90px; z-index: 10;
}
.gb-skyline svg { width: 100%; height: 100%; }

/* --- CONTENIDO: LOGO + BADGE --- */
.gb-header-content {
  position: relative; z-index: 20;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; padding: 20px; text-align: center;
}
.gb-logo-svg {
  width: min(70%, 380px); max-height: 50px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.3));
  margin-bottom: 14px;
}
.gb-logo-svg svg { width: 100%; height: auto; display: block; }

.gb-weather-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 30px; padding: 6px 16px;
  font-size: 0.85rem; color: rgba(255,255,255,0.95);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.gb-weather-badge .gb-temp { font-weight: 700; font-size: 1rem; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .weather-header { height: 220px; }
  .gb-logo-svg { width: min(65%, 260px); }
  .gb-weather-badge { font-size: 0.78rem; padding: 5px 12px; }
}