/* The architecture is rendered offline; the client animates bundled WebP and
   lightweight atmosphere layers. No canvas loop or third-party service. */
.hero-image{animation:hero-drift 18s ease-in-out infinite alternate;will-change:transform}
.image-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:paint}
.drifting-mist{position:absolute;display:block;left:-20%;right:-20%;bottom:-12%;height:54%;opacity:.45;background:radial-gradient(ellipse at 30% 70%,#afb6a51a,transparent 48%),radial-gradient(ellipse at 70% 60%,#bfc3b51c,transparent 48%);filter:blur(16px);animation:mist-drift 23s ease-in-out infinite alternate}
.firelight{position:absolute;display:block;inset:0;opacity:.2;background:radial-gradient(ellipse at 85% 74%,#e5962830,transparent 24%),radial-gradient(ellipse at 62% 84%,#f0aa3f1a,transparent 17%);mix-blend-mode:screen;animation:fire-breathe 5.4s ease-in-out infinite alternate}
.embers{position:absolute;display:block;inset:0;overflow:hidden;perspective:100px}
.embers i{position:absolute;bottom:5%;left:65%;width:3px;height:3px;background:#dfaa59;border-radius:50%;box-shadow:0 0 9px #f39b39a0;opacity:0;animation:ember-rise 10s linear infinite}
.embers i:nth-child(2){left:86%;bottom:10%;animation-delay:-2.6s;animation-duration:12s;width:2px;height:2px}
.embers i:nth-child(3){left:44%;bottom:17%;animation-delay:-6.4s;animation-duration:11s}
.embers i:nth-child(4){left:78%;bottom:7%;animation-delay:-8.1s;animation-duration:14s;width:2px;height:2px}
.embers i:nth-child(5){left:57%;bottom:2%;animation-delay:-4.3s;animation-duration:9s}
.embers i:nth-child(6){left:93%;bottom:18%;animation-delay:-5.5s;animation-duration:12s;width:2px;height:2px}
.embers i:nth-child(7){left:73%;bottom:24%;animation-delay:-9.4s;animation-duration:11s}
.embers i:nth-child(8){left:34%;bottom:12%;animation-delay:-3.7s;animation-duration:13s;width:2px;height:2px}
.embers i:nth-child(9){left:82%;bottom:30%;animation-delay:-7.8s;animation-duration:9s}
.embers i:nth-child(10){left:62%;bottom:32%;animation-delay:-1.2s;animation-duration:11s;width:2px;height:2px}
.embers i:nth-child(11){left:48%;bottom:6%;animation-delay:-8.6s;animation-duration:14s}
.embers i:nth-child(12){left:98%;bottom:14%;animation-delay:-5.8s;animation-duration:10s;width:2px;height:2px}
.gameplay-image>img{animation:gameplay-drift 14s ease-in-out infinite alternate;transform-origin:60% 60%;will-change:transform}
.gameplay-image .image-atmosphere{z-index:0;opacity:.75}
.gameplay-image .image-topline,.gameplay-image .image-caption{z-index:1}
.gameplay-image .embers i{animation-duration:9s}
.gameplay-image .drifting-mist{height:40%;opacity:.7}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:7px 10px;border:1px solid #a9925b55;background:#11140fd9;color:#c3b48f;font-size:9px;line-height:1.4;letter-spacing:1px;text-transform:uppercase;min-height:32px}
.motion-toggle:hover{border-color:#b69a66;color:#e0c891}
.motion-icon{font-size:12px;width:12px;display:inline-block;line-height:1;text-align:center}
.castle-visual{min-height:560px;padding:40px 0 60px}
.castle-visual>img{width:100%;height:auto;aspect-ratio:14/11;object-fit:contain}
.castle-view-tools{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:2}
.castle-view-picker{display:flex;background:#11140fe6;border:1px solid #a9925b44;padding:3px}
.castle-view-picker button{border:0;background:transparent;padding:7px 9px;color:#9b9e8b;font:600 8px/1.4 var(--sans);text-transform:uppercase;letter-spacing:1px;min-height:28px}
.castle-view-picker button[aria-pressed=true]{background:#9d844b33;color:#ddc591;box-shadow:inset 0 -1px #b69a66}
.castle-view-picker button:hover{color:#e0c891}
.castle-visual .map-compass{top:auto;bottom:93px}
.map-caption{bottom:69px;left:20px;right:20px;line-height:1.7;max-width:calc(100% - 40px);color:#a6a98e}
.castle-facts{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:1px solid #78734d33;background:#14170fdf;padding:13px 12px}
.castle-facts>span{display:flex;gap:8px;align-items:center;justify-content:center;color:#929880;font:9px/1.5 var(--sans);letter-spacing:.4px}
.castle-facts strong{font:18px/1 var(--serif);color:#c6af78;font-weight:400}
html:is([data-motion=paused],[data-page-visibility=hidden]) *,html:is([data-motion=paused],[data-page-visibility=hidden]) *:before,html:is([data-motion=paused],[data-page-visibility=hidden]) *:after{animation-play-state:paused!important}
html[data-motion=paused] .embers{opacity:0}
@keyframes hero-drift{from{transform:scale(1.025) translate3d(0,0,0)}to{transform:scale(1.085) translate3d(-.9%,.4%,0)}}
@keyframes gameplay-drift{from{transform:scale(1.03) translate3d(-.4%,0,0)}to{transform:scale(1.11) translate3d(.4%,-.7%,0)}}
@keyframes mist-drift{from{transform:translate3d(-3%,2%,0);opacity:.35}to{transform:translate3d(6%,-3%,0);opacity:.7}}
@keyframes fire-breathe{0%,100%{opacity:.18}35%{opacity:.31}65%{opacity:.22}}
@keyframes ember-rise{0%{transform:translate3d(0,12px,0);opacity:0}15%{opacity:.65}50%{transform:translate3d(-18px,-90px,0);opacity:.45}85%{opacity:.2}100%{transform:translate3d(25px,-220px,0);opacity:0}}
@media(max-width:1100px){.castle-visual{min-height:515px}.castle-view-tools{left:12px;right:12px}.castle-view-picker button{font-size:7px;letter-spacing:.7px;padding:7px}.castle-view-tools .motion-toggle{padding:7px;letter-spacing:.5px;font-size:8px}}
@media(max-width:760px){.castle-visual{aspect-ratio:auto;min-height:0;padding-top:45px;padding-bottom:80px}.castle-visual .map-compass{bottom:110px}.castle-view-tools .motion-label{display:none}.castle-view-tools .motion-toggle{width:32px;height:32px}.castle-view-picker button{font-size:8px;padding:7px 10px}.castle-facts{padding:12px 6px;gap:4px}.castle-facts>span{font-size:8px;gap:6px;letter-spacing:0}.castle-facts strong{font-size:16px}.map-caption{font-size:7px;bottom:67px}.hero-bottom{flex-wrap:wrap;gap:13px}.hero-bottom .motion-toggle{margin-left:auto;padding:6px 8px;font-size:8px}.hero-bottom>p{width:100%;text-align:right}.hero-bottom .scroll-cue{font-size:7px}.hero .hero-content{padding-top:72px}.image-atmosphere .drifting-mist{filter:blur(10px)}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=playing]) :is(.hero-image,.gameplay-image>img,.drifting-mist,.firelight,.embers i,.item-art){animation:none!important;transform:none!important;will-change:auto}html:not([data-motion=playing]) .embers{display:none}}

/* Give the equipment illustration and geometry cutaway visible movement too. */
.item-art{animation:item-float 5s ease-in-out infinite alternate}
.orbit-two{animation:orbit-turn 36s linear infinite}
.castle-visual[data-view=layout][data-animated=true]>img{animation:cutaway-drift 8s ease-in-out infinite alternate}
@keyframes item-float{from{transform:translateY(-3px) rotate(-2deg)}to{transform:translateY(-17px) rotate(2deg)}}
@keyframes orbit-turn{from{transform:rotateX(25deg) rotate(-35deg)}to{transform:rotateX(25deg) rotate(325deg)}}
@keyframes cutaway-drift{from{transform:scale(1) translateY(2px)}to{transform:scale(1.035) translateY(-5px)}}