/* Loafr living landscape — pure CSS layers; scene.js sets time of day and parallax. */
.scene{position:fixed;inset:0;height:100vh;height:100lvh;z-index:-1;overflow:hidden;user-select:none;--px:0;--py:0;--s:0}
.scene>*,.scene .layer>*{position:absolute;pointer-events:none}
.scene .layer{inset:0;will-change:transform;transform:translate3d(calc(var(--px)*var(--dx,0px)),calc(var(--py)*var(--dy,0px) - var(--s)*var(--ds,0)*1px),0)}
.l-sky{--dx:-6px;--dy:-4px;--ds:.02}.l-mount{--dx:-10px;--dy:-5px;--ds:.035}.l-far{--dx:-16px;--dy:-7px;--ds:.06}.l-lake{--dx:-22px;--dy:-8px;--ds:.08}.l-near{--dx:-30px;--dy:-10px;--ds:.11}
:root{--fade:2.5s}

/* Sky */
.sky{inset:0;opacity:0;transition:opacity var(--fade) ease}
.sky.dawn{background:linear-gradient(#6F7FBE 0%,#C99BB4 38%,#F0A99C 62%,#FBD7A6 100%)}
.sky.day{background:linear-gradient(#5FA6D6 0%,#8EC3E2 35%,#C9E3F0 70%,#EAF3F6 100%)}
.sky.dusk{background:linear-gradient(#272B66 0%,#6A3F7E 30%,#C9667A 58%,#F6A65C 100%)}
.sky.night{background:linear-gradient(#060B22 0%,#111A42 45%,#24295C 80%,#33366A 100%)}
.scene[data-phase=dawn] .sky.dawn,.scene[data-phase=day] .sky.day,.scene[data-phase=dusk] .sky.dusk,.scene[data-phase=night] .sky.night{opacity:1}

/* Stars, shooting stars */
.stars{left:0;top:0;width:1px;height:1px;border-radius:50%;opacity:0;transition:opacity 3s;box-shadow:84.0vw 38.9vh 0 0 rgba(255,255,255,0.87),51.3vw 1.6vh 0 0 rgba(255,255,255,0.67),84.7vw 21.3vh 0 0 rgba(255,255,255,0.92),0.1vw 11.5vh 0 0 rgba(255,255,255,0.71),98.0vw 21.9vh 0 0 rgba(255,255,255,0.76),19.8vw 37.1vh 0 0 rgba(255,255,255,0.50),33.3vw 53.0vh 0 0 rgba(255,255,255,0.52),70.7vw 0.6vh 0 .6px rgba(255,255,255,0.89),17.8vw 30.8vh 0 .6px rgba(255,255,255,0.73),98.5vw 42.3vh 0 .6px rgba(255,255,255,0.80),11.7vw 23.1vh 0 0 rgba(255,255,255,0.45),86.4vw 53.6vh 0 0 rgba(255,255,255,1.00),2.0vw 10.3vh 0 0 rgba(255,255,255,0.47),14.6vw 24.3vh 0 0 rgba(255,255,255,0.87),32.9vw 16.3vh 0 0 rgba(255,255,255,0.49),20.9vw 35.0vh 0 0 rgba(255,255,255,0.78),37.2vw 24.9vh 0 .6px rgba(255,255,255,0.91),13.6vw 21.2vh 0 0 rgba(255,255,255,0.62),22.8vw 33.6vh 0 0 rgba(255,255,255,0.54),62.9vw 30.5vh 0 .6px rgba(255,255,255,0.94),60.4vw 23.2vh 0 0 rgba(255,255,255,0.51),51.2vw 14.0vh 0 .6px rgba(255,255,255,0.59),82.4vw 32.8vh 0 0 rgba(255,255,255,0.74),92.9vw 53.7vh 0 0 rgba(255,255,255,0.58),55.9vw 46.9vh 0 0 rgba(255,255,255,0.60),91.7vw 11.2vh 0 0 rgba(255,255,255,0.49),41.1vw 13.7vh 0 0 rgba(255,255,255,0.55),36.9vw 31.5vh 0 0 rgba(255,255,255,0.50),13.8vw 24.8vh 0 0 rgba(255,255,255,0.81),69.1vw 32.1vh 0 0 rgba(255,255,255,0.77),92.4vw 26.1vh 0 0 rgba(255,255,255,0.84),96.3vw 1.2vh 0 0 rgba(255,255,255,0.72),73.0vw 17.5vh 0 0 rgba(255,255,255,0.49),54.6vw 40.5vh 0 0 rgba(255,255,255,0.89),91.5vw 19.4vh 0 .6px rgba(255,255,255,0.95),87.1vw 22.9vh 0 0 rgba(255,255,255,0.92),57.3vw 34.4vh 0 .6px rgba(255,255,255,0.66),1.2vw 4.0vh 0 0 rgba(255,255,255,0.80),99.3vw 48.4vh 0 0 rgba(255,255,255,0.66),73.5vw 32.0vh 0 .6px rgba(255,255,255,0.70),54.1vw 28.5vh 0 0 rgba(255,255,255,0.62),8.8vw 1.2vh 0 0 rgba(255,255,255,0.72),61.5vw 50.6vh 0 0 rgba(255,255,255,0.94),36.8vw 7.9vh 0 0 rgba(255,255,255,0.74),75.4vw 18.8vh 0 .6px rgba(255,255,255,0.72),24.1vw 22.3vh 0 0 rgba(255,255,255,0.56),43.1vw 44.3vh 0 0 rgba(255,255,255,0.93),38.4vw 32.1vh 0 0 rgba(255,255,255,0.57),13.5vw 19.3vh 0 0 rgba(255,255,255,0.84),95.0vw 15.2vh 0 0 rgba(255,255,255,0.51),47.1vw 50.9vh 0 .6px rgba(255,255,255,0.66),52.0vw 37.0vh 0 .6px rgba(255,255,255,0.63),82.9vw 15.3vh 0 0 rgba(255,255,255,0.82),28.1vw 19.5vh 0 0 rgba(255,255,255,0.80),40.5vw 10.4vh 0 0 rgba(255,255,255,0.58),14.1vw 2.6vh 0 0 rgba(255,255,255,0.70),63.0vw 36.0vh 0 0 rgba(255,255,255,0.98),68.4vw 11.0vh 0 .6px rgba(255,255,255,0.59),71.4vw 41.5vh 0 0 rgba(255,255,255,0.55),27.2vw 19.0vh 0 0 rgba(255,255,255,0.67),79.2vw 49.8vh 0 0 rgba(255,255,255,0.68),89.3vw 21.3vh 0 .6px rgba(255,255,255,0.70),62.6vw 50.0vh 0 .6px rgba(255,255,255,0.75),65.3vw 27.6vh 0 0 rgba(255,255,255,0.71),65.1vw 11.3vh 0 0 rgba(255,255,255,0.57),90.0vw 53.9vh 0 0 rgba(255,255,255,0.75),79.1vw 17.6vh 0 0 rgba(255,255,255,0.64),8.3vw 24.2vh 0 .6px rgba(255,255,255,0.87),48.7vw 1.6vh 0 0 rgba(255,255,255,0.69),3.5vw 29.3vh 0 0 rgba(255,255,255,0.71),100.0vw 49.5vh 0 .6px rgba(255,255,255,0.97),49.3vw 52.2vh 0 0 rgba(255,255,255,0.87),43.9vw 30.7vh 0 0 rgba(255,255,255,0.74),84.4vw 30.8vh 0 0 rgba(255,255,255,0.82),95.5vw 47.9vh 0 0 rgba(255,255,255,0.62),14.1vw 30.0vh 0 0 rgba(255,255,255,0.77),20.1vw 29.5vh 0 0 rgba(255,255,255,0.78),2.8vw 53.3vh 0 .6px rgba(255,255,255,0.75),98.9vw 6.7vh 0 0 rgba(255,255,255,0.83),6.6vw 29.6vh 0 .6px rgba(255,255,255,0.96),80.0vw 22.2vh 0 0 rgba(255,255,255,0.71),12.7vw 23.9vh 0 .6px rgba(255,255,255,0.74),10.9vw 23.1vh 0 0 rgba(255,255,255,0.96),12.9vw 42.9vh 0 0 rgba(255,255,255,0.47),15.6vw 0.7vh 0 0 rgba(255,255,255,0.63),35.5vw 34.1vh 0 0 rgba(255,255,255,0.72),58.2vw 46.9vh 0 0 rgba(255,255,255,0.84),70.1vw 48.3vh 0 0 rgba(255,255,255,0.66),41.3vw 29.1vh 0 0 rgba(255,255,255,0.75),86.4vw 29.4vh 0 0 rgba(255,255,255,0.74),85.1vw 33.6vh 0 0 rgba(255,255,255,0.58),74.1vw 44.6vh 0 0 rgba(255,255,255,0.62),31.5vw 50.8vh 0 0 rgba(255,255,255,0.88),19.5vw 5.3vh 0 0 rgba(255,255,255,0.52),8.8vw 21.3vh 0 .6px rgba(255,255,255,0.91),42.2vw 43.4vh 0 0 rgba(255,255,255,0.56),62.8vw 43.9vh 0 0 rgba(255,255,255,0.56),68.2vw 50.1vh 0 0 rgba(255,255,255,0.51),50.6vw 41.7vh 0 0 rgba(255,255,255,0.89),48.2vw 1.3vh 0 .6px rgba(255,255,255,0.53),18.5vw 11.2vh 0 0 rgba(255,255,255,0.99),92.7vw 5.2vh 0 0 rgba(255,255,255,0.52),68.1vw 4.3vh 0 0 rgba(255,255,255,0.63),46.7vw 28.3vh 0 .6px rgba(255,255,255,0.57),37.3vw 34.9vh 0 0 rgba(255,255,255,0.91),18.1vw 25.0vh 0 0 rgba(255,255,255,0.67),19.5vw 9.1vh 0 0 rgba(255,255,255,0.63),8.5vw 46.3vh 0 .6px rgba(255,255,255,0.76),19.1vw 32.2vh 0 0 rgba(255,255,255,0.89),25.8vw 50.1vh 0 0 rgba(255,255,255,0.90)}
.stars.b{box-shadow:40.6vw 44.8vh 0 0 rgba(255,255,255,0.87),76.5vw 20.3vh 0 0 rgba(255,255,255,0.49),34.2vw 23.4vh 0 0 rgba(255,255,255,0.94),99.1vw 45.1vh 0 0 rgba(255,255,255,0.58),94.5vw 33.3vh 0 0 rgba(255,255,255,0.57),40.6vw 9.1vh 0 0 rgba(255,255,255,0.66),100.0vw 32.1vh 0 0 rgba(255,255,255,0.87),98.0vw 1.1vh 0 0 rgba(255,255,255,0.86),25.7vw 20.1vh 0 0 rgba(255,255,255,0.87),64.8vw 0.5vh 0 0 rgba(255,255,255,0.59),90.6vw 27.5vh 0 .6px rgba(255,255,255,0.98),56.8vw 49.8vh 0 .6px rgba(255,255,255,0.90),7.6vw 29.9vh 0 0 rgba(255,255,255,0.66),93.9vw 19.3vh 0 0 rgba(255,255,255,0.92),54.2vw 29.8vh 0 .6px rgba(255,255,255,0.97),42.1vw 26.3vh 0 0 rgba(255,255,255,0.65),28.6vw 32.8vh 0 0 rgba(255,255,255,0.81),74.8vw 1.3vh 0 0 rgba(255,255,255,0.77),63.3vw 20.4vh 0 .6px rgba(255,255,255,0.48),31.5vw 19.9vh 0 0 rgba(255,255,255,0.49),90.6vw 21.5vh 0 .6px rgba(255,255,255,0.59),75.5vw 2.3vh 0 0 rgba(255,255,255,0.97),72.3vw 23.4vh 0 0 rgba(255,255,255,0.78),11.5vw 31.2vh 0 .6px rgba(255,255,255,0.51),86.1vw 17.8vh 0 0 rgba(255,255,255,0.52),44.3vw 33.4vh 0 .6px rgba(255,255,255,0.78),64.0vw 34.1vh 0 0 rgba(255,255,255,0.88),53.1vw 49.9vh 0 0 rgba(255,255,255,0.85),23.8vw 5.7vh 0 0 rgba(255,255,255,0.88),62.5vw 18.0vh 0 0 rgba(255,255,255,0.79),72.5vw 35.0vh 0 0 rgba(255,255,255,0.80),75.3vw 9.5vh 0 0 rgba(255,255,255,0.73),65.3vw 9.8vh 0 0 rgba(255,255,255,0.80),0.9vw 13.0vh 0 0 rgba(255,255,255,0.79),10.2vw 27.1vh 0 0 rgba(255,255,255,0.87),91.3vw 8.0vh 0 0 rgba(255,255,255,0.80),37.3vw 23.9vh 0 0 rgba(255,255,255,0.64),49.4vw 6.7vh 0 0 rgba(255,255,255,0.89),44.7vw 41.1vh 0 0 rgba(255,255,255,0.69),74.7vw 19.5vh 0 0 rgba(255,255,255,0.65),65.4vw 49.5vh 0 0 rgba(255,255,255,0.61),75.9vw 41.3vh 0 0 rgba(255,255,255,0.69),36.9vw 4.9vh 0 0 rgba(255,255,255,0.49),8.3vw 28.2vh 0 .6px rgba(255,255,255,0.90),46.4vw 41.2vh 0 0 rgba(255,255,255,0.49),21.3vw 33.1vh 0 0 rgba(255,255,255,0.83),49.5vw 38.2vh 0 0 rgba(255,255,255,0.61),14.3vw 17.9vh 0 0 rgba(255,255,255,0.65),11.7vw 35.5vh 0 0 rgba(255,255,255,0.69),80.3vw 15.2vh 0 0 rgba(255,255,255,0.57),96.8vw 36.5vh 0 0 rgba(255,255,255,0.50),82.9vw 1.2vh 0 .6px rgba(255,255,255,0.77),79.6vw 36.9vh 0 0 rgba(255,255,255,0.89),54.1vw 41.8vh 0 0 rgba(255,255,255,0.55),75.9vw 44.0vh 0 0 rgba(255,255,255,0.90),22.1vw 2.9vh 0 0 rgba(255,255,255,0.76),96.6vw 32.6vh 0 .6px rgba(255,255,255,0.49),54.7vw 39.4vh 0 0 rgba(255,255,255,0.63),27.4vw 5.3vh 0 0 rgba(255,255,255,0.50),63.4vw 7.2vh 0 .6px rgba(255,255,255,0.58);animation:twinkle 4.5s ease-in-out infinite alternate}
.scene[data-phase=night] .stars{opacity:1}.scene[data-phase=dawn] .stars.a,.scene[data-phase=dusk] .stars.a{opacity:.3}
@keyframes twinkle{from{opacity:.15}to{opacity:1}}
.scene:not([data-phase=night]) .stars.b{animation:none;opacity:0}
.shoot{top:var(--t);left:var(--l);width:clamp(90px,10vw,160px);height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);rotate:-24deg;opacity:0;animation:shoot var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes shoot{0%,90%{opacity:0;translate:0 0}91%{opacity:1}100%{opacity:0;translate:-26vw 12vw}}
.scene:not([data-phase=night]) .shoot{display:none}

/* Sun, glow, rays, moon */
.sun,.moon,.rays,.glow{left:calc(var(--sx,.7)*100%);top:calc(var(--sy,.3)*100%);translate:-50% -50%;transition:left var(--fade) ease,top var(--fade) ease,opacity var(--fade)}
.sun{width:clamp(48px,6.4vw,92px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 38%,#FFF1BF,#F7CD5C 58%,#EEA93A);box-shadow:0 0 0 12px rgba(242,193,78,.16),0 0 0 30px rgba(242,193,78,.07),0 0 90px 30px rgba(255,214,120,.5)}
.scene[data-phase=dusk] .sun,.scene[data-phase=dawn] .sun{background:radial-gradient(circle at 40% 38%,#FFE2B0,#F59A52 62%,#E2603C);box-shadow:0 0 0 14px rgba(247,140,80,.18),0 0 110px 40px rgba(247,140,80,.55)}
.rays{width:170vmax;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,244,214,.20) 0 5deg,rgba(255,244,214,0) 5deg 16deg);-webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.45) 18%,transparent 52%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.45) 18%,transparent 52%);mix-blend-mode:soft-light;opacity:.55;animation:spin 240s linear infinite}
.scene[data-phase=dawn] .rays,.scene[data-phase=dusk] .rays{opacity:1;mix-blend-mode:screen}
.scene[data-phase=night] .rays{opacity:0}
@keyframes spin{to{rotate:360deg}}
.glow{top:58%;width:90vw;height:40vh;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,190,120,.55),rgba(255,190,120,0) 65%);opacity:0}
.scene[data-phase=dusk] .glow,.scene[data-phase=dawn] .glow{opacity:1}
.moon{left:calc(var(--mx,.3)*100%);top:calc(var(--my,.3)*100%);width:clamp(36px,4.6vw,66px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFFCEE,#EFE6C2 70%);box-shadow:0 0 0 14px rgba(240,232,190,.06),0 0 60px 16px rgba(240,232,190,.28);opacity:0}
.moon::after{content:"";position:absolute;width:22%;aspect-ratio:1;border-radius:50%;left:56%;top:52%;background:rgba(180,170,130,.35);box-shadow:-14px -12px 0 -2px rgba(180,170,130,.25),-4px 10px 0 -4px rgba(180,170,130,.25)}
.scene[data-phase=night] .moon{opacity:1}.scene[data-phase=night] .sun{opacity:0}

/* Clouds */
.cloud{left:0;top:var(--y);width:var(--w);height:calc(var(--w)*.32);background:linear-gradient(#fff 40%,#E3EDF3);border-radius:999px;opacity:var(--o,.94);filter:drop-shadow(0 8px 10px rgba(34,49,58,.08));animation:drift var(--d) linear infinite;animation-delay:var(--dl);transition:opacity var(--fade)}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:48%;aspect-ratio:1;left:14%;bottom:30%}.cloud::after{width:34%;aspect-ratio:1;left:50%;bottom:22%}
.scene[data-phase=dusk] .cloud{background:linear-gradient(#FFD3BD 30%,#C87D96)}
.scene[data-phase=dawn] .cloud{background:linear-gradient(#FFF0E6 30%,#E4B5C2)}
.scene[data-phase=night] .cloud{background:linear-gradient(#4A5288 20%,#2B315F);--o:.7}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(125vw)}}

/* Mountains with snow, then horizon haze */
.mount{left:-2%;width:104%;transition:background var(--fade)}
.mount.m1{bottom:40%;height:min(30%,40vw);clip-path:polygon(0.0% 100.0%,0.0% 68.4%,7.1% 38.8%,14.3% 76.8%,21.4% 10.9%,28.6% 62.1%,35.7% 10.7%,42.9% 77.3%,50.0% 42.1%,57.1% 54.3%,64.3% 57.1%,71.4% 81.9%,78.6% 40.0%,85.7% 71.5%,92.9% 14.2%,100.0% 53.5%,100.0% 100.0%);background:linear-gradient(#A7BDD3,#C7D7E3)}
.mount.m2{bottom:37%;height:min(22%,29vw);clip-path:polygon(0.0% 100.0%,0.0% 78.9%,10.0% 43.1%,20.0% 90.3%,30.0% 46.9%,40.0% 84.2%,50.0% 46.0%,60.0% 84.9%,70.0% 44.0%,80.0% 73.3%,90.0% 69.9%,100.0% 94.9%,100.0% 100.0%);background:linear-gradient(#93AEC6,#B7CCDA)}
.snow{left:-2%;bottom:40%;width:104%;height:min(30%,40vw);background:linear-gradient(#fff,#EEF4F8);transition:background var(--fade)}
.scene[data-phase=dawn] .mount.m1{background:linear-gradient(#A497C0,#C9AFC4)}.scene[data-phase=dawn] .mount.m2{background:linear-gradient(#8F86B0,#B49FBA)}.scene[data-phase=dawn] .snow{background:linear-gradient(#FFE9EC,#F7D2D8)}
.scene[data-phase=dusk] .mount.m1{background:linear-gradient(#6E5B8E,#9C6E92)}.scene[data-phase=dusk] .mount.m2{background:linear-gradient(#5A4A7E,#80608A)}.scene[data-phase=dusk] .snow{background:linear-gradient(#FFC6B8,#E99BA8)}
.scene[data-phase=night] .mount.m1{background:linear-gradient(#1F2850,#262E58)}.scene[data-phase=night] .mount.m2{background:linear-gradient(#192245,#1F284D)}.scene[data-phase=night] .snow{background:linear-gradient(#8F9BC8,#5C6898)}
.haze{left:0;right:0;top:40%;height:28%;background:linear-gradient(rgba(234,243,246,0),rgba(234,243,246,.75) 70%,rgba(234,243,246,0));transition:opacity var(--fade)}
.scene[data-phase=dawn] .haze{background:linear-gradient(rgba(251,215,166,0),rgba(251,215,166,.6) 70%,rgba(251,215,166,0))}
.scene[data-phase=dusk] .haze{background:linear-gradient(rgba(246,166,92,0),rgba(246,166,92,.45) 70%,rgba(246,166,92,0))}
.scene[data-phase=night] .haze{background:linear-gradient(rgba(51,54,106,0),rgba(51,54,106,.55) 70%,rgba(51,54,106,0))}

.snow.s0{clip-path:polygon(7.1% 38.8%,10.1% 54.8%,8.6% 51.8%,7.1% 55.8%,5.2% 52.8%,3.3% 54.8%)}
.snow.s1{clip-path:polygon(21.4% 10.9%,23.7% 26.9%,22.5% 23.9%,21.4% 27.9%,20.6% 24.9%,19.7% 26.9%)}
.snow.s2{clip-path:polygon(35.7% 10.7%,37.4% 26.7%,36.6% 23.7%,35.7% 27.7%,34.6% 24.7%,33.5% 26.7%)}
.snow.s3{clip-path:polygon(92.9% 14.2%,95.8% 30.2%,94.3% 27.2%,92.9% 31.2%,91.9% 28.2%,90.9% 30.2%)}

/* Far hills (gradient fills), tree lines, town, windmill */
.hill{border-radius:50%;transition:background var(--fade)}
.hill.far{left:-12%;width:58%;height:70%;top:50%;background:linear-gradient(#BFDDB7,#9CC495 30%)}
.hill.far3{left:62%;width:55%;height:72%;top:52%;background:linear-gradient(#C3DEBB,#A0C799 30%)}
.hill.far2{left:30%;width:52%;height:62%;top:57%;background:linear-gradient(#ACD0A4,#8DBA86 30%)}
.scene[data-phase=dawn] .hill{background:linear-gradient(#B9B1C9,#9F97B6 30%)}.scene[data-phase=dawn] .hill.far2{background:linear-gradient(#A7A0BE,#8F88AC 30%)}
.scene[data-phase=dusk] .hill{background:linear-gradient(#8A7397,#6E5C84 30%)}.scene[data-phase=dusk] .hill.far2{background:linear-gradient(#7A6590,#5E4F78 30%)}
.scene[data-phase=night] .hill{background:linear-gradient(#26345A,#1E2A48 30%)}.scene[data-phase=night] .hill.far2{background:linear-gradient(#21304F,#1A2640 30%)}
.trees{height:clamp(14px,3vh,30px);background:rgba(28,62,44,.38);transition:background var(--fade)}
.trees.t1{left:7%;width:20%;bottom:49.1%;clip-path:polygon(0.0% 100.0%,0.0% 80.4%,1.1% 64.1%,2.3% 76.8%,3.4% 17.7%,4.5% 79.9%,5.7% 30.3%,6.8% 84.2%,8.0% 32.4%,9.1% 86.5%,10.2% 18.5%,11.4% 86.1%,12.5% 38.4%,13.6% 89.2%,14.8% 40.0%,15.9% 84.2%,17.0% 23.6%,18.2% 78.4%,19.3% 19.0%,20.5% 89.8%,21.6% 63.5%,22.7% 74.1%,23.9% 7.5%,25.0% 89.4%,26.1% 13.1%,27.3% 72.3%,28.4% 52.7%,29.5% 73.6%,30.7% 34.9%,31.8% 81.7%,33.0% 56.5%,34.1% 72.2%,35.2% 1.6%,36.4% 74.7%,37.5% 50.4%,38.6% 74.5%,39.8% 26.8%,40.9% 73.5%,42.0% 52.0%,43.2% 81.0%,44.3% 14.0%,45.5% 75.2%,46.6% 21.6%,47.7% 76.8%,48.9% 41.1%,50.0% 79.7%,51.1% 43.1%,52.3% 89.0%,53.4% 46.2%,54.5% 80.6%,55.7% 17.3%,56.8% 89.8%,58.0% 12.4%,59.1% 70.2%,60.2% 10.7%,61.4% 85.9%,62.5% 16.7%,63.6% 73.1%,64.8% 27.3%,65.9% 75.2%,67.0% 53.0%,68.2% 82.7%,69.3% 23.2%,70.5% 80.7%,71.6% 12.0%,72.7% 70.0%,73.9% 64.3%,75.0% 86.4%,76.1% 38.1%,77.3% 84.3%,78.4% 51.7%,79.5% 79.4%,80.7% 57.0%,81.8% 87.1%,83.0% 26.4%,84.1% 78.3%,85.2% 35.5%,86.4% 86.5%,87.5% 4.1%,88.6% 80.5%,89.8% 58.6%,90.9% 76.2%,92.0% 65.8%,93.2% 76.1%,94.3% 3.4%,95.5% 77.2%,96.6% 32.2%,97.7% 77.9%,98.9% 4.8%,100.0% 79.2%,100.0% 100.0%)}
.trees.t3{left:89.5%;width:8%;bottom:47.4%;clip-path:polygon(0.0% 100.0%,0.0% 83.1%,2.8% 37.3%,5.6% 84.2%,8.3% 54.4%,11.1% 79.2%,13.9% 59.1%,16.7% 86.0%,19.4% 69.8%,22.2% 75.8%,25.0% 60.4%,27.8% 76.0%,30.6% 24.3%,33.3% 83.3%,36.1% 17.6%,38.9% 84.6%,41.7% 9.0%,44.4% 81.3%,47.2% 42.5%,50.0% 86.5%,52.8% 14.9%,55.6% 71.9%,58.3% 48.5%,61.1% 73.6%,63.9% 31.9%,66.7% 81.9%,69.4% 37.7%,72.2% 73.1%,75.0% 50.7%,77.8% 71.5%,80.6% 55.2%,83.3% 80.2%,86.1% 19.2%,88.9% 86.4%,91.7% 34.5%,94.4% 78.2%,97.2% 14.9%,100.0% 70.3%,100.0% 100.0%)}
.trees.t2{left:48%;width:15%;bottom:42.2%;clip-path:polygon(0.0% 100.0%,0.0% 89.6%,1.6% 31.5%,3.1% 82.2%,4.7% 29.7%,6.2% 76.8%,7.8% 53.3%,9.4% 77.6%,10.9% 4.8%,12.5% 86.5%,14.1% 35.5%,15.6% 85.3%,17.2% 7.1%,18.8% 77.1%,20.3% 24.7%,21.9% 84.3%,23.4% 6.4%,25.0% 84.3%,26.6% 23.2%,28.1% 88.9%,29.7% 8.9%,31.2% 71.7%,32.8% 8.9%,34.4% 83.9%,35.9% 59.4%,37.5% 77.2%,39.1% 41.8%,40.6% 89.5%,42.2% 5.6%,43.8% 80.9%,45.3% 67.6%,46.9% 75.3%,48.4% 25.2%,50.0% 86.4%,51.6% 44.6%,53.1% 86.5%,54.7% 5.5%,56.2% 74.8%,57.8% 40.4%,59.4% 73.7%,60.9% 37.4%,62.5% 70.6%,64.1% 3.4%,65.6% 88.8%,67.2% 69.7%,68.8% 83.4%,70.3% 13.8%,71.9% 81.8%,73.4% 17.2%,75.0% 74.0%,76.6% 0.7%,78.1% 77.7%,79.7% 6.4%,81.2% 80.4%,82.8% 7.8%,84.4% 76.6%,85.9% 25.6%,87.5% 83.4%,89.1% 1.7%,90.6% 82.0%,92.2% 69.0%,93.8% 82.5%,95.3% 18.5%,96.9% 85.0%,98.4% 34.1%,100.0% 79.7%,100.0% 100.0%)}
.scene[data-phase=night] .trees,.scene[data-phase=dusk] .trees{background:rgba(6,10,28,.42)}
.town{left:83%;bottom:47%;display:flex;align-items:flex-end;gap:3px;transform:scale(var(--ts,1));transform-origin:left bottom}
.town i{display:block;width:var(--w);height:var(--h2);background:#EEF2F3;border-radius:2px 2px 0 0;position:relative;transition:background var(--fade)}
.town i::before{content:"";position:absolute;left:3px;top:4px;width:3px;height:3px;background:#9DB2BE;box-shadow:6px 0 #9DB2BE,0 6px #9DB2BE,6px 6px #9DB2BE;transition:background var(--fade),box-shadow var(--fade)}
.town i.spire{width:6px;height:28px;border-radius:3px 3px 0 0}.town i.spire::before{display:none}
.town i.roof{border-radius:0;clip-path:polygon(0 35%,50% 0,100% 35%,100% 100%,0 100%)}
.scene[data-phase=night] .town i,.scene[data-phase=dusk] .town i{background:#3B4566}
.scene[data-phase=night] .town i::before,.scene[data-phase=dusk] .town i::before{background:#FFD36B;box-shadow:6px 0 #FFD36B,0 6px rgba(255,211,107,.3),6px 6px #FFD36B,0 0 6px 1px rgba(255,211,107,.6)}
.mill{left:80%;bottom:46.9%;width:clamp(9px,.9vw,13px);height:clamp(30px,3.2vw,44px)}
.mill .tower{position:absolute;inset:0;background:#F2F2EE;clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);transition:background var(--fade)}
.mill .blades{position:absolute;left:50%;top:6%;width:clamp(40px,4.4vw,62px);aspect-ratio:1;translate:-50% -50%;animation:spin 9s linear infinite}
.mill .blades::before,.mill .blades::after{content:"";position:absolute;left:46%;top:0;width:8%;height:100%;background:linear-gradient(#5B6B75 0 38%,transparent 38% 62%,#5B6B75 62%);border-radius:2px}
.mill .blades::after{rotate:90deg}
.mill .blades i{position:absolute;left:41%;top:41%;width:18%;aspect-ratio:1;border-radius:50%;background:#5B6B75}
.scene[data-phase=night] .mill .tower,.scene[data-phase=dusk] .mill .tower{background:#3B4566}
.scene[data-phase=night] .mill .blades::before,.scene[data-phase=night] .mill .blades::after{background:linear-gradient(#8A93B8 0 38%,transparent 38% 62%,#8A93B8 62%)}

/* Lake with shimmer and the sun's (or moon's) reflection */
.lake{left:14%;width:44%;top:67.5%;height:8.5%;border-radius:50%;overflow:hidden;background:linear-gradient(#7FB6D6,#4F92B8);transition:background var(--fade);box-shadow:inset 0 3px 6px rgba(255,255,255,.35)}
.lake::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.0) 0 5px,rgba(255,255,255,.22) 5px 6px);animation:ripple 5s linear infinite}
@keyframes ripple{to{background-position:0 22px}}
.lake .shine{position:absolute;top:0;bottom:0;left:calc((var(--sx,.5) - .14)/.44*100%);width:clamp(18px,2.6vw,40px);translate:-50% 0;background:repeating-linear-gradient(180deg,rgba(255,236,170,.95) 0 3px,rgba(255,236,170,0) 3px 7px);filter:blur(.5px);animation:shimmer 2.4s ease-in-out infinite alternate;transition:left var(--fade),opacity var(--fade)}
@keyframes shimmer{from{opacity:.55;scale:1 1}to{opacity:1;scale:1.3 1}}
.scene[data-phase=dawn] .lake{background:linear-gradient(#C7A9C1,#8E8FB8)}
.scene[data-phase=dusk] .lake{background:linear-gradient(#D7838A,#6E5C86)}
.scene[data-phase=night] .lake{background:linear-gradient(#22305E,#141D40)}
.scene[data-phase=night] .lake .shine{left:calc((var(--mx,.5) - .14)/.44*100%);background:repeating-linear-gradient(180deg,rgba(240,232,190,.75) 0 3px,rgba(240,232,190,0) 3px 7px)}
.boat{left:30%;top:69.6%;width:clamp(16px,1.6vw,24px);height:clamp(5px,.5vw,7px);background:#7A5C3A;border-radius:0 0 6px 6px;animation:rock 4s ease-in-out infinite alternate}
.boat::before{content:"";position:absolute;left:40%;bottom:100%;width:2px;height:260%;background:#5B4A3A}
.boat::after{content:"";position:absolute;left:calc(40% + 2px);bottom:110%;width:70%;height:240%;background:#F6F9FA;clip-path:polygon(0 0,100% 100%,0 100%)}
@keyframes rock{from{rotate:-3deg;translate:-4px 0}to{rotate:3deg;translate:4px 0}}
.scene[data-phase=night] .boat{filter:brightness(.5)}

/* Foreground hill with the road: one huge circle; trees and the car ride copies of it */
.ground{left:50%;top:76%;width:260vw;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:linear-gradient(#93C089,#76A86E 4%,#5F9159 12%);border:clamp(10px,1.3vw,16px) solid #3A4750;transition:background var(--fade)}
.ground::after{content:"";position:absolute;inset:calc(clamp(10px,1.3vw,16px)/-2 - 1px);border-radius:50%;border:2px dashed rgba(232,239,243,.75)}
.scene[data-phase=dawn] .ground{background:linear-gradient(#8BAF86,#6E9670 4%,#587F5C 12%)}
.scene[data-phase=dusk] .ground{background:linear-gradient(#6C8B6C,#557359 4%,#3F5A48 12%)}
.scene[data-phase=night] .ground{background:linear-gradient(#223047,#1A2638 4%,#121C2B 12%)}
.orbit,.post{left:50%;top:76%;width:260vw;aspect-ratio:1;translate:-50% 0}
.orbit{animation:orbit 38s linear infinite}
@keyframes orbit{from{rotate:-24deg}to{rotate:24deg}}
.post{rotate:var(--a)}
.post .tree{position:absolute;left:50%;top:0;translate:-50% -100%;width:var(--tw);height:calc(var(--tw)*1.5)}
.post .tree::before{content:"";position:absolute;left:44%;bottom:0;width:12%;height:30%;background:#6B4A2E}
.post .tree::after{content:"";position:absolute;left:0;right:0;top:0;height:78%;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 35% 30%,#8FC27F,#4F8A4A 70%);transition:filter var(--fade)}
.post .tree.pine::after{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(#5C9A5E,#3F7647)}
.scene[data-phase=night] .post .tree::after,.scene[data-phase=dusk] .post .tree::after{filter:brightness(.42) saturate(.6) hue-rotate(20deg)}
.scene[data-phase=night] .post .tree::before{filter:brightness(.4)}
.car{position:absolute;left:50%;top:0;width:clamp(36px,3.6vw,50px);height:clamp(14px,1.4vw,19px);translate:-50% calc(-100% + clamp(5px,.65vw,8px));background:linear-gradient(#3C86A8,#2B6E8C);border-radius:6px 9px 4px 4px}
.car::before{content:"";position:absolute;left:22%;bottom:92%;width:50%;height:75%;background:#2B6E8C;border-radius:6px 8px 0 0;box-shadow:inset 0 3px 0 -1px #2B6E8C,inset 4px 4px 0 1px #BFE0EE}
.car::after{content:"";position:absolute;left:14%;bottom:-32%;width:24%;aspect-ratio:1;border-radius:50%;background:#22313A;box-shadow:calc(clamp(36px,3.6vw,50px)*.5) 0 #22313A}
.car .beam{position:absolute;left:96%;top:10%;width:clamp(70px,9vw,130px);height:150%;background:linear-gradient(90deg,rgba(255,226,140,.8),rgba(255,226,140,0));clip-path:polygon(0 30%,100% 0,100% 100%,0 55%);opacity:0;transition:opacity 2s}
.car .tail{position:absolute;right:98%;top:22%;width:4px;height:30%;background:#FF5A4E;border-radius:2px;box-shadow:0 0 8px 2px rgba(255,90,78,.7);opacity:0;transition:opacity 2s}
.scene[data-phase=night] .car .beam,.scene[data-phase=dusk] .car .beam,.scene[data-phase=night] .car .tail,.scene[data-phase=dusk] .car .tail{opacity:1}

/* Fireflies */
.fly{left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#FFF2A0;box-shadow:0 0 10px 3px rgba(255,236,140,.8);opacity:0;animation:float var(--d) ease-in-out infinite alternate,blink calc(var(--d)/3) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes float{from{translate:0 0}to{translate:var(--fx,30px) var(--fy,-26px)}}
@keyframes blink{0%,40%{opacity:0}70%,100%{opacity:1}}
.scene:not([data-phase=night]) .fly{display:none}

/* Balloon, plane, birds */
.balloon{left:var(--bx,18%);top:18%;width:clamp(36px,3.6vw,56px);aspect-ratio:.82;animation:bob 7s ease-in-out infinite alternate,cross 150s linear infinite;animation-delay:0s,-50s}
.balloon .env{position:absolute;inset:0 0 22% 0;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;background:linear-gradient(90deg,#2B6E8C 0 28%,#F2C14E 28% 44%,#E6594F 44% 56%,#F2C14E 56% 72%,#2B6E8C 72%);box-shadow:inset -7px -5px 12px rgba(0,0,0,.22),inset 5px 4px 8px rgba(255,255,255,.25)}
.balloon .basket{position:absolute;left:38%;bottom:0;width:24%;height:13%;background:#7A5C3A;border-radius:2px}
.balloon .basket::before{content:"";position:absolute;left:10%;bottom:100%;width:80%;height:9px;border-left:1px solid #5B4A3A;border-right:1px solid #5B4A3A}
@keyframes bob{from{translate:0 0}to{translate:0 -16px}}
@keyframes cross{from{left:-10%}to{left:110%}}
.scene[data-phase=night] .balloon{filter:brightness(.5)}
.plane{top:13%;left:0;animation:fly 46s linear infinite;animation-delay:-12s}
.plane b{display:block;width:22px;height:5px;background:#F6F9FA;border-radius:3px 6px 6px 3px;position:relative}
.plane b::before{content:"";position:absolute;left:8px;top:-5px;width:5px;height:15px;background:#F6F9FA;border-radius:2px}
.plane b::after{content:"";position:absolute;right:100%;top:1px;width:clamp(120px,22vw,320px);height:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75))}
@keyframes fly{0%{transform:translateX(-40vw) translateY(10px)}55%{transform:translateX(130vw) translateY(-12px)}100%{transform:translateX(130vw) translateY(-12px)}}
.scene[data-phase=night] .plane b{background:#9AA6C9}.scene[data-phase=night] .plane b::before{background:#9AA6C9;box-shadow:0 10px 0 -1px #E6594F}
.birds{left:0;top:28%;animation:drift 70s linear infinite;animation-delay:-20s;display:flex;gap:14px}
.birds i{display:block;width:14px;height:6px;position:relative;translate:0 var(--o,0)}
.birds i::before,.birds i::after{content:"";position:absolute;top:0;width:8px;height:2px;background:#33424C;border-radius:2px;transform-origin:right center;animation:flap .7s ease-in-out infinite alternate}
.birds i::before{left:0}.birds i::after{right:0;transform-origin:left center;animation-name:flap2}
@keyframes flap{from{rotate:20deg}to{rotate:-15deg}}@keyframes flap2{from{rotate:-20deg}to{rotate:15deg}}
.scene[data-phase=night] .birds{display:none}

@media (max-width:760px){.town{--ts:.75;left:80%}.mill{left:74%}.balloon{top:30%}.rays{display:none}.lake{left:6%;width:58%}}
@media (prefers-reduced-motion:reduce){.scene *,.scene *::before,.scene *::after{animation:none!important}.scene .layer{transform:none}.orbit{rotate:-6deg}.balloon{left:20%}}

/* ---- The whole home page sits on the landscape ---- */
html:has(body.home){background:#8EC3E2}
body.home{background:transparent;min-height:100vh;display:flex;flex-direction:column}
body.home main{flex:1;padding:clamp(34px,6vw,80px) 0 clamp(120px,22vh,240px)}
/* page colours follow the time of day, not the system theme */
html[data-phase=day] body.home,html[data-phase=dawn] body.home{--ink:#22313A;--ink-soft:#4D5E69;--lake:#2B6E8C;--line:rgba(34,49,58,.14);--sky:#E8EFF3;--glass:rgba(246,249,250,.66);--glass-line:rgba(255,255,255,.7);--menu:rgba(246,249,250,.95);color-scheme:light}
html[data-phase=dusk] body.home,html[data-phase=night] body.home{--ink:#F2F5F8;--ink-soft:#C4CCD8;--lake:#8CCBEA;--line:rgba(255,255,255,.16);--sky:#151B2E;--glass:rgba(18,22,44,.55);--glass-line:rgba(255,255,255,.12);--menu:rgba(22,27,50,.95);color-scheme:dark}
html[data-phase=dusk] body.home{--glass:rgba(40,28,60,.5)}
body.home{color:var(--ink)}
body.home .top{background:var(--glass);border-bottom:1px solid var(--glass-line);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);transition:background 2.5s}
body.home .brand{color:var(--ink)}
body.home .lang{background:transparent}
body.home .strap.lede{margin:0 0 clamp(26px,4vw,46px);font-size:clamp(1.7rem,4.2vw,3.2rem);line-height:1.08;max-width:24ch;color:var(--ink);text-shadow:0 1px 18px rgba(255,255,255,.25);transition:color 2.5s}
html[data-phase=dusk] body.home .strap.lede,html[data-phase=night] body.home .strap.lede{text-shadow:0 2px 18px rgba(0,0,0,.35)}
body.home .strap.lede .strap2{display:block;font-size:max(.42em,1rem);margin-top:.6em;color:var(--ink-soft);line-height:1.4}
body.home .grid>li{background:var(--glass);border:1px solid var(--glass-line);border-radius:20px;padding:10px 10px 12px;backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);box-shadow:0 18px 40px -28px rgba(10,20,40,.55);transition:background 2.5s,transform .22s ease}
body.home .grid>li:has(.tile:not(.soon)):hover{transform:translateY(-3px)}
body.home .grid>li .tile:not(.soon):hover{transform:none}
body.home .tile .meta{padding:10px 4px 0}
body.home .tile+.details{margin-inline-start:4px}
body.home .chips button{background:var(--glass);backdrop-filter:blur(8px)}
body.home footer{background:var(--glass);border-top:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background 2.5s}
body.home footer a{color:var(--lake)}
@supports not (backdrop-filter:blur(1px)){html[data-phase=day] body.home,html[data-phase=dawn] body.home{--glass:rgba(246,249,250,.9)}html[data-phase=dusk] body.home,html[data-phase=night] body.home{--glass:rgba(18,22,44,.88)}}

/* Mini drive game */
body.home .mini{margin-top:clamp(40px,7vw,80px);background:var(--glass);border:1px solid var(--glass-line);border-radius:22px;padding:16px 18px 12px;backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);box-shadow:0 18px 40px -28px rgba(10,20,40,.55);transition:background 2.5s}
.mini-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mini-head h2{font-size:clamp(1.05rem,1.8vw,1.35rem);margin:0;flex:1 1 auto;color:var(--ink);font-variation-settings:"SOFT" 100,"opsz" 48}
.mini-score,.mini-best{direction:ltr;unicode-bidi:isolate}
.mini-score{font-variant-numeric:tabular-nums;font-size:1.05rem;color:var(--ink);min-width:6ch;text-align:end}
.mini-best{font-size:.85rem;color:var(--ink-soft)}
.mini-stage{position:relative;margin-top:8px;direction:ltr}
.mini canvas{display:block;width:100%;height:clamp(150px,18vw,190px);border-radius:14px;cursor:pointer;touch-action:manipulation;outline:none}
.mini canvas:focus,.mini canvas:focus-visible{outline:none}
.mini.kbd canvas:focus-visible{box-shadow:0 0 0 3px var(--sun)}
.mini-msg{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px 34px;pointer-events:none;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--ink);text-shadow:0 1px 10px rgba(255,255,255,.35)}
html[data-phase=night] .mini-msg,html[data-phase=dusk] .mini-msg{text-shadow:0 1px 10px rgba(0,0,0,.4)}
.mini-msg[hidden]{display:none}
.mini-help{margin:8px 2px 0;font-size:.82rem;color:var(--ink-soft)}
@media (hover:none){.mini-help{display:none}}