/* Adapted from Aira-Sakuranomiya/white-aria DXTransition, AGPL-3.0.
   Modified 2026-10-22: flattened CSS, local masks, keyframe lifecycle. */
.dx-transition{--dx-color-bg:#4ec0f8;--dx-color-center:#c3ffff;--dx-color-items-1:#fea3c1;--dx-color-items-2:#fed821;--dx-color-items-3:#fff;--dx-color-items-4:#d2f1ff;--dx-color-side-1:#a7eaff;--dx-color-side-2:#fff;position:fixed;inset:0;z-index:500;overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:all}
.dx-transition[hidden]{display:none}.dx-transition[data-phase=boot]{background:var(--dx-color-bg)}
html[data-dx-disabled=true] .dx-transition{display:none}
.dx-solid,.dx-bg{position:absolute;inset:0;background:var(--dx-color-bg)}
.dx-bg{display:none;will-change:transform}.dx-bg-1{clip-path:polygon(0 0,100% 0,0 100%)}.dx-bg-2{clip-path:polygon(100% 0,100% 100%,0 100%)}
.dx-transition[data-phase=entering] .dx-solid{animation:dx-solid-in 600ms both}.dx-transition.dx-initial .dx-solid{animation:none;background:var(--dx-color-bg)}
.dx-transition[data-phase=leaving] .dx-solid{display:none}.dx-transition[data-phase=leaving] .dx-bg{display:block;animation:dx-bg-out 500ms cubic-bezier(1,-.5,1,1) both}.dx-transition[data-phase=leaving] .dx-bg-2{animation-name:dx-bg-out-2}
.dx-items{position:relative;width:calc(61vmax * var(--dx-aspect));height:100vmax;transform:rotate(45deg) scale(var(--dx-scale));flex-shrink:0;display:flex;justify-content:center;align-items:center}
.dx-item{position:absolute;display:block;mask:var(--shape) center/100% 100% no-repeat;-webkit-mask:var(--shape) center/100% 100% no-repeat;background:var(--item-color,var(--dx-color-items-4));aspect-ratio:64/227;will-change:transform,opacity}
.dx-slide-1{width:14vmax;right:-1%;bottom:-3.5vmax;--item-color:var(--dx-color-items-1);--from:44vmax;--to:-102vmax}
.dx-slide-2{width:12vmax;left:18%;top:-13.5vmax;--item-color:var(--dx-color-items-1);--from:122vmax;--to:-38vmax}
.dx-slide-3{width:6.5vmax;right:35%;top:2vmax;--item-color:var(--dx-color-items-2);--from:38vmax;--to:-44vmax;--from-opacity:0}
.dx-slide-4{width:6.5vmax;left:7%;top:21vmax;--item-color:var(--dx-color-items-3);--from:38vmax;--to:-44vmax;--from-opacity:0}
.dx-slide-long{aspect-ratio:64/334}.dx-long-1{width:12vmax;left:0;bottom:-18vmax;--item-color:var(--dx-color-items-2);--from:45vmax;--to:-118vmax}
.dx-long-2{width:6vmax;right:29%;bottom:-5.5vmax;--item-color:var(--dx-color-items-3);--from:38vmax;--to:-44vmax;--to-opacity:0}
.dx-hold{aspect-ratio:48/489;--item-color:var(--dx-color-items-4);--from-opacity:0;--to-opacity:0}
.dx-hold-1{width:11vmax;left:20%;bottom:-83vmax;--from:-28vmax;--to:58vmax}.dx-hold-2{width:6.5vmax;left:36%;bottom:-53.3vmax;--from:-14vmax;--to:30vmax}.dx-hold-3{width:max(11vw,7vh);right:5%;bottom:-95vmax;--from:-20vmax;--to:40vmax}.dx-hold-4{width:5.5vmax;right:8%;top:-9vmax;--from:-14vmax;--to:16vmax}.dx-hold-5{width:11vmax;right:19%;top:-79vmax;--from:-28vmax;--to:38vmax}
.dx-transition[data-phase=entering] .dx-item{animation:dx-item-in 600ms cubic-bezier(0,0,.1,1) both}.dx-transition[data-phase=leaving] .dx-item{animation:dx-item-out 600ms cubic-bezier(.9,0,1,1) both}
.dx-center{position:absolute;width:40vmin;height:40vmin;will-change:transform,opacity}.dx-center-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;will-change:transform}.dx-center-icon{display:block;width:100%;height:100%;background:var(--dx-color-center);mask:var(--shape) center/contain no-repeat;-webkit-mask:var(--shape) center/contain no-repeat}
.dx-transition[data-phase=entering] .dx-center{animation:dx-center-turn 600ms cubic-bezier(.3,0,.7,1) both}.dx-transition[data-phase=entering] .dx-center-wrapper{animation:dx-center-in 600ms cubic-bezier(0,0,0,1.15) both}.dx-transition[data-phase=leaving] .dx-center{animation:dx-center-fade 600ms both}.dx-transition[data-phase=leaving] .dx-center-wrapper{animation:dx-center-out 600ms cubic-bezier(1,-.2,.2,1) both}
.dx-side{position:absolute;inset:0;pointer-events:none}.dx-side-2{transform:rotate(180deg)}.dx-side-back,.dx-side-front{position:absolute;top:0;left:0;transform:translate(-60%,-60%) rotate(-45deg)}.dx-side-back{width:111vmin;height:111vmin;background:var(--dx-color-side-1)}.dx-side-front{width:100vmin;height:85.5vmin;background:var(--dx-color-side-2)}.dx-pixels{position:absolute;width:58vmin;height:58vmin;top:0;left:-2vmin;color:var(--dx-color-side-1);background:repeating-linear-gradient(135deg,transparent 0 17%,currentColor 17% 20%,transparent 20% 30%);mask:repeating-linear-gradient(45deg,transparent 0 4%,#000 4% 7%,transparent 7% 14%);transform:rotate(-4deg)}
.dx-transition[data-phase=entering] .dx-side-back,.dx-transition[data-phase=entering] .dx-pixels{animation:dx-side-in 500ms cubic-bezier(.3,0,0,1) both}.dx-transition[data-phase=entering] .dx-side-front{animation:dx-side-in 500ms cubic-bezier(.3,0,0,1) both;--distance:-22vmax}
.dx-transition[data-phase=leaving] .dx-side-back,.dx-transition[data-phase=leaving] .dx-pixels{animation:dx-side-out 500ms cubic-bezier(1,-.5,1,1) both}.dx-transition[data-phase=leaving] .dx-side-front{animation:dx-side-out 500ms cubic-bezier(1,-.5,1,1) both;--distance:-22vmax}
@keyframes dx-solid-in{from{opacity:0}to{opacity:1}}@keyframes dx-bg-out{to{transform:translate(-105%,-105%)}}@keyframes dx-bg-out-2{to{transform:translate(105%,105%)}}
@keyframes dx-item-in{from{transform:translateY(var(--from));opacity:var(--from-opacity,1)}to{transform:translateY(0);opacity:1}}@keyframes dx-item-out{from{transform:translateY(0);opacity:1}to{transform:translateY(var(--to));opacity:var(--to-opacity,1)}}
@keyframes dx-center-turn{from{transform:rotate(-180deg)}to{transform:rotate(0)}}@keyframes dx-center-in{from{transform:scale(13)}to{transform:scale(1)}}@keyframes dx-center-out{to{transform:scale(13)}}@keyframes dx-center-fade{to{opacity:0}}
@keyframes dx-side-in{from{translate:var(--distance,-42vmax) var(--distance,-42vmax)}to{translate:0 0}}@keyframes dx-side-out{from{translate:0 0}to{translate:var(--distance,-42vmax) var(--distance,-42vmax)}}
@media(prefers-reduced-motion:reduce){.dx-transition *{animation:none!important}.dx-transition .dx-items,.dx-transition .dx-center,.dx-transition .dx-side{display:none}.dx-transition[data-phase=leaving]{opacity:0}}
