/* Circular brass portals with a continuously advancing camera. */
body.wmi-screen-page #wmi-screen .scene{--travel-strength:1;--arrival-strength:1;--trail-strength:.55;--passage-alpha:.45;--passage-size:1;--passage-x:0;--passage-y:0;--passage-tilt-x:0;--passage-tilt-y:0;--passage-turn:0;touch-action:pan-y pinch-zoom}
body.wmi-screen-page #wmi-screen .journey-trails{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:900px;transform-style:preserve-3d}
body.wmi-screen-page #wmi-screen .journey-trails i{position:absolute;left:50%;top:50%;width:var(--trail-length,50px);height:1px;opacity:0;background:linear-gradient(90deg,transparent,#cda76055 45%,#f2dba8);transform-origin:100% 50%;pointer-events:none}
body.wmi-screen-page #wmi-screen .journey-trails i::after{content:"";position:absolute;right:0;top:-1px;width:3px;height:3px;border-radius:50%;background:#f1d8a1;box-shadow:0 0 6px #d4a95180}
body.wmi-screen-page #wmi-screen .scene[data-choreography="ready"] :is(.story-flight,.passage-camera,.passage-gate,.camera-tilt,.ritual,.ritual .outer,.ritual .inner,.fine-circle,.corner,.portal-stack,.portal-plane,.portal-rim,.floor-ring,.backdrop img,.stage-panel,.service-book,.wmi-arrival-unit){transition:none!important}
body.wmi-screen-page #wmi-screen .scene .story-flight{transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
body.wmi-screen-page #wmi-screen .story-scroll-content{perspective:1000px}
body.wmi-screen-page #wmi-screen .wmi-arrival-unit{transform-origin:50% 70%}
body.wmi-screen-page #wmi-screen .story-panel h2::after{content:"";display:block;width:76px;height:1px;margin-top:18px;background:linear-gradient(90deg,#efd5a1,#b58b4e20);box-shadow:0 0 8px #d6ad5630}
body.wmi-screen-page #wmi-screen .story-panel .wp-block-buttons{perspective:900px}
@media(max-width:700px),(max-height:700px){body.wmi-screen-page #wmi-screen .journey-trails i:nth-child(n+7){display:none}}
@media(max-width:700px){
 body.wmi-screen-page #wmi-screen .story-panel h2::after{margin-top:12px;width:52px}
}
@media(prefers-reduced-motion:reduce){
 body.wmi-screen-page #wmi-screen .journey-trails{display:none}
 body.wmi-screen-page #wmi-screen .scene .story-flight{transform:none!important}
 body.wmi-screen-page #wmi-screen .scene .story-panel{transform:translate(0,-50%)!important}
 body.wmi-screen-page #wmi-screen .scene .closing-panel{transform:translate(-50%,-50%)!important}
 body.wmi-screen-page #wmi-screen .scene :is(.wmi-arrival-unit,.service-book){transition:opacity 180ms ease!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:700px){body.wmi-screen-page #wmi-screen .scene .story-panel{transform:none!important}}
body.wmi-screen-page #wmi-screen :is(.passage-camera,.passage-scene){position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;transform-origin:50% 50%}
body.wmi-screen-page #wmi-screen .passage-gate{--gate-alpha:.9;position:absolute;left:50%;top:50%;width:min(80vw,90svh);aspect-ratio:1;max-width:none;opacity:0;pointer-events:none;backface-visibility:visible}
body.wmi-screen-page #wmi-screen .passage-gate img{display:block;width:100%;height:100%;max-width:none}
body.wmi-screen-page #wmi-screen .passage-gate::before,body.wmi-screen-page #wmi-screen .passage-gate::after{content:"";position:absolute;inset:8%;border-radius:50%;pointer-events:none}
body.wmi-screen-page #wmi-screen .passage-gate::after{border:1px solid #d7b47770;box-shadow:inset 0 0 0 3px #b48b3d0e,0 0 17px #e4b55e14}
/* ARCANA: overlapping rings, different planes, and a faint rear echo. */
body.wmi-screen-page #wmi-screen :is(.twin-leading,.twin-trailing,.vault-near,.vault-middle,.vault-far)::before,body.wmi-screen-page #wmi-screen :is(.twin-leading,.twin-trailing,.vault-near,.vault-middle,.vault-far)::after{content:none}
body.wmi-screen-page #wmi-screen .twin-leading{--gate-alpha:1;width:min(90vw,102svh);transform:translate(-50%,-50%) translate3d(-26vw,-7svh,30px) rotateY(-22deg) rotateZ(-14deg)}
body.wmi-screen-page #wmi-screen .twin-trailing{--gate-alpha:.88;width:min(83vw,94svh);transform:translate(-50%,-50%) translate3d(-10vw,6svh,-130px) rotateY(27deg) rotateX(-12deg) rotateZ(38deg)}
body.wmi-screen-page #wmi-screen .twin-echo{--gate-alpha:.25;transform:translate(-50%,-50%) translate3d(-18vw,-3svh,-280px) rotateY(6deg) scale(1.45)}
/* UNRELEASED: three offset circular thresholds recede toward the upper right. */
body.wmi-screen-page #wmi-screen .vault-near{--gate-alpha:1;width:min(92vw,102svh);transform:translate(-50%,-50%) translate3d(-23vw,5svh,25px) rotateY(-14deg) rotateX(12deg) rotateZ(-22deg)}
body.wmi-screen-page #wmi-screen .vault-middle{--gate-alpha:.85;width:min(85vw,96svh);transform:translate(-50%,-50%) translate3d(-17vw,-5svh,-170px) rotateY(-22deg) rotateX(6deg) rotateZ(24deg) scale(.92)}
body.wmi-screen-page #wmi-screen .vault-far{--gate-alpha:.65;width:min(80vw,90svh);transform:translate(-50%,-50%) translate3d(-11vw,-14svh,-330px) rotateY(-30deg) rotateX(2deg) rotateZ(54deg) scale(.7)}
/* CABINET: three intersecting circular planes form an armillary gallery. */
body.wmi-screen-page #wmi-screen .orbit-upright{--gate-alpha:1;transform:translate(-50%,-50%) translate3d(-21vw,0,0) rotateY(54deg) rotateZ(-14deg) scale(.88)}
body.wmi-screen-page #wmi-screen .orbit-cross{--gate-alpha:.95;transform:translate(-50%,-50%) translate3d(-21vw,0,70px) rotateX(58deg) rotateY(-26deg) rotateZ(27deg) scale(.9)}
body.wmi-screen-page #wmi-screen .orbit-cross::after{border:5px solid #c8a06444;border-top-color:#efd497aa;box-shadow:inset 0 0 0 1px #e8d3a788,0 0 20px #d6af6120}
body.wmi-screen-page #wmi-screen .orbit-low{--gate-alpha:.7;transform:translate(-50%,-50%) translate3d(-21vw,24svh,-80px) rotateX(77deg) rotateZ(-12deg) scale(1.1)}
/* CLOSING: broad rising circles create a different, open horizon. */
body.wmi-screen-page #wmi-screen .horizon-near{--gate-alpha:.8;transform:translate(-50%,-50%) translate3d(0,42svh,-80px) rotateX(28deg) scale(1.7)}
body.wmi-screen-page #wmi-screen .horizon-far{--gate-alpha:.55;transform:translate(-50%,-50%) translate3d(0,44svh,-200px) rotateX(54deg) rotateZ(8deg) scale(2.45)}
body.wmi-screen-page #wmi-screen .horizon-moon{--gate-alpha:.75;transform:translate(-50%,-50%) translate3d(30vw,-26svh,-100px) rotateY(-22deg) scale(.31)}
body.wmi-screen-page #wmi-screen .horizon-moon::before{background:radial-gradient(circle at 26% 24%,#e7c78650,#b77b341a 50%,#28121a30)}
/* Local-axis choreography: counter-turn, iris, gyroscope, then rising horizon.
   Static endpoints above remain editable; these offsets run only during travel. */
body.wmi-screen-page #wmi-screen .twin-leading{--gate-enter-x:-105;--gate-enter-z:-240;--gate-enter-tilt-x:34;--gate-enter-tilt-y:56;--gate-enter-turn:-150;--gate-exit-x:-160;--gate-exit-y:-65;--gate-exit-z:180;--gate-exit-tilt-y:-44;--gate-exit-turn:110}
body.wmi-screen-page #wmi-screen .twin-trailing{--gate-stagger:45;--gate-enter-x:120;--gate-enter-y:45;--gate-enter-z:-360;--gate-enter-tilt-x:-32;--gate-enter-tilt-y:-56;--gate-enter-turn:150;--gate-exit-x:150;--gate-exit-y:75;--gate-exit-z:160;--gate-exit-tilt-x:36;--gate-exit-turn:-110}
body.wmi-screen-page #wmi-screen .twin-echo{--gate-stagger:80;--gate-enter-z:-440;--gate-enter-tilt-y:20;--gate-enter-turn:-45;--gate-exit-z:-160;--gate-exit-turn:40}
body.wmi-screen-page #wmi-screen .vault-near{--gate-stagger:80;--gate-enter-x:-35;--gate-enter-y:65;--gate-enter-z:-280;--gate-enter-tilt-x:42;--gate-enter-tilt-y:46;--gate-enter-turn:155;--gate-exit-x:-95;--gate-exit-y:80;--gate-exit-z:170;--gate-exit-tilt-y:30;--gate-exit-turn:-120}
body.wmi-screen-page #wmi-screen .vault-middle{--gate-stagger:40;--gate-enter-z:-350;--gate-enter-tilt-x:-38;--gate-enter-tilt-y:48;--gate-enter-turn:-150;--gate-exit-y:30;--gate-exit-z:135;--gate-exit-tilt-x:-30;--gate-exit-turn:110}
body.wmi-screen-page #wmi-screen .vault-far{--gate-enter-x:45;--gate-enter-y:-55;--gate-enter-z:-420;--gate-enter-tilt-x:28;--gate-enter-tilt-y:40;--gate-enter-turn:120;--gate-exit-x:65;--gate-exit-y:-80;--gate-exit-z:100;--gate-exit-tilt-y:25;--gate-exit-turn:-90}
body.wmi-screen-page #wmi-screen .orbit-upright{--gate-enter-z:-300;--gate-enter-tilt-x:32;--gate-enter-tilt-y:-38;--gate-enter-turn:-75;--gate-exit-x:-100;--gate-exit-z:160;--gate-exit-tilt-y:-42;--gate-exit-turn:70}
body.wmi-screen-page #wmi-screen .orbit-cross{--gate-stagger:45;--gate-enter-y:-65;--gate-enter-z:-280;--gate-enter-tilt-x:-42;--gate-enter-turn:105;--gate-exit-y:75;--gate-exit-z:120;--gate-exit-tilt-x:-35;--gate-exit-turn:-85}
body.wmi-screen-page #wmi-screen .orbit-low{--gate-stagger:80;--gate-enter-y:90;--gate-enter-z:-250;--gate-enter-tilt-x:-32;--gate-enter-turn:-55;--gate-exit-y:100;--gate-exit-z:90;--gate-exit-tilt-x:-24;--gate-exit-turn:50}
body.wmi-screen-page #wmi-screen .horizon-near{--gate-enter-y:140;--gate-enter-z:-260;--gate-enter-tilt-x:36;--gate-enter-turn:-40;--gate-exit-y:150;--gate-exit-z:-120;--gate-exit-tilt-x:30;--gate-exit-turn:35}
body.wmi-screen-page #wmi-screen .horizon-far{--gate-stagger:60;--gate-enter-y:180;--gate-enter-z:-360;--gate-enter-tilt-x:-26;--gate-enter-turn:55;--gate-exit-y:190;--gate-exit-z:-180;--gate-exit-tilt-x:-20;--gate-exit-turn:-40}
body.wmi-screen-page #wmi-screen .horizon-moon{--gate-stagger:80;--gate-enter-x:80;--gate-enter-y:-35;--gate-enter-z:-160;--gate-enter-tilt-y:30;--gate-enter-turn:85;--gate-exit-x:95;--gate-exit-y:-65;--gate-exit-z:-100;--gate-exit-turn:-65}
/* Light is static artwork; only these bounded layers fade while travelling. */
body.wmi-screen-page #wmi-screen .passage-aura{--gate-alpha:1;width:min(125vw,145svh);background:radial-gradient(ellipse,#c38b4430,transparent 66%);border-radius:50%;transform:translate(-50%,-50%) translate3d(-16vw,-5svh,-180px)}
body.wmi-screen-page #wmi-screen .passage-aura::before,body.wmi-screen-page #wmi-screen .passage-aura::after{content:none}
body.wmi-screen-page #wmi-screen [data-passage="unreleased"] .passage-aura{background:radial-gradient(ellipse,#daa55a30,transparent 54%);transform:translate(-50%,-50%) translate3d(-13vw,-13svh,-160px) scale(.8)}
body.wmi-screen-page #wmi-screen [data-passage="cabinet"] .passage-aura{background:radial-gradient(ellipse,#d9aa5830,#87502b10 42%,transparent 65%);transform:translate(-50%,-50%) translate3d(-18vw,12svh,-140px)}
body.wmi-screen-page #wmi-screen [data-passage="closing"] .passage-aura{background:radial-gradient(ellipse,#e3ab5540,#a16b2918 44%,transparent 65%);transform:translate(-50%,-50%) translate3d(0,47svh,-180px) scale(1.5)}
body.wmi-screen-page #wmi-screen .scene:is([data-view="arcana"],[data-view="unreleased"],[data-view="cabinet"],[data-view="closing"]) :is(.ritual,.portal-plane,.portal-rim,.floor-ring,.corner){opacity:0}
body.wmi-screen-page #wmi-screen .scene[data-view="arcana"] .backdrop img{transform:scale(1.22) translate(-2%,1%)}
body.wmi-screen-page #wmi-screen .scene[data-view="unreleased"] .backdrop img{transform:scale(1.24) translate(0,2%)}
body.wmi-screen-page #wmi-screen .scene[data-view="cabinet"] .backdrop img{transform:scale(1.26) translate(2%,1%)}
body.wmi-screen-page #wmi-screen .scene[data-view="closing"] .backdrop img{transform:scale(1.28) translate(0,0)}
body.wmi-screen-page #wmi-screen .story-panel{touch-action:pan-y pinch-zoom;overscroll-behavior-y:contain}
@media(max-width:700px){
 body.wmi-screen-page #wmi-screen .passage-gate{width:140vw}
 body.wmi-screen-page #wmi-screen .twin-leading{width:142vw;transform:translate(-50%,-50%) translate3d(-22vw,-22svh,0) rotateY(-22deg) rotateZ(-14deg)}
 body.wmi-screen-page #wmi-screen .twin-trailing{width:135vw;transform:translate(-50%,-50%) translate3d(22vw,-11svh,-100px) rotateY(27deg) rotateX(-12deg) rotateZ(38deg)}
 body.wmi-screen-page #wmi-screen .twin-echo{transform:translate(-50%,-50%) translate3d(0,-15svh,-250px) rotateY(6deg) scale(1.2)}
 body.wmi-screen-page #wmi-screen .vault-near{width:150vw;transform:translate(-50%,-50%) translate3d(-10vw,-9svh,0) rotateY(-14deg) rotateX(12deg) rotateZ(-22deg)}
 body.wmi-screen-page #wmi-screen .vault-middle{width:145vw;transform:translate(-50%,-50%) translate3d(3vw,-17svh,-170px) rotateY(-22deg) rotateX(6deg) rotateZ(24deg) scale(.92)}
 body.wmi-screen-page #wmi-screen .vault-far{width:140vw;transform:translate(-50%,-50%) translate3d(16vw,-25svh,-330px) rotateY(-30deg) rotateX(2deg) rotateZ(54deg) scale(.7)}
 body.wmi-screen-page #wmi-screen .orbit-upright{transform:translate(-50%,-50%) translate3d(0,-19svh,0) rotateY(54deg) rotateZ(-14deg) scale(.84)}
 body.wmi-screen-page #wmi-screen .orbit-cross{transform:translate(-50%,-50%) translate3d(0,-19svh,40px) rotateX(58deg) rotateY(-26deg) rotateZ(27deg) scale(.86)}
 body.wmi-screen-page #wmi-screen .orbit-low{transform:translate(-50%,-50%) translate3d(0,-2svh,-80px) rotateX(77deg) rotateZ(-12deg) scale(1.04)}
 body.wmi-screen-page #wmi-screen .horizon-near{transform:translate(-50%,-50%) translate3d(0,27svh,-80px) rotateX(28deg) scale(1.65)}
 body.wmi-screen-page #wmi-screen .horizon-far{transform:translate(-50%,-50%) translate3d(0,30svh,-200px) rotateX(54deg) rotateZ(8deg) scale(2.3)}
 body.wmi-screen-page #wmi-screen .horizon-moon{display:none}
 body.wmi-screen-page #wmi-screen .passage-gate.passage-aura{width:180vw;transform:translate(-50%,-50%) translate3d(0,-18svh,-180px)}
 body.wmi-screen-page #wmi-screen [data-passage="closing"] .passage-gate.passage-aura{transform:translate(-50%,-50%) translate3d(0,38svh,-180px) scale(1.7)}

}

/* Stable compositing prevents a depth jump when a fade reaches opacity 1. */
body.wmi-screen-page #wmi-screen .scene .hero-content{transform:translate(-50%,-50%);transform-style:flat}
body.wmi-screen-page[data-depth] #wmi-screen .scene:not([data-view="hero"]) .hero-content{transform:translate(-50%,calc(-50% - 18px))}
body.wmi-screen-page #wmi-screen .scene .brand-figure{transform-style:flat}
body.wmi-screen-page #wmi-screen .scene .brand-figure .logo{transform:none}
body.wmi-screen-page #wmi-screen .scene .service-book{transform-style:flat;perspective:1000px}
body.wmi-screen-page #wmi-screen .scene .ritual .outer{transform:rotateZ(0deg)}
body.wmi-screen-page #wmi-screen .scene[data-view="services"] .ritual .outer{transform:rotateZ(110deg)}
body.wmi-screen-page #wmi-screen .scene[data-view="services"] .ritual .inner{transform:scale(.92) rotateZ(-95deg)}
