/* Speyro neighborhood. Home is a living street: one house per feather color, each with a front door.
   Every room behind a door is its own ecosystem (sky, hills, weather, creatures) that keeps moving.
   A sparrow drops the mustard seed in the town square; it grows into the giving tree. Bright light theme only. */
:root{
  --bg:#FFFFFF; --soft:#F5F5F7; --ink:#111111; --ink2:#4E5258; --line:#E6E6EB;
  --peri:#6E7DE6; --blue:#146CFF; --sea:#4EB8A0; --orange:#FF8A00; --seed:#E1AD01; --sky:#C7B6FF;
  --cta:#4F5BD5; --deep:#2B1F55;
  --font:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --px:0; --py:0;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);margin:0}
body{font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em;line-height:1.06}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.dot{color:var(--seed)}
.pad{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:15px;border:2px solid transparent;text-decoration:none}
.btn-primary{background:var(--cta);color:#fff}
.btn-ghost{background:rgba(255,255,255,.88);border-color:rgba(17,17,17,.12);color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;background:var(--soft);color:var(--ink);justify-self:start}
.pill i{width:8px;height:8px;border-radius:50%;background:#1F9D6E;display:block}
.pill.soon i{background:var(--orange)}

/* top bar */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--bg)}
.bar{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:40;display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px;pointer-events:none}
.bar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.03em;background:rgba(255,255,255,.92);padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);backdrop-filter:blur(8px)}
.brand img{width:34px;height:34px;border-radius:9px}
.bar .spacer{flex:1}
.bar .btn{padding:10px 18px}
.where{font-size:13px;font-weight:700;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:8px 14px}
@media (max-width:620px){.where{display:none}}

/* ---------- scenes & transitions ---------- */
.scene{min-height:100vh;min-height:100dvh;position:relative;overflow:hidden;isolation:isolate}
.scene[hidden]{display:none!important}
.scene.enter>.room-inner,.scene.enter>.hall-inner{animation:roomIn 1s var(--ease) both}
.scene.enter>.world{animation:worldIn 1.2s var(--ease) both}
@keyframes roomIn{from{opacity:0;transform:scale(.9) translateY(30px)}to{opacity:1;transform:none}}
@keyframes worldIn{from{transform:scale(1.25);filter:blur(8px)}to{transform:none;filter:none}}
.through{transition:transform 1s cubic-bezier(.6,0,.3,1),filter 1s,opacity 1s;transform:scale(7);filter:blur(3px);opacity:0}
.flash{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),#FFF8D6 0,#FFFFFF 40%);opacity:0;transition:opacity .45s}
.flash.on{opacity:1}

