@font-face{font-family:Fredoka;src:url('assets/fredoka-semibold.ttf');font-weight:600;font-display:swap}
:root{color-scheme:light;--ink:#302018;--cream:#faf6e9;--green:#285845}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #efaa35;outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2{font-family:Fredoka;line-height:1.06;font-weight:600}button{color:inherit}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:white;padding:15px}.skip:focus{top:54px}.prototype-bar{position:fixed;inset:0 0 auto;height:42px;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#faf6e9f0;font-size:11px;letter-spacing:.3px}.prototype-bar a{text-decoration:none}.prototype-bar button{border:0;background:transparent;padding:10px}.scroll-story{height:550svh}.stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;isolation:isolate;background:var(--green)}.sky{position:absolute;inset:0;background:linear-gradient(#90d1f5 20%,#c6e9eb 72%,#f8edb9);z-index:0}.scenery{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;will-change:transform;z-index:1}.valley{z-index:2}.cream{position:absolute;inset:0;background:var(--cream);z-index:4;opacity:0;pointer-events:none}.cloud-track{position:absolute;top:12%;width:100%;height:70px;animation:drift 93s linear infinite;animation-delay:-22s}.cloud-track img{width:180px;height:auto}.cloud-two{top:24%;animation-duration:127s;animation-delay:-105s}.cloud-two img{width:130px}.cloud-three{top:35%;animation-duration:151s;animation-delay:-76s}.cloud-three img{width:160px}@keyframes drift{from{transform:translateX(-220px)}to{transform:translateX(calc(100vw + 220px))}}.clouds-paused .cloud-track{animation-play-state:paused}.hero-copy{position:absolute;top:9%;left:10%;width:80%;z-index:5;text-align:center;will-change:transform}.logo{position:relative;width:145px;margin:0 auto 18px}.logo img{width:100%;height:auto;display:block}h1{font-size:clamp(34px,4.2vw,58px)}.hero-copy>p{font-size:15px;line-height:1.5;margin:14px auto 0;max-width:550px}.actions{display:flex;gap:22px;justify-content:center;margin-top:20px}.actions button{width:190px;height:60px;border-radius:13px;border:1px solid var(--ink);font-size:12px;font-weight:700}.store{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;background:var(--ink);color:white}.store:after{content:'';position:absolute;inset:-13px -12px;background:url('assets/store-leaf-corners-v6.png') center/100% 100% no-repeat;pointer-events:none}.store svg{width:23px;height:28px}.store span{text-align:left}.store small{display:block;font-size:9px;font-weight:400}.store b{font-size:24px;letter-spacing:-.7px}.android{background:#fff9ed}.hero-copy #preview-status{font-size:11px;max-width:480px;background:#faf6e9ee;width:fit-content;border-radius:6px;padding:0 10px}.hero-copy #preview-status:empty{display:none}.nest-group{position:absolute;inset:0;z-index:6;pointer-events:none;will-change:transform}.egg-choice{position:absolute;padding:0;background:none;border:0;pointer-events:auto}.nest-group .egg-choice{width:min(23vw,190px);height:min(23vw,190px);bottom:14%;left:calc(50% - min(25vw,260px))}.nest-group .ignie{left:auto;right:calc(50% - min(25vw,260px));width:min(21vw,170px);height:min(21vw,170px)}.egg-choice .shell{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .18s}.egg-choice .pet{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .18s}.clovie .pet{transform:scale(1.18)}.ignie .pet{transform:scaleX(-1)}.egg-choice>.pet-label{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);opacity:0;background:#285845;color:#fff9ed;border-radius:12px;padding:4px 10px;font-size:12px;z-index:12}.can-preview .egg-choice:is(:hover,:focus-visible,[aria-pressed=true]) .shell{opacity:0}.can-preview .egg-choice:is(:hover,:focus-visible,[aria-pressed=true]) .pet,.can-preview .egg-choice:is(:hover,:focus-visible,[aria-pressed=true])>.pet-label{opacity:1}.traveller{z-index:9;transform:translate(-50%,-50%);will-change:top,left,width,height}.traveller .pet{width:150%;left:-25%;height:120%;top:-5%}.traveller>.pet-label{bottom:5%}.nest-rim{position:absolute;width:min(720px,80vw);height:auto;left:50%;bottom:5%;z-index:10;pointer-events:none;will-change:transform;transform:translateX(-50%)}.foreground{position:absolute;bottom:-12%;width:28%;z-index:11;pointer-events:none;will-change:transform}.foreground-left{left:-5%}.foreground-right{right:-5%}.phone{position:absolute;z-index:7;overflow:hidden;border-radius:8% / 4%;will-change:transform,width,height;background:#79c8e9;box-shadow:0 24px 50px #112c2020}.phone>img,.phone>:where(.screen-image)>img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:contain;opacity:0}.phone-placeholder{position:absolute;inset:0;border:5px solid #322b25;border-radius:inherit;overflow:hidden;background:linear-gradient(#72c4e8,#b9e3ec 58%,#e5dede)}.phone-placeholder>span{position:absolute;top:6%;left:7%;font:600 clamp(18px,2vw,28px) Fredoka}.phone-placeholder>img{position:absolute;width:71%;left:14.5%;top:40%;height:22%;object-fit:contain}.follow-copy,.landing-copy,.tp-copy{position:absolute;z-index:6;opacity:0}.follow-copy{top:16%;width:100%;text-align:center;color:#fff7e4}.follow-copy h2{font-size:clamp(30px,4vw,50px)}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;margin-bottom:14px;line-height:1.5}.landing-copy{top:38%;left:7%;width:29%;color:#fff7e4}.landing-copy h2{font-size:clamp(28px,3.3vw,45px)}.landing-copy>p:last-child{font-size:14px;line-height:1.6;margin-top:17px}.tp-copy{top:24%;left:53%;width:38%;max-width:500px}.tp-copy h2{font-size:clamp(34px,4vw,54px)}.tp-copy ol{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:20px}.tp-copy li{display:flex;gap:15px;align-items:flex-start}.tp-copy li>span{color:#5f7960;border-top:1px solid #a3b29d;padding-top:4px;font-size:12px}.tp-copy h3{font-size:15px;margin-bottom:5px}.tp-copy li p{font-size:13px;line-height:1.5;color:#6b5d50}.story-summary{text-align:center;padding:100px 24px 110px;max-width:1000px;margin:auto;scroll-margin-top:42px}.story-summary h2{font-size:46px}.story-summary>p:not(.eyebrow){max-width:550px;margin:20px auto;line-height:1.7;font-size:15px}.story-summary a{font-size:14px}.static-moments{display:flex;justify-content:center;gap:25px;margin:35px 0}.static-moments figure{flex:1;margin:0;max-width:230px}.static-moments img{height:220px;max-width:100%;object-fit:contain}.static-moments figcaption{font-size:12px;line-height:1.6;margin-top:15px}.story-summary .prototype-note{font-size:11px!important;color:#796f64;margin-top:45px!important}.reduced-motion .scroll-story{display:none}.reduced-motion .story-summary{padding-top:100px}
@media(max-width:699px){.prototype-bar{padding:0 12px;font-size:10px}.scroll-story{height:430svh}.scenery{width:160%;max-width:none;left:-30%;object-fit:cover}.hero-copy{left:5%;width:90%;top:12%}.logo{width:125px;margin-bottom:24px}h1{font-size:clamp(32px,8.5vw,45px)}.hero-copy>p{font-size:13px;max-width:270px;margin-top:16px}.actions{gap:14px;margin-top:22px}.actions button{width:155px;height:56px;font-size:10px}.store b{font-size:21px}.store small{font-size:8px}.store svg{width:20px}.store:after{inset:-10px}.nest-group .egg-choice{width:29vw;height:29vw;left:17%;bottom:15%}.nest-group .ignie{width:26vw;height:26vw;right:17%;left:auto}.nest-rim{width:108vw;bottom:9%;max-width:none}.foreground{width:44%;bottom:1%}.foreground-left{left:-16%}.foreground-right{right:-16%}.follow-copy{top:15%}.landing-copy{top:9%;left:5%;width:90%;text-align:center}.landing-copy h2{font-size:27px}.landing-copy h2 br{display:none}.landing-copy .eyebrow{font-size:8px;margin-bottom:8px}.landing-copy>p:last-child{font-size:11px;margin-top:var(--foliage-right-drop)}.tp-copy{left:7%;width:86%;top:54%;max-width:none}.tp-copy h2{font-size:31px}.tp-copy h2 br{display:none}.tp-copy .eyebrow{font-size:8px;letter-spacing:1.1px;margin-bottom:9px}.tp-copy ol{gap:13px;margin-top:17px}.tp-copy h3{font-size:13px;margin-bottom:3px}.tp-copy li p{font-size:11px}.tp-copy li>span{font-size:10px}.story-summary{padding-top:75px}.story-summary h2{font-size:36px}.static-moments{gap:12px}.static-moments img{height:155px}.static-moments figcaption{font-size:10px}}
@media(max-height:650px) and (min-width:700px){.hero-copy{top:10%}.logo{width:110px;margin-bottom:10px}h1{font-size:40px}.hero-copy>p{margin-top:var(--foliage-right-drop)}.actions{margin-top:12px}.actions button{height:52px}.tp-copy{top:17%}}
@media(prefers-reduced-motion:reduce){.scroll-story{display:none}.story-summary{padding-top:100px}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:699px) and (max-height:650px){.hero-copy{top:11%}.logo{width:100px;margin-bottom:12px}h1{font-size:29px}.hero-copy>p{margin-top:10px;font-size:12px}.actions{margin-top:15px;gap:12px}.actions button{width:138px;height:50px}.tp-copy{top:53%}.tp-copy h2{font-size:25px}.tp-copy .eyebrow{font-size:7px;margin-bottom:7px}.tp-copy ol{gap:9px;margin-top:11px}.tp-copy h3{font-size:12px}.tp-copy li p{font-size:10px}.landing-copy{top:10%}.landing-copy h2{font-size:23px}.landing-copy>p:last-child{display:none}}
/* Clip without creating an inner scroller when a preview button receives focus. */
.stage{overflow:clip}
.follow-copy{top:12%}
.follow-copy h2{font-size:clamp(30px,3.5vw,44px)}

.phone-placeholder{inset:5px;border:0;border-radius:0;box-shadow:none}
.phone::after{content:"";position:absolute;inset:0;border:5px solid #322b25;border-radius:inherit;pointer-events:none;z-index:5}
.phone-placeholder>img{width:92.3077%;height:30.7109%;left:3.84615%;top:35.8757%}

/* Catch choreography: keep copy clear of the vertical falling path. */
.follow-copy{left:7%;top:33%;width:29%;text-align:left}
.traveller{will-change:transform,opacity}
.phone{will-change:transform}
@media(max-width:699px){.follow-copy{left:5%;top:9%;width:90%;text-align:center}.follow-copy h2{font-size:27px}.follow-copy .eyebrow{font-size:8px;margin-bottom:8px}}
@media(max-width:699px) and (max-height:650px){.follow-copy{top:10%}.follow-copy h2{font-size:22px}.follow-copy .eyebrow{display:none}}
.prototype-bar{font-size:11px}

/* Crisp nest artwork behind the pets, anchored to their shared baseline. */
.nest-rim{width:var(--nest-width);top:var(--nest-top);bottom:auto;z-index:6}
.nest-group{z-index:auto;will-change:auto}
.nest-group .egg-choice{z-index:0;transform:translateY(var(--nest-y,0px));width:var(--clovie-egg-width);height:var(--companion-egg-height);bottom:calc(100% - var(--nest-base));left:calc(var(--clovie-egg-x) - var(--clovie-egg-width)*.5)}
.nest-group .ignie{width:var(--ignie-egg-width);left:calc(var(--ignie-egg-x) - var(--ignie-egg-width)*.5);right:auto}
.egg-choice:before{content:'';position:absolute;left:15%;bottom:-2%;width:70%;height:6%;border-radius:50%;background:#183d2e;filter:blur(2px);opacity:var(--egg-grounding,1);z-index:-1;pointer-events:none}
.egg-choice .pet{inset:auto;bottom:0;left:-20%;width:140%;height:auto;max-height:none;object-fit:contain;object-position:center bottom;pointer-events:none}
.clovie .pet{left:-35%;width:170%;transform:none}
.ignie .pet{left:-18%;width:136%;transform:scaleX(-1)}
.traveller .pet{width:135%;left:-17.5%;height:auto;top:auto;bottom:0}
.egg-choice>.pet-label,.traveller>.pet-label{bottom:calc(100% + 8px);z-index:12;pointer-events:none}
@media(max-width:699px){.egg-choice>.pet-label,.traveller>.pet-label{font-size:11px;padding:3px 8px}}
/* Match the loaded Rive hierarchy and ground registration during fallback. */
.clovie .pet{width:165.87%;left:-32.935%;bottom:-9.9522%}
.traveller .pet{width:128%;left:-14%;bottom:-8.13%}
.ignie .pet{width:145.2%;left:-22.6%;bottom:-8.0828%;transform:scaleX(-1)}
.clovie>.pet-label{bottom:calc(100% + var(--hero-egg)*.07 + 8px)}
.traveller>.pet-label{transform:translateX(-50%) scale(var(--pet-label-scale,1));transform-origin:50% 100%}

/* Smaller framing clusters; keep the eggs and companions unobscured. */
.egg-choice:before{filter:none;height:4%;opacity:calc(var(--egg-grounding,1)*.28)}
.foreground{width:18%;max-width:260px;bottom:-9%}

@media(max-width:699px){
  .foreground{width:28%;bottom:1%}
  .foreground-left{left:-8%}.foreground-right{right:-8%}


}

/* Solid painted ground, without opacity masks or overlay fades. */
.stage{--green:#2e594c;background:var(--green)}
.world-scene{position:absolute;inset:0;z-index:3;isolation:isolate;--hero-canvas-width:var(--world-width,100vw)}
.world-background{position:absolute;inset:0 0 auto;z-index:0;pointer-events:none;overflow:hidden}
.world-background .sky,.world-background .scenery{height:var(--world-height,100svh)}
.scenery{object-position:center bottom}
/* Low, asymmetric undergrowth with complete silhouettes and native proportions. */
.foreground{width:var(--foliage-size);height:calc(var(--foliage-size)*2/3);max-width:none;top:var(--foliage-top);bottom:auto;z-index:5}
.foreground-left{left:calc(-1*var(--foliage-outset))}.foreground-right{right:calc(-1*var(--foliage-outset));margin-top:var(--foliage-right-drop)}
.foreground img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.foreground .foliage-bright{position:relative;z-index:1}
/* Wide desktop artwork leaves sky for copy without distorting the scenery. */
@media(min-width:700px){
 .stage{--green:#315f55}
 .scenery{top:0;height:100%;object-fit:cover}
 .mountains{object-position:center top}
}

.sky:before{content:'';position:absolute;left:19%;top:23%;width:clamp(70px,7vw,130px);aspect-ratio:1;border-radius:50%;background:#fff9d5;box-shadow:0 0 65px 30px #fff0b660}
@media(max-width:699px){.sky:before{display:none}}

/* Keep the phone centered; reveal copy on the right, then on the left. */
@media(min-width:700px){
 .follow-copy{left:var(--follow-copy-x)}
 .landing-copy{left:var(--landing-copy-x)}
 .follow-copy,.landing-copy{top:var(--pair-copy-y);width:var(--pair-copy-width);transform:translateY(-50%);text-align:left}
 .follow-copy h2,.landing-copy h2{font-size:clamp(24px,2.5vw,38px)}
 .stage .follow-copy>p,.stage .landing-copy>p:last-child{font-size:15px;line-height:1.6;margin-top:20px;max-width:360px}
}

/* Approved clearing: continuous ground, independent complete edge plants. */
.stage{--green:#34534B}
.hero-grass{position:absolute;left:0;right:0;top:calc(var(--grass-edge,100%) + var(--grass-top-offset,-21vw));height:calc(var(--world-height,100svh) + var(--grass-height,33.333333vw));z-index:8;pointer-events:none;will-change:transform;transform:translate3d(0,0,0)}
/* Use the entire U once: repeating the old hedge would flatten its dipped center. */
.hero-grass:before{content:'';position:absolute;inset:0 0 auto;height:var(--grass-height,33.333333vw);background:var(--green);-webkit-mask:url('assets/hero-parallax-v2/grass-u-contour.png') center top/100% 100% no-repeat;mask:url('assets/hero-parallax-v2/grass-u-contour.png') center top/100% 100% no-repeat;mask-mode:alpha}
/* Source alpha is continuous across the full width from row576 of724. */
.hero-grass:after{content:'';position:absolute;left:0;right:0;top:calc(var(--grass-height,33.333333vw) * .79558);bottom:0;background:var(--green)}
.clearing-plants{position:absolute;top:calc(var(--nest-base) - clamp(200px,19vw,280px));width:clamp(260px,30vw,460px);aspect-ratio:1;overflow:hidden;pointer-events:none;z-index:7;will-change:transform}
.clearing-plants img{display:block;position:absolute;top:0;width:200%;height:100%;max-width:none}
.plants-left{left:-2%}.plants-right{right:-2%;margin-top:28px}
.plants-right img{left:-100%}
@media(max-width:699px){
 .clearing-plants{width:190px;top:calc(var(--nest-base) - 140px)}
 .plants-left{left:-35px}.plants-right{right:-35px;margin-top:14px}
}

/* Back only the bottom fifth of the registered lawn canvas. Viewport-based
   placement can rise into the transparent mountain sky during parallax. */
.clearing-ground{position:absolute;left:0;right:0;top:calc(var(--world-height) - var(--hero-canvas-width) * .1);height:calc(var(--hero-canvas-width) * .1);background:var(--green);z-index:0;will-change:transform}
/* Four separately painted PNG planes share one registered 1774×887 canvas.
   Use the measured stage width for both axes, including scrollbar space. */
.world-scene .hero-plane{--hero-base-offset:0px;inset:auto;left:calc((var(--world-width,100vw) - var(--hero-canvas-width)) * .5);top:calc(var(--world-height,100svh) - var(--hero-canvas-width) * .5 + var(--hero-base-offset));width:var(--hero-canvas-width);height:auto;aspect-ratio:2;object-fit:contain;filter:none;pointer-events:none}
.hero-plane-art{display:block;width:100%;height:auto;pointer-events:none}
.world-background .cloud-banks{z-index:1}
.world-background .mountains{--hero-base-offset:calc(var(--hero-canvas-width) * -.08);z-index:2}
.world-background .lake-falls{z-index:3}
.world-scene .valley{height:calc(var(--hero-canvas-width) * .5);z-index:1;overflow:visible}
@media(max-width:699px){.world-scene{--hero-canvas-width:calc(var(--world-width,100vw) * 2.4)}}

/* Ambient cloud motion belongs to the inner art; parallax moves its parent. */
.cloud-field{animation:hero-cloud-drift 64s linear infinite alternate;will-change:transform}
@keyframes hero-cloud-drift{from{transform:translateX(-.6%)}to{transform:translateX(.6%)}}
.clouds-paused .cloud-field{animation-play-state:paused}
.motion-off .cloud-field{animation:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.cloud-field{animation:none;will-change:auto}}

/* Native anchor/keyboard navigation complements the desktop wheel easing. */
html{scroll-behavior:smooth}
html.motion-off{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Painted water and cottage smoke use the owning plane's registered canvas. */
.waterfall-motion,.chimney-smoke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.water-curtain{opacity:.22;animation:hero-water-flow var(--curtain-duration) linear infinite;animation-delay:var(--curtain-delay)}
@keyframes hero-water-flow{from{transform:translateY(calc(-1 * var(--curtain-period)))}to{transform:translateY(0)}}
.water-splash{opacity:0;animation:hero-water-splash var(--splash-time) ease-in-out infinite;animation-delay:var(--splash-delay)}
@keyframes hero-water-splash{0%,100%{opacity:0;transform:translateY(0)}45%{opacity:.3;transform:translateY(-2px)}}
.chimney-wisp{opacity:0;transform-box:fill-box;transform-origin:50% 95%;animation:hero-smoke-rise 7s linear infinite;animation-delay:var(--smoke-delay)}
@keyframes hero-smoke-rise{0%{opacity:0;transform:translate(0,0) scale(.8)}15%{opacity:.5}45%{opacity:.3}80%,100%{opacity:0;transform:translate(7px,-20px) scale(1.08)}}
.clouds-paused :is(.water-curtain,.water-splash,.chimney-wisp){animation-play-state:paused}
.motion-off :is(.waterfall-motion,.chimney-smoke){display:none}
@media(prefers-reduced-motion:reduce){.waterfall-motion,.chimney-smoke{display:none}}

/* Disconnected plants expose the actual lawn between the eggs; no rug or ring.
   Decorative layers must never intercept preview hover or touch. */
.nest-front{position:absolute;inset:0;z-index:10;pointer-events:none;will-change:transform,opacity}
.nest-front img{position:absolute;left:50%;top:var(--nest-top);width:var(--nest-width);height:calc(var(--nest-width) * .333333);transform:translateX(-50%);pointer-events:none}
/* Clip the two side bushes, leaving the lawn in front of the eggs clear. */
.nest-front .nest-bush-left{clip-path:inset(0 68.75% 0 0);transform:translateX(calc(-50% - var(--hero-egg)*.4))}
.nest-front .nest-bush-right{clip-path:inset(0 0 0 72%);transform:translateX(calc(-50% + var(--hero-egg)*.4))}

/* Preserve room between the copy and the taller eggs on short desktop windows. */
@media(min-width:700px) and (max-height:780px){
 .stage .hero-copy{top:6%}
 .stage .hero-copy:before{content:'';position:absolute;z-index:-1;left:50%;top:-12px;bottom:-12px;width:min(560px,calc(100% + 24px));transform:translateX(-50%);border-radius:20px;background:#faf6e9f2;pointer-events:none}
 .stage .hero-copy .logo{width:96px;margin-bottom:10px}
 .stage .hero-copy h1{font-size:34px}
 .stage .hero-copy>p{font-size:12px;margin-top:10px}
 .stage .hero-copy .actions{margin-top:12px}
 .stage .hero-copy .actions>*{height:44px}
}
@media(min-width:700px) and (max-height:560px){
 .stage .hero-copy{top:3%}
}
@media(max-width:699px){
 /* Clear the central egg's name pill as well as the taller 391:353 shell. */
 .stage .scroll-hint{top:calc(var(--nest-base) - var(--hero-egg) * 391 / 353 - 68px);bottom:auto;left:50%;width:max-content;max-width:calc(100% - 32px);padding:5px 9px;transform:translateX(-50%);border-radius:20px;background:#faf6e9e8;color:var(--ink);font-size:10px;line-height:1.3;pointer-events:none}
}

/* Let the browser manage the large lawn surface instead of reserving a
   permanent promoted texture. Parallax still uses the same transform. */
.world-scene .valley{will-change:auto}

/* Let responsive screenshot sources preserve each image’s existing layout box. */
.screen-image{display:contents}
.screen-image>source{display:none}