:root{--ink:#07131d;--ink2:#0d2230;--paper:#f3f0e8;--paper2:#e6e9e1;--green:#0b7a57;--mint:#a9f3cf;--orange:#ff8c2b;--blue:#284d91;--yellow:#f6c945;--line:#0a182033}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Space Grotesk',sans-serif;overflow-x:hidden}.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.progress{position:fixed;z-index:120;top:0;left:0;width:100%;height:3px;background:#00000010}.progress i{display:block;width:0;height:100%;background:var(--green)}nav{position:fixed;z-index:110;left:0;top:0;width:100%;padding:20px 28px;display:flex;justify-content:space-between;align-items:center;font:500 10px 'DM Mono';letter-spacing:.12em}.brand{color:inherit;text-decoration:none;font:bold 18px 'DM Mono';letter-spacing:-.08em}.brand span{color:var(--green);font-weight:400}.navmeta{display:flex;gap:28px;opacity:.55}.menu{border:1px solid currentColor;background:transparent;color:inherit;padding:10px 13px;font:10px 'DM Mono';cursor:pointer}.menu b{color:var(--green);font-size:16px}.scene{min-height:100vh;position:relative;overflow:hidden}.dark{background:var(--ink);color:var(--paper)}.light{background:var(--paper)}.orange{background:var(--orange);color:var(--ink)}.chapter{position:absolute;top:12vh;left:6vw;font:10px 'DM Mono';letter-spacing:.18em;color:var(--green);z-index:8}.dark .chapter{color:var(--mint)}.orange .chapter{color:var(--ink)}.eyebrow{font:10px 'DM Mono';letter-spacing:.18em;color:var(--green)}.dark .eyebrow{color:var(--mint)}h1,h2{letter-spacing:-.085em;line-height:.8;margin:25px 0}button,a{font-family:inherit}.hero{min-height:100vh;background:radial-gradient(circle at 78% 35%,#d8eee3 0 8%,transparent 28%),linear-gradient(130deg,#f4f1e9 0,#dfe9df 48%,#f4f1e9 100%)}.hero-grid{position:absolute;inset:0;background:linear-gradient(#0a182010 1px,transparent 1px),linear-gradient(90deg,#0a182010 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(90deg,#000,transparent 78%)}.hero:after{content:'TOKEN2049';position:absolute;right:0;bottom:0;font-size:22vw;font-weight:700;letter-spacing:-.12em;color:#0b7a5710;transform:rotate(-10deg)}.hero-copy{position:absolute;left:8vw;top:24vh;width:min(640px,68vw);z-index:7}.hero h1{font-size:clamp(75px,12vw,180px)}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--ink)}.lede{max-width:410px;line-height:1.7;color:#33454c;font-size:15px}.enter,.pulse,.cta{margin-top:26px;padding:14px 17px;border:1px solid #0b182533;background:#ffffff55;color:inherit;text-decoration:none;font:10px 'DM Mono';letter-spacing:.13em;cursor:pointer;display:inline-block}.enter span{margin-left:45px;color:var(--green)}.hero-character{position:absolute;right:7vw;bottom:0;width:min(560px,43vw);z-index:6;animation:float 5s ease-in-out infinite}.hero-character img{width:100%;display:block;filter:drop-shadow(0 35px 30px #183a2c33)}.halo{position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,#fff8 0,#a9f3cf55 36%,transparent 68%);filter:blur(12px);z-index:-1}.float-note{position:absolute;font:10px 'DM Mono';letter-spacing:.08em;color:#35505a;z-index:8}.note-a{left:30px;bottom:35px}.note-b{right:30px;bottom:35px}.hero-doodles i{position:absolute;width:18px;height:18px;border:2px solid var(--orange);border-radius:50%;right:38%;top:19%;animation:drift 4s ease-in-out infinite}.hero-doodles i:nth-child(2){right:32%;top:24%;width:8px;height:8px;background:var(--green);border:0}.hero-doodles i:nth-child(3){right:42%;top:28%;width:12px;height:12px;border-radius:3px;transform:rotate(30deg);background:var(--yellow);border:0}.arrival{min-height:115vh;background:radial-gradient(circle at 82% 35%,#ffffff 0 10%,transparent 32%),var(--paper)}.arrival:after,.event:after,.swarm:after,.final:after{content:'';position:absolute;inset:0;background-image:linear-gradient(135deg,#0b182006 1px,transparent 1px);background-size:28px 28px;pointer-events:none}.arrival-copy{position:absolute;left:8vw;top:25vh;max-width:530px;z-index:6}.arrival h2{font-size:clamp(65px,9vw,135px)}.arrival h2 span{color:var(--green)}.arrival-copy>p:last-child{color:#44525a;line-height:1.75;max-width:420px}.airport-floor{position:absolute;bottom:0;width:100%;height:22%;background:linear-gradient(180deg,transparent,#d9ddd4 18%,#c7cec5 100%);border-top:1px solid #0a182025}.airport-floor:after{content:'';position:absolute;left:0;right:0;top:34%;height:1px;background:#0a182022;box-shadow:0 40px #0a182015,0 80px #0a182010}.terminal-tag{position:absolute;right:6vw;top:16vh;border:1px solid #0b7a5744;background:#f8f7f1d9;padding:13px 16px;display:grid;grid-template-columns:auto auto;gap:5px 18px;transform:rotate(2deg);z-index:7;font:9px 'DM Mono'}.terminal-tag b{color:var(--green)}.terminal-tag span{color:var(--orange)}.terminal-tag small{grid-column:1/-1;opacity:.55}.char{position:absolute;z-index:5;will-change:transform}.char img{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 24px #12251e30)}.light .char:not(:has(img[src$="wave.png"])) img{mix-blend-mode:multiply}.traveler{width:min(430px,39vw);right:15vw;bottom:4vh;transform:rotate(-2deg)}.c2{width:min(220px,18vw);right:1vw;bottom:0;transform:rotate(8deg)}.c3{width:min(210px,18vw);left:52vw;bottom:0;transform:rotate(-5deg)}.city{min-height:120vh;background:radial-gradient(circle at 74% 28%,#244d71 0 5%,transparent 25%),linear-gradient(180deg,#071426,#0a1f34 55%,#051016)}.city-copy{position:absolute;left:8vw;top:24vh;z-index:7;max-width:500px}.city h2{font-size:clamp(70px,9vw,140px)}.city h2 span{color:var(--mint)}.city-copy>p:last-child{color:#b8c6cf;line-height:1.75}.skyline2{position:absolute;bottom:0;left:0;right:0;height:47%;background:linear-gradient(90deg,#061019 0 8%,transparent 8% 12%,#081827 12% 17%,transparent 17% 20%,#06121d 20% 25%,transparent 25% 29%,#071624 29% 36%,transparent 36% 40%,#081b29 40% 46%,transparent 46% 51%,#061421 51% 58%,transparent 58% 62%,#071927 62% 68%,transparent 68% 73%,#061521 73% 80%,transparent 80% 84%,#071925 84% 90%,transparent 90% 94%,#06131f 94%);opacity:.9}.skyline2:after{content:'';position:absolute;left:0;right:0;bottom:13%;height:1px;background:#a9f3cf22;box-shadow:0 20px #a9f3cf10,0 42px #a9f3cf08}.bay-lights{position:absolute;inset:0;background:radial-gradient(circle at 65% 58%,#ff9b3c33,transparent 9%),radial-gradient(circle at 78% 50%,#a9f3cf22,transparent 12%)}.city-a{width:min(330px,27vw);right:12vw;bottom:11vh}.city-b{width:min(280px,23vw);left:40vw;bottom:0}.city-c{width:min(260px,22vw);right:33vw;bottom:1vh;transform:rotate(-5deg)}.city-sign{position:absolute;right:5vw;top:17vh;font:9px 'DM Mono';letter-spacing:.12em;color:#a9f3cf88;text-align:right;z-index:6}.city-sign b{font-size:70px;color:#a9f3cf22}.event{min-height:120vh}.event-head{position:absolute;right:6vw;top:12vh;display:flex;gap:25px;font:9px 'DM Mono';opacity:.5;z-index:6}.event-title{position:absolute;left:7vw;top:23vh;max-width:520px;z-index:7}.event-title h2{font-size:clamp(80px,11vw,160px)}.event-title h2 span{color:var(--green)}.event-title>p:last-child{max-width:390px;color:#536067;line-height:1.7}.stage-grid{position:absolute;right:0;top:14%;width:67%;height:78%;background:linear-gradient(135deg,#ffffffaa,#dce8e1cc),linear-gradient(90deg,#0b7a5715 1px,transparent 1px),linear-gradient(#0b7a5715 1px,transparent 1px);background-size:auto,42px 42px,42px 42px;transform:skewY(-4deg);border-top:1px solid #0b7a5722;border-left:1px solid #0b7a5722}.stage-grid:after{content:'TOKEN2049';position:absolute;right:4%;top:18%;font-size:12vw;font-weight:700;letter-spacing:-.12em;color:#0b7a5712;transform:rotate(-7deg)}.event-a{width:min(350px,28vw);right:13vw;bottom:0}.event-b{width:min(230px,19vw);right:38vw;bottom:0;transform:rotate(-5deg)}.event-c{width:min(210px,18vw);right:5vw;bottom:4vh;transform:rotate(6deg)}.event-sticker{position:absolute;right:49vw;top:20vh;border:2px solid var(--orange);color:var(--orange);font:700 12px 'DM Mono';padding:12px;line-height:1.25;transform:rotate(-9deg);z-index:8}.swarm{min-height:125vh;background:radial-gradient(circle at 50% 48%,#fff 0 18%,transparent 40%),var(--paper)}.swarm-copy{position:absolute;left:8vw;top:22vh;z-index:7;max-width:500px}.swarm h2{font-size:clamp(70px,9vw,140px)}.swarm h2 span{color:var(--green)}.swarm-copy>p:last-child{line-height:1.7;color:#4b5a60}.swarm-stage{position:absolute;right:0;bottom:0;width:69%;height:82%;z-index:4}.blob{position:absolute;border-radius:50%;filter:blur(3px)}.blob1{width:45vw;height:45vw;right:8%;bottom:0;background:#d9eadf}.blob2{width:23vw;height:23vw;right:48%;top:12%;background:#ffdcae}.swarm-stage .char img{mix-blend-mode:multiply}.s1{width:230px;right:38%;bottom:0;z-index:8}.s2{width:300px;right:3%;bottom:0;z-index:6;transform:rotate(7deg)}.s3{width:250px;right:27%;bottom:3vh;z-index:7;transform:rotate(-4deg)}.s4{width:230px;right:50%;bottom:4vh;z-index:9;transform:rotate(-5deg)}.s5{width:250px;right:19%;top:4vh;z-index:4;transform:rotate(6deg)}.s6{width:170px;right:1%;top:7vh;z-index:10}.explore{min-height:115vh}.explore-copy{position:absolute;left:8vw;top:22vh;z-index:7}.explore h2{font-size:clamp(75px,10vw,150px)}.explore h2 span{color:var(--mint)}.paths{position:absolute;left:8vw;top:57vh;width:min(850px,70vw);display:grid;grid-template-columns:repeat(2,1fr);gap:10px;z-index:8}.paths button{min-height:125px;text-align:left;padding:22px;background:#ffffff0a;border:1px solid #ffffff20;color:var(--paper);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;transition:.35s}.paths button:hover{background:var(--green);transform:translateY(-5px);border-color:var(--mint)}.paths b,.paths small{font:9px 'DM Mono';opacity:.55}.paths strong{font-size:24px;letter-spacing:-.04em}.explore-character{position:absolute;right:5vw;bottom:0;width:min(350px,29vw);z-index:5;filter:drop-shadow(0 30px 40px #0008)}.explore-character img{width:100%;mix-blend-mode:screen;opacity:.9}.panel{display:none;position:fixed;z-index:150;inset:5vh 5vw;background:#061018;color:white;border:1px solid #ffffff22;box-shadow:0 30px 100px #000b;overflow:hidden}.panel.active{display:block}.close{position:absolute;right:20px;top:12px;border:0;background:none;color:white;font-size:40px;cursor:pointer;z-index:2}.panelcontent{position:absolute;left:7%;top:18%;max-width:650px;z-index:3}.panelcontent h3{font-size:clamp(55px,8vw,120px);line-height:.8;margin:20px 0;letter-spacing:-.08em}.panelcontent p{line-height:1.7;color:#b9c5c7}.quest{min-height:120vh;padding:0}.quest-copy{position:absolute;left:8vw;top:23vh;max-width:470px;z-index:9}.quest h2{font-size:clamp(75px,10vw,150px)}.quest h2 span{color:white}.quest-copy>p:not(.eyebrow){line-height:1.7}.score{display:inline-block;margin-top:20px;background:var(--ink);color:var(--mint);padding:12px 16px;font:9px 'DM Mono';transform:rotate(-2deg)}.score b{display:block;color:white;font-size:25px;margin-top:4px}.quest-characters{position:absolute;right:0;bottom:0;width:61%;height:85%}.q1{width:min(390px,31vw);right:5%;bottom:0;z-index:7}.q2{width:min(250px,21vw);right:40%;bottom:1vh;z-index:8;transform:rotate(-7deg)}.q3{width:min(250px,21vw);right:54%;bottom:0;z-index:9;transform:rotate(6deg)}.night{min-height:120vh;background:radial-gradient(circle at 73% 25%,#2d4879,#0b1428 34%,#050a13 80%)}.moon{position:absolute;width:42vw;height:42vw;border-radius:50%;right:0;top:12vh;background:radial-gradient(circle at 34% 28%,#ffffff,#b8c5e5 54%,#69769d);box-shadow:0 0 120px #a8b9ff44}.night-copy{position:absolute;left:8vw;top:25vh;z-index:8;max-width:500px}.night h2{font-size:clamp(70px,9vw,140px)}.night h2 span{color:var(--mint)}.night-copy>p:last-of-type{color:#b9c5d1;line-height:1.7}.night-a{width:min(300px,25vw);right:31vw;bottom:0;z-index:6}.night-b{width:min(260px,22vw);right:9vw;bottom:0;z-index:7;transform:rotate(5deg)}.night-stars{position:absolute;inset:0;background-image:radial-gradient(#ffffff88 1px,transparent 1px);background-size:75px 75px;opacity:.16}.final{min-height:120vh}.final-copy{position:absolute;left:8vw;top:25vh;z-index:10;max-width:720px}.final h2{font-size:clamp(65px,9vw,140px)}.final h2 span{color:var(--green)}.final-copy>p:not(.eyebrow){font-size:22px;color:#44535a}.stamp{position:absolute;left:37vw;top:12vh;border:2px solid var(--orange);padding:14px;font:9px 'DM Mono';color:var(--orange);transform:rotate(-7deg)}.stamp b{font-size:25px}.final-crowd{position:absolute;right:0;bottom:0;width:67%;height:75%;z-index:6}.final-crowd .char img{mix-blend-mode:multiply}.f1{width:250px;right:37%;bottom:0;z-index:10}.f2{width:280px;right:1%;bottom:0;z-index:7;transform:rotate(6deg)}.f3{width:270px;right:19%;bottom:1vh;z-index:8}.f4{width:220px;right:48%;bottom:0;z-index:9}.f5{width:190px;right:54%;bottom:2vh;z-index:11}.footerline{position:absolute;bottom:22px;left:28px;right:28px;border-top:1px solid #0a182022;padding-top:11px;font:8px 'DM Mono';opacity:.5;z-index:20}.menuPanel{position:fixed;z-index:160;inset:0;background:var(--ink);color:white;display:none;align-items:center;justify-content:center}.menuPanel.active{display:flex}.menuPanel>button{position:absolute;right:28px;top:15px;border:0;background:none;color:white;font-size:42px}.menuPanel div{display:flex;flex-direction:column;gap:16px;text-align:center}.menuPanel span{font:10px 'DM Mono';color:var(--mint);margin-bottom:18px}.menuPanel a{color:white;text-decoration:none;font-size:clamp(35px,6vw,80px);font-weight:700;letter-spacing:-.07em}.menuPanel a:hover{color:var(--mint)}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(-1deg)}}@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-10px)}}@media(max-width:800px){.navmeta{display:none}.hero-copy{top:18vh;left:7vw;width:85vw}.hero h1{font-size:22vw}.hero-character{width:72vw;right:8vw;bottom:0}.lede{font-size:13px;max-width:290px}.chapter{top:10vh}.arrival-copy,.city-copy,.event-title,.swarm-copy,.explore-copy,.quest-copy,.night-copy,.final-copy{left:7vw;right:7vw;top:18vh}.arrival h2,.city h2,.event-title h2,.swarm h2,.explore h2,.quest h2,.night h2,.final h2{font-size:18vw}.traveler{width:72vw;right:1vw;bottom:3vh}.c2{width:34vw;right:0;bottom:3vh}.c3{width:33vw;left:40vw;bottom:0}.stage-grid{width:92%;height:64%;top:35%;transform:skewY(-3deg)}.event-a{width:45vw;right:3vw;bottom:0}.event-b{width:30vw;right:35vw;bottom:0}.event-c{width:30vw;right:0;bottom:4vh}.event-sticker{right:10vw;top:33vh}.swarm-stage{width:100%;height:65%;bottom:0}.s1{width:36vw;right:34%;bottom:0}.s2{width:45vw;right:0;bottom:0}.s3{width:39vw;right:22%;bottom:1vh}.s4{width:36vw;right:48%;bottom:1vh}.s5{width:39vw;right:12%;top:2vh}.s6{width:27vw;right:0;top:8vh}.paths{left:7vw;right:7vw;top:58vh;width:auto;grid-template-columns:1fr}.paths button{min-height:90px}.paths strong{font-size:19px}.explore-character{width:45vw;right:0;bottom:0;opacity:.8}.quest-characters{width:100%;height:66%;bottom:0}.q1{width:52vw;right:0}.q2{width:33vw;right:39%}.q3{width:34vw;right:57%}.moon{width:70vw;height:70vw;right:0;top:13vh}.night-a{width:40vw;right:30vw}.night-b{width:38vw;right:0}.final-crowd{width:100%;height:55%;bottom:0}.f1{width:38vw;right:34%}.f2{width:45vw;right:0}.f3{width:40vw;right:17%}.f4{width:35vw;right:45%}.f5{width:30vw;right:56%}.stamp{left:52vw;top:23vh}.footerline{font-size:7px;left:14px;right:14px}}
.char{opacity:0;transform:translate3d(0,28px,0) scale(.97);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--delay,0ms)}.char.in{opacity:1;transform:translate3d(0,0,0) scale(1)}.hero-copy,.arrival-copy,.city-copy,.event-title,.swarm-copy,.explore-copy,.quest-copy,.night-copy,.final-copy{opacity:0;transform:translateY(25px);transition:opacity .8s ease,transform .9s ease}.hero-copy.in,.arrival-copy.in,.city-copy.in,.event-title.in,.swarm-copy.in,.explore-copy.in,.quest-copy.in,.night-copy.in,.final-copy.in{opacity:1;transform:none}.char.focus{z-index:30!important;filter:drop-shadow(0 35px 30px #0b7a5740) saturate(1.06);}.char.focus img{transform:scale(1.025);transition:transform .3s ease}.char img{transition:transform .45s ease}.hero-character img{animation:heroBreath 4.5s ease-in-out infinite}@keyframes heroBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* V3 — integrated scene treatment: characters are part of the environment, never framed as cards. */
.scene{isolation:isolate}.char{overflow:visible;will-change:transform;filter:drop-shadow(0 24px 22px rgba(5,20,26,.18));z-index:6}.char::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:11%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(4,20,25,.28),rgba(4,20,25,0) 72%);filter:blur(9px);z-index:-1;transform:scaleY(.55)}.char img{display:block;width:100%;height:auto;position:relative;z-index:2;mix-blend-mode:normal!important;filter:saturate(1.02) contrast(1.01)}

