/* v021: the historical position, moving queen and navy-only hex opening. */
:root .pwr-intro{background:#152235}
:root[data-pwr-intro]{background:#152235}
.chess-piece{display:grid;place-items:center;border:1px solid #e3b862;border-radius:50%;background:#152235;color:#e3b862;box-sizing:border-box;pointer-events:none}
.chess-tile>.chess-piece{position:absolute;left:50%;top:50%;width:78%;height:78%;transform:translate(-50%,-50%);z-index:2}
.chess-piece--white{background:#f0ece4;color:#152235;border-color:#152235}
.chess-piece svg{display:block;width:72%;height:76%;overflow:visible}
.chess-piece--moving{position:absolute;left:31.25%;top:68.75%;width:9.6%;height:9.6%;transform:translate(-50%,-50%);z-index:3}
html[data-pwr-intro="holding"] .chess-piece--moving{animation:chessQueenTravel calc(520ms*var(--intro-rate)) calc(350ms*var(--intro-rate)) linear both,chessQueenClear calc(160ms*var(--intro-rate)) calc(1160ms*var(--intro-rate)) ease-in both}
@keyframes chessQueenTravel{from{left:31.25%}to{left:81.25%}}
@keyframes chessQueenClear{from{opacity:1}to{opacity:0}}
/* The aperture opens onto navy. The selected page theme appears only afterward. */
html[data-pwr-intro="leaving"] body>:is(header,main,footer){animation:none;opacity:0;visibility:hidden}
html[data-pwr-intro][data-pwr-intro="revealing"] body>:is(header,main,footer){animation:none;opacity:1;visibility:visible}
html[data-pwr-intro][data-pwr-intro="revealing"] body>:is(header,main,footer) [data-enter]{animation:none;opacity:1;transform:none}
html[data-pwr-intro="revealing"] .pwr-intro{animation:chessPageUncover calc(180ms*var(--intro-rate)) ease-out both}
html[data-pwr-intro="revealing"] .pwr-intro>:not(.pwr-intro__skip){visibility:hidden}
@keyframes chessPageUncover{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){html[data-pwr-intro="revealing"] .pwr-intro{animation:none}}