.motion-console{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:max-content;max-width:calc(100% - 24px);padding:12px 18px;background:#143d31f5;color:#fff4d9;border:1px solid #d9b364;border-radius:12px;box-shadow:0 8px 35px #102c3140;font-size:12px}
.motion-console strong{color:#f3d591}.motion-console label{display:flex;align-items:center;gap:6px;cursor:pointer}.motion-console input{accent-color:#d9b364}.motion-console button{border:1px solid #d9b364;background:#f7e7bd;color:#173e34;border-radius:5px;padding:6px 12px;font-weight:700}.motion-console small{flex-basis:100%;color:#f3d591}
.citadel-atmosphere{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden;contain:paint}
.citadel-cloud{position:absolute;right:-24%;width:60%;height:100px;background:radial-gradient(ellipse at 25% 60%,#fff9eac9,transparent 58%),radial-gradient(ellipse at 60% 40%,#fff3dec7,transparent 60%),radial-gradient(ellipse at 90% 70%,#fffaf0aa,transparent 60%);filter:blur(12px);opacity:.65;animation:citadel-cloud-drift 22s linear infinite;top:15%}
.citadel-cloud:nth-child(2){top:73%;height:130px;animation-duration:30s;animation-delay:-16s;opacity:.5}
.citadel-cloud:nth-child(3){top:40%;width:37%;height:70px;animation-duration:26s;animation-delay:-9s;opacity:.35}
.citadel-mote{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#ffc02f;border:1px solid #b97a19;box-shadow:0 0 5px 1px #ffcf62cc,0 0 11px #f8b72c80;animation:citadel-mote-flight var(--duration) ease-in-out infinite;animation-delay:var(--delay)}
@keyframes citadel-cloud-drift{from{transform:translateX(0)}to{transform:translateX(-150%)}}
@keyframes citadel-mote-flight{0%,100%{transform:translate(0,25px) scale(.5);opacity:0}20%,70%{opacity:1}80%{transform:translate(-35px,-70px) scale(1);opacity:.3}}
body.motion-badges .design-icon{position:relative;overflow:hidden;transition:transform .3s,filter .3s}
body.motion-badges .design-icon:after{content:'';position:absolute;inset:8%;border-radius:50%;background:linear-gradient(110deg,transparent 30%,#fffbe2c9 48%,transparent 64%);transform:translateX(-150%);animation:citadel-badge-glint 6s ease-in-out infinite;animation-delay:var(--badge-delay,0s)}
body.motion-badges .design-shortcuts>:nth-child(2){--badge-delay:.5s}body.motion-badges .design-shortcuts>:nth-child(3){--badge-delay:1s}body.motion-badges .design-shortcuts>:nth-child(4){--badge-delay:1.5s}
body.motion-badges .design-shortcuts>:is(a,button):is(:hover,:focus-visible) .design-icon{transform:translateY(-5px) rotate(-7deg) scale(1.08);filter:drop-shadow(0 5px 5px #986c3540)}
@keyframes citadel-badge-glint{0%,65%{transform:translateX(-150%)}85%,100%{transform:translateX(150%)}}
body.motion-no-clouds .citadel-cloud,body.motion-no-motes .citadel-mote{display:none}
body.motion-paused .citadel-atmosphere *,body.motion-paused .design-icon:after,body.motion-offscreen .citadel-atmosphere *,body.motion-hidden .citadel-atmosphere *,body.motion-hidden .design-icon:after{animation-play-state:paused!important}
@media(max-width:650px){.motion-console{gap:9px;font-size:10px;padding:9px 12px;bottom:8px}.motion-console strong{width:100%}.citadel-atmosphere{top:40%}.citadel-mote:nth-of-type(n+16){display:none}.citadel-cloud{height:60px;filter:blur(8px)}}
@media(prefers-reduced-motion:reduce){.citadel-atmosphere{display:none}body.motion-badges .design-icon:after{display:none}body.motion-badges .design-shortcuts>:is(a,button):is(:hover,:focus-visible) .design-icon{transform:none}}
.motion-extra{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.motion-console .motion-extra a{color:#ffe3a0!important;text-decoration:underline;font-size:11px}
.citadel-leaf{display:none;position:absolute;top:-12%;left:var(--left);width:var(--leaf-size);height:calc(var(--leaf-size)*1.7);border-radius:90% 0 90% 0;background:linear-gradient(120deg,#fff1a5 0%,#e5ad36 45%,#ad621b 100%);box-shadow:inset 1px 0 1px #fff4bf,1px 2px 3px #78481930;animation:citadel-leaf-fall var(--duration) linear infinite;animation-delay:var(--delay)}
.citadel-leaf:after{content:'';position:absolute;width:1px;height:85%;background:#95581599;left:50%;top:7%;transform:rotate(25deg)}
body.motion-leaves .citadel-leaf{display:block}
@keyframes citadel-leaf-fall{0%{transform:translate(80px,0) rotate(20deg);opacity:0}10%{opacity:.9}35%{transform:translate(-30px,220px) rotate(130deg)}65%{transform:translate(-100px,420px) rotate(235deg);opacity:.9}100%{transform:translate(-180px,780px) rotate(400deg);opacity:0}}
.citadel-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1;display:none}
.citadel-trail path{fill:none;stroke:#d9a132;stroke-width:3;stroke-linecap:round;stroke-dasharray:9 15;filter:drop-shadow(0 0 4px #ffcc5e);animation:citadel-trail-run 3s linear infinite}
body.motion-journey .citadel-trail{display:block}
body.motion-journey.journey-visible .citadel-map .guide-no{animation:citadel-waypoint 4s ease-in-out infinite;animation-delay:var(--step-delay)}
body.motion-journey.journey-visible .citadel-map:before{animation:citadel-map-glow 4s ease-in-out infinite}
@keyframes citadel-trail-run{to{stroke-dashoffset:-96}}
@keyframes citadel-waypoint{0%,55%,100%{box-shadow:0 0 0 1px #9d793a;filter:brightness(1)}20%{box-shadow:0 0 0 4px #f6d48480,0 0 22px 7px #eeb83b90;filter:brightness(1.35)}}
@keyframes citadel-map-glow{0%,100%{border-color:#ac89495c}50%{border-color:#d9a132;box-shadow:0 0 13px #e7b53e40}}
body:not(.journey-visible) .citadel-trail path,body.motion-paused .citadel-trail path,body.motion-paused .citadel-map .guide-no,body.motion-paused .citadel-map:before,body.motion-hidden .citadel-trail path,body.motion-hidden .citadel-map .guide-no,body.motion-hidden .citadel-map:before{animation-play-state:paused!important}
@media(max-width:650px){.motion-extra{gap:8px}.motion-console{justify-content:center}.citadel-leaf:nth-last-child(n+6){display:none!important}.citadel-trail path{stroke-width:2}}
@media(prefers-reduced-motion:reduce){.citadel-trail{display:none!important}.citadel-map .guide-no,.citadel-map:before{animation:none!important}}

/* Broad lobed autumn leaf, stem and visible branching veins. */
.citadel-leaf{width:var(--leaf-size);height:calc(var(--leaf-size)*1.2);border-radius:0;background:linear-gradient(90deg,transparent 49%,#80501e 50%,transparent 53%),repeating-linear-gradient(35deg,transparent 0 8px,#9a5a203d 9px,transparent 10px),linear-gradient(115deg,#ffdc72,#d99427 60%,#986021);clip-path:polygon(50% 0,60% 23%,75% 12%,73% 35%,96% 30%,86% 51%,100% 61%,71% 72%,56% 82%,55% 100%,47% 100%,47% 82%,24% 76%,0 61%,15% 50%,5% 30%,29% 36%,25% 13%,41% 24%);box-shadow:none;filter:drop-shadow(1px 2px 1px #76502955);transform-origin:50% 20%}
.citadel-leaf:after{display:none}
@keyframes citadel-leaf-fall{0%{transform:translate(80px,0) rotate(-25deg) rotateY(0);opacity:0}10%{opacity:.9}28%{transform:translate(-15px,190px) rotate(45deg) rotateY(45deg)}50%{transform:translate(15px,360px) rotate(-40deg) rotateY(-25deg)}75%{transform:translate(-100px,560px) rotate(65deg) rotateY(55deg);opacity:.9}100%{transform:translate(-145px,780px) rotate(-15deg) rotateY(0);opacity:0}}/* Independent trajectories; every leaf receives fresh wind parameters each fall. */
@keyframes citadel-leaf-fall{0%{transform:translate(0,0) rotate(var(--tilt)) rotateY(0);opacity:0}12%{opacity:.9}30%{transform:translate(var(--sway-a),calc(var(--fall)*.3)) rotate(calc(var(--tilt) + 45deg)) rotateY(40deg)}60%{transform:translate(var(--sway-b),calc(var(--fall)*.6)) rotate(calc(var(--tilt) - 35deg)) rotateY(-35deg);opacity:.85}85%{opacity:.75}100%{transform:translate(var(--drift),var(--fall)) rotate(var(--spin)) rotateY(20deg);opacity:0}}