/* monopole.cloud - Neomorphic Weather Observatory */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#E8ECF1;color:#4A5568;font-family:'Karla',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden;min-height:100vh}

/* Cloud Form Background */
.cloud-forms{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cloud-blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:0;transition:opacity 3s ease}
.cloud-blob.visible{opacity:0.3}
.cloud-1{width:600px;height:600px;background:radial-gradient(circle,#A3BFFA 0%,#E8ECF1 40%,transparent 70%);top:-100px;right:-100px;animation:cloudDrift1 25s ease-in-out infinite}
.cloud-2{width:500px;height:500px;background:radial-gradient(circle,#A3BFFA 0%,#E8ECF1 40%,transparent 70%);top:50%;left:-150px;animation:cloudDrift2 20s ease-in-out infinite}
.cloud-3{width:400px;height:400px;background:radial-gradient(circle,#CBD5E0 0%,transparent 70%);bottom:10%;right:10%;animation:cloudDrift3 18s ease-in-out infinite}
@keyframes cloudDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,20px)}}
@keyframes cloudDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}
@keyframes cloudDrift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,25px)}}

/* Pill Navigation */
#pill-nav{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-30px);z-index:100;display:flex;gap:8px;padding:8px 16px;border-radius:32px;background:#E8ECF1;box-shadow:6px 6px 16px rgba(0,0,0,0.08),-6px -6px 16px rgba(255,255,255,0.6);opacity:0;transition:opacity 0.6s ease,transform 0.6s ease}
#pill-nav.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.pill-link{text-decoration:none;font-family:'Karla',sans-serif;font-size:14px;color:#4A5568;padding:8px 16px;border-radius:24px;transition:all 0.3s ease}
.pill-link:hover{color:#667EEA}
.pill-link.active{box-shadow:inset 3px 3px 6px rgba(0,0,0,0.06),inset -3px -3px 6px rgba(255,255,255,0.5);color:#667EEA;font-weight:400}

/* Hero */
#hero{height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1}
#hero-title{font-family:'Outfit',sans-serif;font-weight:500;font-size:52px;color:#2D3748;opacity:0;filter:blur(8px);transition:opacity 1.5s cubic-bezier(0.25,0.46,0.45,0.94),filter 1.5s cubic-bezier(0.25,0.46,0.45,0.94)}
#hero-title.visible{opacity:1;filter:blur(0)}
.hero-subtitle{font-family:'Karla',sans-serif;font-size:16px;color:#4A5568;margin-top:12px;opacity:0;transform:translateY(10px);transition:opacity 0.8s ease 0.5s,transform 0.8s ease 0.5s}
.hero-subtitle.visible{opacity:1;transform:translateY(0)}

/* Neo Panels */
.neo-panel{position:relative;z-index:1;margin:0 auto 160px;padding:48px;border-radius:16px;background:#E8ECF1;box-shadow:6px 6px 16px rgba(0,0,0,0.08),-6px -6px 16px rgba(255,255,255,0.6);opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease,box-shadow 0.7s ease}
.neo-panel.visible{opacity:1;transform:translateY(0)}
.wide-panel{width:80%;max-width:900px}
.narrow-panel{width:55%;max-width:600px}
.neo-panel h2{font-family:'Outfit',sans-serif;font-weight:500;font-size:30px;color:#2D3748;margin-bottom:20px}
.neo-panel p{margin-bottom:1.2em}

/* Section Icon */
.section-icon{margin-bottom:16px}

/* Neo Inset */
.neo-inset{background:#DDE3EA;box-shadow:inset 3px 3px 6px rgba(0,0,0,0.06),inset -3px -3px 6px rgba(255,255,255,0.5);border-radius:12px;padding:20px}

/* Data Grid */
.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:24px}
.data-card{text-align:center}
.data-label{display:block;font-family:'Fira Code',monospace;font-size:13px;color:#667EEA;margin-bottom:8px}
.data-value{display:block;font-family:'Outfit',sans-serif;font-weight:500;font-size:36px;color:#2D3748}
.data-unit{display:block;font-family:'Fira Code',monospace;font-size:12px;color:#4A5568;margin-top:4px}

/* Pulse Indicator */
.pulse-indicator{display:flex;align-items:center;gap:16px;margin-top:24px}
.pulse-ring{width:12px;height:12px;border-radius:50%;border:2px solid #667EEA;animation:pulseExpand 2s ease-out infinite}
.pulse-ring:nth-child(2){animation-delay:0.5s}
.pulse-ring:nth-child(3){animation-delay:1s}
@keyframes pulseExpand{0%{transform:scale(1);opacity:1}100%{transform:scale(2);opacity:0}}
.pulse-label{font-family:'Fira Code',monospace;font-size:13px;color:#667EEA}

/* Neo Toggle */
.neo-toggle{display:flex;align-items:center;gap:16px;margin-top:24px}
.toggle-label{font-family:'Karla',sans-serif;font-size:14px;color:#4A5568}
.toggle-track{width:48px;height:24px;border-radius:12px;background:#DDE3EA;box-shadow:inset 2px 2px 4px rgba(0,0,0,0.06),inset -2px -2px 4px rgba(255,255,255,0.5);position:relative;cursor:pointer}
.toggle-thumb{width:20px;height:20px;border-radius:50%;background:#667EEA;position:absolute;top:2px;left:2px;transition:transform 0.3s ease;box-shadow:2px 2px 4px rgba(0,0,0,0.1)}
.toggle-track.active .toggle-thumb{transform:translateX(24px)}

/* Fade separator */
.neo-panel+.neo-panel::before{content:'';display:block;width:60%;max-width:200px;height:1px;background:linear-gradient(90deg,transparent,#CBD5E0,transparent);margin:0 auto;position:absolute;top:-80px;left:50%;transform:translateX(-50%)}

/* Footer */
.neo-footer{text-align:center;padding:48px;position:relative;z-index:1}
.neo-footer p{font-family:'Karla',sans-serif;font-size:14px;color:#4A5568}

/* Responsive */
@media(max-width:768px){
    #hero-title{font-size:36px}
    .wide-panel,.narrow-panel{width:90%;max-width:none}
    .neo-panel{padding:32px 24px;margin-bottom:80px}
    .neo-panel h2{font-size:24px}
    #pill-nav{gap:4px;padding:6px 12px}
    .pill-link{font-size:12px;padding:6px 10px}
    .data-grid{grid-template-columns:repeat(2,1fr)}
}