/* Moderation Fans / holographic entry field */
html.mf-intro-active,
html.mf-intro-active body {
    background-color: #050912;
    overflow: hidden !important;
    overscroll-behavior: none;
}

html.mf-intro-active body > :not(#mf-site-intro):not(#mf-team-intro):not(#mf-dashboard-intro):not(#mf-updates-intro) {
    visibility: hidden !important;
    pointer-events: none !important;
}

#mf-site-intro {
    --intro-cyan: #60faff;
    --intro-ice: #d6ffff;
    --intro-magenta: #ff58c9;
    --intro-muted: #77a5b3;
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    color: var(--intro-ice);
    background:
        radial-gradient(ellipse at 50% 46%, rgba(13, 59, 79, .52), transparent 37%),
        radial-gradient(ellipse at 50% 110%, rgba(113, 19, 93, .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-site-intro::before,
#mf-site-intro::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
}

#mf-site-intro::before {
    opacity: .2;
    background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(159, 245, 255, .1) 4px, transparent 5px);
    mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}

#mf-site-intro::after {
    inset: -50%;
    z-index: -2;
    opacity: .55;
    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: 74px 74px;
    transform: perspective(650px) rotateX(62deg) scale(1.3) translateY(27%);
    mask-image: linear-gradient(transparent 23%, #000 56%, transparent 88%);
    animation: mf-floor-drift 16s linear infinite;
}

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

.mf-intro-stars {
    position: absolute;
    inset: 0;
    opacity: .5;
    pointer-events: none;
    background:
        radial-gradient(circle at 17% 22%, rgba(96, 250, 255, .55) 0 1px, transparent 1.8px),
        radial-gradient(circle at 78% 31%, rgba(255, 88, 201, .58) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 76%, rgba(96, 250, 255, .4) 0 1px, transparent 2px),
        radial-gradient(circle at 23% 72%, rgba(96, 250, 255, .38) 0 1px, transparent 2px),
        radial-gradient(circle at 67% 15%, rgba(255, 88, 201, .4) 0 1px, transparent 2px);
}

.mf-intro-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(1, 4, 12, .63) 100%);
}

.mf-intro-register {
    position: absolute;
    inset: 25px;
    pointer-events: none;
}

.mf-intro-register i {
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: rgba(96, 250, 255, .4);
    border-style: solid;
}

.mf-intro-register i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.mf-intro-register i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.mf-intro-register i:nth-child(3) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.mf-intro-register i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }

.mf-intro-stage {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(250px, 43vh) auto auto;
    align-content: center;
    justify-items: center;
    width: min(100% - 72px, 940px);
    min-height: min(740px, 92dvh);
    text-align: center;
    animation: mf-stage-materialize 900ms cubic-bezier(.2, .78, .25, 1) both;
}

.mf-intro-kicker,
.mf-intro-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: rgba(137, 189, 201, .75);
    font-size: 9px;
    letter-spacing: .22em;
}

.mf-intro-kicker {
    align-self: end;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(96, 250, 255, .18);
    animation: mf-label-in 600ms 160ms both;
}

.mf-intro-kicker span:last-child,
.mf-intro-sequence {
    color: rgba(255, 139, 222, .72);
}

.mf-intro-projection {
    position: relative;
    display: grid;
    width: min(100%, 520px);
    place-items: center;
    perspective: 850px;
    transform-style: preserve-3d;
}

.mf-intro-projection::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(74vw, 450px);
    aspect-ratio: 1;
    border: 1px solid rgba(96, 250, 255, .08);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%) rotateX(67deg);
    box-shadow: 0 0 70px rgba(44, 214, 241, .05), inset 0 0 40px rgba(44, 214, 241, .04);
    animation: mf-orbit-arrive 1s 250ms both;
}

.mf-intro-artifact {
    position: relative;
    z-index: 2;
    width: clamp(188px, 31vh, 268px);
    aspect-ratio: 1;
    filter: drop-shadow(0 0 22px rgba(65, 232, 255, .19));
    transform: translateY(10px) rotateY(-8deg) rotateX(3deg) scale(.88);
    opacity: 0;
    animation: mf-artifact-form 1850ms 420ms cubic-bezier(.16, .74, .22, 1) forwards,
        mf-artifact-float 4s 2.5s ease-in-out infinite;
}

