html.mf-intro-active body > #mf-updates-intro {
    visibility: visible !important;
    pointer-events: auto !important;
}

#mf-updates-intro {
    --u-cyan: #70f6ff;
    --u-pink: #fb73ca;
    --u-ice: #e2fcff;
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    color: var(--u-ice);
    background:
        radial-gradient(ellipse at 52% 47%, rgba(17, 69, 84, .48), transparent 34%),
        radial-gradient(ellipse at 50% 110%, rgba(107, 28, 91, .2), transparent 48%),
        #050912;
    font-family: 'Orbitron', 'Courier New', monospace;
    opacity: 1;
    visibility: visible;
    transition: opacity 680ms cubic-bezier(.76, 0, .24, 1), visibility 0s linear 680ms;
}

#mf-updates-intro::before,
#mf-updates-intro::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
}

#mf-updates-intro::before {
    opacity: .22;
    background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(159, 245, 255, .1) 4px, transparent 5px);
}

#mf-updates-intro::after {
    inset: -45%;
    z-index: -2;
    opacity: .44;
    background-image:
        linear-gradient(rgba(81, 235, 255, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(81, 235, 255, .09) 1px, transparent 1px);
    background-size: 68px 68px;
    transform: perspective(650px) rotateX(62deg) scale(1.3) translateY(27%);
    mask-image: linear-gradient(transparent 20%, #000 54%, transparent 89%);
    animation: updates-intro-drift 12s linear infinite alternate;
}

#mf-updates-intro.mf-updates-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mf-updates-starfield {
    position: absolute;
    inset: 0;
    opacity: .6;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 24%, rgba(112, 246, 255, .7) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 22%, rgba(251, 115, 202, .65) 0 1px, transparent 2px),
        radial-gradient(circle at 79% 76%, rgba(112, 246, 255, .55) 0 1px, transparent 2px),
        radial-gradient(circle at 20% 77%, rgba(251, 115, 202, .4) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 13%, rgba(112, 246, 255, .5) 0 1px, transparent 2px);
}

.mf-updates-radar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.mf-updates-radar i {
    position: absolute;
    width: min(75vw, 640px);
    aspect-ratio: 1;
    border: 1px solid rgba(112, 246, 255, .075);
    border-radius: 50%;
    transform: rotateX(68deg);
    animation: updates-intro-radar 5s ease-out both;
}
.mf-updates-radar i:nth-child(2) { animation-delay: 420ms; }
.mf-updates-radar i:nth-child(3) { animation-delay: 840ms; }

.mf-updates-frame { position: absolute; inset: 25px; pointer-events: none; }
.mf-updates-frame i {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: rgba(112, 246, 255, .38);
    border-style: solid;
}
.mf-updates-frame i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.mf-updates-frame i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.mf-updates-frame i:nth-child(3) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.mf-updates-frame i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }

.mf-updates-stage {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(230px, 40vh) auto auto;
    align-content: center;
    justify-items: center;
    width: min(100% - 74px, 940px);
    min-height: min(700px, 90dvh);
    text-align: center;
    animation: updates-intro-arrive 800ms cubic-bezier(.2, .78, .25, 1) both;
}

.mf-updates-topline,
.mf-updates-bottomline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: rgba(150, 195, 207, .77);
    font-size: 8px;
    letter-spacing: .2em;
}

.mf-updates-topline {
    align-self: end;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(112, 246, 255, .19);
    animation: updates-intro-rise 600ms 180ms both;
}
.mf-updates-topline span:last-child { color: rgba(251, 139, 215, .78); }

.mf-updates-console {
    position: relative;
    display: grid;
    width: min(100%, 480px);
    place-items: center;
    perspective: 800px;
}

.mf-updates-console::before {
    position: absolute;
    width: min(67vw, 370px);
    aspect-ratio: 1;
    border: 1px solid rgba(112, 246, 255, .11);
    content: "";
    transform: rotate(45deg) scale(.77);
    box-shadow: 0 0 55px rgba(112, 246, 255, .08), inset 0 0 45px rgba(251, 115, 202, .035);
    animation: updates-intro-frame 1.2s 350ms ease-out both;
}

