/* Realms motion (2026-10-04): ONE motion language for the gate, Realms, Armory, Labs, Store and Games.
   - Cross-page: the View Transitions API wipes the old page out and the new one in along the same
     8deg lean as the gate's panels; the page title (h1) and the Menu persist and slide to their new place.
   - Entrance: every panel is revealed left to right (edge first), then its content fades up; staggered.
   - Hover: one bright pass along a panel's top edge. Nothing else moves on hover.
   SWITCH: set --m to 0 (kills entrance + hover motion) and change `navigation:auto` to `none`
   (kills the cross-page wipe). Reduced-motion users get neither. Nothing here touches colour or copy. */
@view-transition{navigation:auto}
:root{--m:1;--ease:cubic-bezier(.7,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* ------------------------------------------------------------- cross-page */
h1{view-transition-name:zs-title}
.zr-bar{view-transition-name:zr-menu}
::view-transition-group(*){animation-timing-function:var(--ease)}
::view-transition-old(root){animation:vt-out .32s var(--ease) both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
html.vt-back::view-transition-old(root){animation-name:vt-out-b}
html.vt-back::view-transition-new(root){animation-name:vt-in-b}
/* a lean of 8deg: the right edge of the wipe leads the left by 14% of the width */
@keyframes vt-in {from{clip-path:polygon(-14% 0,0 0,0 100%,-28% 100%)}to{clip-path:polygon(-14% 0,114% 0,100% 100%,-28% 100%)}}
@keyframes vt-out{from{clip-path:polygon(0 0,114% 0,128% 100%,0 100%)}to{clip-path:polygon(100% 0,114% 0,128% 100%,114% 100%)}}
@keyframes vt-in-b {from{clip-path:polygon(114% 0,128% 0,114% 100%,100% 100%)}to{clip-path:polygon(-14% 0,128% 0,114% 100%,-28% 100%)}}
@keyframes vt-out-b{from{clip-path:polygon(-14% 0,100% 0,100% 100%,-28% 100%)}to{clip-path:polygon(-14% 0,-14% 0,-28% 100%,-28% 100%)}}
/* the title keeps its own crossfade but moves on the shared curve; the menu just stays put */
::view-transition-group(zs-title){animation-duration:.5s}
::view-transition-old(zs-title){animation:vt-fade .2s both}
::view-transition-new(zs-title){animation:vt-fade .3s .15s both reverse}
@keyframes vt-fade{from{opacity:1}to{opacity:0}}
::view-transition-old(zr-menu),::view-transition-new(zr-menu){animation:none;mix-blend-mode:normal}
::view-transition-new(zr-menu){opacity:1}
::view-transition-old(zr-menu){opacity:0}

/* --------------------------------------------------------------- entrance
   .panel is the shared chamfered plate (gate halves, Realms columns, Store items, Games card);
   .plate is the Armory's, .case is Labs'. --i is the reading-order index set by realms.js. */
.panel,.plate,.case{
  --d:calc(var(--m) * 1s);
  animation:m-reveal calc(var(--d) * .55) var(--ease) calc(var(--d) * (.12 + var(--i,0) * .07)) both;
  -webkit-mask:linear-gradient(98deg,#000 50%,transparent 50%) 0 0/220% 100% no-repeat;
          mask:linear-gradient(98deg,#000 50%,transparent 50%) 0 0/220% 100% no-repeat}
.panel>*,.plate>*,.case>*{
  animation:m-rise calc(var(--d) * .45) var(--ease-out) calc(var(--d) * (.36 + var(--i,0) * .07)) both}
/* the plate's own corner bolts and rivets come with the plate, not after it */
.plate>.bolt,.plate>.rivets,.plate>.sill,.panel>.pass{animation:none}
@keyframes m-reveal{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes m-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* the gate already slides its halves in; keep that and skip the mask there */
.half.panel{-webkit-mask:none;mask:none;animation:in-l calc(var(--m) * .65s) var(--ease-out) calc(var(--m) * .2s) both}
.half.panel + .half.panel{animation-name:in-r;animation-delay:calc(var(--m) * .3s)}
.half.panel>*{animation:none}
/* once the mask has finished it must go, or it clips the hover pass and any inner overflow */
.panel.m-done,.plate.m-done,.case.m-done{-webkit-mask:none;mask:none}

/* ------------------------------------------------------------------ hover
   the 2px line along a panel's top edge already exists (::before). A white pass runs along it. */
.panel::before,.plate::before,.case::before{
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 50%,transparent),
    linear-gradient(90deg,var(--ac,var(--cyan)),transparent 45%,transparent 70%,var(--pink));
  background-size:34% 100%,100% 100%;background-repeat:no-repeat;background-position:-40% 0,0 0}
.plate::before{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 50%,transparent),
    linear-gradient(90deg,var(--ac,var(--molten)),rgba(255,120,40,.35) 42%,transparent 72%)}
.case::before{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 50%,transparent),
    linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 30%,transparent) 48%,transparent 78%)}
.panel:hover::before,.panel:focus-visible::before,.plate:hover::before,.case:hover::before{
  animation:m-pass calc(var(--m) * .6s) cubic-bezier(.6,0,.3,1) both}
@keyframes m-pass{from{background-position:-40% 0,0 0}to{background-position:140% 0,0 0}}
/* the gate's halves and the Realms columns had their own hover motion; one language now */
.half .pass{display:none}
.col.panel:hover,.col.panel:focus-visible{transform:none;box-shadow:none}
.col.panel:focus-visible{box-shadow:inset 0 0 0 2px var(--ac)}
.col.panel:hover .art{transform:none}
.col.panel:hover .meta i,.col.panel:focus-visible .meta i,.half.panel:hover .meta i,.half.panel:focus-visible .meta i{transform:none}

/* ------------------------------------------------------------- menu marker
   the pink marker in the Menu slides between items instead of swapping */
.zr-menu{position:absolute}
.zr-menu a{border-left-color:transparent!important;transition:background .15s,color .15s}
.zr-menu a[aria-current]{border-left-color:transparent!important}
.zr-mark{position:absolute;top:0;left:6px;width:2px;height:0;background:#ff0055;pointer-events:none;
  transition:transform calc(var(--m) * .22s) var(--ease-out),height .1s;will-change:transform}

@media (prefers-reduced-motion:reduce){
  :root{--m:0}
  @view-transition{navigation:none}
  .panel,.plate,.case,.half.panel,.panel>*,.plate>*,.case>*{animation:none;-webkit-mask:none;mask:none}
  .panel:hover::before,.plate:hover::before,.case:hover::before{animation:none}
  .zr-mark{transition:none}
}