@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&family=Fraunces:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

:root {
  --ocean-deep: #020c14;
  --ocean: #051828;
  --sea: #082438;
  --blue: #0a6abf;
  --blue-glow: rgba(10,106,191,0.12);
  --blue-border: rgba(10,160,220,0.2);
  --teal: #0fa8b8;
  --green: #2ab86a;
  --green-dim: rgba(42,184,106,0.12);
  --sky: #b4e4f8;
  --white: #e8f6ff;
  --text: #4a8aaa;
  --text-bright: #a0d4e8;
  --text-dim: #1a4060;
  --border: rgba(10,160,220,0.18);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body { font-family:'Nunito',sans-serif; background:var(--ocean-deep); color:var(--text); min-height:100vh; overflow-x:hidden; }

#earth-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

body::before {
  content:''; position:fixed; inset:0;
  background: radial-gradient(ellipse 60% 50% at 50% -5%, rgba(10,106,191,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(42,184,106,0.05) 0%, transparent 50%);
  z-index:1; pointer-events:none;
}

.wrap { position:relative; z-index:2; max-width:1040px; margin:0 auto; padding:0 28px 90px; }

/* ── HERO ── */
.hero { padding:70px 0 56px; display:grid; grid-template-columns:1fr 280px; gap:44px; align-items:center; border-bottom:1px solid var(--border); margin-bottom:58px; }
.hero-tag { font-size:0.63rem; font-weight:600; letter-spacing:5px; text-transform:uppercase; color:var(--teal); opacity:0.65; margin-bottom:14px; }
.hero h1 { font-family:'Fraunces',serif; font-size:clamp(4rem,11vw,8rem); font-weight:700; line-height:0.85; color:var(--white); letter-spacing:-2px; }
.hero h1 span { display:block; font-size:0.22em; font-weight:300; font-style:italic; letter-spacing:4px; color:var(--teal); margin-top:10px; font-family:'Fraunces',serif; }
.hero-desc { font-size:0.96rem; line-height:1.85; color:var(--text); font-weight:300; margin-top:18px; }

/* ── Earth sphere ── */
#earth-sphere {
  width:260px; height:260px; border-radius:50%; position:relative; overflow:hidden;
  background: radial-gradient(circle at 38% 32%, #60c8f0 0%, #1880c0 30%, #0a50a0 55%, #042060 80%, #010820 100%);
  box-shadow: 0 0 50px rgba(10,100,180,0.3), 0 0 100px rgba(10,100,160,0.15), inset -30px -20px 50px rgba(0,0,0,0.45);
}

#earth-sphere::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 30% at 55% 40%, rgba(42,184,106,0.7) 0%, transparent 50%),
    radial-gradient(ellipse 40% 25% at 30% 65%, rgba(42,184,106,0.5) 0%, transparent 45%),
    radial-gradient(ellipse 20% 15% at 70% 70%, rgba(42,160,80,0.6) 0%, transparent 40%);
}

/* Cloud streaks */
#earth-sphere::after {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'%3E%3Cellipse cx='80' cy='60' rx='60' ry='12' fill='rgba(255,255,255,0.2)'/%3E%3Cellipse cx='180' cy='100' rx='50' ry='10' fill='rgba(255,255,255,0.15)'/%3E%3Cellipse cx='120' cy='160' rx='70' ry='14' fill='rgba(255,255,255,0.18)'/%3E%3C/svg%3E");
}

.atmo-glow {
  position:absolute; inset:-8px; border-radius:50%;
  background: radial-gradient(circle, transparent 48%, rgba(100,200,255,0.08) 55%, rgba(100,200,255,0.04) 65%, transparent 70%);
  pointer-events:none;
}

/* ── Bio stats ── */
.bio-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--border); border-radius:3px; overflow:hidden; margin-bottom:56px; }
.bs { padding:20px 14px; background:var(--ocean); border-right:1px solid var(--border); transition:background 0.2s; }
.bs:last-child { border-right:none; }
.bs:hover { background:var(--blue-glow); }
.bs-label { font-size:0.58rem; letter-spacing:3px; text-transform:uppercase; color:var(--teal); opacity:0.65; margin-bottom:7px; font-weight:700; }
.bs-value { font-family:'Fraunces',serif; font-size:1.3rem; color:var(--white); line-height:1.1; }
.bs-unit { font-size:0.65rem; color:var(--text-dim); }

/* ── Sections ── */
.section { margin-bottom:56px; opacity:0; transform:translateY(18px); transition:opacity 0.65s,transform 0.65s; }
.section.visible { opacity:1; transform:none; }
.sh { display:flex; align-items:baseline; gap:14px; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.sn { font-size:0.6rem; letter-spacing:3px; text-transform:uppercase; color:var(--teal); opacity:0.5; font-weight:700; }
.section h2 { font-family:'Fraunces',serif; font-size:1.65rem; font-weight:700; color:var(--white); }
p { font-size:0.95rem; line-height:1.85; color:var(--text); font-weight:300; margin-bottom:14px; }
strong { color:var(--text-bright); font-weight:700; }

/* ── Spheres grid ── */
.spheres-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:18px; }
.sphere-card { background:var(--ocean); border:1px solid var(--border); border-radius:8px; padding:20px; transition:transform 0.2s,box-shadow 0.2s; }
.sphere-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(10,106,191,0.12); }
.sphere-icon { font-size:1.5rem; margin-bottom:8px; }
.sphere-card h3 { font-size:0.85rem; font-weight:700; color:var(--white); margin-bottom:7px; text-transform:uppercase; letter-spacing:0.5px; }
.sphere-card p { font-size:0.8rem; margin:0; line-height:1.55; }

/* ── Biodiversity bar ── */
.biod-bar { margin-top:18px; }
.bd-row { display:grid; grid-template-columns:140px 1fr 80px; align-items:center; gap:12px; margin-bottom:10px; }
.bd-label { font-size:0.75rem; color:var(--text-bright); font-weight:600; }
.bd-track { height:6px; background:var(--sea); border-radius:3px; overflow:hidden; }
.bd-fill { height:100%; border-radius:3px; width:0; transition:width 1.2s cubic-bezier(.4,0,.2,1); }
.bd-val { font-size:0.72rem; color:var(--teal); font-weight:700; text-align:right; }

/* ── Geological timeline ── */
.geo-timeline { border-left:2px solid var(--border); padding-left:24px; margin-top:18px; }
.gt-item { position:relative; margin-bottom:22px; }
.gt-item::before { content:''; position:absolute; left:-30px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); }
.gt-era { font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--teal); margin-bottom:3px; font-weight:700; }
.gt-item h4 { font-size:0.9rem; color:var(--white); font-weight:600; margin-bottom:4px; }
.gt-item p { margin:0; font-size:0.83rem; }

/* ── Climate section ── */
.climate-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.clim-card { background:var(--ocean); border:1px solid var(--border); border-radius:6px; padding:20px; }
.clim-card h3 { font-size:0.88rem; font-weight:700; color:var(--green); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.5px; }
.clim-card p { margin:0; font-size:0.83rem; line-height:1.6; }

/* Footer */
.footer-band { margin-top:70px; border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-band span { font-size:0.6rem; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase; font-weight:600; }

@media(max-width:640px){ .hero{grid-template-columns:1fr;} #earth-sphere{width:170px;height:170px;margin:0 auto;} .climate-grid{grid-template-columns:1fr;} }