/* HERO — character sits inside a large environmental light field */
.hero{background:radial-gradient(circle at 76% 43%,rgba(190,235,215,.82) 0 8%,rgba(190,235,215,.28) 21%,transparent 43%),linear-gradient(135deg,#f5f2e9 0%,#e4ede5 49%,#f7f4eb 100%)}.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,transparent,#d9e2da 62%,#cbd6cf);opacity:.72;z-index:1}.hero-character{z-index:8;filter:drop-shadow(0 34px 28px rgba(7,33,29,.22))}.hero-character .halo{background:radial-gradient(circle,rgba(255,255,255,.78),rgba(157,222,190,.28) 45%,transparent 72%);filter:blur(2px)}

/* AIRPORT — floor, glass and distant architecture create a shared space */
.arrival{background:linear-gradient(180deg,#f6f3eb 0%,#e9eee8 68%,#cdd7d1 100%)}.arrival::before{content:"";position:absolute;inset:13% 0 17%;background:linear-gradient(90deg,transparent 0 7%,rgba(8,31,38,.055) 7.1% 7.25%,transparent 7.35% 25%,rgba(8,31,38,.04) 25.1% 25.25%,transparent 25.35% 51%,rgba(8,31,38,.045) 51.1% 51.25%,transparent 51.35% 78%,rgba(8,31,38,.04) 78.1% 78.25%,transparent 78.35%);z-index:0}.airport-floor{height:25%!important;background:linear-gradient(180deg,#d5ddd8,#aebdb6)!important;box-shadow:inset 0 1px rgba(255,255,255,.65);z-index:1}.terminal-tag{z-index:10}.arrival .c1{filter:drop-shadow(0 30px 24px rgba(8,31,38,.24))}.arrival .c2,.arrival .c3{filter:drop-shadow(0 22px 18px rgba(8,31,38,.16))}

/* CITY — characters occupy foreground against a constructed skyline */
.city{background:radial-gradient(circle at 68% 36%,#214d65 0,#0c2738 31%,#061520 76%)}.city::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,transparent,rgba(1,9,16,.55)),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 70px);z-index:2}.skyline2{z-index:1!important;opacity:.78}.bay-lights{z-index:3!important}.city .char{filter:drop-shadow(0 28px 25px rgba(0,0,0,.5))}.city-a{z-index:8}.city-b{z-index:7}.city-c{z-index:9}

/* EVENT — stage light spills onto the characters */
.event{background:radial-gradient(circle at 72% 38%,rgba(177,226,206,.8),transparent 28%),linear-gradient(180deg,#f8f6ef,#e8ece5 68%,#d1d8d2)}.event::before{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,transparent,#b7c3bc);clip-path:polygon(0 18%,100% 0,100% 100%,0 100%);z-index:1}.stage-grid{z-index:2!important}.event .char{filter:drop-shadow(0 30px 25px rgba(6,26,32,.2))}.event-a{z-index:10}.event-b{z-index:8}.event-c{z-index:9}

/* CROWD — no cards, everything floats inside one shared stage */
.swarm{background:radial-gradient(circle at 50% 38%,#ffffff 0,#eef3ed 44%,#dce5de 100%)}.swarm-stage{z-index:3!important}.swarm-stage::before{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:26%;background:linear-gradient(180deg,transparent,#c5d0c9);clip-path:polygon(0 22%,100% 0,100% 100%,0 100%);z-index:0}.swarm-stage::after{content:"";position:absolute;inset:8% 10% 18%;background:radial-gradient(circle at 30% 30%,rgba(11,122,87,.08),transparent 30%),radial-gradient(circle at 75% 55%,rgba(255,140,43,.09),transparent 25%);z-index:0}.swarm .char{filter:drop-shadow(0 26px 22px rgba(6,29,31,.2))}.swarm .char img{transform-origin:center bottom}.s1,.s2,.s3,.s4,.s5,.s6{z-index:4}

/* EXPLORE — make the field guide feel like a physical environment */
.explore{background:radial-gradient(circle at 76% 40%,#183f4d,#091a27 54%,#061019 100%)}.explore::before{content:"";position:absolute;inset:16% 0 0;background:linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.035) 10.1% 10.2%,transparent 10.3% 30%,rgba(255,255,255,.035) 30.1% 30.2%,transparent 30.3% 55%,rgba(255,255,255,.035) 55.1% 55.2%,transparent 55.3% 78%,rgba(255,255,255,.035) 78.1% 78.2%,transparent 78.3%);opacity:.8}.explore-character{filter:drop-shadow(0 35px 30px rgba(0,0,0,.5));z-index:7}.explore-character img{mix-blend-mode:normal;filter:saturate(1.03)}

/* SIDE QUEST — ground plane makes the skater feel physically present */
.quest{background:radial-gradient(circle at 68% 30%,#ffbf70,#ff8c2b 48%,#ef7420 100%)}.quest::before{content:"";position:absolute;left:0;right:0;bottom:0;height:39%;background:linear-gradient(180deg,rgba(7,19,29,.02),rgba(7,19,29,.2)),repeating-linear-gradient(90deg,rgba(7,19,29,.08) 0 1px,transparent 1px 85px);clip-path:polygon(0 13%,100% 0,100% 100%,0 100%);z-index:1}.quest-characters{z-index:4}.quest .char{filter:drop-shadow(0 30px 23px rgba(65,35,8,.3))}.q1{z-index:9}.q2{z-index:8}.q3{z-index:7}

/* NIGHT — blue ambient rim light and rooftop horizon */
.night::before{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(180deg,transparent,rgba(1,5,11,.75)),repeating-linear-gradient(90deg,rgba(143,175,213,.12) 0 1px,transparent 1px 58px);z-index:2}.night .char{filter:drop-shadow(0 28px 30px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(123,182,255,.09))}.night-a,.night-b{z-index:7}

/* FINAL — characters become a single group in the same floor plane */
.final{background:radial-gradient(circle at 74% 35%,#e4f3eb 0,#f3f0e8 44%,#e6e9e1 100%)}.final::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,#d1d9d3);clip-path:polygon(0 14%,100% 0,100% 100%,0 100%);z-index:1}.final-crowd{z-index:5}.final-crowd .char{filter:drop-shadow(0 28px 22px rgba(4,25,29,.22))}.final-crowd .char::after{background:radial-gradient(ellipse at center,rgba(4,25,29,.24),rgba(4,25,29,0) 72%)}

/* Keep the artwork edge clean at all viewport sizes. */
@media(max-width:800px){.char::after{left:16%;right:16%;bottom:0;height:9%}.hero::after{height:18%}.arrival::before{inset:15% 0 20%}.quest::before{height:33%}.final::before{height:30%}}


/* 0ZZY 2049 V5 UPDATE — full character visibility + stronger character scale */
.brand{font-size:18px}.brand span{color:var(--green)}
.navmeta{align-items:center;gap:20px}.navmeta .ca-top{opacity:1;color:var(--green)}.x-link{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}.x-link:hover{color:var(--green)}
.hero-ca{position:absolute;left:7vw;bottom:13vh;z-index:9;display:flex;flex-direction:column;gap:5px;font:9px 'DM Mono';letter-spacing:.12em}.hero-ca span{opacity:.48}.hero-ca b{font-weight:500;color:var(--green)}
.hero-character{right:5vw;bottom:2vh;width:min(600px,46vw);max-height:78vh;display:flex;justify-content:center;align-items:flex-end}.hero-character img{max-height:78vh;width:auto;max-width:100%;object-fit:contain}
/* Keep every scene character inside the frame: no negative bottoms and no edge clipping. */
.arrival .c1{width:min(360px,29vw);right:16vw;bottom:2vh;transform:none}.arrival .c2{width:min(250px,20vw);right:2vw;bottom:2vh;transform:rotate(5deg)}.arrival .c3{width:min(245px,20vw);left:auto;right:39vw;bottom:2vh;transform:rotate(-4deg)}
.city-a{width:min(360px,29vw);right:10vw;bottom:4vh}.city-b{width:min(300px,24vw);left:auto;right:36vw;bottom:3vh}.city-c{width:min(290px,23vw);right:29vw;bottom:3vh;transform:rotate(-3deg)}
.event-a{width:min(390px,31vw);right:10vw;bottom:3vh}.event-b{width:min(270px,22vw);right:39vw;bottom:3vh;transform:rotate(-3deg)}.event-c{width:min(250px,20vw);right:2vw;bottom:4vh;transform:rotate(4deg)}
.s1{width:min(300px,24vw);right:39%;bottom:3vh}.s2{width:min(360px,29vw);right:4%;bottom:3vh;transform:rotate(4deg)}.s3{width:min(300px,24vw);right:25%;bottom:4vh;transform:rotate(-3deg)}.s4{width:min(285px,23vw);right:52%;bottom:4vh;transform:rotate(-3deg)}.s5{width:min(300px,24vw);right:13%;top:auto;bottom:35vh;transform:rotate(4deg)}.s6{width:min(210px,17vw);right:2%;top:auto;bottom:31vh}
.explore-character{right:5vw;bottom:3vh;width:min(390px,31vw);opacity:1}.q1{width:min(430px,34vw);right:5%;bottom:3vh}.q2{width:min(285px,23vw);right:40%;bottom:3vh;transform:rotate(-5deg)}.q3{width:min(280px,22vw);right:57%;bottom:3vh;transform:rotate(5deg)}
.night-a{width:min(330px,26vw);right:30vw;bottom:3vh}.night-b{width:min(300px,24vw);right:7vw;bottom:3vh;transform:rotate(4deg)}
.f1{width:min(290px,23vw);right:36%;bottom:3vh}.f2{width:min(330px,26vw);right:4%;bottom:3vh;transform:rotate(4deg)}.f3{width:min(315px,25vw);right:19%;bottom:3vh}.f4{width:min(270px,22vw);right:48%;bottom:3vh}.f5{width:min(235px,19vw);right:55%;bottom:4vh}
/* Bigger visual presence without allowing the artwork to touch the crop boundary. */
.arrival .char,.event .char,.city .char,.swarm .char,.quest .char,.night .char,.final .char{max-height:84vh}.arrive-copy{}
@media(max-width:800px){
 .navmeta span:not(.ca-top),.x-link{display:none}.navmeta .ca-top{display:block;font-size:8px}
 .hero-copy{top:18vh}.hero-character{width:68vw;right:4vw;bottom:4vh}.hero-character img{max-height:58vh}.hero-ca{left:7vw;bottom:8vh}
 .arrival .c1{width:52vw;right:24vw;bottom:5vh}.arrival .c2{width:34vw;right:2vw;bottom:4vh}.arrival .c3{width:34vw;right:44vw;bottom:4vh}
 .city-a{width:50vw;right:4vw;bottom:5vh}.city-b{width:40vw;right:34vw;bottom:4vh}.city-c{width:38vw;right:16vw;bottom:5vh}
 .event-a{width:52vw;right:4vw;bottom:4vh}.event-b{width:39vw;right:39vw;bottom:4vh}.event-c{width:35vw;right:2vw;bottom:5vh}
 .s1{width:42vw;right:38%;bottom:5vh}.s2{width:52vw;right:0;bottom:4vh}.s3{width:44vw;right:24%;bottom:5vh}.s4{width:42vw;right:49%;bottom:5vh}.s5{width:42vw;right:8%;bottom:32vh}.s6{width:30vw;right:1%;bottom:34vh}
 .explore-character{width:50vw;right:2vw;bottom:4vh}.q1{width:60vw;right:0;bottom:4vh}.q2{width:40vw;right:37%;bottom:4vh}.q3{width:39vw;right:56%;bottom:4vh}
 .night-a{width:49vw;right:29vw;bottom:4vh}.night-b{width:43vw;right:0;bottom:4vh}.f1{width:44vw;right:35%;bottom:4vh}.f2{width:52vw;right:0;bottom:4vh}.f3{width:48vw;right:17%;bottom:4vh}.f4{width:41vw;right:47%;bottom:4vh}.f5{width:35vw;right:57%;bottom:5vh}
}


/* FINAL CHARACTER COMPOSITION PASS — 0ZZY 2049
   Rule: artwork is large, but every character stays fully inside the scene.
   No negative bottom/right offsets. */
.scene .char{overflow:visible}
.scene .char img{max-height:84vh;max-width:100%;object-fit:contain;object-position:center bottom}
.hero-character img{max-height:78vh}

/* Larger editorial scale */
.arrival .c1{width:min(430px,34vw);right:15vw;bottom:3vh}
.arrival .c2{width:min(285px,23vw);right:2vw;bottom:3vh}
.arrival .c3{width:min(285px,23vw);right:39vw;bottom:3vh}

.city-a{width:min(420px,33vw);right:8vw;bottom:4vh}
.city-b{width:min(340px,27vw);right:35vw;bottom:4vh}
.city-c{width:min(320px,25vw);right:28vw;bottom:4vh}

.event-a{width:min(455px,35vw);right:8vw;bottom:4vh}
.event-b{width:min(320px,25vw);right:38vw;bottom:4vh}
.event-c{width:min(295px,23vw);right:2vw;bottom:4vh}

.s1{width:min(350px,27vw);right:39%;bottom:4vh}
.s2{width:min(420px,33vw);right:4%;bottom:4vh}
.s3{width:min(350px,27vw);right:24%;bottom:4vh}
.s4{width:min(335px,26vw);right:51%;bottom:4vh}
.s5{width:min(350px,27vw);right:12%;bottom:36vh}
.s6{width:min(245px,19vw);right:2%;bottom:32vh}

.explore-character{width:min(440px,34vw);right:4vw;bottom:4vh}

.q1{width:min(500px,38vw);right:4%;bottom:4vh}
.q2{width:min(330px,26vw);right:39%;bottom:4vh}
.q3{width:min(325px,25vw);right:55%;bottom:4vh}

.night-a{width:min(390px,30vw);right:29vw;bottom:4vh}
.night-b{width:min(350px,27vw);right:7vw;bottom:4vh}

.f1{width:min(340px,26vw);right:35%;bottom:4vh}
.f2{width:min(390px,30vw);right:4%;bottom:4vh}
.f3{width:min(370px,29vw);right:18%;bottom:4vh}
.f4{width:min(315px,24vw);right:47%;bottom:4vh}
.f5{width:min(275px,21vw);right:54%;bottom:4vh}

/* Mobile: keep every edge safely inside the viewport. */
@media(max-width:800px){
  .scene .char img{max-height:62vh}
  .hero-character{width:72vw;right:5vw;bottom:4vh}
  .hero-character img{max-height:58vh}

  .arrival .c1{width:55vw;right:22vw;bottom:5vh}
  .arrival .c2{width:35vw;right:2vw;bottom:5vh}
  .arrival .c3{width:35vw;right:45vw;bottom:5vh}

  .city-a{width:54vw;right:3vw;bottom:5vh}
  .city-b{width:43vw;right:31vw;bottom:5vh}
  .city-c{width:40vw;right:17vw;bottom:5vh}

  .event-a{width:56vw;right:3vw;bottom:5vh}
  .event-b{width:42vw;right:37vw;bottom:5vh}
  .event-c{width:38vw;right:2vw;bottom:5vh}

  .s1{width:45vw;right:37%;bottom:5vh}
  .s2{width:56vw;right:1vw;bottom:5vh}
  .s3{width:47vw;right:23%;bottom:5vh}
  .s4{width:44vw;right:48%;bottom:5vh}
  .s5{width:44vw;right:7%;bottom:31vh}
  .s6{width:31vw;right:2vw;bottom:34vh}

  .explore-character{width:54vw;right:2vw;bottom:5vh}

  .q1{width:62vw;right:1vw;bottom:5vh}
  .q2{width:42vw;right:35%;bottom:5vh}
  .q3{width:40vw;right:55%;bottom:5vh}

  .night-a{width:51vw;right:27vw;bottom:5vh}
  .night-b{width:45vw;right:2vw;bottom:5vh}

  .f1{width:46vw;right:33%;bottom:5vh}
  .f2{width:55vw;right:1vw;bottom:5vh}
  .f3{width:50vw;right:16%;bottom:5vh}
  .f4{width:43vw;right:45%;bottom:5vh}
  .f5{width:37vw;right:55%;bottom:5vh}
}


/* Token access — additive update, preserves the cinematic V3 scenes above. */
.tokens{min-height:88vh;padding:110px 6vw 90px;display:grid;grid-template-columns:minmax(280px,.7fr) minmax(520px,1.3fr);gap:5vw;align-items:center;background:linear-gradient(135deg,#f7f3ea 0%,#fff 52%,#f1eee6 100%);position:relative;overflow:hidden}
.tokens:before{content:"";position:absolute;width:48vw;height:48vw;border-radius:50%;right:-16vw;top:-18vw;background:radial-gradient(circle,rgba(36,113,73,.14),transparent 68%);pointer-events:none}
.tokens-copy{position:relative;z-index:1;max-width:520px}.tokens-copy h2{font-size:clamp(52px,7vw,112px);line-height:.86;margin:16px 0 24px;letter-spacing:-.06em}.tokens-copy h2 span{font-style:italic}.tokens-copy p:not(.eyebrow){max-width:440px;font-size:17px;line-height:1.6}
.token-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:18px}.token-card{border:1px solid rgba(18,28,24,.16);border-radius:28px;padding:30px;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 24px 70px rgba(20,30,25,.09);backdrop-filter:blur(10px)}.pons-card{background:linear-gradient(145deg,rgba(224,244,229,.95),rgba(255,255,255,.96))}.ozzy-card{background:linear-gradient(145deg,rgba(255,237,220,.95),rgba(255,255,255,.96))}.token-top{display:flex;justify-content:space-between;align-items:center;font:500 11px/1 'DM Mono',monospace;letter-spacing:.08em}.token-top b{font-size:14px}.token-card h3{font-size:clamp(42px,5vw,72px);letter-spacing:-.06em;margin:34px 0 6px}.token-role{font:500 11px/1.5 'DM Mono',monospace;letter-spacing:.08em;opacity:.68}.ca-box{margin-top:28px;padding:14px;border:1px dashed rgba(18,28,24,.25);border-radius:14px;background:rgba(255,255,255,.65)}.ca-box small{display:block;font:500 10px 'DM Mono',monospace;letter-spacing:.08em;margin-bottom:8px;opacity:.65}.ca-box code{display:block;font:500 11px/1.5 'DM Mono',monospace;word-break:break-all}.token-actions{display:flex;gap:10px;margin-top:20px}.token-actions button,.token-actions a{appearance:none;border:0;border-radius:999px;padding:13px 17px;font:600 11px 'DM Mono',monospace;letter-spacing:.04em;text-decoration:none;cursor:pointer}.copy-ca{background:#17231e;color:#fff}.buy-btn{background:#ef6b36;color:#fff}.disabled-btn{width:100%;background:#d9d6cf;color:#777;cursor:not-allowed!important}
@media(max-width:900px){.tokens{grid-template-columns:1fr;padding:90px 6vw}.token-grid{grid-template-columns:1fr}.token-card{min-height:360px}}

/* 0ZZY 2049 — latest composition pass
   Keep characters large, fully inside frame, and visually separated.
   Hero uses exactly two characters: Singapore 2049 flag + laptop. */
.hero-characters{position:absolute;right:4vw;bottom:3vh;width:min(780px,53vw);height:78vh;z-index:6;display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,2.2vw,42px)}
.hero-characters .halo{position:absolute;inset:5% 0 0;border-radius:50%;background:radial-gradient(circle,#fff8 0,#a9f3cf55 36%,transparent 68%);filter:blur(12px);z-index:-1}
.hero-characters .hero-character{position:relative;right:auto;bottom:auto;width:calc(50% - 12px);height:100%;display:flex;align-items:flex-end;justify-content:center;animation:float 5s ease-in-out infinite}
.hero-characters .hero-character img{width:auto;height:auto;max-width:100%;max-height:76vh;object-fit:contain;display:block;filter:drop-shadow(0 35px 30px #183a2c33)}
.hero-characters .hero-flag{transform:translateY(0) rotate(-2deg);animation-delay:-1s}
.hero-characters .hero-laptop{transform:translateY(-1.5vh) rotate(2deg);animation-delay:-3s}
.hero-characters .hero-flag img{max-height:70vh}
.hero-characters .hero-laptop img{max-height:64vh}
/* Give the rest of the site the same breathing-room rule: adjacent characters never touch. */
.arrival .char,.city .char,.event .char,.swarm .char,.quest .char,.night .char,.final .char{transform-origin:center bottom}
.arrival .c1{right:17vw}.arrival .c3{right:40vw}.arrival .c2{right:3vw}
.city-a{right:7vw}.city-b{right:39vw}.city-c{right:23vw}
.event-a{right:7vw}.event-b{right:40vw}.event-c{right:1vw}
.q1{right:3vw}.q2{right:42vw}.q3{right:61vw}
.night-a{right:31vw}.night-b{right:5vw}
/* Final frame is a small spaced group, not a pile. */
.f1{right:39vw}.f2{right:5vw}.f3{right:22vw}.f4{right:56vw}.f5{right:73vw}
@media(max-width:800px){
 .hero-characters{right:3vw;bottom:4vh;width:92vw;height:57vh;gap:3vw}
 .hero-characters .hero-character{width:calc(50% - 1.5vw)}
 .hero-characters .hero-character img{max-height:55vh}
 .hero-characters .hero-flag img{max-height:52vh}
 .hero-characters .hero-laptop img{max-height:48vh}
 .arrival .c1{right:23vw}.arrival .c3{right:47vw}.arrival .c2{right:2vw}
 .city-a{right:2vw}.city-b{right:35vw}.city-c{right:19vw}
 .event-a{right:2vw}.event-b{right:40vw}.event-c{right:1vw}
 .q1{right:1vw}.q2{right:38vw}.q3{right:58vw}
 .night-a{right:30vw}.night-b{right:1vw}
 .f1{right:39vw}.f2{right:1vw}.f3{right:22vw}.f4{right:56vw}.f5{right:74vw}
}

/* HERO FINAL SCALE — align the two hero characters with the editorial title height. */
.hero-characters{
  right:2.5vw;
  bottom:3vh;
  width:min(1200px,64vw);
  height:78vh;
  gap:clamp(24px,2.5vw,48px);
}
.hero-characters .hero-character{
  width:calc(50% - 12px);
  height:100%;
}
.hero-characters .hero-character img{
  max-height:72vh;
  max-width:100%;
}
.hero-characters .hero-flag img{max-height:72vh}
.hero-characters .hero-laptop img{max-height:70vh}

@media(max-width:800px){
  .hero-characters{
    right:2vw;
    bottom:4vh;
    width:96vw;
    height:59vh;
    gap:3vw;
  }
  .hero-characters .hero-character{width:calc(50% - 1.5vw)}
  .hero-characters .hero-character img{max-height:57vh}
  .hero-characters .hero-flag img{max-height:55vh}
  .hero-characters .hero-laptop img{max-height:53vh}
}
