/* Approved artwork: camera movement, never a deformation of the subject. */
.orbital-art-scene{position:absolute;inset:0;z-index:2;pointer-events:none}
.orbital-art-scene>img{position:absolute;max-width:none;height:auto;will-change:transform;filter:drop-shadow(0 0 24px #8bbbd61a)}
.planet-portrait[data-renderer='artwork-depth']{animation:none!important}
.world-dialog[data-presentation='artwork'] .focus-orb{left:44%;top:50%;width:min(61vw,92svh);height:min(61vw,92svh);margin-top:calc(min(61vw,92svh) * -.5);filter:none}
.planet-node[data-planet='ote'] .planet-portrait{mask-image:radial-gradient(ellipse,#000 48%,#000c 62%,transparent 74%);mix-blend-mode:screen}
.world-dialog[data-world='ote'] .planet-portrait{mix-blend-mode:lighten;mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.world-dialog[data-world='ote'] .planet-portrait>img{object-fit:contain}
.world-dialog[data-world='tania'] .focus-orb{left:44%;width:min(57vw,89svh);height:min(57vw,89svh);margin-top:calc(min(57vw,89svh) * -.5)}
.world-dialog[data-presentation='artwork'] .artwork-feature{left:50%;top:5%;z-index:5;opacity:1;visibility:visible;pointer-events:auto;position:absolute;transform:none}
.world-dialog[data-world='tania'] .artwork-feature{left:69%;top:77%}
.world-dialog[data-world='raven'] .artwork-feature{left:54%;top:5%}
.facility-art-frame{padding:2%;background:radial-gradient(ellipse,#25334240,#03060a 78%);overflow:hidden}
.facility-art-frame>img{width:100%;background:transparent;animation:facility-camera 24s ease-in-out infinite alternate;transform-origin:center}
.facility-art-expand{margin:0 5%;font-size:12px}
@keyframes facility-camera{from{transform:scale(.985)}to{transform:scale(1.012)}}
.civ-artwork-stage{background:#060b10;cursor:default}
.civ-artwork-stage>img{object-fit:contain!important;padding:22px!important}
/* Foreground relics sit independently above the map and cast a soft depth shadow. */
.landmark-node{perspective:800px;isolation:isolate}
.landmark-art-depth{display:block;position:absolute;inset:-5%;padding:5%;transform-style:preserve-3d;transform:translateX(var(--relic-x,0px)) rotateX(var(--relic-rx,0deg)) rotateY(var(--relic-ry,0deg));transition:transform 1.2s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:1}
.landmark-art-depth img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(10px 18px 9px #000c);animation:relic-hover 9s ease-in-out infinite alternate}
.engine-node .landmark-art-depth img{animation-delay:-4s}
.landmark-node .landmark-glow{position:absolute;inset:20%;width:auto;height:auto;border:0;background:radial-gradient(ellipse,color-mix(in srgb,var(--landmark-color) 24%,transparent),transparent 66%);filter:blur(10px);z-index:0;transform:none;animation:relic-core 6s ease-in-out infinite alternate;pointer-events:none}
.landmark-node .landmark-label{z-index:3;text-shadow:0 2px 8px #000}
.landmark-node:hover .landmark-art-depth img,.landmark-node:focus-visible .landmark-art-depth img{filter:drop-shadow(12px 24px 12px #000d) drop-shadow(0 0 5px color-mix(in srgb,var(--landmark-color) 40%,transparent))}
@keyframes relic-hover{from{transform:translateY(2px) translateZ(0)}to{transform:translateY(-6px) translateZ(10px)}}
@keyframes relic-core{from{opacity:.35}to{opacity:.75}}
/* Machined surfaces, clipped corners, restrained illuminated seams. */
:is(.button,.focus-close,.dialog-close,.focus-bottom button,.planet-navigation button,.civ-model-tools button,.civ-related button,.civ-related a,.facility-art-expand){--edge:#bda573;position:relative;isolation:isolate;background:linear-gradient(120deg,#26303ccc,#0b131ce8 47%,#111b25ef);color:#e7dfcc;border:0;border-top:1px solid #ccbb963d;border-bottom:1px solid #7e8d9d4a;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);box-shadow:inset 0 1px #ffffff0e,inset 0 -9px 18px #0003;transition:background .35s,box-shadow .35s,color .35s,translate .3s;min-height:42px}
:is(.button,.focus-close,.dialog-close,.focus-bottom button,.planet-navigation button,.civ-model-tools button,.civ-related button,.civ-related a,.facility-art-expand)::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,transparent 25%,#d9eaf020 48%,transparent 68%) 150% 0/250% 100% no-repeat;transition:background-position .8s;pointer-events:none}
:is(.button,.focus-close,.dialog-close,.focus-bottom button,.planet-navigation button,.civ-model-tools button,.civ-related button,.civ-related a,.facility-art-expand)::after{content:'';position:absolute;left:12px;bottom:0;width:24%;height:1px;background:linear-gradient(90deg,var(--edge),transparent);box-shadow:0 -1px 8px var(--edge);pointer-events:none}
:is(.button,.focus-close,.dialog-close,.focus-bottom button,.planet-navigation button,.civ-model-tools button,.civ-related button,.civ-related a,.facility-art-expand):hover{background-color:#263447;box-shadow:inset 0 1px #edd3a75c,inset 0 -8px 18px #0003;color:#fff4da;translate:0 -2px}
:is(.button,.focus-close,.dialog-close,.focus-bottom button,.planet-navigation button,.civ-model-tools button,.civ-related button,.civ-related a,.facility-art-expand):hover::before{background-position:-50% 0}
:is(.button,.focus-close,.dialog-close,.focus-bottom button,.planet-navigation button,.civ-model-tools button,.civ-related button,.civ-related a,.facility-art-expand):active{translate:0 1px;box-shadow:inset 0 3px 12px #0008}
.button.button-gold{color:#22190c;background:linear-gradient(120deg,#e9d4a4,#b68a44 48%,#dec18b);border-top-color:#fff0c2;box-shadow:inset 0 1px #fff6d4,inset 0 -3px #88622e55;min-height:58px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.button.button-gold:hover{color:#191206;background:linear-gradient(120deg,#f7e6bd,#c59d5c 48%,#eddaa9)}
.button-gold>span:last-child{display:grid;place-items:center;width:27px;height:27px;border-left:1px solid #64491e66;font-size:19px;padding-left:17px}
.trailer-button .play-circle{background:radial-gradient(circle,#d5b87813 50%,transparent 53%),linear-gradient(135deg,#34445280,#071018);box-shadow:inset 0 0 0 5px #050a10,inset 0 0 0 6px #d9c79d30,0 0 14px #a8cbd90c;border:1px solid #c4b27b7a;position:relative;overflow:visible}
.trailer-button .play-circle:after{content:'';position:absolute;inset:-5px;border:1px solid transparent;border-top-color:#e1c28970;border-bottom-color:#91b3c545;border-radius:50%;transform:rotate(-30deg);transition:transform .8s}
.trailer-button:hover .play-circle:after{transform:rotate(25deg)}
.text-link:not(.facility-art-expand){position:relative;border-bottom-color:#b59d634a;background:linear-gradient(90deg,#c7aa670d,transparent);padding:11px 18px 11px 12px;transition:color .3s,background .3s}
.text-link:not(.facility-art-expand):before{content:'';position:absolute;left:0;top:42%;height:16%;width:2px;background:#d9bb7e;box-shadow:0 0 9px #e8c07850}
.text-link:hover{color:#fff0ce;background-color:#c7aa6710}
.facility-art-expand{padding:11px 20px;margin-top:14px}
:is(.focus-tabs,.landmark-tabs,.story-tabs) button{position:relative;transition:color .3s,text-shadow .3s}
:is(.focus-tabs,.landmark-tabs) button[aria-selected='true'],.story-tabs button.selected{text-shadow:0 0 18px #dbbd7c45}
:is(.focus-tabs,.landmark-tabs) button[aria-selected='true']:after{content:'';position:absolute;bottom:0;left:0;width:26px;height:1px;background:#f5d599;box-shadow:0 0 9px #e6b965}
:is(.button,.focus-close,.dialog-close,.text-link,.model-feature,.civ-related button,.civ-related a,.landmark-node):focus-visible{outline:2px solid #ffe0a2;outline-offset:5px;box-shadow:inset 0 0 0 2px #ffe0a2}
.model-feature.artwork-feature{background:linear-gradient(105deg,#071018f2,#122432ce);border:1px solid #bfa67555;border-left:2px solid #dfc188;box-shadow:0 10px 25px #0005;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);padding:12px 18px}
.model-feature.artwork-feature:hover{background:linear-gradient(105deg,#132737f2,#213947de)}
.world-dialog[data-presentation='artwork']>.artwork-feature{top:auto;left:auto;right:6%;bottom:130px;z-index:5}
.motion-paused :is(.facility-art-frame>img,.landmark-art-depth img,.landmark-glow){animation-play-state:paused}
.motion-paused .landmark-art-depth{transform:none}
@media(max-width:700px){
 .world-dialog[data-presentation='artwork'] .focus-orb{left:13%;top:27%;width:78vw;height:78vw;margin-top:-39vw}
 .world-dialog[data-world='tania'] .focus-orb{left:15%;width:76vw;height:76vw;margin-top:-38vw}
 .world-dialog[data-presentation='artwork'] .artwork-feature{top:-8%;left:40%;min-width:135px;padding:7px 10px}
 .world-dialog[data-world='tania'] .artwork-feature{top:72%;left:52%}
 .world-dialog[data-presentation='artwork']>.artwork-feature{top:35%;left:auto;right:7%;bottom:auto;z-index:5;min-width:135px}
 .world-dialog[data-presentation='artwork'] .focus-rotate-hint{display:none}
 .button.button-gold{min-height:54px}
 .temple-node .landmark-label{font-size:10px}
 .facility-art-frame{padding:3%}.facility-art-expand{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
 .facility-art-frame>img,.landmark-art-depth img,.landmark-node .landmark-glow{animation:none}
 .landmark-art-depth{transform:none!important;transition:none}
 :is(.button,.focus-close,.dialog-close,.text-link,.model-feature)::before{transition:none}
}
/* Mobile hero controls occupy separate flow rows, including when text wraps. */
.engine-node .landmark-label{right:auto;left:35%;top:calc(100% + 10px);transform:translateX(-50%)}
/* The existing engine artwork bridges II and III on the same scroll clock. */
.passage-engine{position:absolute;left:50%;top:56%;width:min(58vw,65svh);aspect-ratio:1312/1199;opacity:var(--engine-opacity,0);transform:translate(-50%,-60%) scale(var(--engine-scale,.78)) rotate(var(--engine-tilt,-6deg));transform-origin:50% 60%;will-change:transform,opacity}
.passage-engine img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 24px #a369d942)}
.passage-core{position:absolute;left:50%;top:56%;width:min(32vw,32svh);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse,#e5d3ff38, #af80d925 30%,#8c61ca10 52%,transparent 72%);opacity:var(--engine-core,0);transform:translate(-50%,-50%) scale(var(--engine-core-scale,.7));mix-blend-mode:screen;will-change:transform,opacity}
.horizon-passage p{top:auto;bottom:15%;font-size:12px;letter-spacing:.28em;margin:0;padding:0 20px}
.horizon-passage p span{font-size:20px;letter-spacing:.16em}
.story-index,.story-bottom{z-index:4}
@media(max-width:700px){.passage-engine{width:min(82vw,61svh);top:54%}.passage-core{top:54%;width:44vw}.horizon-passage p{top:auto;bottom:14%;font-size:11px}.horizon-passage p span{font-size:18px}}
@media(max-width:600px){
 .hero{height:auto;min-height:max(730px,100svh);max-height:none;display:flex;flex-direction:column;gap:44px;padding:clamp(220px,32svh,290px) 7% max(28px,env(safe-area-inset-bottom))}
 .hero .hero-content,.three-ready .hero .hero-content{position:relative;inset:auto;transform:none;width:100%;max-width:none;flex:none}
 .hero .hero-actions{gap:24px}
 .hero .trailer-button{min-height:48px;max-width:100%}
 .hero .hero-bottom{position:relative;inset:auto;margin-top:auto;flex:none;flex-wrap:wrap;align-items:center;gap:20px}
 .hero .scroll-cue{min-width:0;flex:1 1 170px}
 .hero .chapter-mark{flex-shrink:0}
}
