/* MIDNIGHT METROPOLIS V3 — CHROMATIC NIGHTS */

/* Deep multicolor atmosphere */
.mm-city {
    background:
        radial-gradient(ellipse at 15% 55%,rgba(34,155,157,.12),transparent 40%),
        radial-gradient(ellipse at 85% 60%,rgba(146,75,171,.14),transparent 45%),
        #100d12;
}
.mm-world {
    background:
        radial-gradient(ellipse at 18% 47%,rgba(31,143,157,.24),transparent 38%),
        radial-gradient(ellipse at 76% 35%,rgba(136,71,171,.23),transparent 42%),
        radial-gradient(ellipse at 52% 75%,rgba(200,87,93,.17),transparent 40%),
        linear-gradient(180deg,#111625 0%,#2b202f 52%,#20141c 100%);
}

/* Three cinematic moving light fields */
.mm-world::before,
.mm-world::after,
.mm-sky::after {
    content:"";
    position:absolute;
    pointer-events:none;
    border-radius:50%;
    filter:blur(55px);
    opacity:.48;
    z-index:1;
}
.mm-world::before {
    width:42%;height:48%;left:-12%;top:22%;
    background:radial-gradient(circle,rgba(29,215,205,.38),transparent 70%);
    animation:mm-v3-drift-one 17s ease-in-out infinite alternate;
}
.mm-world::after {
    width:43%;height:48%;right:-12%;top:15%;
    background:radial-gradient(circle,rgba(182,91,235,.38),transparent 70%);
    animation:mm-v3-drift-two 21s ease-in-out infinite alternate;
}
.mm-sky::after {
    width:42%;height:42%;left:28%;top:37%;
    background:radial-gradient(circle,rgba(241,113,138,.25),transparent 70%);
    animation:mm-v3-drift-three 19s ease-in-out infinite alternate;
}

/* Architectural lighting */
.mm-building {
    --mm-light:#e7b67c;
    border-color:color-mix(in srgb,var(--mm-light) 40%,transparent);
    box-shadow:
        inset 3px 0 0 color-mix(in srgb,var(--mm-light) 20%,transparent),
        0 0 22px color-mix(in srgb,var(--mm-light) 12%,transparent),
        12px 0 30px rgba(0,0,0,.3);
}
.mm-building:nth-child(4n+1) {--mm-light:#54e1d8}
.mm-building:nth-child(4n+2) {--mm-light:#c08af5}
.mm-building:nth-child(4n+3) {--mm-light:#f0a1b2}
.mm-building:nth-child(4n) {--mm-light:#f0b577}

.mm-building-roof {
    background:linear-gradient(
        90deg,
        transparent,
        var(--mm-light),
        transparent
    );
    box-shadow:0 0 18px color-mix(in srgb,var(--mm-light) 55%,transparent);
}
.mm-building-windows i {
    background:var(--mm-light);
    box-shadow:0 0 10px color-mix(in srgb,var(--mm-light) 38%,transparent);
}
.mm-building-windows i:nth-child(5n) {
    animation:mm-v3-window-glow 4.5s ease-in-out infinite alternate;
}
.mm-building-windows i:nth-child(7n) {
    animation:mm-v3-window-glow 6.5s ease-in-out infinite alternate-reverse;
}

/* Illuminated bridges */
.mm-bridge-one {
    background:linear-gradient(90deg,#39c9c5,#e6aa7e);
    box-shadow:0 0 23px rgba(58,210,205,.36);
}
.mm-bridge-two {
    background:linear-gradient(90deg,#e6aa7e,#b98bef);
    box-shadow:0 0 23px rgba(179,117,235,.34);
}

/* Color-coded destination signals */
.mm-location {
    --mm-district:#e8ae79;
}
.mm-location:nth-child(4n+1) {--mm-district:#53ded5}
.mm-location:nth-child(4n+2) {--mm-district:#c49cf4}
.mm-location:nth-child(4n+3) {--mm-district:#f1a2b4}
.mm-location:nth-child(4n) {--mm-district:#e8ae79}

.mm-location-beacon {
    background:var(--mm-district);
    box-shadow:
        0 0 0 7px color-mix(in srgb,var(--mm-district) 15%,transparent),
        0 0 28px var(--mm-district);
}
.mm-location-beacon::before {
    border-color:var(--mm-district);
}
.mm-location.is-active .mm-location-beacon {
    background:#fff;
    box-shadow:
        0 0 0 11px color-mix(in srgb,var(--mm-district) 20%,transparent),
        0 0 48px var(--mm-district);
}

/* Metallic district plaques */
.mm-location-plaque {
    position:relative;
    overflow:hidden;
    border-color:color-mix(in srgb,var(--mm-district) 55%,transparent);
    background:
        linear-gradient(135deg,color-mix(in srgb,var(--mm-district) 10%,#27202e),#11121f 85%);
}
.mm-location-plaque::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,.16) 48%,
        transparent 66%
    );
    transform:translateX(-150%);
    pointer-events:none;
}
.mm-location:hover .mm-location-plaque::before,
.mm-location:focus-visible .mm-location-plaque::before,
.mm-location.is-active .mm-location-plaque::before {
    animation:mm-v3-sweep 1.15s ease-out both;
}
.mm-location:hover .mm-location-plaque,
.mm-location:focus-visible .mm-location-plaque,
.mm-location.is-active .mm-location-plaque {
    border-color:var(--mm-district);
    background:linear-gradient(
        135deg,
        color-mix(in srgb,var(--mm-district) 23%,#282032),
        #131421
    );
    box-shadow:
        0 0 36px color-mix(in srgb,var(--mm-district) 30%,transparent),
        0 20px 40px rgba(0,0,0,.5);
}
.mm-location-plaque>span {
    color:var(--mm-district);
}

/* Animations */
@keyframes mm-v3-drift-one {
    to {transform:translate(25%,14%) scale(1.2)}
}
@keyframes mm-v3-drift-two {
    to {transform:translate(-22%,18%) scale(1.15)}
}
@keyframes mm-v3-drift-three {
    to {transform:translate(12%,-20%) scale(1.3)}
}
@keyframes mm-v3-window-glow {
    0%,100% {opacity:.15}
    50% {opacity:.9}
}
@keyframes mm-v3-sweep {
    from {transform:translateX(-150%)}
    to {transform:translateX(150%)}
}

@media(max-width:650px) {
    .mm-world::before,
    .mm-world::after,
    .mm-sky::after {
        filter:blur(35px);
        opacity:.35;
    }
    .mm-location-plaque {
        backdrop-filter:none;
    }
}
@media(prefers-reduced-motion:reduce) {
    .mm-world::before,
    .mm-world::after,
    .mm-sky::after,
    .mm-building-windows i,
    .mm-location-plaque::before {
        animation:none!important;
    }
}