.mf-intro-sigil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mf-wire-fill {
    fill: url(#mf-core);
    opacity: 0;
    animation: mf-fill-up 700ms 1900ms ease-out forwards;
}

.mf-wire-outer,
.mf-wire-inner,
.mf-wire-cross,
.mf-wire-shield,
.mf-wire-mark {
    fill: none;
    stroke: url(#mf-wire);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.mf-wire-outer {
    stroke-width: 1.15;
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    animation: mf-draw-wire 1750ms 500ms cubic-bezier(.22, .7, .24, 1) forwards;
}

.mf-wire-inner {
    stroke-width: .8;
    opacity: .62;
    stroke-dasharray: 480;
    stroke-dashoffset: 480;
    animation: mf-draw-wire 1350ms 950ms cubic-bezier(.22, .7, .24, 1) forwards;
}

.mf-wire-cross {
    stroke-width: .75;
    opacity: .62;
    stroke-dasharray: 650;
    stroke-dashoffset: 650;
    animation: mf-draw-wire 1550ms 1150ms cubic-bezier(.22, .7, .24, 1) forwards;
}

.mf-wire-shield {
    stroke: #c7ffff;
    stroke-width: 1.25;
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    filter: drop-shadow(0 0 6px rgba(96, 250, 255, .7));
    animation: mf-draw-wire 900ms 1900ms ease-out forwards;
}

.mf-wire-mark {
    stroke: var(--intro-magenta);
    stroke-width: 2.5;
    stroke-dasharray: 75;
    stroke-dashoffset: 75;
    filter: drop-shadow(0 0 5px rgba(255, 88, 201, .7));
    animation: mf-draw-wire 650ms 2300ms ease-out forwards;
}

.mf-node {
    fill: var(--intro-ice);
    opacity: 0;
    filter: drop-shadow(0 0 4px var(--intro-cyan));
    animation: mf-node-lock 350ms 1900ms ease-out forwards;
}

.mf-node-two, .mf-node-five { animation-delay: 2050ms; }
.mf-node-three, .mf-node-six { animation-delay: 2200ms; }

.mf-intro-scan {
    position: absolute;
    z-index: 3;
    top: 2%;
    right: 9%;
    left: 9%;
    height: 2px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--intro-ice), var(--intro-cyan), transparent);
    box-shadow: 0 0 14px rgba(96, 250, 255, .85), 0 0 32px rgba(96, 250, 255, .35);
    animation: mf-reconstruct 2.1s 1.65s ease-in-out forwards;
}

.mf-intro-ring {
    position: absolute;
    z-index: 1;
    left: 50%;
    width: min(57vw, 350px);
    aspect-ratio: 1;
    border: 1px solid rgba(96, 250, 255, .3);
    border-radius: 50%;
    transform: translate(-50%, 0) rotateX(71deg) scaleY(.54);
}

.mf-intro-ring-back {
    top: 20%;
    opacity: 0;
    border-color: rgba(255, 88, 201, .26);
    animation: mf-ring-emerge 1.2s 700ms ease-out forwards, mf-ring-turn 13s 2s linear infinite;
}

.mf-intro-ring-front {
    bottom: 12%;
    opacity: 0;
    border-top-color: rgba(96, 250, 255, .8);
    animation: mf-ring-emerge 1.2s 1s ease-out forwards, mf-ring-turn 17s 2s linear infinite reverse;
}

.mf-intro-ring::after {
    position: absolute;
    top: 50%;
    left: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    content: "";
    background: var(--intro-magenta);
    box-shadow: 0 0 12px rgba(255, 88, 201, .85);
}

.mf-intro-ray {
    position: absolute;
    z-index: 0;
    top: 48%;
    left: 50%;
    width: 1px;
    height: 0;
    opacity: 0;
    background: linear-gradient(transparent, rgba(96, 250, 255, .3), transparent);
    transform-origin: center top;
    animation: mf-ray-rise 1s 350ms ease-out forwards;
}

