/* Mornye observation: stable portrait, proportional orbital motion. */
.stage.observation{isolation:isolate;container-type:inline-size;height:280px;background:linear-gradient(145deg,#edf2fa,#f7f9fc 55%,#e4ecf7);border:1px solid #dce4f0;border-radius:5px;overflow:hidden}
.observation__haze{position:absolute;inset:-20%;background:radial-gradient(ellipse at 70% 58%,#bedcf477,transparent 45%),radial-gradient(ellipse at 25% 42%,#e9d9b933,transparent 40%);animation:observation-haze 12s ease-in-out infinite alternate}
.observation__texture{position:absolute;width:240px;height:240px;left:-66px;top:20px;opacity:.075;transform:rotate(-24deg);pointer-events:none}
.observation__map{position:absolute;width:320px;height:280px;left:calc(50% - 160px);top:0;overflow:visible;pointer-events:none}
.observation__grid{opacity:.36}
.observation__orbit{transform-origin:110px 140px;animation:observation-orbit 32s linear infinite;opacity:.65}
.observation__orbit--inner{animation-direction:reverse;animation-duration:23s;opacity:.5}
.observation__stars{animation:observation-stars 6s ease-in-out infinite alternate}
.observation .observation__portrait{height:276px;width:220px;right:-12px;bottom:0;opacity:1;filter:none;z-index:1;mask-image:linear-gradient(#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(#000 78%,transparent 100%);animation:observation-arrive .85s cubic-bezier(.2,.7,.2,1) both}
.observation__scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#edfaff00 43%,#e2faff77 49%,#ffffff99 50%,#edfaff00 56%,transparent 65%);transform:translateX(-110%);animation:observation-scan 1.4s .15s cubic-bezier(.25,.65,.35,1) both;mix-blend-mode:screen}
.observation__corners{position:absolute;inset:12px;z-index:3;pointer-events:none;background:linear-gradient(#b7c5da,#b7c5da) left top/13px 1px no-repeat,linear-gradient(#b7c5da,#b7c5da) left top/1px 13px no-repeat,linear-gradient(#c5b68f,#c5b68f) right bottom/13px 1px no-repeat,linear-gradient(#c5b68f,#c5b68f) right bottom/1px 13px no-repeat;opacity:.65}
.observation__caption{position:absolute;left:19px;bottom:25px;z-index:3;font:500 15px/1.6 var(--sans);letter-spacing:.18em;color:#536983;text-shadow:0 1px 8px #fff}
.observation__caption span{display:block;font-size:10px;font-weight:400;letter-spacing:.12em;color:#7385a0;margin-top:3px}
.observation__pause{position:absolute;top:12px;right:12px;z-index:4;padding:6px 9px;background:#f7f9fcd9;border:1px solid #dce4f0;border-radius:4px;color:#536983;font:11px var(--sans);cursor:pointer;opacity:0;transition:opacity .2s,background .2s}
.observation:hover .observation__pause,.observation:focus-within .observation__pause,.observation.is-paused .observation__pause{opacity:1}
.observation__pause:focus-visible{outline:2px solid #6f84bd;outline-offset:2px}
.observation.is-paused * ,body[data-page-hidden="true"] .observation *{animation-play-state:paused!important}
@keyframes observation-orbit{to{transform:rotate(360deg)}}
@keyframes observation-haze{to{transform:translate(-3%,3%);opacity:.65}}
@keyframes observation-stars{from{opacity:.3}to{opacity:.7}}
@keyframes observation-arrive{from{opacity:0;transform:translate(7px,3px)}to{opacity:1;transform:translate(0,0)}}
@keyframes observation-scan{from{transform:translateX(-110%);opacity:0}20%{opacity:.8}to{transform:translateX(110%);opacity:0}}
@media(hover:none){.observation__pause{opacity:1}}
@media(max-width:759px){.stage.observation{height:260px}.observation__map{top:-10px}.observation .observation__portrait{height:258px;width:210px;right:0}}
body[data-motion="off"] .observation *{animation:none!important;transition:none!important}
body[data-motion="off"] .observation__scan,body[data-motion="off"] .observation__pause{display:none}
@media(prefers-reduced-motion:reduce){.observation *{animation:none!important;transition:none!important}.observation__scan,.observation__pause{display:none}}