html,body{margin:0;width:100%;height:100%;min-height:100%;background:#0b1420}
*{box-sizing:border-box}
body{width:100vw;height:100vh;height:100svh;min-height:100vh;min-height:100svh;overflow:hidden}
.threshold{
  --sky-top:#132038;--sky-mid:#2a3d54;--sky-bottom:#91746e;
  --hill-a:#20392f;--hill-b:#172c24;--ground:#263a2f;
  --tree:#315b47;--tree-hi:#4d7659;--trunk:#5a4a3d;
  --wall-a:#c4b7a0;--wall-b:#9a8d79;--roof-a:#596169;--roof-b:#343a40;
  --window-core:#ffd796;--window-edge:#a9683b;--lamp:#ffc36f;
  position:relative;width:100vw;height:100vh;height:100svh;min-height:0;overflow:hidden;isolation:isolate;background:#0b1420
}
.threshold::before{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,transparent 36%,rgba(6,11,16,.2) 86%);box-shadow:inset 0 0 140px rgba(0,0,0,.18)}
.threshold::after{content:"";position:absolute;inset:0;z-index:21;pointer-events:none;opacity:.12;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.16) 0 1px,transparent 1.4px),radial-gradient(circle at 74% 61%,rgba(255,255,255,.1) 0 1px,transparent 1.4px);background-size:23px 25px,31px 35px;mix-blend-mode:soft-light}
.scene{position:absolute;inset:0;width:100%;height:100vh;height:100svh;min-width:100%;min-height:100vh;min-height:100svh;display:block}
.sky-top-stop{stop-color:var(--sky-top)}.sky-mid-stop{stop-color:var(--sky-mid)}.sky-bottom-stop{stop-color:var(--sky-bottom)}
.wall-light-stop{stop-color:var(--wall-a)}.wall-shadow-stop{stop-color:var(--wall-b)}
.roof-light-stop{stop-color:var(--roof-a)}.roof-dark-stop{stop-color:var(--roof-b)}
.window-core-stop{stop-color:var(--window-core);stop-opacity:.92}.window-edge-stop{stop-color:var(--window-edge);stop-opacity:.55}
.scene-stars{fill:#fff3da;opacity:.25}.scene-stars circle{animation:twinkle 6s ease-in-out infinite}.scene-stars circle:nth-child(3n){animation-delay:-2s}.scene-stars circle:nth-child(4n){animation-delay:-4s}
.scene-moon{fill:#f4e7ca;opacity:.28}.scene-moon .moon-cut{fill:var(--sky-top)}
.scene-cloud{fill:rgba(255,255,255,.07);filter:blur(7px);animation:cloud-drift 58s linear infinite}.cloud-two{animation-delay:-31s;animation-duration:72s}
.far-hill.hill-one{fill:var(--hill-a);opacity:.8}.far-hill.hill-two{fill:var(--hill-b);opacity:.9}.scene-ground{fill:var(--ground)}
.tree-trunk,.tree-branch{fill:var(--trunk)}
.tree-crown{fill:var(--tree);transform-origin:center bottom;animation:tree-sway 9s ease-in-out infinite}.tree-crown ellipse:nth-child(even){fill:var(--tree-hi);opacity:.74}.crown-b{animation-delay:-4.5s}
.house-shadow{fill:rgba(0,0,0,.18);filter:blur(13px)}.chimney{fill:#66594f}.chimney-cap{fill:#3d3b3a}.window-frame{fill:#3d3935}
.porch-arch{fill:none;stroke:#6e5e4f;stroke-width:15;stroke-linecap:round;opacity:.86}.porch-post{fill:#6f5e4f}
.door-frame{fill:#625247}.door-face{fill:#242322}.door-panel{fill:none;stroke:#7f6a59;stroke-width:2}.door-knob{fill:#d0aa67;filter:drop-shadow(0 0 5px rgba(208,170,103,.5))}
.lamp-halo{fill:rgba(255,195,111,.34)}.lamp{fill:var(--lamp)}.step-one{fill:#867663}.step-two{fill:#665a4c}
.walkway{fill:#8d8273;opacity:.58}.shrub{fill:#365a44}.shrub-right{fill:#31523e}.flowers{fill:#e9cbd4}
.house > :not(.door-entry){pointer-events:none}
.door-entry{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline:none}
.door-hitbox{fill:rgba(255,255,255,.001);pointer-events:all}
.door-entry .door-visual{pointer-events:none}
.door-entry .door-face{transition:filter .22s ease,fill .22s ease}
.door-entry:hover .door-face,.door-entry:focus-visible .door-face{filter:drop-shadow(0 0 18px rgba(255,191,92,.26));fill:#2a2826}
.door-entry:focus-visible .door-hitbox{stroke:rgba(255,221,167,.6);stroke-width:2;fill:rgba(255,206,135,.025)}
.visitors{position:absolute;inset:0;z-index:35;pointer-events:none}.visitor{display:none;position:absolute}
[data-visitor="butterfly"] .visitor-butterfly,[data-visitor="bird"] .visitor-bird,[data-visitor="bunny"] .visitor-bunny,[data-visitor="cat"] .visitor-cat,[data-visitor="owl"] .visitor-owl,[data-visitor="moth"] .visitor-moth,[data-visitor="fireflies"] .visitor-fireflies{display:block}
.visitor-butterfly{left:-8%;top:42%;width:20px;height:18px;animation:butterfly-flight 18s cubic-bezier(.4,.1,.55,.95) 6s both}
.visitor-butterfly::before,.visitor-butterfly::after{content:"";position:absolute;top:1px;width:11px;height:15px;border-radius:75% 20% 70% 24%;background:linear-gradient(135deg,#ed9e45,#844a29);animation:wing 320ms ease-in-out infinite alternate}
.visitor-butterfly::before{left:0;transform-origin:right center}.visitor-butterfly::after{right:0;transform:scaleX(-1);transform-origin:left center}.visitor-butterfly i{position:absolute;left:9px;top:4px;width:2px;height:12px;background:#2f241e;border-radius:2px}
.visitor-bird{left:63%;bottom:28%;width:24px;height:14px;border-radius:50% 60% 45% 40%;background:#43382f;animation:bird-hop 8s ease-in-out 5s both}
.visitor-bird::before{content:"";position:absolute;right:-7px;top:4px;width:9px;height:4px;background:#b67b3d;clip-path:polygon(0 0,100% 50%,0 100%)}
.visitor-bunny{right:18%;bottom:18%;width:28px;height:20px;border-radius:55% 60% 45% 50%;background:#75685d;animation:bunny-hop 10s ease-in-out 8s both}
.visitor-bunny::before,.visitor-bunny::after{content:"";position:absolute;top:-15px;width:6px;height:19px;border-radius:80% 80% 30% 30%;background:#75685d}.visitor-bunny::before{left:8px;transform:rotate(-9deg)}.visitor-bunny::after{left:16px;transform:rotate(8deg)}
.visitor-cat{left:14%;bottom:18%;width:38px;height:22px;border-radius:58% 45% 36% 46%;background:#252321;animation:cat-stroll 18s ease-in-out 7s both}
.visitor-owl{right:18%;top:26%;width:28px;height:37px;border-radius:48% 48% 44% 44%;background:#262621;animation:owl-arrive 12s ease-in-out 6s both}
.visitor-moth{left:50%;top:54%;width:14px;height:12px;animation:moth-loop 13s ease-in-out 4s both}
.visitor-fireflies{inset:48% 8% 10%}.visitor-fireflies i{position:absolute;width:4px;height:4px;border-radius:50%;background:#f6d76b;box-shadow:0 0 12px 4px rgba(246,215,107,.34);animation:firefly 7s ease-in-out infinite}
.visitor-fireflies i:nth-child(1){left:8%;top:44%;animation-delay:-1s}.visitor-fireflies i:nth-child(2){left:28%;top:65%;animation-delay:-4s}.visitor-fireflies i:nth-child(3){left:52%;top:36%;animation-delay:-2.4s}.visitor-fireflies i:nth-child(4){left:72%;top:61%;animation-delay:-5.2s}.visitor-fireflies i:nth-child(5){left:91%;top:42%;animation-delay:-3.1s}
.threshold[data-time="dawn"]{--sky-top:#7689a3;--sky-mid:#c4aaa3;--sky-bottom:#edc394;--wall-a:#cbbca5;--wall-b:#a1927f;--window-core:#ffe0a9;--window-edge:#b77d50}
.threshold[data-time="day"]{--sky-top:#85abc8;--sky-mid:#b8ced9;--sky-bottom:#e8d8bd;--wall-a:#cabaa0;--wall-b:#a59580;--window-core:#eee0bc;--window-edge:#c2a57d}
.threshold[data-time="golden"]{--sky-top:#70849c;--sky-mid:#c39780;--sky-bottom:#e9b97c;--window-core:#ffd696;--window-edge:#b77745}
.threshold[data-time="dusk"]{--sky-top:#132038;--sky-mid:#2a3d54;--sky-bottom:#91746e;--window-core:#ffd796;--window-edge:#a9683b}
.threshold[data-time="night"]{--sky-top:#091328;--sky-mid:#14223b;--sky-bottom:#2a3548;--wall-a:#7d7465;--wall-b:#595247;--window-core:#ffc46f;--window-edge:#96562e}
.threshold[data-time="day"] .scene-stars,.threshold[data-time="day"] .scene-moon{opacity:0}.threshold[data-time="night"] .scene-stars{opacity:.88}.threshold[data-time="night"] .scene-moon{opacity:.95}.threshold[data-time="dawn"] .scene-stars{opacity:.05}.threshold[data-time="golden"] .scene-stars{opacity:.04}
.threshold[data-season="spring"]{--tree:#3a6c50;--tree-hi:#699175;--ground:#365342}.threshold[data-season="summer"]{--tree:#315b47;--tree-hi:#4d7659;--ground:#263a2f}.threshold[data-season="fall"]{--tree:#75513b;--tree-hi:#a16e43;--ground:#45472f}.threshold[data-season="winter"]{--tree:#394c43;--tree-hi:#59665d;--ground:#37433d}.threshold[data-season="winter"] .tree-crown{opacity:.33}
@keyframes twinkle{0%,100%{opacity:.28;transform:scale(.75)}50%{opacity:1;transform:scale(1.18)}}@keyframes cloud-drift{from{transform:translateX(-220px)}to{transform:translateX(1750px)}}@keyframes tree-sway{0%,100%{transform:rotate(-.35deg) translateX(0)}50%{transform:rotate(.45deg) translateX(4px)}}@keyframes wing{from{transform:scaleX(.42) rotate(-16deg)}to{transform:scaleX(1) rotate(8deg)}}
@keyframes butterfly-flight{0%{transform:translate(0,0);opacity:0}8%{opacity:1}28%{transform:translate(31vw,-11vh)}52%{transform:translate(58vw,3vh)}76%{transform:translate(82vw,-17vh)}100%{transform:translate(118vw,-8vh);opacity:0}}
@keyframes bird-hop{0%,12%{transform:translate(0,0);opacity:0}18%{opacity:1}47%{transform:translate(18px,0)}78%{transform:translate(35px,0)}100%{transform:translate(90px,-70px);opacity:0}}
@keyframes bunny-hop{0%,18%{transform:translateX(0);opacity:0}22%{opacity:1}50%{transform:translate(-58px,0)}80%{transform:translate(-120px,0)}100%{transform:translate(-180px,0);opacity:0}}
@keyframes cat-stroll{0%,15%{transform:translateX(0);opacity:0}20%{opacity:1}80%{transform:translateX(46vw);opacity:1}100%{transform:translateX(62vw);opacity:0}}
@keyframes owl-arrive{0%,20%{transform:translate(80px,-36px) scale(.7);opacity:0}34%{transform:translate(0,0) scale(1);opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes moth-loop{0%,12%{transform:translate(0,0);opacity:0}18%{opacity:1}35%{transform:translate(52px,-38px)}58%{transform:translate(92px,17px)}78%{transform:translate(32px,51px)}100%{transform:translate(-25px,-19px);opacity:0}}
@keyframes firefly{0%,100%{opacity:.08;transform:translate(0,0)}35%{opacity:.85;transform:translate(10px,-10px)}70%{opacity:.22;transform:translate(-8px,-19px)}}
@media(max-width:820px){.scene{width:125%;left:-12.5%}}
@media(max-width:520px){.scene{width:160%;left:-30%}}
@media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.visitor{display:none!important}}