.mf-intro-ray-a { transform: rotate(28deg); }
.mf-intro-ray-b { transform: rotate(-28deg); animation-delay: 550ms; background: linear-gradient(transparent, rgba(255, 88, 201, .25), transparent); }

.mf-intro-plinth {
    position: absolute;
    z-index: 3;
    bottom: 13%;
    left: 50%;
    width: clamp(140px, 28vw, 220px);
    height: 13px;
    border: 1px solid rgba(96, 250, 255, .55);
    border-radius: 50%;
    background: rgba(12, 39, 54, .86);
    box-shadow: 0 0 19px rgba(96, 250, 255, .15), inset 0 0 14px rgba(96, 250, 255, .18);
    opacity: 0;
    transform: translateX(-50%) scaleX(.55);
    animation: mf-plinth-lock 700ms 450ms ease-out forwards;
}

.mf-intro-plinth span {
    position: absolute;
    top: 3px;
    left: 50%;
    width: 38%;
    height: 1px;
    background: var(--intro-magenta);
    box-shadow: 0 0 9px rgba(255, 88, 201, .75);
    transform: translateX(-50%);
}

.mf-intro-coordinate {
    position: absolute;
    top: 50%;
    color: rgba(124, 183, 197, .62);
    font-size: 8px;
    line-height: 1.8;
    letter-spacing: .12em;
    text-align: left;
    opacity: 0;
    animation: mf-label-in 700ms 1450ms ease-out forwards;
}

.mf-intro-coordinate-left { left: 2%; }
.mf-intro-coordinate-right { right: 2%; text-align: right; }

.mf-intro-copy {
    position: relative;
    z-index: 4;
    margin-top: -10px;
    animation: mf-brand-reveal 850ms 2750ms cubic-bezier(.2, .75, .2, 1) both;
}

.mf-intro-overline {
    margin-bottom: 9px;
    color: rgba(145, 205, 214, .72);
    font-size: 9px;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.mf-intro-wordmark {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .23em;
    margin: 0;
    color: #e9fdff;
    font-size: clamp(22px, 4.2vw, 39px);
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.2;
    text-shadow: 0 0 30px rgba(96, 250, 255, .15);
}

.mf-intro-wordmark strong {
    color: var(--intro-cyan);
    font-weight: 700;
}

.mf-intro-caption {
    margin-top: 10px;
    color: rgba(178, 208, 218, .67);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: .06em;
}

.mf-intro-footer {
    align-self: end;
    gap: 17px;
    padding-top: 12px;
    border-top: 1px solid rgba(96, 250, 255, .18);
    animation: mf-label-in 600ms 3300ms both;
}

.mf-intro-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(173, 226, 231, .8);
}

.mf-intro-status::before {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    content: "";
    background: var(--intro-cyan);
    box-shadow: 0 0 8px rgba(96, 250, 255, .7);
}

.mf-intro-progress {
    position: relative;
    flex: 1;
    height: 1px;
    overflow: hidden;
    background: rgba(127, 192, 207, .18);
}

.mf-intro-progress i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: linear-gradient(90deg, var(--intro-cyan), #a8faff 58%, var(--intro-magenta));
    transform: scaleX(0);
    transform-origin: left;
    animation: mf-progress-fill 5.25s linear forwards;
}

@keyframes mf-floor-drift {
    from { transform: perspective(650px) rotateX(62deg) scale(1.3) translateY(27%); }
    to { transform: perspective(650px) rotateX(62deg) scale(1.3) translateY(31%); }
}