.mf-updates-console-orbit {
    position: absolute;
    width: min(55vw, 340px);
    aspect-ratio: 1;
    border: 1px solid rgba(251, 115, 202, .38);
    border-radius: 50%;
    transform: rotateX(69deg) scaleY(.53);
    animation: updates-intro-orbit 1.1s 350ms ease-out both, updates-intro-spin 18s 1.5s linear infinite;
}

.mf-updates-spine {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 104px;
    padding: 0 28px;
    border: 1px solid rgba(112, 246, 255, .52);
    background: linear-gradient(120deg, rgba(112, 246, 255, .13), rgba(6, 16, 28, .88) 52%, rgba(251, 115, 202, .1));
    box-shadow: 0 0 35px rgba(112, 246, 255, .16), inset 0 0 22px rgba(112, 246, 255, .09);
    transform: skewY(-10deg) scale(.82);
    opacity: 0;
    animation: updates-intro-lock 1.35s 650ms cubic-bezier(.18, .75, .22, 1) forwards;
}

.mf-updates-spine i {
    width: 7px;
    height: 28px;
    background: linear-gradient(var(--u-ice), var(--u-cyan));
    box-shadow: 0 0 12px rgba(112, 246, 255, .52);
    transform: scaleY(.12);
    transform-origin: bottom;
    animation: updates-intro-bar 700ms 1.2s cubic-bezier(.2, .8, .2, 1) forwards;
}
.mf-updates-spine i:nth-child(2) { height: 52px; animation-delay: 1.35s; }
.mf-updates-spine i:nth-child(3) { height: 75px; background: linear-gradient(var(--u-pink), var(--u-cyan)); animation-delay: 1.5s; }
.mf-updates-spine i:nth-child(4) { height: 43px; animation-delay: 1.65s; }
.mf-updates-spine i:nth-child(5) { height: 60px; animation-delay: 1.8s; }

.mf-updates-data {
    position: absolute;
    inset: 12% 14%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: rotate(-24deg);
}
.mf-updates-data span {
    width: 1px;
    height: 0;
    background: linear-gradient(transparent, rgba(112, 246, 255, .55), transparent);
    animation: updates-intro-beam 800ms 1.4s ease-out forwards;
}
.mf-updates-data span:nth-child(even) { animation-delay: 1.65s; background: linear-gradient(transparent, rgba(251, 115, 202, .52), transparent); }

.mf-updates-console-label {
    position: absolute;
    right: 2%;
    bottom: 20%;
    color: rgba(251, 139, 215, .76);
    font-size: 7px;
    letter-spacing: .2em;
    line-height: 1.8;
    text-align: left;
    opacity: 0;
    animation: updates-intro-rise 650ms 1.5s both;
}

.mf-updates-title {
    position: relative;
    z-index: 3;
    margin-top: -12px;
    animation: updates-intro-title 850ms 2.45s cubic-bezier(.2, .75, .2, 1) both;
}
.mf-updates-title p {
    margin-bottom: 12px;
    color: rgba(166, 205, 214, .75);
    font-size: 8px;
    letter-spacing: .3em;
}
.mf-updates-title h1 {
    margin: 0;
    color: var(--u-ice);
    font-size: clamp(34px, 6vw, 58px);
    font-weight: 500;
    letter-spacing: .03em;
    text-shadow: 0 0 30px rgba(112, 246, 255, .17);
}
.mf-updates-title h1 em { color: var(--u-cyan); font-style: normal; }
.mf-updates-title > span {
    display: block;
    margin-top: 10px;
    color: rgba(184, 210, 219, .7);
    font: 11px 'Courier New', monospace;
    letter-spacing: .04em;
}

