html.matrix-nav-active, .matrix-nav-active body { overflow: hidden; }
.matrix-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
    color: #dcffeb;
}
.matrix-nav::backdrop { background: transparent; }
.matrix-nav-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.matrix-nav-shutter {
    position: absolute;
    inset: 0;
    background: #02060c;
    clip-path: circle(0 at var(--matrix-x, 50%) var(--matrix-y, 50%));
}
.matrix-nav[open] .matrix-nav-shutter { animation: matrix-portal 360ms cubic-bezier(.65, 0, .2, 1) both; }
html.matrix-nav-arriving::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    background: #02060c;
    animation: assembly-failsafe 1ms 4.5s forwards;
}
html.matrix-assembly-ready::before { display: none; }
.matrix-assembly {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}
.matrix-assembly[hidden] { display: none; }
.matrix-assembly-dimmer, .matrix-assembly-grid, .matrix-assembly-scan { position: absolute; inset: 0; }
.matrix-assembly-dimmer { background: #02060c; animation: assembly-brighten 2.2s cubic-bezier(.33, 0, .2, 1) both; }
.matrix-assembly-grid {
    display: grid;
    grid-template-columns: repeat(var(--assembly-columns, 8), minmax(0, 1fr));
    grid-template-rows: repeat(var(--assembly-rows, 5), minmax(0, 1fr));
}
.matrix-assembly-tile {
    position: relative;
    background: linear-gradient(145deg, #02060c, #041017);
    box-shadow: inset 0 0 0 1px rgba(0, 204, 255, .04);
    animation: assembly-tile 1050ms cubic-bezier(.4, 0, .16, 1) var(--tile-delay) both;
}
.matrix-assembly-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 204, 255, .5);
    box-shadow: inset 0 0 22px rgba(0, 204, 255, .08), 0 0 12px rgba(0, 204, 255, .12);
    opacity: 0;
    animation: assembly-edge 1050ms ease var(--tile-delay) both;
}
.matrix-assembly-scan {
    inset: -15% 0 auto;
    height: 15%;
    background: linear-gradient(transparent, rgba(0, 204, 255, .045), rgba(130, 255, 193, .09), transparent);
    animation: assembly-scan 2s cubic-bezier(.2, .6, .4, 1) 120ms both;
}
@keyframes matrix-portal { to { clip-path: circle(150vmax at var(--matrix-x, 50%) var(--matrix-y, 50%)); } }
@keyframes assembly-failsafe { to { opacity: 0; } }
@keyframes assembly-brighten { 0% { opacity: .92; } 35% { opacity: .58; } 72% { opacity: .16; } 100% { opacity: 0; } }
@keyframes assembly-tile {
    0%, 12% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.015); }
    48% { opacity: .66; }
    100% { opacity: 0; transform: translate3d(var(--tile-x), var(--tile-y), 0) scale(.84); }
}
@keyframes assembly-edge { 0%, 10%, 100% { opacity: 0; } 35% { opacity: .65; } }
@keyframes assembly-scan { 0% { top: -15%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: .7; } 100% { top: 105%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .matrix-nav *, .matrix-assembly *, html.matrix-nav-arriving::before { animation: none !important; transition: none !important; }
    html.matrix-nav-arriving::before, .matrix-assembly { display: none; }
}