/* Future imperial city: parallax scenery, slow scanning light and thematic links. */
.capital-atlas{scroll-margin-top:105px}
.atlas-stage{position:relative;isolation:isolate;aspect-ratio:1660/948;max-height:740px;overflow:hidden;border:1px solid #a3c8d14d;background:#0b172b;--atlas-x:0;--atlas-y:0}
.atlas-landscape{position:absolute;inset:-2%;transform:translate(calc(var(--atlas-x)*-10px),calc(var(--atlas-y)*-6px));transition:transform 1s ease-out}
.atlas-landscape img{width:100%;height:100%;object-fit:cover;display:block;animation:atlasBreathe 20s ease-in-out infinite alternate;animation-play-state:paused}
.atlas-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0615276e,transparent 30%,#051b2910 70%,#08182866);pointer-events:none}
.atlas-haze{position:absolute;inset:-15%;background:radial-gradient(ellipse at 20% 70%,#8ad9eb30,transparent 40%),radial-gradient(ellipse at 80% 40%,#d9ca9420,transparent 45%);mix-blend-mode:screen;animation:atlasHaze 18s ease-in-out infinite alternate;animation-play-state:paused;pointer-events:none}
.atlas-scan{position:absolute;inset:-40% 0;background:linear-gradient(180deg,transparent 46%,#80eaff04 49%,#a1eced37 50%,#b3eff17d 50.12%,#6dddff08 50.3%,transparent 53%);mix-blend-mode:screen;animation:atlasScan 10s linear infinite;animation-play-state:paused;pointer-events:none}
.atlas-routes{position:absolute;inset:0;width:100%;height:100%;stroke:#94d9e5;stroke-width:1;opacity:.43;pointer-events:none}
.atlas-routes path{stroke-dasharray:5 14;animation:atlasRoute 9s linear infinite;animation-play-state:paused}.atlas-routes circle{stroke:#d6c38d;stroke-width:.7;opacity:.45}
.atlas-status{position:absolute;top:25px;left:25px;font-size:10px;letter-spacing:.2em;color:#d3e6e9;display:flex;gap:12px;align-items:center;text-shadow:0 1px 5px #00101e;z-index:2}.atlas-status i{width:5px;height:5px;background:#bfe7e6;box-shadow:0 0 12px #b5edf4;border-radius:50%}
.atlas-point{position:absolute;left:var(--x);top:var(--y);z-index:3;display:flex;align-items:center;gap:12px;transform:translate(-10px,-10px);font-size:12px;color:#f1deaf;text-shadow:0 1px 5px #07131a}
.atlas-point>i{width:11px;height:11px;border:1px solid #e7d7a8;background:#d7c59066;transform:rotate(45deg);box-shadow:0 0 20px #94eff477;flex:none}.atlas-point>i:after{content:'';position:absolute;inset:-8px;border:1px solid #a4e1e780;animation:atlasPulse 3.5s ease-out var(--delay) infinite;animation-play-state:paused}
.atlas-point>span{padding:9px 12px;border-left:1px solid #c3e3eb6b;background:linear-gradient(90deg,#0b2635dc,#0b22329e);backdrop-filter:blur(7px);white-space:nowrap;transition:color .3s,background .3s}.atlas-point small{font-size:8px;letter-spacing:.1em;margin-left:18px;color:#8dbbc8}.atlas-point:hover>span,.atlas-point:focus-visible>span{color:white;background:#163f51f2}.atlas-point:focus-visible{outline:1px solid #eadab5;outline-offset:10px}
.atlas-corner{position:absolute;width:26px;height:26px;border:1px solid #c6dadc88;pointer-events:none;z-index:2}.atlas-corner.one{left:12px;bottom:12px;border-right:0;border-top:0}.atlas-corner.two{right:12px;top:12px;border-left:0;border-bottom:0}
.atlas-stage.fx-running .atlas-landscape img,.atlas-stage.fx-running .atlas-haze,.atlas-stage.fx-running .atlas-scan,.atlas-stage.fx-running .atlas-routes path,.atlas-stage.fx-running .atlas-point>i:after{animation-play-state:running}
.world-step{scroll-margin-top:110px}
.world-visual .world-scene.shown{animation:worldLivingScene 22s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:50% 50%}
.world-scene-light{position:absolute;inset:-25% -50%;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#93e7f51b 47%,#b1f2f366 50%,#94e6ec12 53%,transparent 60%);mix-blend-mode:screen;animation:worldSceneLight 12s ease-in-out infinite;animation-play-state:paused;opacity:.4}
.world-visual .world-image-title,.world-visual .world-image-foot{z-index:3}
.world-visual.fx-running .world-scene.shown,.world-visual.fx-running .world-scene-light{animation-play-state:running}
@keyframes atlasBreathe{from{transform:scale(1.01)}to{transform:scale(1.065)}}
@keyframes atlasHaze{from{transform:translate(-3%,2%);opacity:.3}to{transform:translate(3%,-2%);opacity:.8}}
@keyframes atlasScan{from{transform:translateY(-48%)}to{transform:translateY(48%)}}
@keyframes atlasRoute{to{stroke-dashoffset:-190}}
@keyframes atlasPulse{0%{transform:scale(.5);opacity:0}15%{opacity:.75}100%{transform:scale(2.8);opacity:0}}
@keyframes worldLivingScene{from{transform:scale(1.045) translate(-.5%,0)}to{transform:scale(1.105) translate(.5%,-.5%)}}
@keyframes worldSceneLight{0%,10%{transform:translateX(-50%);opacity:0}35%,60%{opacity:.4}90%,100%{transform:translateX(50%);opacity:0}}
/* Closing hook: traditional doors open, four paths flare, then the message settles. */
.epilogue.finale{scroll-margin-top:88px}
.finale-window{background-size:clamp(150px,18.4vw,360px) auto;transform-origin:center;will-change:auto}
.epilogue.finale h2 .finale-line{display:block;color:#eef0ed;background:none;-webkit-text-fill-color:currentColor}
.epilogue.finale h2 .finale-choice{background:linear-gradient(110deg,#cbaa71 5%,#fff1c8 35%,#c3a06a 60%,#eee0b8 90%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.finale-impact{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.finale-impact:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,#c7bb822b,transparent 58%);opacity:0}
.finale-impact i{position:absolute;left:50%;top:46%;width:250px;aspect-ratio:1;border:1px solid #d7c18877;border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0}
.finale-impact i+ i{border-color:#8ed9ec44}
.finale-replay{position:absolute;bottom:40px;right:calc(var(--finale-pattern-inset) + 16px);z-index:5;font-size:10px;letter-spacing:.04em;color:#bfae8b;padding:8px 12px;border-bottom:1px solid #bda57555;background:#0a192abb;display:flex;gap:12px;align-items:center}.finale-replay:hover{color:#f3e0b7}.finale-replay>span{font-size:17px}
.finale.fx-enter .finale-window{animation:finaleDoors 1.8s cubic-bezier(.17,.8,.15,1) both}
.finale.fx-enter .finale-crest{animation:finaleCrest 1s .35s both}
.finale.fx-enter .finale-content>.eyebrow{animation:finaleText .8s .5s both}
.finale.fx-enter .finale-line.first{animation:finaleTitle 1s .55s cubic-bezier(.12,.8,.16,1) both}
.finale.fx-enter .finale-line.last{animation:finaleTitle 1.15s .8s cubic-bezier(.12,.8,.16,1) both}
.finale.fx-enter .finale-choice{animation:finaleGold 5s 1.3s ease-in-out infinite}
.finale.fx-enter .finale-promise{animation:finaleText .85s 1.25s both}
.finale.fx-enter .finale-link{animation:finaleText .85s 1.45s both}
.finale.fx-enter .finale-four{animation:finaleText .9s 1.65s both}
.finale.fx-enter .finale-impact:before{animation:finaleBloom 2.6s .35s both}
.finale.fx-enter .finale-impact i{animation:finaleRipple 2.9s .6s ease-out both}.finale.fx-enter .finale-impact i+i{animation-delay:.85s}
.finale.fx-enter .finale-four span{animation:finaleDot 4s 2s infinite}.finale.fx-enter .finale-four span:nth-child(2){animation-delay:2.3s}.finale.fx-enter .finale-four span:nth-child(3){animation-delay:2.6s}.finale.fx-enter .finale-four span:nth-child(4){animation-delay:2.9s}
.finale:not(.fx-running) *,.finale:not(.fx-running) :before,.finale:not(.fx-running) :after{animation-play-state:paused!important}
@keyframes finaleDoors{from{width:calc(50% - var(--finale-pattern-inset));opacity:.85;filter:brightness(1.2)}to{width:19%;opacity:.55;filter:brightness(1)}}
@keyframes finaleCrest{from{opacity:0;transform:scaleX(.35)}to{opacity:1;transform:none}}
@keyframes finaleTitle{from{opacity:0;transform:translateY(45px) scale(1.15);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes finaleText{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes finaleGold{0%,100%{background-position:90% 50%}50%{background-position:10% 50%}}


@keyframes finaleBloom{0%{opacity:0;transform:scale(.45)}35%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@keyframes finaleRipple{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}15%{opacity:.5}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}
@keyframes finaleDot{0%,100%{box-shadow:none;opacity:.4}25%{box-shadow:0 0 13px #e6cd95;opacity:1}}
.motion-paused .atlas-stage *,.motion-paused .world-visual *,.motion-paused .finale *{animation:none!important;transition:none!important}
.motion-paused .atlas-landscape{transform:none!important}
@media(max-width:1100px){@keyframes finaleDoors{from{width:calc(50% - var(--finale-pattern-inset));opacity:.8}to{width:15%;opacity:.43}}}
@media(max-width:700px){.atlas-stage{aspect-ratio:4/3}.atlas-point{gap:5px;font-size:9px}.atlas-point>span{padding:6px 7px}.atlas-point small{display:none}.atlas-point:nth-of-type(2){left:72%}.atlas-status{top:16px;left:16px;font-size:8px}.atlas-point>i{width:7px;height:7px}.world-step{scroll-margin-top:90px}.finale-replay{bottom:28px;right:25px;font-size:9px;padding:7px 9px}.finale-window{background-size:150px auto}@keyframes finaleDoors{from{width:calc(50% - var(--finale-pattern-inset));opacity:.7}to{width:12%;opacity:.35}}}
@media(prefers-reduced-motion:reduce){html:not(.site-motion-on) .atlas-stage *,html:not(.site-motion-on) .atlas-point>i:after,html:not(.site-motion-on) .world-visual *,html:not(.site-motion-on) .finale *,html:not(.site-motion-on) .finale :before,html:not(.site-motion-on) .finale :after{animation:none!important;transition:none!important}html:not(.site-motion-on) .atlas-landscape{transform:none!important}}

/* Original wide-angle key art. The large foreground silhouettes carry the impact. */
.story-keyvisual{margin:75px calc(var(--gutter)*-.45) 105px;scroll-margin-top:115px}
.keyvisual-stage{position:relative;isolation:isolate;overflow:hidden;background:#091722;--key-x:0;--key-y:0;clip-path:polygon(2.5% 0,100% 0,100% 94%,97.5% 100%,0 100%,0 6%)}
.keyvisual-stage>img{display:block;width:100%;height:auto;transform:scale(1.02) translate(calc(var(--key-x)*-7px),calc(var(--key-y)*-4px));transition:transform 1s ease-out}
.keyvisual-light{position:absolute;inset:-20% -40%;pointer-events:none;background:linear-gradient(112deg,transparent 43%,#d8f9ff15 49%,#cfeeff35 50%,transparent 57%);mix-blend-mode:screen;animation:keyvisualLight 13s ease-in-out infinite;animation-play-state:paused;opacity:0}
.keyvisual-stage.fx-running .keyvisual-light{animation-play-state:running}
.keyvisual-edge{position:absolute;inset:14px;border:1px solid #d9d8bc32;pointer-events:none}
.story-keyvisual figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 2.5%;color:#dcd4bf}.story-keyvisual figcaption>span{font-size:20px;letter-spacing:-.025em}.story-keyvisual small{font-size:9px;letter-spacing:.15em;color:#819eb2}
@keyframes keyvisualLight{0%,20%{transform:translateX(-45%);opacity:0}35%,60%{opacity:.6}80%,100%{transform:translateX(45%);opacity:0}}
.motion-paused .keyvisual-light{animation:none!important}.motion-paused .keyvisual-stage>img{transform:none!important}
@media(max-width:700px){.story-keyvisual{margin:35px -12px 55px;scroll-margin-top:85px}.keyvisual-edge{inset:6px}.story-keyvisual figcaption{padding:14px 5px;display:block}.story-keyvisual figcaption>span{font-size:16px}.story-keyvisual small{display:block;font-size:7px;margin-top:8px}}
@media(prefers-reduced-motion:reduce){html:not(.site-motion-on) .keyvisual-light{animation:none!important}html:not(.site-motion-on) .keyvisual-stage>img{transform:none!important;transition:none!important}}