#kingdom-transition{position:absolute;inset:0;z-index:180;pointer-events:none;overflow:hidden;display:none}
#kingdom-transition.playing{display:block}
#kingdom-transition::before{content:'';position:absolute;inset:0;z-index:0;background:#087bce;transform:translateX(0)}
.playing#kingdom-transition::before{animation:kingdom-transition-shield .56s cubic-bezier(.65,0,.2,1) both}
.transition-slice{position:absolute;z-index:1;inset:-10% -15%;background:#087bce;transform:translateX(-120%) skewX(-16deg)}
.transition-slice.back{background:#51def5;inset:6% -15% -10%}
.transition-silhouette{position:absolute;z-index:2;right:-18%;bottom:-1%;height:86%;width:auto;aspect-ratio:1/2;transform-origin:50% 100%;opacity:0}
.transition-pose,.transition-echo{position:absolute;inset:0;display:block;background-image:url('assets/characters/hina-fullbody.png');background-repeat:no-repeat;background-size:300% 100%;filter:brightness(0);opacity:0;transform-origin:50% 100%}
.pose-release{background-position:0 0}
.pose-resolve{background-position:50% 0}
.pose-stride,.transition-echo{background-position:100% 0}
.transition-word{position:absolute;left:8%;top:43%;font:900 clamp(55px,11vw,145px)/.9 'Arial Black',Arial,sans-serif;letter-spacing:-.065em;color:#041933;transform:rotate(-6deg);white-space:nowrap}
.playing .transition-slice{animation:kingdom-wipe .56s cubic-bezier(.65,0,.2,1) both}
.playing .transition-slice.back{animation-delay:35ms}
.playing .transition-silhouette{animation:kingdom-silhouette-travel .56s cubic-bezier(.22,.72,.18,1) both}
.playing .pose-resolve{animation:kingdom-pose-resolve .56s ease-out both}
.playing .pose-stride{animation:kingdom-pose-stride .56s ease-in-out both}
.playing .pose-release{animation:kingdom-pose-release .56s ease-in both}
.playing .transition-echo{animation:kingdom-silhouette-echo .56s ease-out both}
.playing .echo-far{animation-delay:24ms}
.playing .echo-near{animation-delay:10ms}
/* The map is rebuilt synchronously. Begin fully covered so trees and other
   batched scenery cannot flash or jump before the new field is ready. */
@keyframes kingdom-wipe{0%,54%{transform:translateX(0) skewX(-16deg)}100%{transform:translateX(120%) skewX(-16deg)}}
@keyframes kingdom-transition-shield{0%,54%{transform:translateX(0)}100%{transform:translateX(120%)}}
@keyframes kingdom-silhouette-travel{0%{transform:translate3d(45vw,4%,0) rotate(2deg) scale(.97);opacity:0}14%{opacity:.78}48%{transform:translate3d(-28vw,0,0) rotate(-1deg) scale(1);opacity:.78}78%{transform:translate3d(-76vw,-1%,0) rotate(-2deg) scale(.99);opacity:.72}100%{transform:translate3d(-128vw,-2%,0) rotate(-3deg) scale(.98);opacity:0}}
@keyframes kingdom-pose-resolve{0%{opacity:0;transform:translate3d(10px,5px,0) scale(.985)}8%,19%{opacity:.76;transform:translate3d(4px,2px,0) scale(1)}31%{opacity:0;transform:translate3d(-2px,0,0) scale(1.01)}100%{opacity:0}}
@keyframes kingdom-pose-stride{0%,15%{opacity:0;transform:translate3d(8px,4px,0) rotate(1deg)}27%,61%{opacity:.78;transform:translate3d(-1px,0,0) rotate(-1deg)}74%{opacity:0;transform:translate3d(-8px,-2px,0) rotate(-2deg)}100%{opacity:0}}
@keyframes kingdom-pose-release{0%,58%{opacity:0;transform:translate3d(7px,2px,0) scale(1.01)}70%,86%{opacity:.7;transform:translate3d(-3px,0,0) scale(1)}100%{opacity:0;transform:translate3d(-12px,-2px,0) scale(.99)}}
@keyframes kingdom-silhouette-echo{0%,20%{opacity:0;transform:translate3d(18px,3px,0)}34%{opacity:.1;transform:translate3d(11px,2px,0)}67%{opacity:.06;transform:translate3d(-7px,0,0)}82%,100%{opacity:0;transform:translate3d(-15px,-1px,0)}}
.character-portrait{animation:portrait-enter .19s ease-out both}
@keyframes portrait-enter{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#kingdom-transition{display:none!important}.character-portrait{animation:none!important}}