/* Scroll scenes extend the shared Game Card typography and action colours. */
html{scroll-padding-top:100px}
body{overflow-x:clip;background:#fcfbf8}
.site-header{position:absolute;background:linear-gradient(#fcfbf8ee,#fcfbf899,transparent)}
.button{border-radius:9px;box-shadow:0 8px 22px -14px #a2824c88}
.button:hover,.button:focus-visible{transform:none}
.game-object{position:absolute;height:auto;pointer-events:none;user-select:none;object-fit:contain;filter:drop-shadow(0 24px 30px #26334722);z-index:2}
.scroll-chapter{position:relative}
.legends-ready .scroll-chapter{height:190svh}
.scene-pin{position:relative;top:0;height:100svh;min-height:760px;overflow:clip;isolation:isolate}
.legends-ready .scene-pin{position:sticky}
.cards-section.scene-pin{width:100%;padding:105px max(60px,calc((100vw - 1190px)/2)) 60px;background:radial-gradient(ellipse at 78% 63%,#f0dbbf55,transparent 43%),#fcfbf8}
.cards-section .section-heading{position:relative;z-index:5;padding-left:12%;padding-right:8%;align-items:center}
.cards-section .section-heading h2{font-size:clamp(42px,4.4vw,68px)}
.cards-section .section-heading>div{max-width:280px}
.cards-gallery{position:relative;z-index:8;margin-top:100px;max-width:960px;margin-inline:auto}
.card-caption{position:relative;z-index:8;max-width:900px;margin-inline:auto;margin-top:38px}
.showcase-card{background:transparent!important}
.bank-card{box-shadow:0 35px 42px -24px #15212f88}
.frostmourne{width:760px;left:-270px;top:3%;z-index:7}
.oblivion{width:530px;right:-6%;top:29%;z-index:1;filter:drop-shadow(0 0 55px #f7a64f35)}
.witcher{width:225px;right:-35px;top:-9%;z-index:3}
.legends-ready .scifi-chapter{height:270svh}
.app-section.scene-pin{background:radial-gradient(ellipse at 66% 55%,#e8edf0,transparent 48%),#f5f6f7}
.app-layout{position:relative;display:block;width:100%;height:100%;min-height:0;padding:0;max-width:1600px;margin-inline:auto}
.app-copy{position:absolute;top:18%;left:9%;max-width:430px;z-index:9}
.app-copy h2{font-size:clamp(44px,4.1vw,62px)}
.feature-list{gap:20px;margin-block:30px}
.feature-list>a{grid-template-columns:20px 1fr;gap:12px}
.feature-list>a>.icon{display:none}
.feature-list h3{font-size:21px}.feature-list p{font-size:16px}
.app-copy>.button{font-size:15px;padding-inline:20px;gap:12px;min-height:52px}
.marine{width:740px;right:-10%;bottom:-9%;z-index:3;filter:drop-shadow(-18px 15px 22px #30455824)}
.phone-stage{position:absolute!important;width:260px!important;left:52%;top:22%;z-index:5;transform-origin:50% 85%;padding:0!important;will-change:transform}
.phone{width:260px;height:526px;overflow:hidden;border-width:5px;border-color:#2d3440;border-radius:36px;padding:3px 6px 8px;transform:none;box-shadow:0 25px 35px -18px #17212f75,0 0 0 1px #707987;transition:none}
.phone-preview{position:absolute;left:7px;top:33px;width:336px;height:675px;transform:scale(.717);transform-origin:left top;border-radius:0 0 30px 30px}
.phone-status{height:27px;font-size:10px;padding-inline:12px}
.phone-island{width:74px;height:20px;background:#202735}
.phone-aura{display:none}
.orbit-ring{position:absolute;right:5%;top:15%;width:640px;aspect-ratio:1;border:1px solid #c8aa6e33;border-radius:50%;z-index:0;box-shadow:0 0 0 55px #c8aa6e06,0 0 0 110px #c8aa6e04}
.gravity{width:370px;left:-65px;bottom:-5%;z-index:4}
.gravity-ray{position:absolute;left:16%;bottom:21%;width:39%;height:80px;background:linear-gradient(90deg,#f5a12800,#f5a12833,#ffd08088);clip-path:polygon(0 45%,100% 0,100% 100%,0 55%);filter:blur(6px);transform:rotate(-23deg);transform-origin:left center;pointer-events:none;z-index:4;opacity:0}
.cube{width:185px;right:9%;top:12%;z-index:4}
.portal{position:absolute;width:190px;height:72px;border:7px solid #65c9ff;border-radius:50%;background:radial-gradient(ellipse,#1f3244,#356989);box-shadow:0 0 12px #5bd4ff,0 0 45px #65c9ff88,inset 0 0 16px #57caff;z-index:2;pointer-events:none}
.portal-blue{right:8%;top:28%;transform:rotate(-18deg)}
.portal-orange{left:40%;bottom:8%;border-color:#ffc06b;background:radial-gradient(ellipse,#49311b,#91622d);box-shadow:0 0 14px #f6a943,0 0 45px #f3a53b77,inset 0 0 16px #ffc36f;transform:rotate(15deg)}
.legends-ready .worlds-chapter{height:190svh}
.worlds-section{background:linear-gradient(155deg,#faf9f5 15%,#f9ede9 80%,#f5e6df)}
.worlds-copy{position:absolute;left:12%;top:25%;z-index:8}
.worlds-copy h2{font-size:clamp(56px,6vw,94px);line-height:.98}
.worlds-copy h2 span{color:#8d6d40}
.worlds-copy .button{margin-top:34px;font-size:19px;padding:19px 28px}
.sun-disc{position:absolute;width:560px;aspect-ratio:1;border-radius:50%;right:4%;top:7%;background:linear-gradient(#e7c9a78c,#e8a1ae45 65%,#dfafd433);mask-image:repeating-linear-gradient(to bottom,#000 0 28px,transparent 28px 31px)}
.tommy{width:760px;right:-8%;bottom:-7%;z-index:4}
.doom{width:460px;right:25%;bottom:-13%;z-index:6}
.pickaxe{width:310px;right:2%;top:-3%;z-index:5}
.compatibility-section{position:relative;z-index:10;background:#fcfbf8}
.faq-section{position:relative;z-index:10;background:#fcfbf8}
.support-section{margin-top:30px}
.legends-ready .saber-chapter{height:170svh;background:#fcfbf8}
.final-cta.scene-pin{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:100px 30px;background:#fcfbf8;min-height:700px;gap:32px}
.final-cta h2{position:relative;z-index:5;text-align:center;font-size:clamp(42px,4.8vw,76px)}
.final-cta h2>.gamecard-wordmark{--wordmark-width:460px;margin-bottom:25px}
.final-cta>.button{position:relative;z-index:5;margin:0;font-size:20px;padding:20px 34px;min-width:245px}
.lightsaber{position:absolute;width:40px;height:690px;left:19%;top:6%;transform:rotate(26deg);z-index:2;pointer-events:none;transform-origin:50% 85%}
.saber-blade{position:absolute;left:12px;bottom:156px;width:16px;height:530px;border-radius:100% 100% 8px 8px;background:#f5fcff;box-shadow:0 0 4px 2px #fff,0 0 12px 5px #8edbff,0 0 40px 11px #3baeff88,0 0 80px 30px #40acff44;transform:scaleY(0);transform-origin:bottom center}
.saber-hilt{position:absolute;inset:auto 0 0;height:162px;border-radius:6px;background:linear-gradient(90deg,#26303b,#d9dde0 24%,#fff 40%,#8b929b 65%,#3e4856);box-shadow:5px 4px 9px #26334733}
.saber-hilt::before{content:'';position:absolute;inset:58px 3px 18px;background:repeating-linear-gradient(90deg,#1f2630 0 4px,#48515e 4px 7px,#c4c8cb 7px 9px);border-radius:3px}
.saber-hilt::after{content:'';position:absolute;top:0;left:-4px;right:-4px;height:21px;background:linear-gradient(90deg,#626a71,#eff0f1,#495361);border-radius:3px;box-shadow:0 4px #18202a}
.saber-hilt i{position:absolute;top:31px;left:15px;width:12px;height:13px;background:#b34234;border:3px solid #ded7bd;border-radius:3px}
.saber-hilt b{position:absolute;bottom:6px;left:-3px;right:-3px;height:10px;background:linear-gradient(90deg,#7b8388,#eee,#697580);border-radius:3px}
.saber-light{position:absolute;width:620px;height:650px;left:-10%;top:0;background:radial-gradient(ellipse,#87d5ff33,transparent 65%);opacity:0;pointer-events:none}

.sticker{position:absolute;width:125px;aspect-ratio:1;background-image:url('assets/legends/sticker-atlas.webp');background-repeat:no-repeat;background-size:500% 400%;filter:drop-shadow(0 3px 3px #17212f40);pointer-events:none;transform:rotate(var(--tilt));will-change:transform}

.scene-progress{position:fixed;left:0;bottom:0;height:3px;width:100%;background:#c8aa6e;transform:scaleX(0);transform-origin:left;z-index:40;pointer-events:none}
/* At smaller widths the composition remains a single scroll column. */
@media(max-width:1050px) and (min-width:800px){
 .app-copy{left:5%;max-width:280px}.phone-stage{left:45%}.marine{right:-26%}.cube{right:-2%}.portal-blue{right:0}.cards-section .section-heading{padding-inline:8%}.cards-section .section-heading>div{max-width:220px}.frostmourne{left:-300px}.oblivion{right:-18%}.witcher{right:-4%;width:230px}.worlds-copy{left:9%}.tommy{right:-26%}.doom{right:16%}.pickaxe{right:-3%;width:240px}
}
@media(max-width:799px){
 .legends-ready .scroll-chapter{height:160svh}.scene-pin{min-height:780px;max-height:none;height:100svh}.cards-section.scene-pin{padding:70px 22px 25px;min-height:810px}.cards-section .section-heading{padding:0;gap:18px;align-items:flex-start}.cards-section .section-heading h2{font-size:42px}.cards-section .section-heading>div{max-width:280px}.cards-gallery{margin-top:116px}.cards-track{height:230px}.card-caption{margin-top:20px;font-size:12px;gap:20px}.frostmourne{width:480px;left:-270px;top:19%}.oblivion{width:350px;right:-130px;top:24%}.witcher{width:150px;right:-12px;top:2%}
 .legends-ready .scifi-chapter{height:210svh}.app-section.scene-pin{min-height:880px}.app-copy{left:24px;top:56px;max-width:280px}.app-copy h2{font-size:43px}.feature-list{gap:14px;margin-block:22px}.feature-list h3{font-size:19px}.feature-list p{font-size:15px}.app-copy>.button{font-size:15px;min-height:48px}.phone-stage{width:205px!important;left:14%;top:auto;bottom:60px}.phone{width:205px;border-radius:30px}.phone-preview{height:370px;border-radius:0 0 20px 20px}.phone-status{height:24px}.marine{width:450px;right:-200px;bottom:-28px}.gravity{width:210px;left:-55px;bottom:0}.gravity-ray{left:10%;bottom:19%;width:47%;transform:rotate(-35deg)}.cube{width:130px;right:-12px;top:31%}.portal-blue{width:112px;height:43px;right:-8px;top:42%;border-width:5px}.portal-orange{width:130px;height:48px;left:20%;bottom:18px;border-width:5px}.orbit-ring{width:430px;right:-130px;top:42%}
 .legends-ready .worlds-chapter{height:150svh}.worlds-section{min-height:780px}.worlds-copy{left:24px;top:66px}.worlds-copy h2{font-size:53px}.worlds-copy .button{font-size:17px;padding:15px 22px;margin-top:24px}.tommy{width:590px;right:-180px;bottom:-40px}.sun-disc{width:330px;right:-80px;top:33%}.doom{width:300px;left:-66px;right:auto;bottom:-15px}.pickaxe{width:180px;right:-35px;top:4%}
.legends-ready .saber-chapter{height:150svh}.final-cta.scene-pin{min-height:720px;padding-inline:24px;gap:25px}.final-cta h2{font-size:39px}.final-cta h2>.gamecard-wordmark{--wordmark-width:300px;max-width:84vw}.lightsaber{left:6%;height:560px;top:9%;transform:rotate(20deg)}.saber-blade{height:400px}.final-cta>.button{font-size:18px;min-width:220px}
}
@media(max-width:359px){.cards-section .section-heading h2,.app-copy h2{font-size:36px}.app-copy{max-width:253px}.worlds-copy h2{font-size:46px}.phone-stage{left:9%}.marine{right:-223px}.worlds-copy{left:20px}.cards-section .section-heading>div{max-width:228px}.final-cta h2{font-size:33px}}
@media(prefers-reduced-motion:reduce){
 .legends-ready .scroll-chapter{height:auto}.legends-ready .scene-pin{position:relative}.saber-blade{transform:scaleY(1)}.saber-light{opacity:1}.scene-progress{display:none}
}

/* Light follows the silhouette of the object, including its transparency. */
.image-actor{aspect-ratio:1}
.image-actor.in-view{will-change:transform,opacity}
.image-actor>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.surface-light{position:absolute;inset:0;pointer-events:none;mask-image:var(--asset-mask);mask-size:contain;mask-repeat:no-repeat;mask-position:center;mix-blend-mode:screen}
.scroll-sheen,.idle-sheen{background-image:linear-gradient(116deg,transparent 40%,#fffbe900 45%,#fffce25e 49%,#fffdf3c2 50%,#fffcea5c 51%,transparent 56%);background-size:280% 100%;background-position-y:center;opacity:.48}
.scroll-sheen{background-position-x:var(--shine-position,140%)}
.idle-sheen{background-position-x:145%;animation:surface-glide var(--glint-time,11s) ease-in-out var(--glint-delay,0s) infinite;animation-play-state:paused;opacity:.32}
.in-view .idle-sheen,.in-view .micro-spark{animation-play-state:running}
.page-hidden .idle-sheen,.page-hidden .micro-spark{animation-play-state:paused}
.micro-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fffef2;box-shadow:0 0 5px 2px #fff2b099;opacity:0;animation:small-shimmer 7.8s ease-in-out infinite;animation-play-state:paused}
.micro-spark::before,.micro-spark::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#fffef2,transparent)}
.micro-spark::before{width:19px;height:1px}.micro-spark::after{width:1px;height:19px;background:linear-gradient(transparent,#fffef2,transparent)}
@keyframes surface-glide{0%,24%{background-position-x:145%}50%,100%{background-position-x:-105%}}
@keyframes small-shimmer{0%,55%,82%,100%{opacity:0;transform:scale(.55)}67%{opacity:.78;transform:scale(1)}73%{opacity:.4;transform:scale(.82)}}

/* The composition leaves continuous clear space for text and controls. */
.cards-section .section-heading,.app-copy,.worlds-copy,.coming-copy,.support-content,.faq-section>div{z-index:12;isolation:isolate}
.cards-section .section-heading::before,.app-copy::before,.worlds-copy::before,.coming-copy::before{content:'';position:absolute;z-index:-1;inset:-30px;background:radial-gradient(ellipse,#fcfbf8 30%,#fcfbf8e8 67%,#fcfbf800 86%);pointer-events:none}
.app-copy::before{background:radial-gradient(ellipse,#f5f6f7 25%,#f5f6f7ef 65%,transparent 86%)}
.worlds-copy::before{background:radial-gradient(ellipse,#faf8f5 30%,#faf8f5e8 65%,transparent 86%)}
.card-caption{max-width:690px}
.oblivion{width:470px;right:-6%;top:33%}
.coming-section{position:relative;min-height:620px;overflow:clip;isolation:isolate;background:radial-gradient(ellipse at 80% 70%,#e9e4d9aa,transparent 44%),#fcfbf8}
.coming-copy{position:absolute;left:9%;top:30%;max-width:700px}
.coming-copy h2{font-size:clamp(37px,4.2vw,62px);line-height:1.08}
.coming-status{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:11px 22px;border-radius:7px;background:linear-gradient(135deg,#eee3cc,#ddc89e 65%,#c8aa6e);font-size:23px;font-weight:650;color:#263347}
.coming-status .icon{width:23px;height:23px}
.guardian{width:520px;right:0;bottom:-20px;z-index:3}
.scattered-sticker{left:var(--sticker-x);top:var(--sticker-y);width:clamp(58px,6.3vw,92px);opacity:.58;filter:saturate(.6) drop-shadow(0 2px 2px #26334726);z-index:1;will-change:translate;clip-path:inset(7% 5% 5% 5%)}
.hero .scattered-sticker{z-index:0;opacity:.6}
.cards-section .scattered-sticker,.app-section .scattered-sticker,.worlds-section .scattered-sticker{z-index:1}
.faq-section{padding-bottom:120px;overflow:clip;isolation:isolate}
.faq-section>div{position:relative}
.support-section{isolation:isolate;overflow:clip}
.support-section .scattered-sticker{z-index:0;opacity:.55}
.feature-list{max-width:365px}
@media(max-width:1050px) and (min-width:800px){
 .app-copy{max-width:320px;left:5%}.app-copy h2{font-size:43px}.phone-stage{left:46%}.guardian{width:430px;right:-7%}.coming-copy{left:7%;max-width:530px}.coming-copy h2{font-size:43px}.witcher{width:200px;right:-50px;top:-10%}.scattered-sticker{width:64px}
}
@media(max-width:799px){
 .cards-section .section-heading::before{inset:-12px -20px;background:radial-gradient(ellipse at 35% 50%,#fcfbf8 65%,#fcfbf8ed 80%,transparent 100%)}
 .cards-section .card-caption{max-width:76%;margin-left:auto;margin-right:auto;font-size:11px}
 .oblivion{width:310px;right:-130px;top:34%}.witcher{width:140px;right:-50px;top:-9%}
 .app-copy{top:40px;max-width:280px}.app-copy h2{font-size:40px}.feature-list{gap:12px;margin-block:20px}.feature-list h3{font-size:18px}.feature-list p{font-size:14px}.phone-stage{bottom:22px;top:auto}.phone{height:420px;width:205px}.phone-preview{left:6px;top:29px;width:336px;height:675px;transform:scale(.552);border-radius:0 0 30px 30px}
 .cube{top:29%;right:-25px;width:110px}.portal-blue{top:40%;right:-30px}
 .coming-section{min-height:690px}.coming-copy{top:70px;left:24px;right:24px;max-width:none}.coming-copy h2{font-size:37px}.coming-copy::before{inset:-20px}.coming-status{margin-top:22px;font-size:21px}.guardian{width:370px;right:-45px;bottom:-18px}
 .scattered-sticker{width:54px;opacity:.42}.scattered-sticker[data-sticker="1"]{top:75%;left:1%}.scattered-sticker[data-sticker="4"]{left:83%;top:4%}.scattered-sticker[data-sticker="7"]{left:80%;top:2%}.scattered-sticker[data-sticker="8"]{left:84%;top:52%}.scattered-sticker[data-sticker="13"]{left:5%;top:86%}.scattered-sticker[data-sticker="15"]{left:81%;top:2%}.scattered-sticker[data-sticker="14"]{left:5%;top:92%}.faq-section{padding-bottom:100px}
 .scattered-sticker[data-sticker="3"]{top:92%;left:58%}
 .lightsaber{left:-1%;top:7%}.final-cta h2{z-index:12}.final-cta h2::before{content:'';position:absolute;inset:-30px;z-index:-1;background:radial-gradient(ellipse,#fcfbf8 10%,#fcfbf8e8 65%,transparent 90%)}
}
@media(max-width:359px){.app-copy{max-width:253px}.app-copy h2{font-size:36px}.coming-copy h2{font-size:32px}.guardian{width:330px}.coming-section{min-height:650px}}
/* Short landscape screens scroll naturally so the bottom of a scene stays reachable. */
@media(max-height:600px){.legends-ready .scroll-chapter{height:auto}.legends-ready .scene-pin{position:relative}}
html:not(.legends-ready) .saber-blade{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.surface-light{display:none}.game-object,.image-actor.in-view,.phone-stage,.sticker{will-change:auto}.legends-ready .scroll-chapter{height:auto}.legends-ready .scene-pin{position:relative}}