/* WeatherLabs — the home page hero: a dark "space" scene in both themes with
   the spinning Earth, live 850 hPa height contours, stars and the
   handwritten "Today's forecast" note. */

.hero { position: relative; min-height: max(100vh, 680px); min-height: max(100svh, 680px); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0a0a0c; padding: calc(var(--nav-h) + 24px) 0 96px; }
.hero-earth { position: absolute; width: min(90vw, 760px); height: min(90vw, 760px); border-radius: 50%; background: radial-gradient(circle at 35% 40%, #1a3a5c 0%, #0d1f33 25%, #0a1520 45%, #050a0f 60%, #000 80%); box-shadow: inset -80px -20px 120px rgba(0, 0, 0, .9), inset 40px 30px 80px rgba(74, 158, 237, .06), 0 0 200px rgba(74, 158, 237, .03); animation: earthGlow 8s ease-in-out infinite alternate; overflow: hidden; }
.hero-earth canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.hero-earth::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset -90px -30px 140px rgba(0, 0, 0, .92), inset 30px 25px 90px rgba(74, 158, 237, .10); pointer-events: none; }
.hero-atmosphere { position: absolute; width: min(94vw, 800px); height: min(94vw, 800px); border-radius: 50%; border: 1px solid rgba(74, 158, 237, .06); }
.hero-stars { position: absolute; inset: 0; }
.star { position: absolute; width: 1px; height: 1px; background: #e8e6e1; border-radius: 50%; opacity: .3; animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .6; } }
@keyframes earthGlow {
  0% { box-shadow: inset -80px -20px 120px rgba(0, 0, 0, .9), inset 40px 30px 80px rgba(74, 158, 237, .06), 0 0 200px rgba(74, 158, 237, .02); }
  100% { box-shadow: inset -80px -20px 120px rgba(0, 0, 0, .9), inset 40px 30px 80px rgba(74, 158, 237, .1), 0 0 240px rgba(74, 158, 237, .04); }
}
/* handwritten note + arrow pointing at the globe (R = globe radius) */
.hero-note { --R: min(45vw, 380px); position: absolute; z-index: 3; pointer-events: none; width: 210px; height: 118px; left: calc(50% + var(--R) * .97); bottom: calc(50% - var(--R) * .30); transform: rotate(-3deg); transform-origin: 0 100%; color: #ffd98a; }
.hero-note span { position: absolute; left: 34px; top: 0; font-family: var(--hand); font-weight: 600; font-size: 2rem; line-height: 1; white-space: nowrap; transform: rotate(-4deg); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.hero-note svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .6)); }
@media (max-width: 1000px) {
  .hero-note { width: 120px; height: 90px; left: calc(50% + var(--R) * .44); bottom: calc(50% + var(--R) * .6); }
  .hero-note span { font-size: 1.5rem; left: 20px; white-space: normal; width: 90px; line-height: .95; }
}
.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); max-width: 920px; }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--text2); border: 1px solid var(--line2); padding: .45rem .95rem; border-radius: 99px; margin-bottom: 2rem; background: rgba(10, 10, 12, .4); }
.hero-title { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 4.7rem); font-weight: 300; letter-spacing: .03em; line-height: 1.05; margin-bottom: 1.3rem; }
.hero-title span { color: var(--accent); font-style: italic; }
.hero-ask { font-family: var(--serif); font-size: clamp(1.6rem, 3.6vw, 2.4rem); color: var(--text); font-weight: 300; letter-spacing: .02em; max-width: 880px; margin: 0 auto 1rem; line-height: 1.2; text-wrap: balance; }
.hero-tagline { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--text2); font-weight: 300; max-width: 640px; margin: 0 auto 2.4rem; line-height: 1.7; }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-contours { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; margin-top: 2.2rem; padding: .4rem .95rem; border-radius: 99px; background: rgba(10, 10, 12, .5); font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; line-height: 1.5; color: var(--text3); }
.hero-contours-time { min-width: 28ch; text-align: left; color: var(--text2); }
.hero-scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--text3); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; animation: float 3s ease-in-out infinite; z-index: 2; min-height: 44px; }
.hero-scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, var(--text3)); }
@keyframes float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
@media (max-width: 640px) { .hero-cta .btn { width: 100%; } .hero-contours-time { min-width: 0; } }
/* small phones: the note would sit on top of the headline, so it steps aside */
@media (max-width: 480px) { .hero-note { display: none; } }