.greeting-banner{border:1px solid hsl(var(--border));border-radius:16px;flex-direction:column;justify-content:center;width:100%;min-height:160px;margin-bottom:8px;padding:24px 32px;display:flex;position:relative;overflow:hidden}.greeting-banner[data-sky=early-bird]{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 20%,#0f3460 40%,#e94560 70%,#f38181 100%)}.greeting-banner[data-sky=morning]{background:linear-gradient(135deg,#667eea 0%,#764ba2 30%,#f093fb 60%,#f5576c 100%)}.greeting-banner[data-sky=afternoon]{background:linear-gradient(135deg,#2196f3 0%,#21cbf3 40%,#00bcd4 70%,#4caf50 100%)}.greeting-banner[data-sky=evening]{background:linear-gradient(135deg,#141e30 0%,#243b55 25%,#e65c00 60%,#f9d423 100%)}.greeting-banner[data-sky=night-owl]{background:linear-gradient(135deg,#0c0c1d 0%,#1a1a3e 30%,#2d2d6e 60%,#0c0c1d 100%)}.greeting-banner[data-sky=night-owl]:before{content:"";pointer-events:none;z-index:1;background-image:radial-gradient(1px 1px at 10% 15%,#fffc 50%,#0000 0),radial-gradient(1px 1px at 25% 45%,#fff9 50%,#0000 0),radial-gradient(1.5px 1.5px at 40% 20%,#ffffffe6 50%,#0000 0),radial-gradient(1px 1px at 55% 60%,#ffffff80 50%,#0000 0),radial-gradient(1px 1px at 70% 30%,#ffffffb3 50%,#0000 0),radial-gradient(1.5px 1.5px at 85% 55%,#fffc 50%,#0000 0),radial-gradient(1px 1px at 15% 70%,#fff6 50%,#0000 0),radial-gradient(1px 1px at 50% 80%,#fff9 50%,#0000 0),radial-gradient(1px 1px at 90% 10%,#ffffffb3 50%,#0000 0),radial-gradient(1.5px 1.5px at 65% 85%,#ffffff80 50%,#0000 0),radial-gradient(1px 1px at 30% 90%,#fff9 50%,#0000 0),radial-gradient(1px 1px at 78% 72%,#fff6 50%,#0000 0);animation:4s ease-in-out infinite alternate twinkle;position:absolute;inset:0}@keyframes twinkle{0%{opacity:.6}to{opacity:1}}.greeting-text{z-index:5;max-width:70%;position:relative}.greeting-headline{color:#fff;text-shadow:0 2px 8px #0000004d;margin:0;font-size:1.5rem;font-weight:800;line-height:1.3;transition:opacity .4s,transform .4s}.greeting-subtext{color:#ffffffd9;text-shadow:0 1px 4px #0003;margin:6px 0 0;font-size:.875rem;font-weight:500;transition:opacity .4s,transform .4s}.greeting-text-fade-in{opacity:1;transform:translateY(0)}.greeting-text-fade-out{opacity:0;transform:translateY(-4px)}.road-scene{z-index:3;height:40px;position:absolute;bottom:0;left:0;right:0}.road-surface{background:#2c2c2c;border-top:2px solid #555;height:28px;position:absolute;bottom:0;left:0;right:0}.road-edge-top{background:#888;height:2px;position:absolute;top:0;left:0;right:0}.lane-dashes{background:repeating-linear-gradient(90deg,#f5c518 0 30px,#0000 30px 60px);width:200%;height:3px;animation:8s linear infinite dashScroll;position:absolute;top:50%;left:0;transform:translateY(-50%)}.road-scene[data-cruise=true] .lane-dashes{animation-duration:20s}@keyframes dashScroll{0%{transform:translateY(-50%)translate(0)}to{transform:translateY(-50%)translate(-50%)}}.road-edge-line{background:#fff;height:2px;position:absolute;left:0;right:0}.road-edge-line.top{top:2px}.road-edge-line.bottom{bottom:0}.truck-container{z-index:4;filter:drop-shadow(0 2px 6px #0006);transition:left 60s linear;position:absolute;bottom:18px}.truck-svg{width:80px;height:auto;animation:1.2s ease-in-out infinite truckBounce}.road-scene[data-cruise=true] .truck-svg{animation-duration:2.4s}@keyframes truckBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.weather-badge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ffffffe6;z-index:6;background:#ffffff1f;border:1px solid #ffffff26;border-radius:20px;align-items:center;gap:4px;padding:4px 12px;font-size:.75rem;font-weight:500;display:inline-flex;position:absolute;top:16px;right:16px}.weather-sun{z-index:2;pointer-events:none;background:radial-gradient(circle,#fcd34d 30%,#f59e0b 60%,#0000 70%);border-radius:50%;width:40px;height:40px;animation:4s ease-in-out infinite alternate sunPulse;position:absolute;top:12px;right:60px;box-shadow:0 0 20px #fcd34d99,0 0 50px #f59e0b4d,0 0 80px #f59e0b26}@keyframes sunPulse{0%{transform:scale(1);box-shadow:0 0 20px #fcd34d99,0 0 50px #f59e0b4d}to{transform:scale(1.08);box-shadow:0 0 30px #fcd34dcc,0 0 70px #f59e0b66}}.weather-moon{z-index:2;pointer-events:none;background:#e8e0c8;border-radius:50%;width:36px;height:36px;animation:5s ease-in-out infinite alternate moonGlow;position:absolute;top:12px;right:60px;box-shadow:inset -10px -2px #00000026,0 0 15px #e8e0c866,0 0 40px #e8e0c826}@keyframes moonGlow{0%{box-shadow:inset -10px -2px #00000026,0 0 15px #e8e0c866,0 0 40px #e8e0c826}to{box-shadow:inset -10px -2px #00000026,0 0 25px #e8e0c880,0 0 60px #e8e0c840}}.weather-clouds{z-index:2;pointer-events:none;position:absolute;inset:0;overflow:hidden}.cloud{filter:blur(2px);background:#ffffff2e;border-radius:50px;position:absolute}.cloud:before,.cloud:after{content:"";background:inherit;border-radius:50%;position:absolute}.cloud-1{width:100px;height:28px;animation:25s linear infinite cloudDrift;top:15%;left:-120px}.cloud-1:before{width:44px;height:44px;top:-20px;left:18px}.cloud-1:after{width:34px;height:34px;top:-14px;left:52px}.cloud-2{opacity:.7;width:80px;height:22px;animation:35s linear -10s infinite cloudDrift;top:35%;left:-100px}.cloud-2:before{width:36px;height:36px;top:-16px;left:14px}.cloud-2:after{width:28px;height:28px;top:-10px;left:42px}.cloud-3{opacity:.5;width:120px;height:32px;animation:30s linear -18s infinite cloudDrift;top:10%;left:-140px}.cloud-3:before{width:50px;height:50px;top:-24px;left:24px}.cloud-3:after{width:40px;height:40px;top:-16px;left:62px}@keyframes cloudDrift{0%{transform:translate(0)}to{transform:translate(calc(100vw + 200px))}}.weather-rain{z-index:2;pointer-events:none;background-image:linear-gradient(#0000 0%,#96b4dc40 100%);position:absolute;inset:0;overflow:hidden}.weather-rain:before{content:"";background-image:repeating-linear-gradient(90deg,#0000,#0000 7px,#b4d2f026 7px 8px);animation:.8s linear infinite rainFall;position:absolute;inset:-50% 0 0}@keyframes rainFall{0%{transform:translateY(-20%)rotate(4deg)}to{transform:translateY(50%)rotate(4deg)}}.weather-snow{z-index:2;pointer-events:none;position:absolute;inset:0;overflow:hidden}.weather-snow:before,.weather-snow:after{content:"";background-image:radial-gradient(2px 2px at 20% 30%,#fffc 50%,#0000 0),radial-gradient(2px 2px at 40% 60%,#fff9 50%,#0000 0),radial-gradient(1.5px 1.5px at 60% 20%,#ffffffb3 50%,#0000 0),radial-gradient(2px 2px at 80%,#ffffff80 50%,#0000 0),radial-gradient(1.5px 1.5px at 10% 70%,#fff9 50%,#0000 0),radial-gradient(2px 2px at 50% 90%,#fff6 50%,#0000 0),radial-gradient(1.5px 1.5px at 70% 10%,#ffffffb3 50%,#0000 0),radial-gradient(2px 2px at 90% 80%,#ffffff80 50%,#0000 0);background-size:200px 200px;animation:6s linear infinite snowFall;position:absolute;inset:-100% 0 0}.weather-snow:after{background-size:150px 150px;animation-duration:8s;animation-delay:-3s}@keyframes snowFall{0%{transform:translateY(-50%)}to{transform:translateY(50%)}}.weather-lightning{z-index:2;pointer-events:none;animation:6s ease-in-out infinite lightningFlash;position:absolute;inset:0}@keyframes lightningFlash{0%,89%,91%,93%,to{background:0 0}90%{background:#ffffff26}92%{background:#ffffff14}}@media (max-width:640px){.greeting-banner{border-radius:12px;min-height:140px;padding:20px}.greeting-text{max-width:100%}.greeting-headline{font-size:1.15rem}.greeting-subtext{font-size:.75rem}.truck-svg{width:56px}.road-scene{height:32px}.road-surface{height:22px}}