/**
 * Weather Component Styles
 * 
 * Styling for the weather card component used in the home dashboard.
 * Includes weather icon display, temperature, and description styling.
 * 
 * @author Home Dashboard
 * @version 1.0.0
 * @license MIT
 */

/* Weather card styling */
.weather-card {
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    
    /* Default light mode background with white text */
    background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 30%, #DEE2E6 60%, #CED4DA 100%);
    color: white;
    
    /* Simple dissolve transition */
    transition: background 1.2s ease-in-out;
}

/* Ensure info box also has equal height */
.info-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Dark mode default background with white text */
[data-bs-theme="dark"] .weather-card {
    background: linear-gradient(135deg, #212529 0%, #343A40 30%, #495057 60%, #6C757D 100%);
    color: white;
}

/* Loading state gradient - neutral and pretty with white text */
.weather-card.loading {
    /* Light mode loading gradient - soft blue-gray with white text */
    background: linear-gradient(135deg, #F1F3F4 0%, #E8EAF6 25%, #C5CAE9 50%, #9FA8DA 75%, #7986CB 100%);
    color: white;
    
    /* Gentle breathing animation */
    animation: loading-breathe 3s ease-in-out infinite;
}

/* Dark mode loading gradient - warm gray with white text */
[data-bs-theme="dark"] .weather-card.loading {
    background: linear-gradient(135deg, #37474F 0%, #455A64 25%, #546E7A 50%, #607D8B 75%, #78909C 100%);
    color: white;
    
    /* Gentle breathing animation */
    animation: loading-breathe 3s ease-in-out infinite;
}

/* Subtle breathing animation for loading state */
@keyframes loading-breathe {
    0%, 100% {
        opacity: 0.9;
    }
    50% {
        opacity: 1;
    }
}

/* Dynamic gradient backgrounds based on weather conditions - all with white text */
.weather-card.clear-day {
    background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 30%, #F0E68C 100%);
    color: white;
}

.weather-card.clear-night {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 30%, #4a6741 100%);
    color: white;
}

.weather-card.sunny {
    background: linear-gradient(135deg, #FDB813 0%, #FF8C00 50%, #FFD700 100%);
    color: white;
}

.weather-card.cloudy {
    background: linear-gradient(135deg, #BDC3C7 0%, #95A5A6 50%, #7F8C8D 100%);
    color: white;
}

.weather-card.partly-cloudy-day {
    background: linear-gradient(135deg, #87CEEB 0%, #D3D3D3 50%, #F0E68C 100%);
    color: white;
}

.weather-card.partly-cloudy-night {
    background: linear-gradient(135deg, #2c3e50 0%, #5D6D7E 50%, #34495e 100%);
    color: white;
}

.weather-card.overcast {
    background: linear-gradient(135deg, #95A5A6 0%, #7F8C8D 50%, #566573 100%);
    color: white;
}

.weather-card.rain {
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 50%, #1E3A8A 100%);
    color: white;
}

.weather-card.drizzle {
    background: linear-gradient(135deg, #85C1E9 0%, #5DADE2 50%, #3498DB 100%);
    color: white;
}

.weather-card.extreme-rain {
    background: linear-gradient(135deg, #1B4F72 0%, #2E86AB 50%, #A23B72 100%);
    color: white;
}

.weather-card.thunderstorms {
    background: linear-gradient(135deg, #2C3E50 0%, #8E44AD 30%, #F39C12 70%, #E74C3C 100%);
    color: white;
    animation: lightning 3s ease-in-out infinite;
}

.weather-card.snow {
    background: linear-gradient(135deg, #E8F6F3 0%, #D5E8D4 50%, #85C1E9 100%);
    color: white;
}

.weather-card.extreme-snow {
    background: linear-gradient(135deg, #FDFEFE 0%, #D6EAF8 50%, #85C1E9 100%);
    color: white;
}

.weather-card.sleet {
    background: linear-gradient(135deg, #AED6F1 0%, #85C1E9 50%, #5DADE2 100%);
    color: white;
}

.weather-card.hail {
    background: linear-gradient(135deg, #F8F9FA 0%, #AED6F1 50%, #3498DB 100%);
    color: white;
}

.weather-card.fog {
    background: linear-gradient(135deg, #F8F9FA 0%, #E5E7E9 50%, #D5DBDB 100%);
    color: white;
}

.weather-card.mist {
    background: linear-gradient(135deg, #FDEBD0 0%, #FAD5A5 50%, #E8DAEF 100%);
    color: white;
}

.weather-card.haze {
    background: linear-gradient(135deg, #FCF3CF 0%, #F9E79F 50%, #F7DC6F 100%);
    color: white;
}

.weather-card.smoke {
    background: linear-gradient(135deg, #D5D8DC 0%, #AEB6BF 50%, #85929E 100%);
    color: white;
}

.weather-card.dust {
    background: linear-gradient(135deg, #EDBB99 0%, #DC7633 50%, #A04000 100%);
    color: white;
}

.weather-card.wind {
    background: linear-gradient(135deg, #D6EAF8 0%, #85C1E9 30%, #5DADE2 100%);
    color: white;
    animation: wind-flow 4s ease-in-out infinite;
}

.weather-card.tornado {
    background: linear-gradient(135deg, #2C3E50 0%, #566573 30%, #1C2833 100%);
    color: white;
    animation: tornado-spin 5s linear infinite;
}

.weather-card.hurricane {
    background: linear-gradient(135deg, #1B2631 0%, #2E4057 30%, #85929E 70%, #F8C471 100%);
    color: white;
    animation: hurricane-swirl 6s ease-in-out infinite;
}

.weather-card.not-available {
    background: linear-gradient(135deg, #BDC3C7 0%, #95A5A6 50%, #7F8C8D 100%);
    color: white;
}

/* Animation effects for dynamic weather conditions */
@keyframes lightning {
    0%, 90%, 100% { background: linear-gradient(135deg, #2C3E50 0%, #8E44AD 30%, #F39C12 70%, #E74C3C 100%); }
    5%, 15% { background: linear-gradient(135deg, #F7DC6F 0%, #F4D03F 30%, #F8C471 70%, #F39C12 100%); }
}

@keyframes wind-flow {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(3px); }
}

@keyframes tornado-spin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.02); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes hurricane-swirl {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.01); }
    50% { transform: rotate(180deg) scale(1.02); }
    75% { transform: rotate(270deg) scale(1.01); }
}

/* Weather icon container */
.weather-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Weather icon image styling */
.weather-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
}

/* Loading compass animation with enhanced effects */
.weather-icon img.loading {
    animation: compass-spin 2s linear infinite, loading-pulse 3s ease-in-out infinite;
    filter: brightness(1.1) saturate(0.8);
}

@keyframes compass-spin {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1); }
}

@keyframes loading-pulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Icon transition when loading completes */
.weather-icon img:not(.loading) {
    animation: icon-fade-in 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes icon-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Temperature display with white text and shadow for readability */
.weather-temp {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 1;
    transform: translateY(0);
}

/* Temperature loading state */
.weather-temp.loading {
    opacity: 0.5;
    animation: temp-shimmer 2s ease-in-out infinite;
}

@keyframes temp-shimmer {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(2px);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-2px);
    }
}

/* Weather description with white text and shadow */
.weather-desc {
    font-size: 0.85rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: capitalize;
    margin-bottom: 0;
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 1;
    transform: translateY(0);
}

/* Description loading state */
.weather-desc.loading {
    opacity: 0.4;
    animation: desc-fade 2.5s ease-in-out infinite;
}

@keyframes desc-fade {
    0%, 100% {
        opacity: 0.2;
        transform: translateY(1px);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-1px);
    }
}

/* Content fade-in animation when data loads */
.weather-temp:not(.loading),
.weather-desc:not(.loading) {
    animation: content-slide-in 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes content-slide-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}