/* ---------- the living world (shared by every scene) ---------- */
.world{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,var(--s1,#E7F0FF) 0%,var(--s2,#F7FAFF) 55%,var(--s3,#FFFFFF) 100%)}
.world .sun{position:absolute;right:8%;top:6%;width:min(34vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--sun,#FFF4C2) 0,rgba(255,244,194,.55) 28%,rgba(255,255,255,0) 66%);animation:breathe 9s ease-in-out infinite;transform:translate(calc(var(--px)*-10px),calc(var(--py)*-6px))}
.world .rays{position:absolute;right:calc(8% + min(17vw,210px));top:calc(6% + min(17vw,210px));width:200vmax;height:200vmax;margin:-100vmax -100vmax 0 0;background:repeating-conic-gradient(from 0deg,rgba(255,222,120,.10) 0 5deg,rgba(255,255,255,0) 5deg 15deg);border-radius:50%;animation:spinr 160s linear infinite;-webkit-mask:radial-gradient(circle,#000 0,transparent 22%);mask:radial-gradient(circle,#000 0,transparent 22%)}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.08}}
@keyframes spinr{to{rotate:360deg}}
.world .hills{position:absolute;left:-4%;right:-4%;bottom:0;width:108%;height:42%}
.world .hills .h1{fill:var(--h1,#DDF2EB);transform:translate(calc(var(--px)*-14px),0)}
.world .hills .h2{fill:var(--h2,#C3E9DC);transform:translate(calc(var(--px)*-26px),0)}
.world .hills .h3{fill:var(--h3,#FFFFFF)}
.world .fx{position:absolute;inset:0}
/* clouds */
.cl{position:absolute;left:0;height:var(--h);width:var(--w);background:#fff;border-radius:999px;opacity:var(--o,.95);animation:drift var(--d) linear forwards;filter:drop-shadow(0 8px 14px rgba(43,31,85,.06))}
.cl::before,.cl::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cl::before{width:52%;height:150%;left:14%;top:-62%}.cl::after{width:38%;height:120%;left:48%;top:-42%}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
/* distant flocks */
.flock{position:absolute;left:0;display:flex;gap:10px;animation:flyx var(--d) linear forwards}
.flock svg{width:22px;height:10px;overflow:visible}
.flock path{fill:none;stroke:rgba(43,31,85,.45);stroke-width:2;stroke-linecap:round;transform-origin:center;animation:flap .5s ease-in-out infinite alternate}
.flock svg:nth-child(2){margin-top:8px}.flock svg:nth-child(3){margin-top:-6px}.flock svg:nth-child(4){margin-top:12px}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(-.6)}}
@keyframes flyx{from{transform:translate(-20vw,0)}50%{transform:translate(50vw,var(--dy,-20px))}to{transform:translate(125vw,0)}}
/* our sparrow passing by */
.passer{position:absolute;left:0;width:var(--w,70px);animation:flyx var(--d) linear forwards}
.passer>img{width:100%;display:block;animation:bobs 1.6s ease-in-out infinite}
@keyframes bobs{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
/* small creatures and particles */
.bfly{position:absolute;width:22px;height:18px}
.bfly::before,.bfly::after{content:"";position:absolute;top:0;width:11px;height:16px;border-radius:60% 60% 50% 50%;background:var(--c,#FF8A00);transform-origin:right center;animation:wing .22s ease-in-out infinite alternate}
.bfly::after{left:11px;transform-origin:left center;background:var(--c2,#E1AD01)}
@keyframes wing{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
.fall{position:absolute;top:-30px;animation:fall var(--d) linear forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(var(--sx),25vh) rotate(90deg)}50%{transform:translate(calc(var(--sx)*-1),50vh) rotate(180deg)}75%{transform:translate(var(--sx),75vh) rotate(270deg)}100%{transform:translate(0,110vh) rotate(360deg)}}
.petal{width:12px;height:8px;border-radius:12px 0;background:var(--c,#6FC8B0);opacity:.85}
.coinf{width:16px;height:16px;border-radius:50%;background:var(--seed);box-shadow:inset 0 0 0 3px #F3CC4A,inset 0 0 0 5px var(--seed);opacity:.9}
.rise-up{position:absolute;bottom:-60px;animation:riseup var(--d) linear forwards}
@keyframes riseup{to{transform:translate(var(--sx,0),-120vh) rotate(var(--r,0deg))}}
.mcard{width:64px;aspect-ratio:1.586;border-radius:8px;background:#fff;box-shadow:0 10px 24px -14px rgba(20,108,255,.6),inset 0 0 0 1px #D3E2FF;position:relative;opacity:.8}
.mcard::after{content:"";position:absolute;right:-6px;top:-6px;width:28px;height:28px;border-radius:50%;background:conic-gradient(var(--peri) 0 20%,var(--blue) 0 40%,var(--sea) 0 60%,var(--orange) 0 80%,var(--seed) 0);opacity:.8}
.twinkle{position:absolute;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:tw var(--d) ease-in-out forwards}
@keyframes tw{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.walker{position:absolute;bottom:0;width:22px;height:54px;border-radius:12px 12px 4px 4px;background:var(--c);animation:walk var(--d) linear forwards}
.walker::before{content:"";position:absolute;left:3px;top:-16px;width:16px;height:16px;border-radius:50%;background:var(--c)}
@keyframes walk{from{left:-30px}to{left:calc(100% + 30px)}}

/* ---------- doors (shared) ---------- */
.dr{position:relative;display:block;width:var(--dw,56px);aspect-ratio:3/4.4;perspective:500px;flex:0 0 auto}
.dr .df{position:absolute;inset:0;border-radius:50% 50% 5px 5px/36% 36% 5px 5px;background:#fff;box-shadow:inset 0 0 0 3px var(--c),0 6px 14px -8px rgba(0,0,0,.35)}
.dr .dl{position:absolute;inset:4px;border-radius:50% 50% 3px 3px/36% 36% 3px 3px;background:radial-gradient(circle at 50% 75%,#FFFDF2 0,#FFEFA8 45%,var(--c) 100%);overflow:hidden}
.dr .dl::after{content:"";position:absolute;left:20%;right:20%;bottom:10%;height:20%;border-radius:50%;background:var(--seed);opacity:.0;transition:opacity .6s .3s}
.dr .lf{position:absolute;inset:4px;border-radius:50% 50% 3px 3px/36% 36% 3px 3px;background:var(--c);transform-origin:0 50%;transition:transform .75s var(--ease),filter .75s;box-shadow:inset -4px 0 0 rgba(0,0,0,.08)}
.dr .lf::before{content:"";position:absolute;left:18%;right:18%;top:14%;height:30%;border-radius:50% 50% 4px 4px/40% 40% 4px 4px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.dr .lf::after{content:"";position:absolute;left:18%;right:18%;top:52%;height:34%;border-radius:4px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.dr .lf i{position:absolute;right:12%;top:50%;width:15%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--seed) 0 48%,#fff 52%);z-index:1}
.dr-btn:hover .lf,.dr-btn:focus-visible .lf{transform:rotateY(-32deg)}
.open .dr .lf{transform:rotateY(-108deg);filter:brightness(.9)}
.open .dr .dl::after{opacity:.6}
.open .dr{filter:drop-shadow(0 0 18px #FFE48A)}

/* next door inside rooms */
.room-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:8px}
.nextdoor{display:flex;align-items:flex-end;gap:12px;border:0;background:transparent;padding:0;text-align:left}
.nextdoor .dr{--dw:64px}
.nextdoor .t{display:grid;gap:0;padding-bottom:4px}
.nextdoor small{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.nextdoor b{font-size:17px;line-height:1.2}
.nextdoor b::after{content:" →";color:var(--ink2)}

/* ---------- HOME: hero + neighborhood ---------- */
.hall{--s1:#E4EEFF;--s2:#F5F8FF;--s3:#FFFFFF;--h1:#E3F4EE;--h2:#CDEDE2;min-height:auto}
.hall-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding-top:96px;padding-bottom:12px;min-height:min(88vh,760px);display:grid;align-items:center}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(46px,7vw,92px);font-weight:800}
.hero .lede{font-size:19px;color:var(--ink2);max-width:50ch;margin-top:20px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero small{display:block;margin-top:16px;color:var(--ink2);font-weight:600;font-size:13px}
@media (max-width:880px){.hero{grid-template-columns:1fr}.book{order:-1}}
.book{perspective:1600px;justify-self:center;width:min(500px,86vw)}
.logo-stage{position:relative;width:100%;aspect-ratio:702/560}
.logo-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.logo-stage .seed{position:absolute;left:94.1%;top:86.2%;width:4.8%;aspect-ratio:1;margin:-2.4% 0 0 -2.4%;border-radius:50%;background:var(--seed)}
.page{position:absolute;inset:-6% -5%;transform-origin:0 50%;transform-style:preserve-3d;z-index:3;pointer-events:none}
.page .face{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.page .front{background:linear-gradient(90deg,#F7F6FF 0%,#FFFFFF 18%,#FFFFFF 100%);box-shadow:0 30px 60px -30px rgba(43,31,85,.35),inset 0 0 0 1px var(--line)}
.page .front span{font-weight:800;font-size:clamp(28px,5vw,44px);letter-spacing:-.03em}
.page .back{transform:rotateY(180deg);background:linear-gradient(270deg,#EDE8FF,#FFFFFF)}
.play .page{animation:turn 1.1s .3s var(--ease) both}
@keyframes turn{0%{transform:rotateY(0)}100%{transform:rotateY(-178deg);opacity:0}}
.play .word{animation:wordIn .8s 1.1s var(--ease) both}
@keyframes wordIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fly{0%{opacity:0;transform:translate(-55%,28%) rotate(-14deg) scale(.7)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6%)}}
@keyframes drop{0%{opacity:0;transform:translate(-430%,-860%) scale(.6)}15%{opacity:1}78%{transform:translate(0,0) scale(1)}88%{transform:translate(0,-60%)}100%{opacity:1;transform:none}}
.replay{margin:8px auto 0;display:block;background:none;border:0;color:var(--ink2);font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px}

.hood{position:relative;z-index:2;margin-top:24px;scroll-margin-top:70px}
.hood-head{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px 20px}
.hood-head h2{font-size:clamp(30px,4vw,44px);font-weight:800}
.hood-head p{color:var(--ink2);max-width:46ch}
.walkbtns{display:flex;gap:8px}
.walkbtns button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;font-weight:800}
.street{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:18px}
.street::-webkit-scrollbar{display:none}
.track{position:relative;display:flex;align-items:flex-end;gap:clamp(18px,2.4vw,34px);width:max-content;padding:90px max(24px,calc(50vw - 590px)) 0;min-height:440px}
.lawn{position:absolute;left:0;right:0;bottom:0;height:86px;background:linear-gradient(180deg,#BFE7D8 0,#BFE7D8 34px,#F1F1F4 34px,#F1F1F4 70px,#E4E4EA 70px)}
.lawn::before{content:"";position:absolute;left:0;right:0;top:52px;height:3px;background:repeating-linear-gradient(90deg,#fff 0 28px,transparent 28px 56px)}
.lot{position:relative;z-index:1;display:grid;justify-items:center;scroll-snap-align:center;margin-bottom:56px}
/* houses */
.house{--hw:clamp(150px,13.5vw,188px);width:var(--hw);position:relative;display:grid;justify-items:center}
.roof{position:relative;width:122%;height:calc(var(--hw)*.52);margin-bottom:-2px}
.roof::before{content:"";position:absolute;inset:0;background:var(--c);clip-path:polygon(50% 0,100% 100%,0 100%)}
.roof::after{content:"";position:absolute;left:44%;top:46%;width:12%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px rgba(0,0,0,.06)}
.chim{position:absolute;right:20%;top:12%;width:12%;height:34%;background:color-mix(in srgb,var(--c) 75%,#111 10%);border-radius:3px 3px 0 0}
.smoke{position:absolute;left:10%;bottom:100%;width:16px;height:16px;border-radius:50%;background:#fff;opacity:0;animation:smoke 4s ease-out infinite}
.smoke:nth-child(2){animation-delay:1.3s}.smoke:nth-child(3){animation-delay:2.6s}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.95}100%{opacity:0;transform:translate(22px,-70px) scale(1.8)}}
.hbody{position:relative;width:100%;height:var(--hb,168px);background:color-mix(in srgb,var(--c) 15%,#fff);border-radius:4px 4px 0 0;box-shadow:inset 0 -8px 0 color-mix(in srgb,var(--c) 22%,#fff)}
.win{position:absolute;top:14%;width:24%;aspect-ratio:1/1.1;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 3px var(--c);overflow:hidden}
.win::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 46%,var(--c) 46% 54%,transparent 54%),linear-gradient(transparent 46%,var(--c) 46% 54%,transparent 54%)}
.win.a{left:10%}.win.b{right:10%}
.win.lit{background:#FFF0B0;animation:glow 5s ease-in-out infinite}
@keyframes glow{0%,100%{background:#FFF3C4}50%{background:#FFE58A}}
.house .dr-btn{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border:0;background:none;padding:0}
.house .dr{--dw:calc(var(--hw)*.36)}
.step{position:absolute;left:50%;bottom:-8px;width:44%;height:8px;transform:translateX(-50%);background:#D9D9E0;border-radius:2px}
.sign{margin-top:14px;display:grid;justify-items:center;text-align:center;gap:0;background:#fff;border-radius:14px;padding:6px 12px;box-shadow:0 8px 18px -12px rgba(0,0,0,.35);border-top:4px solid var(--c)}
.sign small{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.sign b{font-size:14px;line-height:1.2}

@keyframes hop{0%,40%,100%{transform:translateY(0)}45%{transform:translateY(-10px)}50%{transform:translateY(0)}}
.flowerbox{position:absolute;bottom:-2px;display:flex;gap:3px}
.flowerbox i{width:8px;height:16px;border-radius:8px 8px 2px 2px;background:var(--sea);transform-origin:bottom;animation:sway 3s ease-in-out infinite}
.flowerbox i:nth-child(odd){background:var(--orange);height:12px;animation-delay:.8s}
@keyframes sway{0%,100%{rotate:-6deg}50%{rotate:6deg}}
/* town square tree */
.square{position:relative;width:clamp(280px,26vw,360px);align-self:stretch;display:grid;align-items:end;justify-items:center;margin-bottom:56px;z-index:1}
.square .plaque{margin-top:10px;background:#fff;border-radius:14px;padding:6px 12px;font-size:12px;font-weight:700;box-shadow:0 8px 18px -12px rgba(0,0,0,.35);border-top:4px solid var(--seed);text-align:center}
.square .plaque b{display:block;font-size:14px}
.gift{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--seed);box-shadow:inset 0 0 0 3px #F6D25C,0 0 14px rgba(225,173,1,.6);z-index:5;pointer-events:none}
.dropseed{position:absolute;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--seed);z-index:6;pointer-events:none}
.hood-foot{max-width:1180px;margin:0 auto;padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--ink2);font-size:14px;font-weight:600}

/* money tree (shared svg) */
.mtree{width:100%;height:auto;overflow:visible}
.mtree .trunk{stroke:#9A7A2C;stroke-width:16;stroke-linecap:round;fill:none;stroke-dasharray:460;stroke-dashoffset:460}
.mtree .branch{stroke:#9A7A2C;stroke-width:8;stroke-linecap:round;fill:none;stroke-dasharray:200;stroke-dashoffset:200}
.mtree .leafy,.mtree .coin{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.mtree .sprout{transform-box:fill-box;transform-origin:bottom;transform:scale(0)}
.mtree .ground{fill:#BFE7D8}
.mtree.grown .trunk{animation:dash 1.5s .5s var(--ease) forwards}
.mtree.grown .branch{animation:dash 1.1s 1.5s var(--ease) forwards}
.mtree.grown .sprout{animation:pop .5s .1s var(--ease) forwards,fadeout .4s 1.4s forwards}
.mtree.grown .leafy{animation:pop .7s var(--ease) forwards}
.mtree.grown .coin{animation:pop .5s var(--ease) forwards,coinflip 3.6s ease-in-out infinite}
.mtree.grown .canopy{animation:canopy 6s 3.5s ease-in-out infinite;transform-origin:50% 100%;transform-box:fill-box}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes fadeout{to{opacity:0}}
@keyframes coinflip{0%,70%,100%{transform:scale(1)}80%{transform:scaleX(.15)}90%{transform:scale(1)}}
@keyframes canopy{0%,100%{rotate:-1deg}50%{rotate:1.2deg}}
.mtree .bird{opacity:0}
.mtree.grown .bird{animation:land .9s var(--ease) forwards}
@keyframes land{from{opacity:0;transform:translate(-40px,-50px)}to{opacity:1;transform:none}}

/* ---------- ROOMS ---------- */
.room{display:grid;align-items:center}
.room-inner{position:relative;z-index:2;max-width:1180px;width:100%;margin:0 auto;padding-top:96px;padding-bottom:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
@media (max-width:880px){.room-inner{grid-template-columns:1fr}}
.card{background:rgba(255,255,255,.95);border-radius:28px;padding:32px;display:grid;gap:14px;box-shadow:0 30px 70px -40px rgba(17,17,17,.35);backdrop-filter:blur(6px)}
.card h2{font-size:clamp(32px,4.4vw,52px);font-weight:800}
.card p{color:var(--ink2)}
.feather{display:flex;align-items:center;gap:10px}
.feather span{width:28px;height:28px;border-radius:8px;background:var(--c);display:block}
.panel{background:rgba(255,255,255,.95);border-radius:28px;padding:28px;display:grid;gap:16px;box-shadow:0 30px 70px -40px rgba(17,17,17,.35)}
.seg{display:inline-flex;background:var(--soft);border-radius:999px;padding:4px;gap:4px;flex-wrap:wrap;justify-self:start}
.seg button{border:0;background:transparent;border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px}
.chips button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.big{font-size:clamp(40px,6vw,64px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.mono{font-variant-numeric:tabular-nums}
.note{font-size:13px;color:var(--ink2)}

/* garden: Giving Rule */
#garden{--s1:#DDF4EC;--s2:#F2FBF7;--h1:#CFEDE3;--h2:#A9DFCD}
.belt{position:absolute;left:0;bottom:calc(14% + 6px);height:56px;display:flex;gap:18px;animation:belt 26s linear infinite;width:max-content;z-index:1}
.belt span{background:#fff;border:2px solid #BFE7D8;border-radius:14px;padding:8px 14px;font-weight:700;font-size:14px;white-space:nowrap;align-self:center;box-shadow:0 10px 20px -16px rgba(0,0,0,.4)}
.belt span b{color:#1F7A63}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rows{position:absolute;left:0;right:0;bottom:0;height:14%;background:repeating-linear-gradient(90deg,#9ED8C3 0 40px,#B5E3D2 40px 80px)}
.sprout2{position:absolute;bottom:14%;width:4px;background:#2E9E7E;transform-origin:bottom;animation:grow 6s ease-in-out infinite}
.sprout2::before,.sprout2::after{content:"";position:absolute;top:0;width:16px;height:9px;border-radius:9px 0;background:var(--sea)}
.sprout2::before{left:3px}.sprout2::after{right:3px;border-radius:0 9px}
@keyframes grow{0%{transform:scaleY(0)}35%,100%{transform:scaleY(1)}}

/* sky: MoreChange */
#sky{--s1:#CCD3FF;--s2:#E9ECFF;--s3:#FFFFFF;--h1:#E5E8FF;--h2:#D5DAFF}
.balloon{position:absolute;bottom:-90px;display:grid;justify-items:center;animation:riseup var(--d) ease-in forwards;z-index:3}
.balloon span{background:#fff;color:var(--deep);font-weight:800;border-radius:999px;padding:7px 13px;font-size:14px;box-shadow:0 10px 24px -14px rgba(0,0,0,.4);white-space:nowrap}
.balloon i{width:2px;height:34px;background:rgba(43,31,85,.25)}

/* wallet */
#wallet{--s1:#D6E6FF;--s2:#EEF4FF;--h1:#DCE8FF;--h2:#C6DAFF}
.cardwrap{perspective:1200px;display:grid;place-items:center;padding:20px}
.ccard{width:min(380px,80vw);aspect-ratio:1.586;border-radius:22px;position:relative;transform-style:preserve-3d;animation:spin 9s ease-in-out infinite}
@keyframes spin{0%,100%{transform:rotateY(-18deg) rotateX(8deg)}50%{transform:rotateY(18deg) rotateX(-4deg)}}
.ccard .f{position:absolute;inset:0;border-radius:22px;background:#fff;box-shadow:0 40px 80px -40px rgba(20,108,255,.6),inset 0 0 0 1px var(--line);padding:22px;display:grid;align-content:space-between;overflow:hidden}
.ccard .f::after{content:"";position:absolute;right:-30px;top:-30px;width:180px;height:180px;border-radius:50%;background:conic-gradient(var(--peri) 0 20%,var(--blue) 0 40%,var(--sea) 0 60%,var(--orange) 0 80%,var(--seed) 0);opacity:.85}
.ccard .chip{width:42px;height:32px;border-radius:7px;background:linear-gradient(135deg,#F1E3A5,#D9B84B)}
.ccard .row{display:flex;justify-content:space-between;align-items:end;position:relative;z-index:1}
.ccard b{font-size:22px;font-weight:800;letter-spacing:-.03em}
.ping{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border-radius:50%;border:3px solid rgba(20,108,255,.35);animation:ping 3s ease-out infinite;pointer-events:none}
.ping:nth-child(2){animation-delay:1s}.ping:nth-child(3){animation-delay:2s}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(3.2);opacity:0}}
.wallet-chips{display:flex;flex-wrap:wrap;gap:8px}
.wallet-chips span{background:#fff;border:2px solid #D3E2FF;border-radius:999px;padding:7px 12px;font-weight:700;font-size:13px}

/* cafe: Tips (an interior with a street window) */
#cafe .world{background:linear-gradient(180deg,#FFF3E4 0%,#FFF8F0 60%,#FFFFFF 100%)}
.cwin{position:absolute;left:4%;right:4%;top:11%;height:34%;border-radius:22px;background:linear-gradient(180deg,#DCEBFF,#F4F8FF);box-shadow:inset 0 0 0 10px #fff,0 0 0 3px #FFD3A1;overflow:hidden}
.cwin .street2{position:absolute;left:0;right:0;bottom:14%;height:64%}
.cwin .curb{position:absolute;left:0;right:0;bottom:0;height:14%;background:#EDEDF2}
.cwin .awn{position:absolute;left:0;right:0;top:0;height:16%;background:repeating-linear-gradient(90deg,#FF8A00 0 40px,#fff 40px 80px)}
.lamp{position:absolute;top:0;width:2px;height:16%;background:#C9A77B;transform-origin:top;animation:swing 5s ease-in-out infinite}
.lamp::after{content:"";position:absolute;left:-16px;bottom:-18px;width:34px;height:20px;border-radius:20px 20px 4px 4px;background:var(--orange);box-shadow:0 14px 30px 6px rgba(255,200,120,.55)}
@keyframes swing{0%,100%{rotate:-4deg}50%{rotate:4deg}}
.counter{position:absolute;left:0;right:0;bottom:0;height:20%;background:#FFD9AE;box-shadow:inset 0 10px 0 #FFC27A}
.cup{position:absolute;bottom:20%;width:70px;height:62px;background:#fff;border-radius:6px 6px 26px 26px;border:3px solid #FF8A00}
.cup::after{content:"";position:absolute;right:-22px;top:12px;width:20px;height:24px;border:3px solid #FF8A00;border-left:0;border-radius:0 14px 14px 0}
.steam{position:absolute;width:8px;height:40px;border-radius:8px;background:linear-gradient(#fff0,#FFB866);animation:steam 3s ease-in-out infinite;opacity:0}
@keyframes steam{0%{opacity:0;transform:translateY(10px) scaleY(.6)}40%{opacity:.7}100%{opacity:0;transform:translateY(-50px) scaleY(1.2)}}
.who{display:flex;gap:10px;flex-wrap:wrap}
.who button{display:flex;align-items:center;gap:8px;border:2px solid var(--line);background:#fff;border-radius:14px;padding:8px 12px;font-weight:700}
.who button[aria-pressed="true"]{border-color:var(--orange);background:#FFF4E6}
.who i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;background:#FFE7C7}

/* orchard: Impact */
#orchard{--s1:#FFF0BF;--s2:#FFF9E3;--h1:#F7EDC4;--h2:#E9F4D9;--sun:#FFE79A}
.treewrap{position:relative;width:100%;max-width:480px;justify-self:center}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stats div{background:#FFF8DD;border-radius:16px;padding:14px;display:grid;gap:2px}
.stats b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.stats small{font-size:12px;color:var(--ink2);font-weight:600}

/* nest: Giving Fund and HOLD */
#nest{--s1:#BBA8FF;--s2:#DDD3FF;--s3:#F6F3FF;--h1:#E2D9FF;--h2:#D2C5FF;--sun:#FFF0D6}
.nestart{position:relative;width:min(400px,80vw);aspect-ratio:1.3;justify-self:center}
.branchbar{position:absolute;left:-10%;right:30%;bottom:20%;height:16px;border-radius:10px;background:#B98F4F;rotate:-6deg}
.nestbowl{position:absolute;left:12%;right:12%;bottom:12%;height:38%;border-radius:0 0 50% 50%/0 0 100% 100%;background:repeating-linear-gradient(170deg,#B98F4F 0 6px,#D4AE6A 6px 12px);box-shadow:inset 0 10px 0 rgba(0,0,0,.08)}
.held{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--seed);box-shadow:inset -4px -4px 0 rgba(0,0,0,.08);animation:settle 1s var(--ease) both}
@keyframes settle{from{transform:translateY(-200px);opacity:0}to{transform:none;opacity:1}}

/* story: mustard field */
#story{--s1:#FFF6D9;--s2:#FFFBEF;--h1:#F6EBC2;--h2:#EADFAE}
.field{position:absolute;left:0;right:0;bottom:0;height:26%;display:flex;justify-content:space-around;align-items:flex-end;padding:0 10px}
.stalk{width:3px;height:var(--h,80px);background:#9DBA6A;transform-origin:bottom;animation:sway 4s ease-in-out infinite;position:relative}
.stalk::before{content:"";position:absolute;left:-7px;top:-10px;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle,#F6D25C 0 40%,#E1AD01 41%)}
.verse{background:#fff;border-radius:22px;padding:22px;display:grid;gap:6px;box-shadow:0 20px 50px -40px rgba(17,17,17,.4)}
.verse cite{font-style:normal;font-weight:800;font-size:13px;color:var(--cta)}

/* get */
#get{--s1:#C7B6FF;--s2:#E4DCFF;--s3:#F8F6FF;--h1:#EDE7FF;--h2:#DCD2FF}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{display:grid;padding:10px 18px;border-radius:14px;background:var(--ink);color:#fff;min-width:180px}
.store small{font-size:11px;opacity:.75;font-weight:600}
.store b{font-size:17px}
.email{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.email code{font-family:var(--font);font-weight:700;font-size:17px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;user-select:all}

footer{background:#fff;border-top:1px solid var(--line);position:relative;z-index:3}
footer .f-in{max-width:1180px;margin:0 auto;padding-top:28px;padding-bottom:28px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:13px;color:var(--ink2)}


/* ===== v4: trademark, flapping sparrow, depth, fence, clouds, seasons ===== */
.tm{font-size:.42em;font-weight:700;vertical-align:super;line-height:0;margin-left:.06em;letter-spacing:0;color:inherit}
.tm-h{font-size:.2em;vertical-align:.3em;margin-left:.1em;color:var(--ink2)}
.stage-tm{position:absolute;left:96.6%;top:69%;font-size:clamp(9px,1.6vw,13px);line-height:1;color:#111;font-weight:800;opacity:0}
.play .stage-tm{animation:wordIn .6s 1.6s var(--ease) both}
.season-chip{display:inline-flex;align-items:center;gap:8px;margin-left:10px;vertical-align:middle;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 8px;font-size:12px;font-weight:700;color:var(--ink);box-shadow:0 6px 16px -12px rgba(0,0,0,.4)}
.season-chip svg{width:18px;height:18px}
@media (max-width:620px){.season-chip{margin:8px 0 0}}
/* sparrow rig */
.rig{position:relative;display:block;width:100%;aspect-ratio:935/937}
.rig img,.logo-stage .rig img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.rig .wt,.rig .wl{transform-origin:64.7% 62.6%}
.rig .sd{position:absolute;left:91.1%;top:71.4%;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 32%,#F8D65C 0 22%,#E1AD01 48%)}
.rig .sd[hidden]{display:none}
.flap .wt{animation:flapT .58s cubic-bezier(.45,0,.4,1) infinite}
.flap .wl{animation:flapL .58s cubic-bezier(.45,0,.4,1) .05s infinite}
.flap .bd,.flap .sd{animation:bodyb .58s ease-in-out infinite}
@keyframes flapT{0%,100%{transform:none}45%{transform:rotate(-28deg) scaleY(.46)}}
@keyframes flapL{0%,100%{transform:none}45%{transform:rotate(-38deg) scaleY(.48)}}
@keyframes bodyb{0%,100%{transform:translateY(0)}45%{transform:translateY(-2.5%)}}
/* hero bird */
.logo-stage .bird{position:absolute;left:23.44%;top:2.36%;width:51.15%;z-index:2}
.logo-stage .bird{opacity:0}.logo-stage.rmfinal .bird,.logo-stage.landed .bird{opacity:1}
@keyframes fly2{0%{opacity:0;transform:translate(-95%,40%) rotate(-10deg) scale(.55)}12%{opacity:1}55%{transform:translate(-30%,-8%) rotate(-4deg) scale(.85)}100%{opacity:1;transform:none}}
.landed .bird{animation:hover 4s ease-in-out infinite;opacity:1}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4%)}}
.logo-stage .seed{background:radial-gradient(circle at 35% 32%,#F8D65C 0 22%,#E1AD01 48%);opacity:0}
.play .seed{animation:drop3 .95s 1.75s cubic-bezier(.45,0,.75,.6) forwards}
@keyframes drop3{0%{opacity:1;transform:translate(60%,-700%) scale(1.25) rotate(0)}72%{transform:translate(0,0) scale(1) rotate(-300deg)}83%{transform:translate(0,-55%) rotate(-330deg)}92%{transform:translate(0,0) rotate(-350deg)}96%{transform:translate(0,-10%)}100%{opacity:1;transform:none}}
@keyframes drop2{0%{opacity:1;transform:translate(-427%,-558%) scale(1.5) rotate(0)}62%{transform:translate(-120%,-160%) scale(1.15) rotate(200deg)}82%{transform:translate(0,0) scale(1) rotate(330deg)}90%{transform:translate(0,-55%) scale(1) rotate(350deg)}96%{transform:translate(0,0)}98%{transform:translate(0,-10%)}100%{opacity:1;transform:none}}
/* passing sparrows */
.passer .bobw{display:block;animation:bobs 1.6s ease-in-out infinite}
.perch{position:absolute;width:52px;top:18%;left:52%;z-index:2}
.perch .rig{filter:drop-shadow(0 3px 2px rgba(43,31,85,.15))}
/* depth layers */
.world .mid{position:absolute;left:-3%;right:-3%;bottom:16%;width:106%;height:22%;transform:translate(calc(var(--px)*-18px),0)}
.world .near{position:absolute;left:-4%;right:-4%;bottom:-2px;width:108%;height:12%;transform:translate(calc(var(--px)*-40px),0)}
.world .haze{position:absolute;left:0;right:0;bottom:30%;height:22%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0))}
.world .godray{position:absolute;right:12%;top:-10%;width:42%;height:120%;background:linear-gradient(200deg,rgba(255,240,190,.35),rgba(255,255,255,0) 60%);transform:skewX(-18deg);filter:blur(8px);animation:ray 12s ease-in-out infinite}
@keyframes ray{0%,100%{opacity:.5}50%{opacity:.9}}
/* houses: shingles, reflections, shadows, bushes */
.roof::before{background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 11px,rgba(17,17,17,.08) 11px 13px),linear-gradient(100deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%,rgba(17,17,17,.10)),var(--c)}
.hbody{background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0) 30%,rgba(17,17,17,.035)),color-mix(in srgb,var(--c) 15%,#fff)}
.win::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.85) 0 18%,rgba(255,255,255,0) 19% 38%,rgba(255,255,255,.55) 39% 46%,rgba(255,255,255,0) 47%);z-index:1}
.house::after{content:"";position:absolute;bottom:-12px;left:-10%;right:-10%;height:22px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(43,31,85,.20),rgba(43,31,85,0) 70%);z-index:-1}
.bush{position:absolute;bottom:-4px;width:30%;height:26px;border-radius:30px 30px 6px 6px;background:radial-gradient(circle at 30% 40%,#8ADBC5,#4EB8A0 70%);z-index:1}
.bush::before{content:"";position:absolute;left:30%;top:-10px;width:55%;height:22px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#9BE2CE,#5CC3AA 70%)}
.bush.l{left:-8%}.bush.r{right:-8%}
.porchlamp{position:absolute;bottom:42%;width:8px;height:14px;border-radius:3px;background:#FFE58A;box-shadow:0 0 14px 4px rgba(255,214,110,.55)}
/* street, lawn, fence, lamp posts */
.track{padding-top:170px!important}
.lawn{height:118px;background:linear-gradient(180deg,#CBEEDF 0,#B4E3D1 66px,#E9E9EF 66px,#F3F3F6 96px,#E4E4EA 96px)}
.lawn::before{top:auto;bottom:10px;height:3px;background:repeating-linear-gradient(90deg,#fff 0 28px,transparent 28px 56px)}
.lot{margin-bottom:74px!important}
.fence{position:absolute;left:calc(-1 * clamp(9px,1.2vw,17px));right:calc(-1 * clamp(9px,1.2vw,17px));bottom:-26px;height:42px;display:flex;z-index:3;filter:drop-shadow(0 5px 3px rgba(43,31,85,.13))}
.fence .fl,.fence .fr{flex:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='42'%3E%3Crect x='0' y='15' width='16' height='5' fill='white'/%3E%3Crect x='0' y='30' width='16' height='5' fill='white'/%3E%3Cpath d='M4 9 L8 2 L12 9 V42 H4Z' fill='white' stroke='%23DCDCE6' stroke-width='1'/%3E%3C/svg%3E") repeat-x bottom left}
.fence .gap{position:relative;width:calc(var(--hw,170px)*.42)}
.fence .gate{position:absolute;left:0;bottom:0;width:48%;height:100%;background:inherit;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='42'%3E%3Crect x='0' y='15' width='16' height='5' fill='white'/%3E%3Crect x='0' y='30' width='16' height='5' fill='white'/%3E%3Cpath d='M4 9 L8 2 L12 9 V42 H4Z' fill='white' stroke='%23DCDCE6' stroke-width='1'/%3E%3C/svg%3E") repeat-x bottom left;transform:perspective(160px) rotateY(62deg);transform-origin:left center}
.fence.sq .gap{width:38%}
.lot .fence .gap::after{content:"";position:absolute;left:18%;right:18%;bottom:-30px;height:30px;background:linear-gradient(#EDE7DA,#E5DECF);clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}
.post{position:relative;z-index:2;align-self:flex-end;margin-bottom:74px;width:6px;height:150px;background:linear-gradient(90deg,#C9C9D6,#ECECF2,#C9C9D6);border-radius:3px;flex:0 0 auto}
.post::before{content:"";position:absolute;left:-9px;top:-14px;width:24px;height:18px;border-radius:12px 12px 4px 4px;background:#fff;box-shadow:0 0 0 2px #D5D5E0,0 10px 26px 6px rgba(255,225,140,.45)}
/* house name clouds */
.namecloud{position:relative;z-index:2;margin-bottom:16px;display:grid;justify-items:center;text-align:center;background:#fff;border-radius:999px;padding:10px 20px 9px;box-shadow:0 14px 26px -18px rgba(43,31,85,.45);animation:cbob 6s ease-in-out infinite;min-width:120px}
.namecloud::before,.namecloud::after{content:"";position:absolute;background:#fff;border-radius:50%;z-index:-1}
.namecloud::before{width:46%;height:120%;left:12%;top:-42%}
.namecloud::after{width:34%;height:96%;right:12%;top:-30%}
.namecloud small{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);display:flex;align-items:center;gap:6px}
.namecloud small::before{content:"";width:14px;height:4px;border-radius:2px;background:var(--c,var(--seed))}
.namecloud b{font-size:14px;line-height:1.2}
.lot:nth-child(odd) .namecloud{animation-delay:-2s}.lot:nth-child(3n) .namecloud{animation-delay:-4s}
@keyframes cbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.tree-cloud{--c:var(--seed);position:absolute;top:auto;bottom:calc(clamp(280px,26vw,360px)*1.1 - 12px);left:50%;translate:-50% 0;margin:0}
.square{margin-bottom:74px!important}
/* richer money tree */
.mtree .coin .shine{fill:#fff;opacity:.85}
.mtree .leafy.shade{opacity:.9}
/* garden extra rows */
.rows.back{bottom:14%;height:5%;opacity:.55;background:repeating-linear-gradient(90deg,#B5E3D2 0 26px,#C9EEE0 26px 52px)}
.sprout2.sm{bottom:19%;transform-origin:bottom;scale:.65}
/* cafe depth */
.cwin .bldgs{position:absolute;left:-2%;right:-2%;bottom:14%;height:62%;transform:translate(calc(var(--px)*-8px),0);background:linear-gradient(90deg,#E9E3FF 0 9%,transparent 9% 11%,#DDE9FF 11% 22%,transparent 22% 24%,#FFE9D1 24% 33%,transparent 33% 35%,#DFF4EC 35% 47%,transparent 47% 49%,#EDE7FF 49% 60%,transparent 60% 62%,#FFF1C9 62% 72%,transparent 72% 74%,#DDE9FF 74% 86%,transparent 86% 88%,#FFE9D1 88% 100%);-webkit-mask:linear-gradient(180deg,transparent 0 10%,#000 10%);mask:linear-gradient(180deg,transparent 0 10%,#000 10%)}
.walker.far{opacity:.55;scale:.7;bottom:6px}
/* nest branch */
.nbranch{position:absolute;left:-12%;right:-12%;bottom:-6%;width:124%;height:auto}
.nestbowl{z-index:1}
/* story field depth + wind wave */
.field.mid{height:20%;bottom:6%;opacity:.8}.field.far{height:16%;bottom:12%;opacity:.55}
.field.mid .stalk{scale:.75}.field.far .stalk{scale:.5}
@keyframes wave{0%,100%{rotate:-4deg}50%{rotate:7deg}}
.stalk{animation:wave 4.5s ease-in-out infinite}
/* seasons */
.pumpkin{position:absolute;bottom:-6px;width:var(--pw,34px);z-index:4}
.pumpkin.l{left:6%}.pumpkin.r{right:6%}
.bunting{position:absolute;left:2%;right:2%;top:2px;height:16px;z-index:2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='16'%3E%3Cpath d='M0 0H42' stroke='%23C9A77B' stroke-width='1.5'/%3E%3Cpath d='M2 1 L8 15 L14 1Z' fill='%23FF8A00'/%3E%3Cpath d='M2 1 L8 15 L14 1Z' fill='%23E1AD01' transform='translate(0,0)' opacity='0'/%3E%3Cpath d='M16 1 L22 15 L28 1Z' fill='%23E1AD01'/%3E%3Cpath d='M30 1 L36 15 L42 1Z' fill='%23FFFFFF' stroke='%23F0D9A8'/%3E%3C/svg%3E") repeat-x}
.lights{position:absolute;left:2%;right:2%;top:2px;height:14px;z-index:2;display:flex;justify-content:space-around}
.lights i{width:7px;height:10px;border-radius:50%;background:var(--lc);box-shadow:0 0 10px 2px var(--lc);animation:tw2 1.6s ease-in-out infinite}
.lights i:nth-child(3n){--lc:#FF8A00}.lights i:nth-child(3n+1){--lc:#E1AD01;animation-delay:.5s}.lights i:nth-child(3n+2){--lc:#6E7DE6;animation-delay:1s}
@keyframes tw2{0%,100%{opacity:1}50%{opacity:.45}}
.wreath{position:absolute;left:50%;top:22%;width:46%;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:5px solid #4EB8A0;box-shadow:inset 0 0 0 2px #7ED2BC;z-index:2;pointer-events:none}
.wreath::after{content:"";position:absolute;left:50%;bottom:-8px;width:12px;height:9px;translate:-50% 0;background:#FF8A00;clip-path:polygon(0 0,50% 40%,100% 0,100% 100%,50% 60%,0 100%)}
.snowcap{position:absolute;left:8%;right:8%;top:30%;height:30%;background:#fff;clip-path:polygon(50% 0,92% 70%,80% 62%,66% 80%,52% 64%,38% 82%,24% 62%,8% 70%);z-index:1}
.web{position:absolute;right:0;top:0;width:60%;height:60%;z-index:2}
.leaf{width:14px;height:14px;border-radius:0 100% 0 100%;background:var(--c)}
.snow{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(43,31,85,.15)}
.bat{position:absolute;left:0;width:34px;animation:flyx var(--d) linear forwards}
.bat svg{width:100%;overflow:visible}.bat .bw{transform-origin:center;transform-box:fill-box;animation:batw .28s ease-in-out infinite alternate}
@keyframes batw{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
.cl .face{position:absolute;left:38%;top:28%;width:30%;height:40%;z-index:2}
.deco{position:absolute;pointer-events:none;z-index:1}
.sunflower{position:absolute;bottom:-4px;width:30px;z-index:4}
.haybale{position:absolute;bottom:-4px;width:46px;z-index:4}
.tulips{position:absolute;bottom:-4px;width:40px;z-index:4}

/* ===== v4.1 clouds: shapes, motion, weather ===== */
.cl{background:none!important;border-radius:0;height:auto!important;filter:drop-shadow(0 10px 14px rgba(43,31,85,.07))}
.cl::before,.cl::after{content:none!important}
.cl>.cs{display:block;width:100%;height:auto;overflow:visible}
.cs{animation:squish var(--sq,7s) ease-in-out infinite;transform-origin:50% 85%;transform-box:fill-box}
.cs .bodyc{animation:bobc var(--bq,5s) ease-in-out infinite}
@keyframes squish{0%,100%{transform:scale(1,1)}30%{transform:scale(1.035,.955)}65%{transform:scale(.975,1.035)}}
@keyframes bobc{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cs .spiral{transform-box:fill-box;transform-origin:center;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* label clouds: animated body, steady text */
.namecloud{background:none!important;box-shadow:none!important;padding:16px 22px 12px!important;animation:none!important;min-width:118px!important}
.namecloud::before,.namecloud::after{content:none!important}
.namecloud>.cs{position:absolute;left:-16%;top:-62%;width:132%;height:200%;z-index:-1;filter:drop-shadow(0 10px 12px rgba(43,31,85,.10))}
.namecloud b{position:relative;font-size:15px;white-space:nowrap}
.namecloud .pfx{position:absolute;left:50%;top:100%;pointer-events:none;z-index:-1}
.mini-drop{position:absolute;font-weight:800;font-size:11px;color:var(--cta);animation:minidrop 1.8s ease-in forwards;opacity:0}
.mini-coin{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F8D65C,#E1AD01 60%);animation:minidrop 1.6s ease-in forwards;opacity:0}
@keyframes minidrop{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(46px)}}
.steam-swirl{position:absolute;top:-6px;width:26px;height:26px;border:3px solid rgba(255,255,255,.95);border-color:#fff #fff transparent transparent;border-radius:50%;filter:drop-shadow(0 2px 3px rgba(43,31,85,.15));animation:steamup 2.4s ease-out forwards;opacity:0}
@keyframes steamup{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(10px,-46px) rotate(220deg) scale(1.3)}}
/* rain */
.cl .drops{position:absolute;left:20%;right:20%;top:72%;height:var(--fall,120px);pointer-events:none}
.cl .drops i{position:absolute;top:0;width:3px;height:15px;border-radius:3px;background:linear-gradient(rgba(110,135,200,.1),rgba(90,120,200,.9));animation:rain var(--rd,1.1s) linear infinite}
.cl .drops s{position:absolute;top:var(--fall,120px);width:14px;height:5px;margin-left:-6px;border-radius:50%;border:1.5px solid rgba(110,130,190,.6);opacity:0;animation:splash var(--rd,1.1s) linear infinite}
@keyframes rain{0%{transform:translateY(0);opacity:0}10%{opacity:1}88%{opacity:.9}100%{transform:translateY(var(--fall,120px));opacity:0}}
@keyframes splash{0%,86%{opacity:0;transform:scale(.3)}92%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
.raining .sprout2{animation:perk 1.4s ease-in-out infinite;filter:saturate(1.3) brightness(1.05)}
@keyframes perk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.18) rotate(2deg)}}
/* lightning */
.cl .bolt{position:absolute;left:46%;top:70%;width:16%;opacity:0;filter:drop-shadow(0 0 6px rgba(225,173,1,.8));animation:bolt var(--bt,6s) ease-in-out infinite}
@keyframes bolt{0%,70%,80%,100%{opacity:0}72%,76%{opacity:1}74%{opacity:.4}}
.cl.zap>.cs{animation:squish var(--sq,7s) ease-in-out infinite,zapglow var(--bt,6s) ease-in-out infinite}
@keyframes zapglow{0%,69%,80%,100%{filter:none}72%,76%{filter:drop-shadow(0 0 10px rgba(255,214,90,.9))}}
/* swirl whirl particles */
.cl .whirl{position:absolute;left:62%;top:40%;width:0;height:0}
.cl .whirl i{position:absolute;width:10px;height:10px;border-radius:0 100% 0 100%;background:var(--wc);opacity:0;animation:whirl 6s ease-out infinite}
@keyframes whirl{0%,55%{opacity:0;transform:rotate(0) translateX(0)}60%{opacity:1}100%{opacity:0;transform:rotate(540deg) translateX(70px)}}

/* ===== v4.2 planting sequence ===== */
.mtree.grown .trunk{animation:dash 1.5s 5.3s var(--ease) forwards}
.mtree.grown .branch{animation:dash 1.1s 6.2s var(--ease) forwards}
.mtree.grown .sprout{animation:pop .6s 4.5s var(--ease) forwards,fadeout .5s 6.1s forwards}
.mtree.grown .canopy{animation:canopy 6s 9s ease-in-out infinite}
.mtree .plantseed{opacity:0}
.mtree.grown .plantseed{animation:seedin .7s ease-out forwards}
.mtree.fromsky.grown .plantseed{animation:seedsky 1s cubic-bezier(.45,0,.75,.6) forwards}
@keyframes seedin{0%{opacity:1;transform:translateY(-3px)}50%{transform:translateY(1px)}100%{opacity:1;transform:translateY(0)}}
@keyframes seedsky{0%{opacity:1;transform:translateY(-330px) rotate(0)}75%{transform:translateY(0) rotate(300deg)}86%{transform:translateY(-9px)}100%{opacity:1;transform:translateY(0) rotate(340deg)}}
.mtree .hollow{opacity:.9}
.mtree .mound,.mtree .wet{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.mtree.grown .mound{animation:mound .8s .9s var(--ease) forwards}
.mtree.grown .wet{opacity:0;animation:mound .01s .9s forwards,wet 1.6s 2.7s ease-in forwards}
@keyframes mound{to{transform:scaleY(1)}}
@keyframes wet{to{opacity:.55}}
.mtree .speck{opacity:0}
.mtree.grown .speck{animation:speck .9s ease-out forwards}
@keyframes speck{0%{opacity:0;transform:translate(0,0)}30%{opacity:1;transform:translate(calc(var(--sx)*.6),calc(var(--sy) - 6px))}100%{opacity:1;transform:translate(var(--sx),calc(var(--sy)*-.1 + 6px))}}
.mtree .wcloud{opacity:0}
.mtree.grown .wcloud{animation:wcloud 3.4s 1.6s ease-in-out forwards}
@keyframes wcloud{0%{opacity:0;transform:translateX(-170px)}26%{opacity:1;transform:translateX(0)}76%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(170px)}}
.mtree .drz{opacity:0}
.mtree.grown .drz{animation:drzvis 3.4s 1.6s forwards}
.mtree .drz line{animation:drzl .42s linear infinite}
@keyframes drzvis{0%,28%{opacity:0}32%,72%{opacity:1}78%,100%{opacity:0}}
@keyframes drzl{from{transform:translateY(-4px);opacity:1}to{transform:translateY(64px);opacity:0}}
.mtree .rootwin{opacity:0}
.mtree.grown .rootwin{animation:rootwin 5.4s 2.9s ease-in-out forwards}
@keyframes rootwin{0%{opacity:0}10%{opacity:1}78%{opacity:1}100%{opacity:0}}
.mtree .root{stroke-dasharray:70;stroke-dashoffset:70}
.mtree.grown .root{animation:dash 1.5s var(--ease) forwards}
@media (prefers-reduced-motion: reduce){.mtree *{animation-delay:0s!important}}

.passer .dir{display:block}
.passer.west{animation-name:flyw}.passer.west .dir{transform:scaleX(-1)}
@keyframes flyw{from{transform:translate(125vw,0)}50%{transform:translate(50vw,var(--dy,-20px))}to{transform:translate(-20vw,0)}}
.passer.loop{animation-name:flyloop}
@keyframes flyloop{0%{transform:translate(-20vw,0) rotate(0)}40%{transform:translate(38vw,0) rotate(0)}47%{transform:translate(46vw,-40px) rotate(-120deg)}53%{transform:translate(40vw,-70px) rotate(-240deg)}60%{transform:translate(42vw,0) rotate(-360deg)}100%{transform:translate(125vw,10px) rotate(-360deg)}}
.passer.turn{animation-name:flyturn}.passer.turn .dir{animation:flipturn var(--d) linear forwards}
@keyframes flyturn{0%{transform:translate(-20vw,0)}52%{transform:translate(58vw,-6px)}60%{transform:translate(62vw,-34px)}100%{transform:translate(-25vw,0)}}
@keyframes flipturn{0%,52%{transform:scaleX(1)}56%{transform:scaleX(.05)}60%,100%{transform:scaleX(-1)}}

/* v4.3 mirrored sparrow directions */
.passer.east{animation-name:flyx}.passer.east .dir{transform:scaleX(-1)}
.passer.west .dir{transform:none}
.passer.loop{animation-name:flyloopw}
@keyframes flyloopw{0%{transform:translate(125vw,0) rotate(0)}40%{transform:translate(58vw,0) rotate(0)}47%{transform:translate(50vw,-40px) rotate(120deg)}53%{transform:translate(56vw,-70px) rotate(240deg)}60%{transform:translate(54vw,0) rotate(360deg)}100%{transform:translate(-20vw,10px) rotate(360deg)}}
.passer.turn .dir{animation:flipturn2 var(--d) linear forwards}
@keyframes flipturn2{0%,52%{transform:scaleX(-1)}56%{transform:scaleX(-.05)}60%,100%{transform:scaleX(1)}}
/* money-tree coins with currency symbols */
.coinf,.gift,.mini-coin{display:grid;place-items:center;font:800 10px/1 var(--font);color:#A87E00}
.gift{font-size:11px}
.mini-coin{width:14px!important;height:14px!important;font-size:8.5px}
.coinf{font-size:10px}

/* v4.4 landing sparrow: folded wings */
.rig.fold .wt{transform:rotate(-30deg) scaleY(.5);transition:transform .25s ease-out}
.rig.fold .wl{transform:rotate(-36deg) scaleY(.5);transition:transform .25s ease-out}

/* v4.5 right-facing sparrow, founder tilt */
:root{--bird-tilt:8}
.rig{rotate:calc(var(--bird-tilt) * -1deg)}
.rig.notilt{rotate:none}
.passer.east{animation-name:flyx}.passer.east .dir{transform:none}
.passer.west{animation-name:flyw}.passer.west .dir{transform:scaleX(-1)}
.passer.loop{animation-name:flyloop}
.passer.turn{animation-name:flyturn}.passer.turn .dir{animation:flipturn var(--d) linear forwards}
.logo-stage .seed{opacity:1!important;animation:none!important}
.stage-tm{opacity:1!important;animation:none!important}

/* ===== v5 focused 4D ===== */
.hero .value{margin-top:16px;font-size:clamp(18px,2.1vw,22px);font-weight:800;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:10px}
.hero .value::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--seed);flex:0 0 auto}
.hero .ctas .btn-primary{padding:15px 26px;font-size:16px;box-shadow:0 14px 30px -14px rgba(79,91,213,.7)}
.mbar{display:none}
@media (max-width:620px){
  .mbar{display:flex;position:fixed;left:16px;right:16px;bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:45;padding:14px 20px;font-size:16px;box-shadow:0 16px 34px -14px rgba(43,31,85,.55)}
  body{padding-bottom:80px}
  .bar .btn-primary{display:none}
}
/* door signature moment: sparrow and glowing seed inside the doorway light */
.glimpse{position:absolute;left:50%;top:44%;width:74%;translate:-50% -50%;opacity:0;animation:glimpse .9s .18s ease-out forwards;pointer-events:none}
.glimpse .rig{width:100%}
.glimpse i{position:absolute;left:62%;top:92%;width:16%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 32%,#FCE38A,#E1AD01 60%);box-shadow:0 0 10px 4px rgba(255,214,90,.75)}
@keyframes glimpse{0%{opacity:0;scale:.6}35%{opacity:1;scale:1}100%{opacity:1;scale:1.05}}
/* fruit delivery */
.fruit{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FCE38A,#E1AD01 60%,#C89600);box-shadow:inset 0 0 0 1.5px #F6D25C;display:grid;place-items:center;font:800 9px/1 var(--font);color:#A87E00;z-index:4;pointer-events:none}
.mtree .coin.fallen{visibility:hidden}
.rider{position:absolute;left:0;top:0;width:120px;z-index:6;pointer-events:none}
.rider svg{display:block;width:100%;overflow:visible}
.rider .wheel{transform-box:fill-box;transform-origin:center}
.rider.moving .wheel{animation:spin .7s linear infinite}
.rider.moving .rbody{animation:pedal .35s ease-in-out infinite alternate}
@keyframes pedal{to{transform:translateY(-1.5px)}}
.walkerp{position:absolute;left:0;top:0;width:30px;z-index:5;pointer-events:none}
.walkerp svg{display:block;width:100%;overflow:visible}
.walkerp.stepping svg{animation:stepbob .3s ease-in-out infinite alternate}
@keyframes stepbob{to{transform:translateY(-2px)}}
.porchbasket{position:absolute;left:50%;bottom:-4px;width:34px;translate:-50% 0;z-index:3;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(43,31,85,.18))}
.porchbasket svg{display:block;width:100%}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .page{display:none}
}