/* Hollow War atmosphere: movement stays on decorative layers, never on copy. */
.hero,.footer-banner{overflow:hidden;isolation:isolate}
.hero:before{inset:-18px;z-index:-3;transform:scale(1.035);animation:realm-drift 28s ease-in-out infinite alternate}
.hero:after{z-index:-2}
.hero-content{position:relative;z-index:1}
.hero h1 em{color:#efd5a0;text-shadow:0 0 38px #d6b87920}
.hero .eyebrow{color:#e4c68c}
.hero .button:not(.button-outline),.footer-banner .button{box-shadow:0 0 0 4px #d1ae6810,0 8px 32px #0006;position:relative}
.hero .button:not(.button-outline):before,.footer-banner .button:before{content:'';position:absolute;inset:3px;border:1px solid #f9e7bc55;pointer-events:none}
.banner-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;user-select:none}
.banner-aura{position:absolute;inset:-15%;background:radial-gradient(ellipse at 72% 30%,#7cdcff35,transparent 36%),radial-gradient(ellipse at 95% 90%,#d09d4330,transparent 23%);opacity:.7;animation:moonlight 9s ease-in-out infinite alternate}
.banner-mist{position:absolute;left:-15%;right:-15%;bottom:-110px;height:340px;background:radial-gradient(ellipse at 68% 60%,#95cef72e,transparent 48%),radial-gradient(ellipse at 24% 80%,#5c97c329,transparent 45%);animation:mist-drift 22s ease-in-out infinite alternate;transform:translateX(-3%)}
.arcane-ring{position:absolute;left:73%;top:44%;width:400px;height:400px;margin:-200px;border:1px solid #a1d9ee22;border-radius:50%;box-shadow:0 0 55px #70d8ff0b,inset 0 0 55px #70d8ff0b;animation:arcane-turn 110s linear infinite}
.arcane-ring:before{content:'';position:absolute;inset:17px;border:1px dashed #b9d7df36;border-radius:50%}
.arcane-ring:after{content:'';position:absolute;inset:58px;border:1px solid #c7b37e2e;transform:rotate(45deg)}
.arcane-ring span{position:absolute;inset:-15px;display:flex;justify-content:center;color:#dbcb9b9c;font-size:22px;line-height:1}
.banner-frame{position:absolute;inset:22px 22px 50px;border:1px solid #d5bd7f13;clip-path:polygon(0 0,70px 0,70px 1px,1px 1px,1px 70px,0 70px,0 0,100% 0,100% 70px,calc(100% - 1px) 70px,calc(100% - 1px) 1px,calc(100% - 70px) 1px,calc(100% - 70px) 0);opacity:.9}
.banner-sparks{position:absolute;inset:0}
.banner-sparks span{--x:60%;--drift:24px;--delay:-2s;--duration:12s;position:absolute;left:var(--x);bottom:8%;width:3px;height:3px;background:#edce8c;border-radius:50%;box-shadow:0 0 9px 2px #d7aa5e45;opacity:0;animation:ember-rise var(--duration) var(--delay) linear infinite}
.banner-sparks span:nth-child(2){--x:76%;--drift:-36px;--delay:-8s;--duration:16s}
.banner-sparks span:nth-child(3){--x:91%;--drift:18px;--delay:-4s;--duration:11s}
.banner-sparks span:nth-child(4){--x:48%;--drift:44px;--delay:-13s;--duration:18s;width:2px;height:2px}
.banner-sparks span:nth-child(5){--x:82%;--drift:-52px;--delay:-1s;--duration:14s}
.banner-sparks span:nth-child(6){--x:66%;--drift:36px;--delay:-9s;--duration:13s;width:2px;height:2px}
.banner-sparks span:nth-child(7){--x:35%;--drift:-24px;--delay:-6s;--duration:17s}
.banner-sparks span:nth-child(8){--x:96%;--drift:-46px;--delay:-12s;--duration:19s}
.banner-sparks span:nth-child(9){--x:54%;--drift:40px;--delay:-11s;--duration:15s;width:2px;height:2px}
.banner-sparks span:nth-child(10){--x:71%;--drift:-28px;--delay:-3s;--duration:18s}
.banner-sparks span:nth-child(11){--x:88%;--drift:18px;--delay:-7s;--duration:12s;width:2px;height:2px}
.banner-sparks span:nth-child(12){--x:18%;--drift:32px;--delay:-15s;--duration:20s;width:2px;height:2px}
.banner-motion-toggle{position:absolute;z-index:2;right:28px;bottom:20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:7px 11px;border:1px solid #9b8a6238;background:#08101dcc;color:#c2c9d3;font-size:9px;letter-spacing:.6px;transition:border-color .2s,color .2s}
.banner-motion-toggle:hover{border-color:#c8a76a;color:#f1d9a1}
.hero .banner-motion-toggle{left:40px;right:auto;bottom:61px}
.motion-icon{width:9px;height:10px;border-inline:2px solid currentColor}
.effects-paused .motion-icon{width:0;height:0;border:5px solid transparent;border-left:8px solid currentColor;border-right:0}
.effects-paused .hero:before,.effects-paused .footer-banner:before,.effects-paused .banner-atmosphere *,.effects-paused .banner-atmosphere *:before,.effects-paused .banner-atmosphere *:after{animation-play-state:paused!important}
.site-footer{padding-top:0}
.footer-banner{position:relative;background:#101a28;border-top:1px solid #987b455c;border-bottom:1px solid #987b4538;padding-block:85px 82px}
.footer-banner:before{content:'';position:absolute;inset:-14px;z-index:-3;background:url('assets/moonlit-citadel.webp') center 46%/cover;transform:scale(1.03);animation:realm-drift 32s ease-in-out infinite alternate}
.footer-banner:after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#09111ee8,#09111ea6 58%,#09111ec2),linear-gradient(0deg,#080c13a8,transparent 65%)}
.footer-banner .journey-inner{position:relative;z-index:1;gap:50px}
.footer-banner .eyebrow{font-size:9px;letter-spacing:2.8px;margin-bottom:16px}
.footer-banner h2{font-size:clamp(34px,3.4vw,46px);line-height:1.22;color:#f0ede5}
.footer-banner h2 em{font-weight:400;color:#ebce92}
.footer-banner p{font-size:12px;margin-top:19px;color:#aebac8}
.footer-banner-actions{display:flex;flex-direction:column;align-items:center;gap:21px;flex-shrink:0}
.footer-banner-actions .button{padding:17px 30px;min-width:242px}
.footer-banner-actions .text-link{font-size:9px;gap:14px}
.footer-banner-crest{position:absolute;z-index:0;top:0;left:50%;transform:translate(-50%,-1px);width:90px;height:60px;border:1px solid #987b4550;border-top:0;background:linear-gradient(#111b28,#0b1521a8);clip-path:polygon(0 0,100% 0,90% 70%,50% 100%,10% 70%);display:flex;align-items:center;justify-content:center;padding:9px 17px 14px}
.footer-banner-crest img{width:34px;height:38px;object-fit:contain;filter:drop-shadow(0 0 13px #70d9ff48)}
.footer-banner .banner-aura{background:radial-gradient(ellipse at 64% 40%,#64bcf633,transparent 50%)}
.footer-banner .banner-mist{height:240px;bottom:-80px}
.footer-banner .banner-sparks span{--duration:16s;bottom:-20%}
.footer-top{padding-top:40px}
/* A size-contained, absolute scene gives image-space overlays the same cover
   crop as the artwork. Container units update without resize event handlers. */
.banner-scene{--focus-x:.5;--focus-y:.47;position:absolute;inset:-18px;z-index:-3;container-type:size;pointer-events:none;user-select:none;animation:realm-drift 28s ease-in-out infinite alternate}
.scene-art{position:absolute;display:block;width:max(100cqw,150cqh);height:max(100cqh,66.666667cqw);left:calc((100cqw - max(100cqw,150cqh))*var(--focus-x));top:calc((100cqh - max(100cqh,66.666667cqw))*var(--focus-y));overflow:hidden}
.scene-ready:before{display:none}
.footer-banner .banner-scene{--focus-y:.46;inset:-14px;animation-duration:32s}
.water-texture{opacity:0;animation:water-texture-flow 2.4s linear infinite}
.water-sheen{fill:#87c9ee;opacity:.06;animation:water-sheen 4.8s ease-in-out infinite alternate}
.water-stream{stroke-linecap:round;stroke-dasharray:6 24 20 58;opacity:.6;animation:waterfall-flow var(--flow-time,1.8s) var(--flow-delay,0s) linear infinite}
.fire-glow{opacity:.55;animation:firelight 2.7s var(--fire-delay,0s) ease-in-out infinite alternate}
.fire-flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame-sway 1.7s var(--fire-delay,0s) ease-in-out infinite alternate}
.fire-flame-core{animation-name:flame-core;animation-duration:1.1s;opacity:.85}
.fire-tongue{transform-box:fill-box;transform-origin:50% 100%;animation:flame-sway 1.3s var(--fire-delay,0s) ease-in-out infinite alternate}
.fire-ember{opacity:0;animation:fire-ember-rise 2.9s var(--fire-delay,0s) linear infinite}
.fire-ember-two{animation-delay:calc(var(--fire-delay,0s) - 1.1s);animation-duration:3.3s}
.fire-ember-three{animation-delay:calc(var(--fire-delay,0s) - 2.1s);animation-duration:3.7s}
.effects-paused .banner-scene,.effects-paused .banner-scene *{animation-play-state:paused!important}
@keyframes waterfall-flow{to{stroke-dashoffset:-108}}
@keyframes water-texture-flow{0%{transform:translateY(-8px);opacity:0}20%{opacity:.42}75%{opacity:.42}100%{transform:translateY(15px);opacity:0}}
@keyframes water-sheen{from{opacity:.03}to{opacity:.1}}
@keyframes firelight{0%{opacity:.35}35%{opacity:.52}60%{opacity:.4}100%{opacity:.65}}
@keyframes flame-sway{0%{transform:scale(.94,.9) skewX(-4deg);opacity:.72}35%{transform:scale(.98,1.04) skewX(3deg);opacity:.85}70%{transform:scale(1.04,.96) skewX(-2deg);opacity:.76}100%{transform:scale(.95,1.08) skewX(4deg);opacity:.9}}
@keyframes flame-core{from{transform:scale(.92,.86) skewX(4deg);opacity:.65}to{transform:scale(1.04,1.1) skewX(-3deg);opacity:.9}}
@keyframes fire-ember-rise{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}65%{opacity:.55}100%{transform:translate(19px,-155px);opacity:0}}
@keyframes realm-drift{from{transform:scale(1.035) translate3d(-.3%,0,0)}to{transform:scale(1.085) translate3d(.5%,-.7%,0)}}
@keyframes moonlight{from{opacity:.35;transform:translate3d(-1%,1%,0)}to{opacity:.85;transform:translate3d(1%,-1%,0)}}
@keyframes mist-drift{from{transform:translate3d(-3%,2%,0);opacity:.45}to{transform:translate3d(4%,-5%,0);opacity:.95}}
@keyframes arcane-turn{to{transform:rotate(360deg)}}
@keyframes ember-rise{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}12%{opacity:.75}75%{opacity:.4}100%{opacity:0;transform:translate3d(var(--drift),-410px,0) scale(.2)}}
@media(min-width:1550px){.hero .banner-motion-toggle{left:max(40px,calc((100vw - 1256px)/2))}}
@media(min-width:1550px){.hero .banner-scene{--focus-y:.48}}
@media(max-width:760px){.hero .banner-scene{--focus-x:.59;--focus-y:.5}.footer-banner .banner-scene{--focus-x:.62;--focus-y:.5}.fire-ember-three{display:none}}
@media(max-width:1000px){.arcane-ring{left:77%;width:340px;height:340px;margin:-170px}.footer-banner .journey-inner{gap:30px}.footer-banner-actions .button{min-width:210px;padding-inline:20px}}
@media(max-width:760px){.hero .banner-motion-toggle{left:18px;bottom:46px;font-size:8px;min-height:30px;padding:6px 9px}.banner-frame{inset:14px 14px 45px}.arcane-ring{left:88%;top:32%;width:260px;height:260px;margin:-130px;opacity:.5}.banner-sparks span:nth-child(n+7){display:none}.footer-banner{padding-block:86px 76px}.footer-banner .journey-inner{align-items:flex-start;gap:27px}.footer-banner h2{font-size:35px}.footer-banner .eyebrow{font-size:8px;letter-spacing:2px}.footer-banner p{max-width:350px;font-size:11px;line-height:1.9}.footer-banner-actions{align-items:flex-start;gap:18px}.footer-banner-actions .button{min-width:225px}.footer-banner .banner-motion-toggle{right:18px;bottom:17px}.footer-banner:before{background-position:62% center}.footer-top{padding-top:32px}}
@media(max-width:480px){.hero-content{padding-top:18px;padding-bottom:105px}.hero .eyebrow{letter-spacing:1.8px;font-size:7px;gap:9px}.hero .eyebrow:before{width:18px}.hero-note{gap:9px;letter-spacing:.7px}.hero-note span+span:before{margin-right:9px}.arcane-ring{display:none}.footer-banner h2{font-size:32px}.footer-banner .eyebrow{font-size:7px;letter-spacing:1.6px;gap:9px}.footer-banner .eyebrow:before{width:18px}}
@media(max-width:360px){.nav-wrap{gap:8px}.site-header .brand{font-size:16px;gap:6px}.site-header .brand small{font-size:5.5px;letter-spacing:1.9px}.nav-actions .text-button{white-space:nowrap;font-size:10px}.hero h1{font-size:38px}.hero-actions .button{padding-inline:12px;gap:9px;font-size:8px;letter-spacing:1px}.hero-note{flex-wrap:wrap;row-gap:6px}.hero-note span{white-space:nowrap}.footer-banner h2{font-size:29px}.footer-banner .eyebrow{letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.hero:before,.footer-banner:before,.banner-scene,.banner-scene *,.banner-atmosphere *,.banner-atmosphere *:before,.banner-atmosphere *:after{animation:none!important}.banner-motion-toggle{display:none}.banner-sparks,.fire-ember,.water-stream,.water-texture{display:none}.banner-aura{opacity:.45}.fire-flame,.fire-glow,.water-sheen{opacity:0}}