:root{color-scheme:dark;--mx:0;--my:0;font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;background:#000;color:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;overflow-x:hidden;background:#000}button,a{font:inherit}#app{position:relative;isolation:isolate;overflow:hidden;background:#000}.scene{position:relative;width:min(100%,1633px);margin:auto;min-height:720px}.ambient{position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);pointer-events:none;transform:translate(calc(var(--mx)*20px),calc(var(--my)*20px))}.ambient--amber{width:430px;height:850px;right:-240px;top:-90px;background:linear-gradient(#ffb300,#860600);opacity:.75}.ambient--lime{width:950px;height:950px;left:-300px;bottom:-160px;background:radial-gradient(circle,#e3e4aa 0,#a9a800 38%,#650909 76%,transparent 79%);opacity:.86}.star-field{position:absolute;inset:0;z-index:-1;opacity:.22;background-image:radial-gradient(#ecfff3 1.2px,transparent 1.6px);background-size:43px 43px;mask-image:linear-gradient(#000 0 16%,transparent 34%)}
.hero{height:min(49vw,800px);min-height:570px;max-height:800px}.dot-grid{position:absolute;left:2%;right:10%;top:17%;height:60%;opacity:.35;background-image:radial-gradient(#5e8872 1.4px,transparent 1.6px);background-size:40px 40px;mask-image:linear-gradient(90deg,transparent,#000 5% 94%,transparent)}.hero-lockup{position:absolute;top:28%;left:50%;text-align:center;transform:translateX(-50%)}.hero h1{margin:0;font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;font-size:clamp(112px,18vw,290px);font-weight:900;line-height:.78;letter-spacing:-.085em;text-shadow:0 2px 0 #bbb;transform:translateX(-.035em)}.hero p{margin:64px 0 0;font-size:clamp(26px,3vw,44px);font-weight:500;letter-spacing:.02em}.sound-toggle{position:absolute;right:4.2%;top:5%;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;color:#171717;background:#d6d5d0;cursor:pointer;transition:.25s}.sound-toggle span{font-size:23px;font-weight:800}.sound-toggle.is-on{box-shadow:0 0 0 8px #fff2;transform:scale(1.08)}.spark{position:absolute;font-style:normal;color:#fff;animation:twinkle 2.8s ease-in-out infinite}.spark--a{left:50%;top:17%;font-size:23px}.spark--b{right:8%;top:15%;font-size:17px}.spark--c{right:14%;top:71%;font-size:34px}.cloud-mascot{position:absolute;left:22%;top:40%;width:62px;height:50px;filter:drop-shadow(0 7px 8px #0008);animation:float 4s ease-in-out infinite;transform:translate(calc(var(--mx)*18px),calc(var(--my)*14px))}.cloud-mascot:before,.cloud-mascot:after,.cloud-mascot i{content:"";position:absolute;border-radius:50%;background:linear-gradient(145deg,#fff,#8c8c8c)}.cloud-mascot:before{width:37px;height:37px;left:8px;top:9px}.cloud-mascot:after{width:31px;height:31px;right:5px;top:14px}.cloud-mascot i{width:29px;height:29px;left:23px;top:2px}.cloud-mascot b{position:absolute;z-index:2;left:24px;top:19px;color:#292929;font-size:19px}.cloud-doodle{position:absolute;left:3%;top:62%;width:80px;height:42px;border:4px solid #fff;border-radius:60% 45% 52% 48%;transform:rotate(5deg)}.cloud-doodle:after{content:"";position:absolute;width:13px;height:10px;border:4px solid #fff;border-radius:50%;right:-5px;bottom:-24px}.play-tag{position:absolute;right:13%;top:52%;padding:13px 11px;color:#080808;background:#a96345;border-radius:9px;font-size:24px;transform:rotate(49deg);box-shadow:0 8px 24px #0008}.orbit{position:absolute;right:7%;top:42%;width:160px;height:98px;border:3px solid #d9a43c;border-left-color:transparent;border-radius:50%;transform:rotate(-12deg);opacity:.8}.crown{position:absolute;right:19%;bottom:11%;font-size:50px}.scroll-cue{position:absolute;left:18%;bottom:9%;width:35px;height:35px}.scroll-cue:before,.scroll-cue:after,.scroll-cue span{content:"";position:absolute;width:4px;height:28px;background:#fff;transform-origin:bottom}.scroll-cue:before{transform:rotate(-62deg)}.scroll-cue:after{transform:rotate(-38deg);left:12px;top:2px}.scroll-cue span{transform:rotate(-15deg);left:22px;top:5px}
.people-scene{height:min(47vw,760px);min-height:610px}.copy{position:absolute;z-index:3}.copy h2,.copy p{margin:0;font-size:clamp(26px,3.25vw,52px);line-height:1.55;font-weight:500}.copy--people{left:9%;top:18%}.copy--people h2{margin-bottom:16px}.people-row{position:absolute;left:7%;right:5%;top:43%;height:43%;display:flex;align-items:flex-end;justify-content:space-between;filter:grayscale(1);opacity:.76}.person{position:relative;width:6.5%;height:78%;transform-origin:bottom;animation:idle 4s ease-in-out infinite;animation-delay:calc(var(--i)*-.23s)}.person-head{position:absolute;top:0;left:30%;width:40%;aspect-ratio:1;border-radius:48%;background:#777;box-shadow:inset 5px -4px #424242}.person-body{position:absolute;left:20%;top:14%;width:60%;height:56%;border-radius:42% 42% 22% 22%;background:linear-gradient(90deg,#3f3f3f,#8b8b8b 45%,#383838);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}.person-leg{position:absolute;top:67%;width:17%;height:33%;background:#666}.person-leg.a{left:28%;transform:rotate(2deg)}.person-leg.b{right:28%;transform:rotate(-2deg)}.person--child{height:45%}.person--elder{height:61%;transform:skew(-4deg)}.person--coat{height:68%}.person--wide{width:9%;height:80%}.person--wide .person-body,.person--round .person-body{left:7%;width:86%;border-radius:45%}.person--dress .person-body{clip-path:polygon(32% 0,68% 0,100% 100%,0 100%)}.person--short{height:58%}.person--round{width:9%;height:64%}.person--slim{width:5%;height:70%}.person--pram{height:58%}.person--pram:after{content:"";position:absolute;left:-60%;bottom:0;width:90%;height:42%;border:6px solid #777;border-radius:50% 50% 18% 18%}.person--seated{height:50%}.person--bags{height:67%}.person--bags:after{content:"";position:absolute;left:-24%;right:-35%;bottom:8%;height:35%;border:5px solid #777;border-top:0}.cloud-mascot--small{left:17%;top:53%;transform:scale(.75);z-index:2}
.summon-scene{height:min(45vw,730px);min-height:630px}.egg{position:absolute;left:37%;top:19%;width:clamp(150px,19vw,300px);aspect-ratio:.73;border-radius:52% 48% 47% 53% / 63% 61% 39% 37%;background:radial-gradient(circle at 38% 30%,#727272,#383838 38%,#090909 78%);filter:drop-shadow(0 28px 30px #000);animation:eggBreath 3.8s ease-in-out infinite}.egg:before{content:"";position:absolute;inset:4%;border-radius:inherit;background-image:repeating-radial-gradient(ellipse at 44% 40%,transparent 0 10px,#fff1 11px 12px);mix-blend-mode:screen}.copy--summon{right:5%;top:30%;text-align:right}.spark--egg{right:24%;top:43%;font-size:22px}.summon-scene:after{content:"";position:absolute;left:-12%;bottom:-15%;width:45%;height:43%;background:#dec200;filter:blur(90px);opacity:.58;border-radius:50%}
.hatch-scene{height:min(49vw,800px);min-height:700px}.copy--hatch{left:10%;top:20%}.copy--hatch p{margin-top:14px}.character{position:absolute;filter:grayscale(1);color:#777}.character--hero{right:20%;top:14%;width:190px;height:420px;animation:float 5s ease-in-out infinite}.character .head{position:absolute;left:34%;top:16%;width:33%;aspect-ratio:1;border-radius:48%;background:#777}.character .hair{position:absolute;z-index:2;left:24%;top:10%;width:54%;height:34%;border:22px solid #5a5a5a;border-bottom:0;border-radius:50% 50% 20% 20%}.character .hair:before,.character .hair:after{content:"";position:absolute;top:45px;width:25px;height:125px;border-radius:50%;background:#626262}.character .hair:before{left:-25px}.character .hair:after{right:-25px}.character .body{position:absolute;left:28%;top:36%;width:45%;height:42%;background:linear-gradient(90deg,#3b3b3b,#888,#414141);clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}.character .leg{position:absolute;top:76%;width:12%;height:23%;background:#656565}.character .leg.l{left:36%}.character .leg.r{right:34%}.hatch-scene:after{content:"";position:absolute;left:-5%;bottom:-24%;width:55%;height:48%;border-radius:50%;background:#c5bd00;filter:blur(100px);opacity:.62}
.stories-scene{height:min(46vw,750px);min-height:680px}.character-group{position:absolute;left:8%;top:16%;width:48%;height:42%;display:flex;align-items:end;justify-content:space-around}.mini{position:relative;width:19%;height:90%}.mini .head{top:14%;left:35%;width:30%}.mini .hair{top:6%;left:20%;width:60%;height:35%;border-width:14px}.mini .body{top:38%;left:23%;width:54%;height:54%}.mini--1{height:100%}.mini--2{height:82%}.mini--3{height:93%}.mini--4{height:82%}.copy--stories{right:5%;top:20%;text-align:right}.copy--stories p{margin-top:13px;white-space:nowrap}.cta{position:absolute;left:50%;bottom:19%;display:grid;place-items:center;width:min(33%,530px);height:100px;border-radius:28px;color:#fff;background:#73820b;box-shadow:inset 0 -10px 14px #4b5808,0 16px 40px #0008;text-decoration:none;font-size:clamp(25px,2.8vw,44px);font-weight:600;transition:transform .25s,filter .25s;transform:translateX(-50%)}.cta:hover{transform:translateX(-50%) scale(1.03);filter:brightness(1.2);box-shadow:0 0 50px #b2cc2766,inset 0 -10px 14px #4b5808}.cursor-art{position:absolute;left:63%;bottom:14%;width:70px;height:100px;background:#fff;clip-path:polygon(0 0,0 78%,22% 60%,37% 96%,54% 87%,38% 57%,68% 57%);filter:drop-shadow(4px 4px 0 #333);pointer-events:none}
.reveal{opacity:0;transform:translateY(38px);filter:blur(9px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),filter 1s}.reveal.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}.hero-lockup.reveal{transform:translate(-50%,30px)}.hero-lockup.is-visible{transform:translate(-50%,0)}.cta.reveal{transform:translate(-50%,38px)}.cta.reveal.is-visible{transform:translate(-50%,0)}
@keyframes float{50%{translate:0 -13px;rotate:1deg}}@keyframes idle{50%{rotate:1.3deg;scale:1.01}}@keyframes twinkle{50%{opacity:.25;scale:.65;rotate:45deg}}@keyframes eggBreath{50%{scale:1.025;filter:drop-shadow(0 28px 40px #d4d20044)}}
@media(max-width:760px){.scene{min-height:620px}.hero{height:700px}.hero-lockup{top:31%}.hero h1{font-size:30vw}.hero p{margin-top:42px;font-size:22px}.cloud-mascot{left:12%;top:28%;transform:scale(.75)}.play-tag{right:7%;top:59%;font-size:17px}.orbit{right:-7%;top:52%}.people-scene{height:720px}.copy--people{left:7%;top:12%}.copy h2,.copy p{font-size:25px;line-height:1.5}.people-row{left:3%;right:3%;top:38%;height:38%}.people-row .person:nth-child(even){display:none}.summon-scene{height:680px}.egg{left:12%;top:18%;width:185px}.copy--summon{right:6%;top:58%}.hatch-scene{height:720px}.copy--hatch{left:7%;top:15%}.character--hero{right:5%;top:38%;transform:scale(.72);transform-origin:top right}.stories-scene{height:760px}.character-group{left:3%;top:14%;width:75%;height:35%}.copy--stories{right:5%;top:51%;max-width:90%}.copy--stories p{white-space:normal}.cta{width:70%;height:76px;bottom:12%;border-radius:20px}.cursor-art{left:72%;bottom:8%;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none;filter:none}.hero-lockup.reveal{transform:translateX(-50%)}.cta.reveal{transform:translateX(-50%)}}

/* Scroll-driven storytelling stage. ScrollTrigger pins this viewport and the
   master timeline turns the document's scroll distance into scene time. */
#app{position:relative;overflow:visible;background:#000}.camera-stage{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;isolation:isolate;perspective:1200px;transform-style:preserve-3d}.camera-stage>.scene{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;margin:0;opacity:0;visibility:hidden;pointer-events:none;transform-style:preserve-3d;will-change:transform,opacity}.camera-stage>.hero{z-index:10}.camera-stage>.people-scene{z-index:20}.camera-stage>.summon-scene{z-index:30}.camera-stage>.hatch-scene{z-index:40}.camera-stage>.stories-scene{z-index:50}.camera-stage .sound-toggle,.camera-stage .cta{pointer-events:auto}.particle-canvas{position:fixed;inset:0;z-index:60;pointer-events:none;mix-blend-mode:screen}.ambient{position:absolute;z-index:1}.ambient--lime{opacity:clamp(0,calc((var(--journey) - .45)*2.6),.86)}.star-field{position:absolute;inset:-8%;z-index:2;transform:translate3d(calc(var(--mx)*-10px),calc(var(--my)*-10px),-80px) scale(calc(1 + var(--journey)*.07));opacity:calc(.12 + var(--journey)*.15);will-change:transform}.camera-stage .reveal{opacity:1;filter:none;transition:none}.camera-stage .hero-lockup.reveal{transform:translateX(-50%)}.camera-stage .cloud-mascot,.camera-stage .play-tag,.camera-stage .orbit,.camera-stage .crown,.camera-stage .spark{translate:calc(var(--mx)*18px) calc(var(--my)*12px)}.camera-stage .copy{translate:calc(var(--mx)*-5px) calc(var(--my)*-3px)}.camera-stage .people-row,.camera-stage .character-group{translate:calc(var(--mx)*9px) calc(var(--my)*6px)}
.people-row .person{animation:cinematicIdle calc(4.8s + var(--i)*.11s) cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i)*-.27s)}.people-row .person-body{transform-origin:center 80%;animation:breathe 3.8s ease-in-out infinite;animation-delay:calc(var(--i)*-.19s)}
.summon-scene .egg{animation:none}.egg:after{content:"";position:absolute;z-index:2;left:48%;top:17%;width:5px;height:0;background:#d8d8ce;clip-path:polygon(0 0,100% 0,35% 28%,100% 43%,20% 65%,80% 80%,25% 100%,0 100%);filter:drop-shadow(0 0 7px #fff);opacity:0;transition:height .45s ease,opacity .3s}.egg-cracking .egg:after{height:61%;opacity:.8}.egg-cracking .egg{animation:eggCrack 1.7s ease-in-out infinite}.character-born .character--hero{animation:characterIdle 5.2s ease-in-out infinite}.stories-scene .cta:hover{transform:translate3d(-50%,0,0) scale(1.03)}
@keyframes cinematicIdle{0%,100%{rotate:-.35deg;translate:0 0}50%{rotate:.45deg;translate:0 -3px}}@keyframes breathe{0%,100%{scale:1 1}50%{scale:1.018 .992}}@keyframes eggCrack{0%,100%{rotate:-.25deg}35%{rotate:.35deg}65%{rotate:-.15deg}}@keyframes characterIdle{0%,100%{rotate:-.4deg;translate:0 0}50%{rotate:.55deg;translate:0 -7px}}
@media(min-width:761px) and (max-width:1350px){.copy--stories h2,.copy--stories p{font-size:36px}}
@media(max-width:760px){.camera-stage{height:100svh;perspective:900px}.camera-stage>.scene{height:100%}.camera-stage .character--hero{transform-origin:top right}.particle-canvas{z-index:60}.camera-stage .stories-scene .cta{width:70%;height:76px}.copy--stories{top:51%}.ambient{filter:blur(62px)}.people-row,.character-group,.egg{backface-visibility:hidden}}
@media(prefers-reduced-motion:reduce){#app{height:auto}.camera-stage{position:relative;height:auto;overflow:visible}.camera-stage>.scene{position:relative;height:auto;min-height:680px;opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important}.particle-canvas{display:none}.camera-stage .copy,.camera-stage .people-row,.camera-stage .egg,.camera-stage .character--hero,.camera-stage .character-group,.camera-stage .cta{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}}

/* Supplied artwork replaces the CSS-drawn placeholders. */
.people-row{display:block;filter:none;opacity:1}.people-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 24px #0007)}
.reveal-character{display:inline-block;white-space:pre;will-change:transform,opacity,filter}
.egg{background:none;border-radius:0;filter:none;aspect-ratio:1;overflow:visible}.egg:before{display:none}.egg>img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 30px #000b)}
.egg-bouncing .egg>img{animation:eggRecurringHop 2s cubic-bezier(.45,0,.2,1) infinite;transform-origin:50% 88%}
@keyframes eggRecurringHop{0%{transform:translateY(0) scale(1)}8%{transform:translateY(-25px) scale(.96,1.06)}16%{transform:translateY(0) scale(1.06,.94)}22%{transform:translateY(-8px) scale(.99,1.02)}28%,100%{transform:translateY(0) scale(1)}}
.character-main-shared{position:absolute;z-index:45;left:64%;top:14%;width:clamp(170px,17vw,260px);height:auto;pointer-events:none;filter:drop-shadow(0 24px 26px #0008);will-change:transform,opacity}
.hatch-flash{position:absolute;z-index:44;left:50%;top:50%;width:clamp(260px,38vw,620px);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,#fffdf0 0 8%,#fff9cc 18%,#f7dc6fbb 36%,#d7b72f44 55%,transparent 72%);box-shadow:0 0 54px #fff8cfcc,0 0 130px #e8c94a88;mix-blend-mode:screen;will-change:transform,opacity,filter}
.character-group{align-items:end;gap:2.5%;filter:none}.story-character,.shared-character-slot{display:block;width:22%;height:100%;object-fit:contain;object-position:center bottom}.story-character{filter:drop-shadow(0 18px 22px #0007)}
.cursor-art{height:auto;background:none;clip-path:none;filter:drop-shadow(4px 7px 4px #0008)}
.stories-scene .copy--stories{left:5%;right:5%;top:13%;width:auto;text-align:center}.stories-scene .copy--stories p{white-space:normal}.stories-scene .character-group{left:22%;top:30%;width:56%;height:31%;justify-content:space-between;gap:2%}.stories-scene .cta{left:50%;bottom:12%;width:min(38%,530px)}.stories-scene .cursor-art{left:62%;bottom:7%}
.particle-canvas{display:none}.cursor-art{transform-origin:50% 85%;animation:cursorWobble 1.15s ease-in-out infinite}.cloud-mascot--small{display:none!important}
@keyframes cursorWobble{0%,100%{rotate:-8deg}50%{rotate:9deg}}
@media(max-width:760px){.people-row{top:39%;height:32%}.egg{width:190px}.character-main-shared{left:62%;top:38%;width:138px}.character-group{gap:1%;height:31%}.story-character,.shared-character-slot{width:24%}.cursor-art{width:52px;height:auto}.stories-scene .copy--stories{left:5%;right:5%;top:12%}.stories-scene .character-group{left:5%;top:31%;width:90%;height:27%}.stories-scene .cta{width:72%;bottom:13%}.stories-scene .cursor-art{left:73%;bottom:8%}}
@media(prefers-reduced-motion:reduce){.character-main-shared{position:absolute;opacity:1!important;visibility:visible!important;transform:none!important}.camera-stage .egg{filter:none!important}.hatch-flash{display:none}}