.mf-updates-bottomline {
    align-self: end;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(112, 246, 255, .19);
    animation: updates-intro-rise 600ms 3s both;
}
.mf-updates-live { color: rgba(180, 231, 236, .83); }
.mf-updates-live::before {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 8px 1px 0;
    border-radius: 50%;
    content: "";
    background: var(--u-cyan);
    box-shadow: 0 0 9px rgba(112, 246, 255, .75);
}
.mf-updates-progress { position: relative; flex: 1; height: 1px; overflow: hidden; background: rgba(127, 192, 207, .2); }
.mf-updates-progress i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: linear-gradient(90deg, var(--u-cyan), #d8ffff 55%, var(--u-pink));
    transform: scaleX(0);
    transform-origin: left;
    animation: updates-intro-progress 5.2s linear forwards;
}

@keyframes updates-intro-drift { to { transform: perspective(650px) rotateX(62deg) scale(1.3) translateY(31%); } }
@keyframes updates-intro-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes updates-intro-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes updates-intro-radar { from { opacity: 0; transform: rotateX(68deg) scale(.68); } 40% { opacity: .8; } to { opacity: 0; transform: rotateX(68deg) scale(1.22); } }
@keyframes updates-intro-frame { from { opacity: 0; transform: rotate(45deg) scale(.62); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes updates-intro-orbit { from { opacity: 0; transform: rotateX(69deg) scaleY(.28); } to { opacity: .85; transform: rotateX(69deg) scaleY(.53); } }
@keyframes updates-intro-spin { to { rotate: 360deg; } }
@keyframes updates-intro-lock { to { opacity: 1; transform: skewY(-10deg) scale(1); } }
@keyframes updates-intro-bar { to { transform: scaleY(1); } }
@keyframes updates-intro-beam { to { height: 70%; } }
@keyframes updates-intro-title { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes updates-intro-progress { to { transform: scaleX(1); } }

@media (max-width: 620px) {
    .mf-updates-frame { inset: 14px; }
    .mf-updates-frame i { width: 19px; height: 19px; }
    .mf-updates-stage { grid-template-rows: auto minmax(205px, 34vh) auto auto; width: calc(100% - 42px); min-height: min(650px, 89dvh); }
    .mf-updates-topline, .mf-updates-bottomline { font-size: 6px; letter-spacing: .12em; }
    .mf-updates-topline { gap: 9px; }
    .mf-updates-topline span:last-child { text-align: right; }
    .mf-updates-spine { height: 80px; padding: 0 21px; }
    .mf-updates-spine i { width: 5px; }
    .mf-updates-console::before { width: min(67vw, 285px); }
    .mf-updates-console-orbit { width: min(63vw, 270px); }
    .mf-updates-title h1 { font-size: clamp(30px, 8vw, 43px); }
    .mf-updates-title p { font-size: 7px; letter-spacing: .2em; }
    .mf-updates-title > span { font-size: 10px; }
    .mf-updates-bottomline { gap: 8px; }
}

@media (max-width: 360px) {
    .mf-updates-topline span:last-child,
    .mf-updates-bottomline > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #mf-updates-intro::after,
    .mf-updates-stage,
    .mf-updates-topline,
    .mf-updates-bottomline,
    .mf-updates-radar i,
    .mf-updates-console::before,
    .mf-updates-console-orbit,
    .mf-updates-spine,
    .mf-updates-spine i,
    .mf-updates-data span,
    .mf-updates-console-label,
    .mf-updates-title,
    .mf-updates-progress i {
        animation: none !important;
    }
    .mf-updates-stage,
    .mf-updates-topline,
    .mf-updates-bottomline,
    .mf-updates-radar i,
    .mf-updates-console::before,
    .mf-updates-console-orbit,
    .mf-updates-spine,
    .mf-updates-console-label,
    .mf-updates-title { opacity: 1; }
    .mf-updates-radar i { transform: rotateX(68deg); }
    .mf-updates-console::before { transform: rotate(45deg); }
    .mf-updates-spine { transform: skewY(-10deg); }
    .mf-updates-spine i { transform: scaleY(1); }
    .mf-updates-data span { height: 70%; }
    .mf-updates-progress i { transform: scaleX(1); }
    #mf-updates-intro { transition-duration: 680ms; }
    #mf-updates-intro.mf-updates-leaving { opacity: 1; visibility: visible; }
}