/* ============================================
   BASE STYLES - Colors, Fonts, Animations
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

   /* Global Transitions */
   * {
       transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   body {
       font-family: 'Inter', sans-serif;
       background: linear-gradient(180deg, 
           #87CEEB 0%,
           #98D8E8 20%,
           #B0E2F5 40%,
           #E0F4FF 70%,
           #FFF8E7 100%
       );
       min-height: 100vh;
       overflow-x: hidden;
   }
   
   /* Typography */
   .logo-text {
       font-weight: 800;
       font-size: 2rem;
       letter-spacing: -0.02em;
       background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   
   .logo-live {
       font-weight: 300;
       font-size: 1.2rem;
       letter-spacing: 0.15em;
       color: #FFA500;
   }
   
   .temperature {
       font-size: 7rem;
       font-weight: 200;
       line-height: 1;
       color: #1E3A8A;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
   }
   
   .temperature.expanded {
       font-size: 5rem;
   }
   
   .weather-condition {
       font-size: 1.5rem;
       font-weight: 500;
       color: #3B82F6;
   }
   
   .metric-label {
       font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 0.1em;
       color: #64748B;
       font-weight: 600;
   }
   
   .metric-value {
       font-size: 1.75rem;
       font-weight: 600;
       color: #1E293B;
   }
   
   .section-title {
       font-size: 1.5rem;
       font-weight: 700;
       color: #1E3A8A;
       letter-spacing: -0.01em;
   }
   
   /* Animations */
   @keyframes glow {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.8; }
   }
   
   @keyframes slideInRight {
       from {
           opacity: 0;
           transform: translateX(50px);
       }
       to {
           opacity: 1;
           transform: translateX(0);
       }
   }
   
   @keyframes slideInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   @keyframes fadeOut {
       from {
           opacity: 1;
           transform: scale(1);
       }
       to {
           opacity: 0;
           transform: scale(0.95);
       }
   }
   
   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: scale(0.95);
       }
       to {
           opacity: 1;
           transform: scale(1);
       }
   }
   
   .sun-glow {
       animation: glow 3s ease-in-out infinite;
   }
   
   .fade-out {
       animation: fadeOut 0.4s ease-out forwards;
   }
   
   .fade-in {
       animation: fadeIn 0.5s ease-out forwards;
   }
   
   .slide-in {
       animation: slideInRight 0.6s ease-out forwards;
   }
   
   .slide-in-up {
       animation: slideInUp 0.6s ease-out forwards;
   }
   
   /* Utility Classes */
   .hidden-view {
       opacity: 0;
       pointer-events: none;
       position: absolute;
   }
   
   .logo-icon {
       filter: drop-shadow(0 2px 4px rgba(30, 58, 138, 0.2));
   }