:root { color-scheme: light; background: #aaa9a5; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; }
.scene {
  position: relative;
  width: 100%; height: 100svh; min-height: 280px;
  overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 50% 60%, #b7b6b2 0%, #aaa9a5 60%, #989793 100%);
}
#weather { position: absolute; inset: 0; width: 100%; height: 100%; }
.grain {
  pointer-events: none; position: absolute; inset: 0; z-index: 1; opacity: .095;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.75' d='M0 0h200v200H0z'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.title {
  position: absolute; z-index: 2; top: 50%; left: 50%;
  transform: translate(-50%, -50%); margin: 0;
  padding: 16px; white-space: nowrap; color: #20211f;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(29px, 3.2vw, 46px); font-weight: 400;
  line-height: 1.2; letter-spacing: -.055em;
  opacity: 0; animation: arrive 3.2s ease 1.1s forwards;
}
@keyframes arrive { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .title { animation: none; opacity: 1; } }