@keyframes mf-stage-materialize {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mf-label-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mf-orbit-arrive {
    from { opacity: 0; transform: translate(-50%, -50%) rotateX(67deg) scale(.76); }
    to { opacity: 1; transform: translate(-50%, -50%) rotateX(67deg) scale(1); }
}

@keyframes mf-artifact-form {
    0% { opacity: 0; transform: translateY(20px) rotateY(-14deg) rotateX(4deg) scale(.72); }
    35% { opacity: .65; }
    100% { opacity: 1; transform: translateY(0) rotateY(-8deg) rotateX(3deg) scale(1); }
}

@keyframes mf-artifact-float {
    0%, 100% { transform: translateY(0) rotateY(-8deg) rotateX(3deg) scale(1); }
    50% { transform: translateY(-7px) rotateY(0deg) rotateX(1deg) scale(1); }
}

@keyframes mf-draw-wire { to { stroke-dashoffset: 0; } }
@keyframes mf-fill-up { to { opacity: .85; } }
@keyframes mf-node-lock { from { opacity: 0; } to { opacity: .92; } }

@keyframes mf-reconstruct {
    0% { top: 0%; opacity: 0; }
    8% { opacity: .9; }
    86% { opacity: .6; }
    100% { top: 100%; opacity: 0; }
}

@keyframes mf-ring-emerge {
    from { opacity: 0; transform: translate(-50%, 0) rotateX(71deg) scaleY(.34); }
    to { opacity: .8; transform: translate(-50%, 0) rotateX(71deg) scaleY(.54); }
}

@keyframes mf-ring-turn {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

@keyframes mf-ray-rise {
    from { height: 0; opacity: 0; }
    to { height: 180px; opacity: .65; }
}

@keyframes mf-plinth-lock {
    from { opacity: 0; transform: translateX(-50%) scaleX(.55); }
    to { opacity: .9; transform: translateX(-50%) scaleX(1); }
}

@keyframes mf-brand-reveal {
    from { opacity: 0; transform: translateY(11px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mf-progress-fill { to { transform: scaleX(1); } }

@media (max-width: 620px) {
    .mf-intro-register { inset: 14px; }
    .mf-intro-register i { width: 19px; height: 19px; }
    .mf-intro-stage {
        grid-template-rows: auto minmax(220px, 37vh) auto auto;
        width: calc(100% - 44px);
        min-height: min(690px, 90dvh);
    }
    .mf-intro-kicker,
    .mf-intro-footer { font-size: 7px; letter-spacing: .13em; }
    .mf-intro-kicker { gap: 8px; }
    .mf-intro-kicker span:last-child { text-align: right; }
    .mf-intro-artifact { width: clamp(174px, 45vw, 224px); }
    .mf-intro-ring { width: min(67vw, 310px); }
    .mf-intro-coordinate { font-size: 6px; }
    .mf-intro-coordinate-left { left: -1%; }
    .mf-intro-coordinate-right { right: -1%; }
    .mf-intro-wordmark { gap: .15em; font-size: clamp(19px, 5.5vw, 31px); letter-spacing: .1em; }
    .mf-intro-overline { font-size: 8px; letter-spacing: .22em; }
    .mf-intro-caption { font-size: 10px; }
    .mf-intro-footer { gap: 8px; }
}

@media (max-width: 360px) {
    .mf-intro-coordinate { display: none; }
    .mf-intro-kicker { font-size: 6px; }
    .mf-intro-sequence { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #mf-site-intro::after,
    .mf-intro-stage,
    .mf-intro-kicker,
    .mf-intro-footer,
    .mf-intro-artifact,
    .mf-intro-artifact *,
    .mf-intro-projection::before,
    .mf-intro-ring,
    .mf-intro-ray,
    .mf-intro-plinth,
    .mf-intro-coordinate,
    .mf-intro-copy,
    .mf-intro-progress i {
        animation: none !important;
    }

    .mf-intro-stage,
    .mf-intro-kicker,
    .mf-intro-footer,
    .mf-intro-artifact,
    .mf-intro-projection::before,
    .mf-intro-ring,
    .mf-intro-plinth,
    .mf-intro-coordinate,
    .mf-intro-copy {
        opacity: 1;
    }

    .mf-intro-artifact { transform: none; }
    .mf-wire-outer,
    .mf-wire-inner,
    .mf-wire-cross,
    .mf-wire-shield,
    .mf-wire-mark { stroke-dashoffset: 0; }
    .mf-wire-fill { opacity: .85; }
    .mf-node { opacity: .92; }
    .mf-intro-scan { display: none; }
    .mf-intro-progress i { transform: scaleX(1); }
    #mf-site-intro { transition-duration: 680ms; }
    #mf-site-intro.mf-intro-leaving { opacity: 1; visibility: visible; }
}