/**
 * Estilos do Sistema de Clima
 */

/* Overlay de clima */
.weather-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -3;
  pointer-events: none;
  transition: all 1s ease-in-out;
  will-change: background, opacity;
}

/* Container de partículas */
.weather-particles {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Gotas de chuva */
.rain-drop {
  position: absolute;
  top: -20px;
  width: 2px;
  height: 20px;
  background: linear-gradient(180deg, rgba(174, 214, 241, 0.8), rgba(174, 214, 241, 0.3));
  animation: rainFall 1s linear infinite;
}

@keyframes rainFall {
  from {
    transform: translateY(-20px);
    opacity: 1;
  }
  to {
    transform: translateY(100vh);
    opacity: 0.5;
  }
}

/* Flocos de neve */
.snow-flake {
  position: absolute;
  top: -20px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  animation: snowFall 5s linear infinite;
  user-select: none;
}

@keyframes snowFall {
  from {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0.3;
  }
}

/* Relâmpago */
.lightning-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9998;
  pointer-events: none;
  animation: lightningFlash 0.2s ease-out;
}

@keyframes lightningFlash {
  0%, 100% {
    opacity: 0;
  }
  10%, 30%, 50% {
    opacity: 1;
  }
  20%, 40% {
    opacity: 0;
  }
}

/* Indicador de clima */
.weather-indicator {
  position: fixed;
  bottom: 100px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 0.8rem 1.2rem;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  z-index: 100;
  animation: indicatorSlideIn 0.5s ease-out;
}

.weather-indicator__icon {
  font-size: 1.5rem;
  animation: iconBob 2s ease-in-out infinite;
}

.weather-indicator__text {
  color: #333;
}

/* Efeitos visuais por clima */
.weather-sunny {
  --weather-tint: rgba(255, 234, 167, 0.1);
}

.weather-rainy {
  --weather-tint: rgba(99, 110, 114, 0.2);
}

.weather-snowy {
  --weather-tint: rgba(223, 230, 233, 0.2);
}

.weather-cloudy {
  --weather-tint: rgba(178, 190, 195, 0.15);
}

.weather-stormy {
  --weather-tint: rgba(45, 52, 54, 0.3);
}

/* Nuvens para clima nublado */
.weather-cloudy::before,
.weather-stormy::before {
  content: '☁️';
  position: fixed;
  top: 10%;
  left: 20%;
  font-size: 80px;
  opacity: 0.4;
  animation: cloudFloat 30s linear infinite;
  pointer-events: none;
  z-index: -1;
}

.weather-cloudy::after,
.weather-stormy::after {
  content: '☁️';
  position: fixed;
  top: 20%;
  right: 30%;
  font-size: 100px;
  opacity: 0.3;
  animation: cloudFloat 40s linear infinite reverse;
  pointer-events: none;
  z-index: -1;
}

@keyframes cloudFloat {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(calc(100vw + 100px));
  }
}

/* Ajustes no Pukito baseado no clima */
.weather-rainy .pukito-character,
.weather-stormy .pukito-character {
  filter: brightness(0.85) saturate(0.9);
}

.weather-snowy .pukito-character {
  filter: brightness(1.15) saturate(1.1);
}

.weather-stormy .pukito-character::before {
  content: '😰';
  position: absolute;
  top: -30px;
  right: -30px;
  font-size: 32px;
  animation: scared 1s ease-in-out infinite;
}

@keyframes scared {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(-5deg);
  }
  75% {
    transform: scale(1.1) rotate(5deg);
  }
}

.weather-snowy .pukito-character::after {
  content: '⛷️';
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: happy 1.5s ease-in-out infinite;
}

@keyframes happy {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-10px) scale(1.2);
  }
}

/* Efeitos nos ambientes */
.weather-rainy .room-background,
.weather-stormy .room-background {
  filter: brightness(0.8) saturate(0.7);
}

.weather-snowy .room-background {
  filter: brightness(1.2) saturate(1.1);
}

/* Overlay de gotas na tela (efeito de vidro molhado) */
.weather-rainy .weather-particles::after,
.weather-stormy .weather-particles::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, transparent 0, transparent 2px, rgba(174, 214, 241, 0.1) 2px, rgba(174, 214, 241, 0.1) 4px, transparent 4px),
    radial-gradient(circle at 60% 70%, transparent 0, transparent 3px, rgba(174, 214, 241, 0.1) 3px, rgba(174, 214, 241, 0.1) 5px, transparent 5px),
    radial-gradient(circle at 80% 20%, transparent 0, transparent 2px, rgba(174, 214, 241, 0.1) 2px, rgba(174, 214, 241, 0.1) 4px, transparent 4px);
  background-size: 200px 200px;
  pointer-events: none;
  opacity: 0.3;
  animation: dropsMove 10s linear infinite;
}

@keyframes dropsMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 200px;
  }
}

/* Transição suave de clima */
.weather-transition {
  animation: weatherTransition 1s ease-in-out;
}

@keyframes weatherTransition {
  0%, 100% {
    opacity: 1;
    filter: blur(0);
  }
  50% {
    opacity: 0.7;
    filter: blur(3px);
  }
}

/* Responsividade */
@media (max-width: 768px) {
  .weather-indicator {
    bottom: 80px;
    right: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
  
  .weather-indicator__icon {
    font-size: 1.2rem;
  }
  
  .rain-drop {
    height: 15px;
  }
  
  .snow-flake {
    font-size: 16px !important;
  }
  
  .weather-cloudy::before,
  .weather-stormy::before {
    font-size: 60px;
  }
  
  .weather-cloudy::after,
  .weather-stormy::after {
    font-size: 70px;
  }
}

@media (max-width: 480px) {
  .weather-indicator {
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
  }
  
  .weather-indicator__icon {
    font-size: 1rem;
  }
  
  .rain-drop {
    height: 12px;
    width: 1.5px;
  }
  
  .snow-flake {
    font-size: 14px !important;
  }
  
  .weather-cloudy::before,
  .weather-stormy::before {
    font-size: 50px;
  }
  
  .weather-cloudy::after,
  .weather-stormy::after {
    font-size: 60px;
  }
}