/* Homepage orchard scene: four looks that follow the visitor's time zone, plus optional rain.
   Built from a still picture plus small moving layers, so the browser can animate them on the graphics card. */
:root{--sceneH:clamp(570px,56vw,660px);color-scheme:light}
html[data-phase="morning"]{--paper:#F6F0E4;--card:#FFFDF8;--ink:#1E2D3B;--muted:#4C5E6C;--line:#D9CDB4;--skytop:#FFD9A8;--rainsky:#9A9CA2;--raincl:#B4B6BC;color-scheme:light}
html[data-phase="day"],html:not([data-phase]){--paper:#EAF5FB;--card:#FFFDF8;--ink:#10304A;--muted:#456580;--line:#B9CFDD;--skytop:#86CCF6;--rainsky:#7E8E9D;--raincl:#9CABB8;color-scheme:light}
html[data-phase="dusk"]{--paper:#241840;--card:#32265A;--ink:#FFF3EA;--muted:#EBD3DD;--line:#5A4A85;--skytop:#34255A;--rainsky:#4C4663;--raincl:#675F82;color-scheme:dark}
html[data-phase="night"]{--paper:#080F23;--card:#121E42;--ink:#EAF0FF;--muted:#A9B8DC;--line:#2E3F73;--skytop:#070C22;--rainsky:#1B2238;--raincl:#2B3552;color-scheme:dark}
body{position:relative;overflow-x:hidden;background:var(--paper);transition:background-color 1.5s,color 1.5s}
.todscene{position:absolute;top:0;left:0;width:100%;height:var(--sceneH);z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(var(--skytop),var(--skytop)) top/100% 160px no-repeat}
.todscene .sbox{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}
.stage{position:absolute;left:0;top:0;width:1100px;height:560px;transform-origin:0 0;opacity:0;transition:opacity 2s ease}
.stage.on{opacity:1}
.stage .base{position:absolute;left:0;top:0;width:1100px;height:560px;display:block}
.stage .fxl{position:absolute;left:0;top:0;width:1100px;height:560px}
.stage .fade{position:absolute;left:0;top:430px;width:1100px;height:131px;background:var(--paper);transition:background-color 1.5s;-webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.45) 35%,rgba(0,0,0,.88) 70%,#000);mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.45) 35%,rgba(0,0,0,.88) 70%,#000)}
.stage .fx{position:absolute;pointer-events:none;will-change:transform,opacity}
.stage .glow{animation:pulse 5s ease-in-out infinite alternate}
.stage .rays{width:800px;height:800px;background:repeating-conic-gradient(from 0deg,rgba(var(--rc),.34) 0 6deg,rgba(var(--rc),0) 6deg 30deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 68%);mask-image:radial-gradient(circle,#000 0,transparent 68%);animation:spin 90s linear infinite}
.stage .tw{animation:tw 3.4s ease-in-out infinite alternate}.stage .t2{animation-duration:4.6s;animation-delay:-1.5s}
.stage .cl{animation:drift 38s ease-in-out infinite alternate}.stage .c2{animation-duration:52s;animation-direction:alternate-reverse}
.stage .ff{width:22px;height:22px;margin:-11px 0 0 -11px;background:radial-gradient(circle,#FFF3B0 0,#FFF3B0 2px,rgba(255,226,122,.35) 3.5px,rgba(255,226,122,0) 11px);animation:fl 9s ease-in-out infinite alternate}
.stage .f1{animation-duration:12s}.stage .f2{animation-duration:7s}
.stage .tree{position:absolute;transform-origin:50% 100%;will-change:transform;animation:sway 6s ease-in-out infinite alternate}
.stage .a1{animation-duration:7.3s;animation-delay:-2s}.stage .a2{animation-duration:5.4s;animation-delay:-4s}.stage .a3{animation-duration:8.1s;animation-delay:-1s}
@keyframes sway{from{transform:rotate(-1.3deg)}to{transform:rotate(1.3deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{from{transform:scale(.94);opacity:.8}to{transform:scale(1.1);opacity:1}}
@keyframes drift{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@keyframes tw{from{opacity:.35}to{opacity:1}}
@keyframes fl{0%{transform:translate(0,0);opacity:.2}50%{opacity:1}100%{transform:translate(18px,-14px);opacity:.3}}
.todscene.paused *,.todscene.paused .stage *{animation-play-state:paused!important}
.wrap{position:relative;z-index:1}
.wordmark,.nav a,.hero h1,.section-title{color:var(--ink);transition:color 1.5s}
.hero p{color:var(--muted);transition:color 1.5s}
#games.section-title{margin-top:max(40px,calc(var(--sceneH) - 300px))}
@media (max-width:700px){.todscene .sbox{-webkit-mask-image:linear-gradient(transparent,#000 60px);mask-image:linear-gradient(transparent,#000 60px)}}
/* rain: full grey overcast, no sun or moon (moving layers use transform only) */
.todscene .rain{position:absolute;inset:0;opacity:0;transition:opacity 1.6s;overflow:hidden;background:linear-gradient(180deg,var(--rainsky) 0,var(--rainsky) 56%,transparent 82%)}
.todscene .rcl{position:absolute;left:-30%;top:0;width:160%;height:62%;will-change:transform;background:radial-gradient(ellipse 22% 26% at 12% 30%,var(--raincl),transparent 70%),radial-gradient(ellipse 26% 30% at 38% 18%,var(--raincl),transparent 70%),radial-gradient(ellipse 24% 28% at 64% 34%,var(--raincl),transparent 70%),radial-gradient(ellipse 22% 24% at 88% 20%,var(--raincl),transparent 70%);animation:rdrift 60s ease-in-out infinite alternate}
@keyframes rdrift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.todscene .rs1,.todscene .rs2{position:absolute;left:0;width:100%;will-change:transform;background-repeat:repeat}
.todscene .rs1{top:-160px;height:calc(100% + 160px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg stroke='%23fff' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M20 10l-5 22M70 60l-5 22M120 20l-5 22M45 105l-5 22M100 120l-5 22M140 85l-5 22'/%3E%3C/g%3E%3C/svg%3E");background-size:160px 160px;animation:rf1 .55s linear infinite}
.todscene .rs2{top:-240px;height:calc(100% + 240px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg stroke='%23fff' stroke-opacity='.4' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M30 40l-4 16M130 10l-4 16M200 90l-4 16M80 150l-4 16M170 190l-4 16M20 200l-4 16'/%3E%3C/g%3E%3C/svg%3E");background-size:240px 240px;animation:rf2 .8s linear infinite}
@keyframes rf1{to{transform:translateY(160px)}}
@keyframes rf2{to{transform:translateY(240px)}}
html[data-rain] .todscene .rain{opacity:1}
html:not([data-rain]) .todscene .rain *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.stage *,.todscene .rain *{animation:none!important}.stage{transition:none}}