/* Bardin Gate transfer animation.
   Ported from the management console's login illustration so the website and the
   platform deck show the same device behaviour. Everything is scoped to
   .gate-flow and drives itself from CSS animations on a single cycle variable. */

.gate-flow {
    --gf-text: #f3f9fd;
    --gf-muted: #9aafc1;
    --gf-faint: #71879b;
    --gf-surface: rgba(10, 29, 45, .78);
    --gf-surface-strong: rgba(12, 34, 52, .94);
    --gf-border: rgba(113, 188, 220, .20);
    --gf-border-strong: rgba(0, 174, 239, .55);
    --gf-accent: #00aeef;
    --gf-accent-soft: rgba(0, 174, 239, .14);
    --gf-green: #00b26b;
    --gf-red: #ed1a3b;
    --gf-cycle: 10s;
    color: var(--gf-text);
}

.gate-flow {
    position: relative;
    z-index: 2;
    align-self: center;
    width: min(100%, 62rem);
    margin: 0 auto;
    --gf-layout: minmax(8rem, 1fr) minmax(5rem, .82fr) minmax(12rem, 1.35fr) minmax(5rem, .82fr) minmax(8rem, 1fr);
}

.gate-flow .demo-heading {
    position: relative;
    max-width: 39rem;
    margin: 0 auto clamp(1.55rem, 3vh, 2.25rem);
    text-align: center;
}

.gate-flow .demo-heading::after {
    content: '';
    position: absolute;
    top: calc(100% + .35rem);
    left: 50%;
    width: 1px;
    height: clamp(.65rem, 1.4vh, 1rem);
    background: linear-gradient(var(--gf-accent), transparent);
    opacity: .3;
}

.gate-flow .demo-heading > span {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .75rem;
    color: var(--gf-accent);
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.gate-flow .demo-heading > span::before, .gate-flow .demo-heading > span::after {
    content: '';
    width: 1.6rem;
    height: 1px;
    background: currentColor;
    opacity: .45;
}

.gate-flow .demo-heading h2 {
    margin: 0;
    color: var(--gf-text);
    font-size: clamp(1.6rem, 2.45vw, 2.65rem);
    line-height: 1.05;
    letter-spacing: -.045em;
    white-space: nowrap;
}

.gate-flow .demo-heading p {
    max-width: 35rem;
    margin: .65rem auto 0;
    color: var(--gf-muted);
    font-size: clamp(.82rem, .92vw, .96rem);
    line-height: 1.55;
}

.gate-flow .transfer-scene {
    position: relative;
    display: grid;
    grid-template-columns: var(--gf-layout);
    align-items: center;
    min-height: 18rem;
}

.gate-flow .transfer-scene::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 7%;
    right: 7%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(85, 233, 160, .34) 12%, rgba(19, 205, 233, .2) 50%, rgba(255, 85, 119, .28) 88%, transparent);
    box-shadow: 0 0 1.4rem rgba(19, 205, 233, .12);
    opacity: .55;
}

.gate-flow .domain-node {
    position: relative;
    justify-self: center;
    width: clamp(8rem, 11vw, 10.5rem);
    min-height: 10.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    padding: 1.1rem .7rem .85rem;
    border: 0;
    background: radial-gradient(circle, color-mix(in srgb, currentColor 7%, transparent), transparent 68%);
    box-shadow: none;
}

.gate-flow .domain-node::before {
    content: '';
    position: absolute;
    inset: .25rem;
    pointer-events: none;
    opacity: .56;
    filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 30%, transparent));
    background: linear-gradient(currentColor, currentColor) left top / 2.2rem 1px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 1px 2.2rem no-repeat,
    linear-gradient(currentColor, currentColor) right top / 2.2rem 1px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 1px 2.2rem no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 2.2rem 1px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 1px 2.2rem no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 2.2rem 1px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 1px 2.2rem no-repeat;
}



.gate-flow .domain-node::after {
    content: '';
    position: absolute;
    top: 50%;
    width: .18rem;
    height: 2.7rem;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    opacity: .58;
    box-shadow: 0 0 10px currentColor;
    transform: translateY(-50%);
}

.gate-flow .safe-domain {
    color: var(--gf-green);
}

.gate-flow .safe-domain::after {
    right: .25rem;
}

.gate-flow .unsafe-domain {
    color: var(--gf-red);
}

.gate-flow .unsafe-domain::after {
    left: .25rem;
}

.gate-flow .domain-node > svg {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: .15rem;
}

.gate-flow .domain-node strong {
    color: currentColor;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gate-flow .domain-status {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--gf-faint);
}

.gate-flow .safe-domain .domain-status {
    animation: safe-domain-online var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-domain .domain-status {
    animation: unsafe-domain-online var(--gf-cycle) linear infinite;
}

.gate-flow .bit-reservoir {
    display: grid;
    grid-template-columns: repeat(4, 1rem);
    grid-auto-rows: 1rem;
    align-content: start;
    gap: .24rem;
    height: 3.48rem;
    margin-top: .55rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .63rem;
    font-weight: 900;
}

.gate-flow .bit-reservoir span {
    width: 1rem;
    height: 1rem;
    display: grid;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: .24rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
    opacity: .7;
}

.gate-flow .unsafe-reservoir {
    color: var(--gf-green);
}

.gate-flow .transfer-lane {
    position: relative;
    align-self: center;
    height: 4rem;
    overflow: hidden;
}

.gate-flow .lane-rail {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    right: 0;
    height: 2px;
    opacity: .12;
}

.gate-flow .lane-rail::before, .gate-flow .lane-rail::after {
    content: '';
    position: absolute;
    top: 50%;
    width: .42rem;
    height: .42rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: var(--gf-bg);
    transform: translateY(-50%);
}

.gate-flow .lane-rail::before {
    left: 0;
}

.gate-flow .lane-rail::after {
    right: 0;
}

.gate-flow .safe-lane {
    color: var(--gf-green);
}

.gate-flow .unsafe-lane {
    color: var(--gf-red);
}

.gate-flow .safe-lane .lane-rail {
    background: linear-gradient(90deg, rgba(85, 233, 160, .2), var(--gf-green));
    animation: safe-lane-active var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-lane .lane-rail {
    background: linear-gradient(90deg, var(--gf-red), rgba(255, 85, 119, .2));
    animation: unsafe-lane-active var(--gf-cycle) linear infinite;
}

.gate-flow .packet-train {
    position: absolute;
    inset: 0;
}

.gate-flow .packet-train i {
    position: absolute;
    top: calc(50% - .675rem);
    left: 0;
    opacity: 0;
}

.gate-flow .packet-train i, .gate-flow .buffer-payload i {
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    color: currentColor;
    border: 1px solid currentColor;
    border-radius: .24rem;
    background: var(--gf-surface-strong);
    box-shadow: 0 0 14px color-mix(in srgb, currentColor 32%, transparent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .66rem;
    font-style: normal;
    font-weight: 950;
}

.gate-flow .unsafe-outbound {
    color: var(--gf-green);
}

.gate-flow .gate-system {
    position: relative;
    z-index: 3;
    justify-self: center;
    width: clamp(12rem, 15vw, 14.5rem);
    height: clamp(15rem, 19vw, 17.5rem);
    display: grid;
    place-items: center;
}

.gate-flow .cycle-clock {
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    opacity: 0;
    animation: transfer-cycle-clock var(--gf-cycle) linear infinite;
}

.gate-flow .gate-title {
    position: absolute;
    top: 0;
    display: grid;
    justify-items: center;
    gap: .2rem;
    color: var(--gf-accent);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.gate-flow .gate-title strong {
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .14em;
}

.gate-flow .gate-title small {
    color: var(--gf-muted);
    font-size: .5rem;
    font-weight: 750;
    letter-spacing: .1em;
}

.gate-flow .gate-halo {
    position: absolute;
    width: 85%;
    aspect-ratio: 1;
    border: 1px solid rgba(19, 205, 233, .14);
    border-radius: 50%;
    box-shadow: 0 0 0 1rem rgba(19, 205, 233, .025), 0 0 5rem rgba(19, 205, 233, .16);
}

.gate-flow .gate-halo::before, .gate-flow .gate-halo::after {
    content: '';
    position: absolute;
    inset: .9rem;
    border: 1px dashed rgba(19, 205, 233, .2);
    border-radius: 50%;
}

.gate-flow .gate-halo::after {
    inset: -.75rem;
    border-style: solid;
    opacity: .25;
}



.gate-flow .gate-rotor {
    position: relative;
    width: 66%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 2px solid var(--gf-accent);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, rgba(85, 233, 160, .24), transparent 28%),
    conic-gradient(from 225deg, rgba(85, 233, 160, .42) 0 24deg, transparent 24deg 318deg, rgba(19, 205, 233, .46) 318deg 360deg),
    linear-gradient(145deg, rgba(8, 42, 57, .98), rgba(4, 21, 34, .98));
    box-shadow: inset 0 0 2.2rem rgba(19, 205, 233, .18), 0 0 2rem rgba(19, 205, 233, .28);
    animation: gate-turn var(--gf-cycle) cubic-bezier(.65, 0, .35, 1) infinite;
}


.gate-flow .rotor-marker {
    position: absolute;
    width: .5rem;
    height: .5rem;
    border: 2px solid var(--gf-accent);
    border-radius: 50%;
    background: var(--gf-surface-strong);
    box-shadow: 0 0 10px var(--gf-accent);
}

.gate-flow .marker-a {
    top: .35rem;
    left: 50%;
    transform: translateX(-50%);
}

.gate-flow .marker-b {
    right: .65rem;
    bottom: 1.1rem;
}

.gate-flow .marker-c {
    bottom: 1.1rem;
    left: .65rem;
}

.gate-flow .gate-port {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: -.72rem;
    width: 1.55rem;
    height: 3.65rem;
    display: grid;
    place-items: center;
    color: var(--gf-green);
    transform: translateY(-50%);
    animation: gate-port-color var(--gf-cycle) linear infinite;
}

.gate-flow .gate-port::before,
.gate-flow .gate-port::after {
    content: '';
    position: absolute;
    left: .12rem;
    width: 1rem;
    height: .55rem;
    border-left: 2px solid currentColor;
    filter: drop-shadow(0 0 6px currentColor);
    opacity: .9;
}

.gate-flow .gate-port::before {
    top: 0;
    border-top: 2px solid currentColor;
    border-radius: .45rem 0 0;
}

.gate-flow .gate-port::after {
    bottom: 0;
    border-bottom: 2px solid currentColor;
    border-radius: 0 0 0 .45rem;
}

.gate-flow .door-aperture {
    position: absolute;
    z-index: 0;
    left: .18rem;
    width: 1.05rem;
    height: 1.45rem;
    border: 1px solid currentColor;
    border-radius: 45%;
    background: rgba(3, 14, 23, .96);
    box-shadow: inset 0 0 .9rem color-mix(in srgb, currentColor 22%, transparent),
    0 0 1.2rem color-mix(in srgb, currentColor 48%, transparent);
    animation: door-aperture-cycle var(--gf-cycle) linear infinite;
}


.gate-flow .door-leaf {
    position: absolute;
    z-index: 2;
    left: .18rem;
    width: 1.05rem;
    height: 1.42rem;
    overflow: hidden;
    border: 1px solid currentColor;
    background: linear-gradient(90deg, color-mix(in srgb, currentColor 18%, var(--gf-surface-strong)), var(--gf-surface-strong));
    box-shadow: inset 0 0 .65rem color-mix(in srgb, currentColor 17%, transparent),
    0 0 .65rem rgba(0, 0, 0, .28);
}

.gate-flow .door-leaf::before {
    content: '';
    position: absolute;
    inset: .25rem;
    border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
}

.gate-flow .door-leaf i {
    position: absolute;
    left: .19rem;
    right: .19rem;
    height: 1px;
    background: currentColor;
    opacity: .4;
}

.gate-flow .door-leaf-top {
    top: .39rem;
    border-radius: .38rem .38rem .12rem .12rem;
    transform-origin: bottom;
    animation: door-leaf-top-cycle var(--gf-cycle) cubic-bezier(.65, 0, .35, 1) infinite;
}

.gate-flow .door-leaf-top i {
    bottom: .22rem;
}

.gate-flow .door-leaf-bottom {
    bottom: .39rem;
    border-radius: .12rem .12rem .38rem .38rem;
    transform-origin: top;
    animation: door-leaf-bottom-cycle var(--gf-cycle) cubic-bezier(.65, 0, .35, 1) infinite;
}

.gate-flow .door-leaf-bottom i {
    top: .22rem;
}

.gate-flow .door-seal {
    position: absolute;
    z-index: 4;
    left: .36rem;
    width: .7rem;
    height: .7rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--gf-accent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--gf-accent) 18%, var(--gf-surface-strong));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gf-accent) 12%, transparent),
    0 0 1.2rem var(--gf-accent);
    color: var(--gf-accent);
    animation: door-seal-cycle var(--gf-cycle) linear infinite;
}

.gate-flow .door-seal svg {
    width: .45rem;
    height: .45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px currentColor);
    animation: gate-counter-turn var(--gf-cycle) cubic-bezier(.65, 0, .35, 1) infinite;
}

.gate-flow .gate-core {
    position: absolute;
    inset: 1rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(19, 205, 233, .3);
    border-radius: 50%;
    background: rgba(4, 19, 31, .72);
    animation: gate-counter-turn var(--gf-cycle) cubic-bezier(.65, 0, .35, 1) infinite;
}


.gate-flow .gate-core > .gate-brand-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.9rem;
    height: 4.9rem;
    color: var(--gf-accent);
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 .9rem color-mix(in srgb, var(--gf-accent) 16%, transparent));
    pointer-events: none;
}

.gate-flow .gate-brand-shield {
    fill: color-mix(in srgb, var(--gf-accent) 7%, var(--gf-surface-strong));
    stroke: color-mix(in srgb, var(--gf-accent) 44%, transparent);
    stroke-width: .38;
    stroke-linejoin: round;
}

.gate-flow .gate-brand-artwork {
    fill: currentColor;
    stroke: none;
    opacity: .34;
}



.gate-flow .buffer-payload {
    position: absolute;
    z-index: 1;
    inset: auto 0 .78rem;
    display: grid;
    grid-template-columns: repeat(4, 1rem);
    justify-content: center;
    gap: .2rem;
}

.gate-flow .buffer-payload i {
    width: 1rem;
    height: 1rem;
    font-size: .53rem;
}

.gate-flow .payload-out {
    color: var(--gf-green);
}




.gate-flow .payload-out i.corrupt-bit {
    position: relative;
}

.gate-flow .payload-out i.released-bit {
    opacity: 0 !important;
    transform: translateX(1rem) scale(.45) !important;
    transition: opacity .15s ease, transform .15s ease;
}

.gate-flow .corrupt-bit::after {
    content: '×';
    position: absolute;
    top: -.55rem;
    right: -.45rem;
    color: var(--gf-red);
    opacity: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .8rem;
    font-weight: 950;
    text-shadow: 0 0 8px var(--gf-red);
    animation: corrupt-bit-mark var(--gf-cycle) linear infinite;
}

.gate-flow .scan-beam {
    position: absolute;
    left: 11%;
    right: 11%;
    top: 28%;
    height: 2px;
    opacity: 0;
    background: var(--gf-accent);
    box-shadow: 0 0 12px var(--gf-accent), 0 0 1.5rem var(--gf-accent);
    animation: scan-data var(--gf-cycle) ease-in-out infinite;
}

.gate-flow .scan-label {
    position: absolute;
    top: 1rem;
    opacity: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .48rem;
    font-weight: 950;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.gate-flow .scan-label {
    color: var(--gf-accent);
    text-shadow: 0 0 10px var(--gf-accent);
    animation: scan-label-cycle var(--gf-cycle) linear infinite;
}

.gate-flow .gate-sealed-indicator {
    position: absolute;
    z-index: 2;
    top: 2.15rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .48rem;
    color: var(--gf-accent);
    border: 1px solid color-mix(in srgb, var(--gf-accent) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--gf-accent) 11%, var(--gf-surface-strong));
    box-shadow: 0 0 1rem color-mix(in srgb, var(--gf-accent) 24%, transparent);
    opacity: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .42rem;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    animation: gate-sealed-indicator-cycle var(--gf-cycle) linear infinite;
}

.gate-flow .gate-sealed-indicator svg {
    width: .62rem;
    height: .62rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gate-flow .gate-state {
    position: absolute;
    bottom: 0;
    width: 13.25rem;
    height: 3.15rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--gf-accent);
    border: 1px solid color-mix(in srgb, var(--gf-accent) 30%, transparent);
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gf-accent) 4%, var(--gf-surface-strong)),
    var(--gf-surface-strong) 32% 68%,
    color-mix(in srgb, var(--gf-accent) 4%, var(--gf-surface-strong)));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025),
    inset 0 0 1.4rem rgba(19, 205, 233, .045),
    0 12px 28px rgba(0, 0, 0, .13);
}

.gate-flow .gate-state::before {
    content: '';
    position: absolute;
    z-index: 2;
    left: .7rem;
    top: 50%;
    width: .18rem;
    height: 1.1rem;
    border-radius: 999px;
    background: var(--gf-accent);
    box-shadow: 0 0 10px var(--gf-accent);
    transform: translateY(-50%);
}

.gate-flow .gate-state::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: .82rem .45rem;
    border-top: 1px solid color-mix(in srgb, var(--gf-accent) 9%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--gf-accent) 9%, transparent);
    pointer-events: none;
}


.gate-flow .gate-state span {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .42rem;
    color: var(--gf-accent);
    opacity: 0;
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gate-flow .gate-state i {
    width: .34rem;
    height: .34rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.gate-flow .phase-safe {
    animation: phase-safe var(--gf-cycle) linear infinite;
}

.gate-flow .phase-isolated {
    animation: phase-isolated var(--gf-cycle) linear infinite;
}

.gate-flow .phase-switching-out {
    animation: phase-switching-out var(--gf-cycle) linear infinite;
}

.gate-flow .phase-unsafe {
    animation: phase-unsafe var(--gf-cycle) linear infinite;
}

.gate-flow .phase-switching-return {
    animation: phase-switching-return var(--gf-cycle) linear infinite;
}

.gate-flow .transfer-steps {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: var(--gf-layout);
    gap: 0;
    margin: clamp(.65rem, 1.5vh, 1rem) auto 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.gate-flow .transfer-steps::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--gf-green) 30%, transparent),
    color-mix(in srgb, var(--gf-accent) 25%, transparent),
    color-mix(in srgb, var(--gf-red) 30%, transparent));
}

.gate-flow .transfer-steps article {
    position: relative;
    z-index: 1;
    width: clamp(9rem, 100%, 11.5rem);
    min-height: 4.35rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-self: center;
    gap: .7rem;
    padding: .75rem .8rem;
    overflow: visible;
    color: var(--gf-step-color);
    border: 1px solid var(--gf-border);
    border-radius: .72rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--gf-step-color) 7%, var(--gf-surface)), var(--gf-surface));
    opacity: .62;
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.gate-flow .transfer-steps article::before {
    content: '';
    position: absolute;
    top: -1px;
    left: .8rem;
    width: 2.8rem;
    height: 2px;
    background: var(--gf-step-color);
    box-shadow: 0 0 10px var(--gf-step-color);
}

.gate-flow .transfer-steps article::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: clamp(.65rem, 1.5vh, 1rem);
    background: linear-gradient(transparent, var(--gf-step-color));
    box-shadow: 0 0 7px color-mix(in srgb, var(--gf-step-color) 48%, transparent);
    opacity: .48;
    transform: translateX(-50%);
}


.gate-flow .step-number {
    position: absolute;
    top: .38rem;
    right: .5rem;
    color: var(--gf-step-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .52rem;
    font-weight: 950;
    opacity: .55;
}

.gate-flow .step-icon {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 48%, transparent));
}

.gate-flow .step-copy {
    min-width: 0;
    display: grid;
    gap: .24rem;
}

.gate-flow .step-copy strong {
    color: var(--gf-text);
    font-size: .58rem;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gate-flow .step-copy small {
    overflow: hidden;
    color: var(--gf-step-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .43rem;
    letter-spacing: .055em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.gate-flow .step-collect {
    grid-column: 1;
    --gf-step-color: var(--gf-green);
    animation: collect-step var(--gf-cycle) linear infinite;
}

.gate-flow .step-inspect {
    grid-column: 3;
    width: clamp(10.5rem, 100%, 13.5rem) !important;
    --gf-step-color: var(--gf-accent);
    animation: inspect-step var(--gf-cycle) linear infinite;
}

.gate-flow .step-release {
    grid-column: 5;
    --gf-step-color: var(--gf-red);
    animation: release-step var(--gf-cycle) linear infinite;
}


@keyframes transfer-cycle-clock {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes gate-counter-turn {
    0%, 24% {
        transform: rotate(0deg);
    }
    26%, 43% {
        transform: rotate(-90deg);
    }
    58%, 82% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes gate-port-color {
    0%, 24%, 99%, 100% {
        color: var(--gf-green);
    }
    26%, 54%, 84%, 98% {
        color: var(--gf-accent);
    }
    58%, 82% {
        color: var(--gf-red);
    }
}

@keyframes door-leaf-top-cycle {
    0%, 21%, 99%, 100% {
        opacity: .68;
        transform: translateY(-.9rem) scaleY(.72);
    }
    25%, 56%, 83%, 96% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
    59%, 80% {
        opacity: .68;
        transform: translateY(-.9rem) scaleY(.72);
    }
}

@keyframes door-leaf-bottom-cycle {
    0%, 21%, 99%, 100% {
        opacity: .68;
        transform: translateY(.9rem) scaleY(.72);
    }
    25%, 56%, 83%, 96% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
    59%, 80% {
        opacity: .68;
        transform: translateY(.9rem) scaleY(.72);
    }
}

@keyframes door-aperture-cycle {
    0%, 21%, 59%, 80%, 99%, 100% {
        opacity: 1;
        filter: brightness(1.15);
    }
    25%, 56%, 83%, 96% {
        opacity: .16;
        filter: brightness(.7);
    }
}

@keyframes door-seal-cycle {
    0%, 22%, 58%, 81%, 98%, 100% {
        opacity: 0;
        transform: scale(.35) rotate(-90deg);
    }
    25%, 55%, 84%, 96% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes gate-sealed-indicator-cycle {
    0%, 26%, 45%, 100% {
        opacity: 0;
        transform: translateY(.25rem) scale(.92);
    }
    28%, 43% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes safe-domain-online {
    0%, 24%, 99%, 100% {
        background: var(--gf-green);
        box-shadow: 0 0 12px var(--gf-green);
        opacity: 1;
    }
    27%, 98% {
        background: var(--gf-faint);
        box-shadow: none;
        opacity: .35;
    }
}

@keyframes unsafe-domain-online {
    0%, 56%, 85%, 100% {
        background: var(--gf-faint);
        box-shadow: none;
        opacity: .35;
    }
    58%, 82% {
        background: var(--gf-red);
        box-shadow: 0 0 12px var(--gf-red);
        opacity: 1;
    }
}

@keyframes safe-lane-active {
    0%, 24%, 99%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 5px var(--gf-green));
    }
    27%, 98% {
        opacity: var(--gf-inactive);
        filter: none;
    }
}

@keyframes unsafe-lane-active {
    0%, 56%, 85%, 100% {
        opacity: var(--gf-inactive);
        filter: none;
    }
    58%, 82% {
        opacity: 1;
        filter: drop-shadow(0 0 5px var(--gf-red));
    }
}

@keyframes corrupt-bit-mark {
    0%, 29%, 43%, 100% {
        opacity: 0;
        transform: scale(.4);
    }
    31%, 39% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scan-data {
    0%, 26% {
        opacity: 0;
        top: 24%;
    }
    27% {
        opacity: 1;
        top: 24%;
    }
    31% {
        opacity: 1;
        top: 70%;
    }
    35% {
        opacity: 1;
        top: 24%;
    }
    40% {
        opacity: 1;
        top: 70%;
    }
    44%, 100% {
        opacity: 0;
        top: 70%;
    }
}

@keyframes scan-label-cycle {
    0%, 26%, 45%, 100% {
        opacity: 0;
    }
    28%, 35% {
        opacity: 1;
    }
}

@keyframes phase-safe {
    0%, 22%, 100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
    26%, 42% {
        opacity: .23;
        filter: blur(.45px);
        transform: translateY(-1rem) scale(.84);
    }
    46%, 79.99% {
        opacity: 0;
        filter: blur(1px);
        transform: translateY(-1.8rem) scale(.78);
    }
    80% {
        opacity: 0;
        filter: blur(1px);
        transform: translateY(1.8rem) scale(.78);
    }
    84%, 96% {
        opacity: .2;
        filter: blur(.45px);
        transform: translateY(1rem) scale(.84);
    }
}

@keyframes phase-isolated {
    0%, 22%, 100% {
        opacity: .2;
        filter: blur(.45px);
        transform: translateY(1rem) scale(.84);
    }
    26%, 42% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
    46%, 56% {
        opacity: .23;
        filter: blur(.45px);
        transform: translateY(-1rem) scale(.84);
    }
    60%, 95.99% {
        opacity: 0;
        filter: blur(1px);
        transform: translateY(-1.8rem) scale(.78);
    }
    96% {
        opacity: 0;
        filter: blur(1px);
        transform: translateY(1.8rem) scale(.78);
    }
}

@keyframes phase-switching-out {
    0%, 22% {
        opacity: 0;
        filter: blur(1px);
        transform: translateY(1.8rem) scale(.78);
    }
    26%, 42% {
        opacity: .2;
        filter: blur(.45px);
        transform: translateY(1rem) scale(.84);
    }
    46%, 56% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
    60%, 80% {
        opacity: .23;
        filter: blur(.45px);
        transform: translateY(-1rem) scale(.84);
    }
    84%, 100% {
        opacity: 0;
        filter: blur(1px);
        transform: translateY(-1.8rem) scale(.78);
    }
}

@keyframes phase-unsafe {
    0%, 42% {
        opacity: 0;
        filter: blur(1px);
        transform: translateY(1.8rem) scale(.78);
    }
    46%, 56% {
        opacity: .2;
        filter: blur(.45px);
        transform: translateY(1rem) scale(.84);
    }
    60%, 80% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
    84%, 96% {
        opacity: .23;
        filter: blur(.45px);
        transform: translateY(-1rem) scale(.84);
    }
    100% {
        opacity: 0;
        filter: blur(1px);
        transform: translateY(-1.8rem) scale(.78);
    }
}

@keyframes phase-switching-return {
    0%, 22%, 100% {
        opacity: .23;
        filter: blur(.45px);
        transform: translateY(-1rem) scale(.84);
    }
    26%, 55.99% {
        opacity: 0;
        filter: blur(1px);
        transform: translateY(-1.8rem) scale(.78);
    }
    56% {
        opacity: 0;
        filter: blur(1px);
        transform: translateY(1.8rem) scale(.78);
    }
    60%, 80% {
        opacity: .2;
        filter: blur(.45px);
        transform: translateY(1rem) scale(.84);
    }
    84%, 96% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes collect-step {
    0%, 24% {
        opacity: 1;
        border-color: rgba(85, 233, 160, .55);
        box-shadow: 0 0 1.4rem rgba(85, 233, 160, .09);
    }
    27%, 100% {
        opacity: .55;
        border-color: var(--gf-border);
        box-shadow: none;
    }
}

@keyframes inspect-step {
    0%, 23%, 45%, 100% {
        opacity: .55;
        border-color: var(--gf-border);
        box-shadow: none;
    }
    26%, 43% {
        opacity: 1;
        border-color: rgba(19, 205, 233, .58);
        box-shadow: 0 0 1.4rem rgba(19, 205, 233, .10);
    }
}

@keyframes release-step {
    0%, 56%, 84%, 100% {
        opacity: .55;
        border-color: var(--gf-border);
        box-shadow: none;
    }
    59%, 82% {
        opacity: 1;
        border-color: rgba(255, 85, 119, .48);
        box-shadow: 0 0 1.4rem rgba(255, 85, 119, .08);
    }
}


@media (max-width: 1450px) {
.gate-flow .login-shell {
        grid-template-columns: clamp(29rem, 36vw, 34rem) minmax(0, 1fr);
    }
.gate-flow .login-panel {
        padding-inline: clamp(2rem, 3.2vw, 3rem);
    }
.gate-flow .security-panel {
        padding-inline: clamp(1.5rem, 2.7vw, 3rem);
    }
.gate-flow {
        --gf-layout: minmax(7.4rem, 1fr) minmax(4rem, .7fr) minmax(11rem, 1.3fr) minmax(4rem, .7fr) minmax(7.4rem, 1fr);
    }
}

@media (min-width: 1121px) and (max-height: 820px) {
.gate-flow .login-panel {
        padding-block: 1.55rem;
    }
.gate-flow .brand-block {
        margin-bottom: 1.55rem;
    }
.gate-flow .login-intro {
        margin-bottom: 1.25rem;
    }
.gate-flow .login-intro h2 {
        font-size: 1.75rem;
    }
.gate-flow .login-intro p {
        margin-top: .45rem;
        font-size: .84rem;
    }
.gate-flow .field {
        height: 3rem;
        margin-bottom: .65rem;
    }
.gate-flow .submit-button {
        height: 3.1rem;
    }
.gate-flow .security-panel {
        padding-block: 1.6rem 1rem;
    }
.gate-flow .demo-heading {
        margin-bottom: 1.25rem;
    }
.gate-flow .demo-heading h2 {
        font-size: 1.8rem;
    }
.gate-flow .demo-heading p {
        margin-top: .45rem;
        font-size: .75rem;
    }
.gate-flow .transfer-scene {
        min-height: 15rem;
    }
.gate-flow .domain-node {
        min-height: 8.8rem;
    }
.gate-flow .gate-system {
        height: 14rem;
    }
.gate-flow .transfer-steps {
        margin-top: .55rem;
    }
}

@media (max-width: 1120px) {
.gate-flow .login-shell {
        height: auto;
        min-height: 100dvh;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        overflow: auto;
    }
.gate-flow .login-panel {
        grid-column: 1;
        grid-row: 1;
        min-height: 100dvh;
        border-right: 0;
        border-bottom: 1px solid var(--gf-border);
    }
.gate-flow .security-panel {
        grid-column: 1;
        grid-row: 2;
        min-height: 48rem;
    }
.gate-flow .page-footer {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (max-width: 760px) {
.gate-flow .login-panel {
        padding: 2rem 1.4rem;
    }
.gate-flow .brand-block {
        margin-bottom: 2.25rem;
    }
.gate-flow .brand-mark {
        width: 3.9rem;
        height: 3.9rem;
        border-radius: 1rem;
    }
.gate-flow .brand-copy h1 {
        font-size: 1.5rem;
    }
.gate-flow .brand-copy p {
        font-size: .94rem;
    }
.gate-flow .login-intro h2 {
        font-size: 1.85rem;
    }
.gate-flow .login-intro p {
        font-size: .9rem;
    }
.gate-flow .security-panel {
        min-height: 42rem;
        padding: 3.8rem 1rem 1.2rem;
    }
.gate-flow .theme-switch {
        top: 1rem;
        right: 1rem;
    }
.gate-flow .demo-heading {
        margin-bottom: 1.7rem;
    }
.gate-flow .demo-heading h2 {
        font-size: 1.65rem;
    }
.gate-flow .demo-heading p {
        max-width: 28rem;
        font-size: .76rem;
    }
.gate-flow {
        --gf-layout: minmax(5.5rem, 1fr) minmax(2.5rem, .55fr) minmax(8.5rem, 1.35fr) minmax(2.5rem, .55fr) minmax(5.5rem, 1fr);
    }
.gate-flow .transfer-scene {
        min-height: 15rem;
    }
.gate-flow .domain-node {
        width: 6.7rem;
        min-height: 8.5rem;
        padding-inline: .4rem;
    }
.gate-flow .domain-node strong {
        font-size: .63rem;
    }
.gate-flow .domain-node > svg {
        width: 1.4rem;
        height: 1.4rem;
    }
.gate-flow .gate-system {
        width: 9rem;
        height: 13rem;
    }
.gate-flow .gate-title {
        gap: .12rem;
    }
.gate-flow .gate-title strong {
        font-size: .58rem;
    }
.gate-flow .gate-title small {
        font-size: .42rem;
    }
.gate-flow .gate-state {
        width: 9.3rem;
    }
.gate-flow .gate-state span {
        font-size: .51rem;
    }
.gate-flow .gate-port {
        left: -.62rem;
        width: 1.55rem;
        height: 3.65rem;
        transform: translateY(-50%) scale(.82);
    }
.gate-flow .packet-train i {
        width: 1rem;
        height: 1rem;
        font-size: .52rem;
    }
.gate-flow .transfer-steps {
        margin-top: 1.2rem;
    }
.gate-flow .transfer-steps article {
        min-height: 3rem;
        gap: .4rem;
        padding: .55rem;
    }
}

@media (max-width: 520px) {
.gate-flow .login-panel {
        min-height: calc(100dvh - 3.5rem);
        justify-content: center;
    }
.gate-flow .security-panel {
        display: none;
    }
.gate-flow .page-footer {
        grid-row: 2;
        flex-direction: column;
        justify-content: center;
        gap: .3rem;
        min-height: 3.5rem;
        text-align: center;
    }
}

/* Motion policy.
   The still state is driven by a class rather than the media query directly, so
   a reader whose system asks for reduced motion still gets the diagram by
   default but can choose to watch the cycle. The script sets .motion-paused and
   renders the control; nothing ever autoplays against the preference. */

.gate-flow.motion-paused *,
.gate-flow.motion-paused *::before,
.gate-flow.motion-paused *::after {
    animation: none !important;
}

.gate-flow.motion-paused .gate-rotor {
    transform: rotate(0deg);
}

.gate-flow.motion-paused .door-leaf-top,
.gate-flow.motion-paused .door-leaf-bottom {
    height: 50%;
    opacity: 1;
}

.gate-flow.motion-paused .door-seal {
    opacity: 1;
    transform: none;
}

.gate-flow.motion-paused .packet-train i,
.gate-flow.motion-paused .scan-beam,
.gate-flow.motion-paused .scan-label,
.gate-flow.motion-paused .gate-sealed-indicator {
    opacity: 0;
}

.gate-flow.motion-paused .bit-reservoir span {
    opacity: .75;
    transform: none;
}

.gate-flow.motion-paused .buffer-payload i {
    opacity: 1;
    transform: none;
}

.gate-flow.motion-paused .buffer-payload i.corrupt-bit {
    color: var(--gf-red);
}

.gate-flow.motion-paused .transfer-steps article,
.gate-flow.motion-paused .domain-status {
    opacity: 1;
}

.gate-flow.motion-paused .gate-state span {
    opacity: 0;
}

.gate-flow.motion-paused .gate-state .phase-isolated {
    opacity: 1;
}

/* Play control, only rendered when the preference is set. */
.gate-flow .motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1.1rem auto 0;
    padding: .5rem .95rem;
    border: 1px solid var(--gf-border-strong);
    border-radius: 999px;
    background: var(--gf-surface);
    color: var(--gf-text);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.gate-flow .motion-toggle:hover {
    background: var(--gf-surface-strong);
    border-color: var(--gf-accent);
}

.gate-flow .motion-toggle:focus-visible {
    outline: 3px solid var(--gf-accent);
    outline-offset: 3px;
}

.gate-flow .motion-toggle::before {
    content: "";
    width: 0;
    height: 0;
    border-left: .55rem solid currentColor;
    border-top: .35rem solid transparent;
    border-bottom: .35rem solid transparent;
}

.gate-flow:not(.motion-paused) .motion-toggle::before {
    width: .5rem;
    height: .6rem;
    border: 0;
    background: currentColor;
    -webkit-mask: linear-gradient(#000 0 0) left / .16rem 100% no-repeat,
    linear-gradient(#000 0 0) right / .16rem 100% no-repeat;
    mask: linear-gradient(#000 0 0) left / .16rem 100% no-repeat,
    linear-gradient(#000 0 0) right / .16rem 100% no-repeat;
}

.gate-flow .motion-toggle-row {
    display: flex;
    justify-content: center;
}

@keyframes gate-turn {
    0%, 24% {
        transform: rotate(0deg);
    }
    26%, 43% {
        transform: rotate(90deg);
    }
    58%, 82% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* The scene needs about 38rem to keep five columns legible. Below that it
   scrolls inside its own box rather than forcing the page sideways, so the
   choreography stays intact on a phone. */
@media (max-width: 700px) {
    .gate-flow {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .gate-flow .transfer-scene {
        min-width: 34rem;
    }

    .gate-flow .transfer-steps {
        min-width: 34rem;
    }
}

/* Per-item travel animations. The console generates these with SCSS @for
   loops; this port expands them to plain CSS for indexes 1 to 10, which is
   the maximum payload the sampler produces. */

.gate-flow .safe-reservoir span:nth-child(1) {
    animation: safe-source-bit-1 var(--gf-cycle) linear infinite;
}

.gate-flow .safe-outbound i:nth-child(1) {
    animation: safe-flow-bit-1 var(--gf-cycle) linear infinite;
}

@keyframes safe-source-bit-1 {
    0%, 2% { opacity: .7; transform: scale(1); }
    2.7%, 98% { opacity: 0; transform: translateX(.45rem) scale(.5); }
    99%, 100% { opacity: .7; transform: scale(1); }
}

@keyframes safe-flow-bit-1 {
    0%, 2% { left: 0; opacity: 0; }
    2.25% { left: 0; opacity: 1; }
    3.95% { left: calc(100% - 1.35rem); opacity: 1; }
    4.2%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

.gate-flow .safe-reservoir span:nth-child(2) {
    animation: safe-source-bit-2 var(--gf-cycle) linear infinite;
}

.gate-flow .safe-outbound i:nth-child(2) {
    animation: safe-flow-bit-2 var(--gf-cycle) linear infinite;
}

@keyframes safe-source-bit-2 {
    0%, 4.2% { opacity: .7; transform: scale(1); }
    4.9%, 98% { opacity: 0; transform: translateX(.45rem) scale(.5); }
    99%, 100% { opacity: .7; transform: scale(1); }
}

@keyframes safe-flow-bit-2 {
    0%, 4.2% { left: 0; opacity: 0; }
    4.45% { left: 0; opacity: 1; }
    6.15% { left: calc(100% - 1.35rem); opacity: 1; }
    6.4%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

.gate-flow .safe-reservoir span:nth-child(3) {
    animation: safe-source-bit-3 var(--gf-cycle) linear infinite;
}

.gate-flow .safe-outbound i:nth-child(3) {
    animation: safe-flow-bit-3 var(--gf-cycle) linear infinite;
}

@keyframes safe-source-bit-3 {
    0%, 6.4% { opacity: .7; transform: scale(1); }
    7.1%, 98% { opacity: 0; transform: translateX(.45rem) scale(.5); }
    99%, 100% { opacity: .7; transform: scale(1); }
}

@keyframes safe-flow-bit-3 {
    0%, 6.4% { left: 0; opacity: 0; }
    6.65% { left: 0; opacity: 1; }
    8.35% { left: calc(100% - 1.35rem); opacity: 1; }
    8.6%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

.gate-flow .safe-reservoir span:nth-child(4) {
    animation: safe-source-bit-4 var(--gf-cycle) linear infinite;
}

.gate-flow .safe-outbound i:nth-child(4) {
    animation: safe-flow-bit-4 var(--gf-cycle) linear infinite;
}

@keyframes safe-source-bit-4 {
    0%, 8.6% { opacity: .7; transform: scale(1); }
    9.3%, 98% { opacity: 0; transform: translateX(.45rem) scale(.5); }
    99%, 100% { opacity: .7; transform: scale(1); }
}

@keyframes safe-flow-bit-4 {
    0%, 8.6% { left: 0; opacity: 0; }
    8.85% { left: 0; opacity: 1; }
    10.55% { left: calc(100% - 1.35rem); opacity: 1; }
    10.8%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

.gate-flow .safe-reservoir span:nth-child(5) {
    animation: safe-source-bit-5 var(--gf-cycle) linear infinite;
}

.gate-flow .safe-outbound i:nth-child(5) {
    animation: safe-flow-bit-5 var(--gf-cycle) linear infinite;
}

@keyframes safe-source-bit-5 {
    0%, 10.8% { opacity: .7; transform: scale(1); }
    11.5%, 98% { opacity: 0; transform: translateX(.45rem) scale(.5); }
    99%, 100% { opacity: .7; transform: scale(1); }
}

@keyframes safe-flow-bit-5 {
    0%, 10.8% { left: 0; opacity: 0; }
    11.05% { left: 0; opacity: 1; }
    12.75% { left: calc(100% - 1.35rem); opacity: 1; }
    13%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

.gate-flow .safe-reservoir span:nth-child(6) {
    animation: safe-source-bit-6 var(--gf-cycle) linear infinite;
}

.gate-flow .safe-outbound i:nth-child(6) {
    animation: safe-flow-bit-6 var(--gf-cycle) linear infinite;
}

@keyframes safe-source-bit-6 {
    0%, 13% { opacity: .7; transform: scale(1); }
    13.7%, 98% { opacity: 0; transform: translateX(.45rem) scale(.5); }
    99%, 100% { opacity: .7; transform: scale(1); }
}

@keyframes safe-flow-bit-6 {
    0%, 13% { left: 0; opacity: 0; }
    13.25% { left: 0; opacity: 1; }
    14.95% { left: calc(100% - 1.35rem); opacity: 1; }
    15.2%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

.gate-flow .safe-reservoir span:nth-child(7) {
    animation: safe-source-bit-7 var(--gf-cycle) linear infinite;
}

.gate-flow .safe-outbound i:nth-child(7) {
    animation: safe-flow-bit-7 var(--gf-cycle) linear infinite;
}

@keyframes safe-source-bit-7 {
    0%, 15.2% { opacity: .7; transform: scale(1); }
    15.9%, 98% { opacity: 0; transform: translateX(.45rem) scale(.5); }
    99%, 100% { opacity: .7; transform: scale(1); }
}

@keyframes safe-flow-bit-7 {
    0%, 15.2% { left: 0; opacity: 0; }
    15.45% { left: 0; opacity: 1; }
    17.15% { left: calc(100% - 1.35rem); opacity: 1; }
    17.4%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

.gate-flow .safe-reservoir span:nth-child(8) {
    animation: safe-source-bit-8 var(--gf-cycle) linear infinite;
}

.gate-flow .safe-outbound i:nth-child(8) {
    animation: safe-flow-bit-8 var(--gf-cycle) linear infinite;
}

@keyframes safe-source-bit-8 {
    0%, 17.4% { opacity: .7; transform: scale(1); }
    18.1%, 98% { opacity: 0; transform: translateX(.45rem) scale(.5); }
    99%, 100% { opacity: .7; transform: scale(1); }
}

@keyframes safe-flow-bit-8 {
    0%, 17.4% { left: 0; opacity: 0; }
    17.65% { left: 0; opacity: 1; }
    19.35% { left: calc(100% - 1.35rem); opacity: 1; }
    19.6%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

.gate-flow .safe-reservoir span:nth-child(9) {
    animation: safe-source-bit-9 var(--gf-cycle) linear infinite;
}

.gate-flow .safe-outbound i:nth-child(9) {
    animation: safe-flow-bit-9 var(--gf-cycle) linear infinite;
}

@keyframes safe-source-bit-9 {
    0%, 19.6% { opacity: .7; transform: scale(1); }
    20.3%, 98% { opacity: 0; transform: translateX(.45rem) scale(.5); }
    99%, 100% { opacity: .7; transform: scale(1); }
}

@keyframes safe-flow-bit-9 {
    0%, 19.6% { left: 0; opacity: 0; }
    19.85% { left: 0; opacity: 1; }
    21.55% { left: calc(100% - 1.35rem); opacity: 1; }
    21.8%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

.gate-flow .safe-reservoir span:nth-child(10) {
    animation: safe-source-bit-10 var(--gf-cycle) linear infinite;
}

.gate-flow .safe-outbound i:nth-child(10) {
    animation: safe-flow-bit-10 var(--gf-cycle) linear infinite;
}

@keyframes safe-source-bit-10 {
    0%, 21.8% { opacity: .7; transform: scale(1); }
    22.5%, 98% { opacity: 0; transform: translateX(.45rem) scale(.5); }
    99%, 100% { opacity: .7; transform: scale(1); }
}

@keyframes safe-flow-bit-10 {
    0%, 21.8% { left: 0; opacity: 0; }
    22.05% { left: 0; opacity: 1; }
    23.75% { left: calc(100% - 1.35rem); opacity: 1; }
    24%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

.gate-flow .payload-out i:nth-child(1):not(.corrupt-bit) {
    animation: buffered-bit-1 var(--gf-cycle) linear infinite;
}

.gate-flow .payload-out i:nth-child(1).corrupt-bit {
    animation: corrupt-bit-cycle-1 var(--gf-cycle) ease-in-out infinite;
}

@keyframes buffered-bit-1 {
    0%, 3.95% { opacity: 0; transform: scale(.35); }
    4.2%, 98% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.35); }
}

@keyframes corrupt-bit-cycle-1 {
    0%, 3.95% { color: var(--gf-green); opacity: 0; transform: scale(.25); }
    4.2%, 27% { color: var(--gf-green); opacity: 1; transform: scale(1); }
    30% {
        color: var(--gf-red);
        opacity: 1;
        transform: scale(1.15) translateX(-1px);
        box-shadow: 0 0 14px color-mix(in srgb, var(--gf-red) 65%, transparent);
    }
    33% { color: var(--gf-red); opacity: 1; transform: scale(1.15) translateX(2px); }
    36% { color: var(--gf-red); opacity: 1; transform: scale(1.1) translateX(-2px); }
    43%, 100% {
        color: var(--gf-red);
        opacity: 0;
        transform: translateY(-2.2rem) rotate(15deg) scale(.2);
        box-shadow: none;
    }
}

.gate-flow .payload-out i:nth-child(2):not(.corrupt-bit) {
    animation: buffered-bit-2 var(--gf-cycle) linear infinite;
}

.gate-flow .payload-out i:nth-child(2).corrupt-bit {
    animation: corrupt-bit-cycle-2 var(--gf-cycle) ease-in-out infinite;
}

@keyframes buffered-bit-2 {
    0%, 6.15% { opacity: 0; transform: scale(.35); }
    6.4%, 98% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.35); }
}

@keyframes corrupt-bit-cycle-2 {
    0%, 6.15% { color: var(--gf-green); opacity: 0; transform: scale(.25); }
    6.4%, 27% { color: var(--gf-green); opacity: 1; transform: scale(1); }
    30% {
        color: var(--gf-red);
        opacity: 1;
        transform: scale(1.15) translateX(-1px);
        box-shadow: 0 0 14px color-mix(in srgb, var(--gf-red) 65%, transparent);
    }
    33% { color: var(--gf-red); opacity: 1; transform: scale(1.15) translateX(2px); }
    36% { color: var(--gf-red); opacity: 1; transform: scale(1.1) translateX(-2px); }
    43%, 100% {
        color: var(--gf-red);
        opacity: 0;
        transform: translateY(-2.2rem) rotate(15deg) scale(.2);
        box-shadow: none;
    }
}

.gate-flow .payload-out i:nth-child(3):not(.corrupt-bit) {
    animation: buffered-bit-3 var(--gf-cycle) linear infinite;
}

.gate-flow .payload-out i:nth-child(3).corrupt-bit {
    animation: corrupt-bit-cycle-3 var(--gf-cycle) ease-in-out infinite;
}

@keyframes buffered-bit-3 {
    0%, 8.35% { opacity: 0; transform: scale(.35); }
    8.6%, 98% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.35); }
}

@keyframes corrupt-bit-cycle-3 {
    0%, 8.35% { color: var(--gf-green); opacity: 0; transform: scale(.25); }
    8.6%, 27% { color: var(--gf-green); opacity: 1; transform: scale(1); }
    30% {
        color: var(--gf-red);
        opacity: 1;
        transform: scale(1.15) translateX(-1px);
        box-shadow: 0 0 14px color-mix(in srgb, var(--gf-red) 65%, transparent);
    }
    33% { color: var(--gf-red); opacity: 1; transform: scale(1.15) translateX(2px); }
    36% { color: var(--gf-red); opacity: 1; transform: scale(1.1) translateX(-2px); }
    43%, 100% {
        color: var(--gf-red);
        opacity: 0;
        transform: translateY(-2.2rem) rotate(15deg) scale(.2);
        box-shadow: none;
    }
}

.gate-flow .payload-out i:nth-child(4):not(.corrupt-bit) {
    animation: buffered-bit-4 var(--gf-cycle) linear infinite;
}

.gate-flow .payload-out i:nth-child(4).corrupt-bit {
    animation: corrupt-bit-cycle-4 var(--gf-cycle) ease-in-out infinite;
}

@keyframes buffered-bit-4 {
    0%, 10.55% { opacity: 0; transform: scale(.35); }
    10.8%, 98% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.35); }
}

@keyframes corrupt-bit-cycle-4 {
    0%, 10.55% { color: var(--gf-green); opacity: 0; transform: scale(.25); }
    10.8%, 27% { color: var(--gf-green); opacity: 1; transform: scale(1); }
    30% {
        color: var(--gf-red);
        opacity: 1;
        transform: scale(1.15) translateX(-1px);
        box-shadow: 0 0 14px color-mix(in srgb, var(--gf-red) 65%, transparent);
    }
    33% { color: var(--gf-red); opacity: 1; transform: scale(1.15) translateX(2px); }
    36% { color: var(--gf-red); opacity: 1; transform: scale(1.1) translateX(-2px); }
    43%, 100% {
        color: var(--gf-red);
        opacity: 0;
        transform: translateY(-2.2rem) rotate(15deg) scale(.2);
        box-shadow: none;
    }
}

.gate-flow .payload-out i:nth-child(5):not(.corrupt-bit) {
    animation: buffered-bit-5 var(--gf-cycle) linear infinite;
}

.gate-flow .payload-out i:nth-child(5).corrupt-bit {
    animation: corrupt-bit-cycle-5 var(--gf-cycle) ease-in-out infinite;
}

@keyframes buffered-bit-5 {
    0%, 12.75% { opacity: 0; transform: scale(.35); }
    13%, 98% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.35); }
}

@keyframes corrupt-bit-cycle-5 {
    0%, 12.75% { color: var(--gf-green); opacity: 0; transform: scale(.25); }
    13%, 27% { color: var(--gf-green); opacity: 1; transform: scale(1); }
    30% {
        color: var(--gf-red);
        opacity: 1;
        transform: scale(1.15) translateX(-1px);
        box-shadow: 0 0 14px color-mix(in srgb, var(--gf-red) 65%, transparent);
    }
    33% { color: var(--gf-red); opacity: 1; transform: scale(1.15) translateX(2px); }
    36% { color: var(--gf-red); opacity: 1; transform: scale(1.1) translateX(-2px); }
    43%, 100% {
        color: var(--gf-red);
        opacity: 0;
        transform: translateY(-2.2rem) rotate(15deg) scale(.2);
        box-shadow: none;
    }
}

.gate-flow .payload-out i:nth-child(6):not(.corrupt-bit) {
    animation: buffered-bit-6 var(--gf-cycle) linear infinite;
}

.gate-flow .payload-out i:nth-child(6).corrupt-bit {
    animation: corrupt-bit-cycle-6 var(--gf-cycle) ease-in-out infinite;
}

@keyframes buffered-bit-6 {
    0%, 14.95% { opacity: 0; transform: scale(.35); }
    15.2%, 98% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.35); }
}

@keyframes corrupt-bit-cycle-6 {
    0%, 14.95% { color: var(--gf-green); opacity: 0; transform: scale(.25); }
    15.2%, 27% { color: var(--gf-green); opacity: 1; transform: scale(1); }
    30% {
        color: var(--gf-red);
        opacity: 1;
        transform: scale(1.15) translateX(-1px);
        box-shadow: 0 0 14px color-mix(in srgb, var(--gf-red) 65%, transparent);
    }
    33% { color: var(--gf-red); opacity: 1; transform: scale(1.15) translateX(2px); }
    36% { color: var(--gf-red); opacity: 1; transform: scale(1.1) translateX(-2px); }
    43%, 100% {
        color: var(--gf-red);
        opacity: 0;
        transform: translateY(-2.2rem) rotate(15deg) scale(.2);
        box-shadow: none;
    }
}

.gate-flow .payload-out i:nth-child(7):not(.corrupt-bit) {
    animation: buffered-bit-7 var(--gf-cycle) linear infinite;
}

.gate-flow .payload-out i:nth-child(7).corrupt-bit {
    animation: corrupt-bit-cycle-7 var(--gf-cycle) ease-in-out infinite;
}

@keyframes buffered-bit-7 {
    0%, 17.15% { opacity: 0; transform: scale(.35); }
    17.4%, 98% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.35); }
}

@keyframes corrupt-bit-cycle-7 {
    0%, 17.15% { color: var(--gf-green); opacity: 0; transform: scale(.25); }
    17.4%, 27% { color: var(--gf-green); opacity: 1; transform: scale(1); }
    30% {
        color: var(--gf-red);
        opacity: 1;
        transform: scale(1.15) translateX(-1px);
        box-shadow: 0 0 14px color-mix(in srgb, var(--gf-red) 65%, transparent);
    }
    33% { color: var(--gf-red); opacity: 1; transform: scale(1.15) translateX(2px); }
    36% { color: var(--gf-red); opacity: 1; transform: scale(1.1) translateX(-2px); }
    43%, 100% {
        color: var(--gf-red);
        opacity: 0;
        transform: translateY(-2.2rem) rotate(15deg) scale(.2);
        box-shadow: none;
    }
}

.gate-flow .payload-out i:nth-child(8):not(.corrupt-bit) {
    animation: buffered-bit-8 var(--gf-cycle) linear infinite;
}

.gate-flow .payload-out i:nth-child(8).corrupt-bit {
    animation: corrupt-bit-cycle-8 var(--gf-cycle) ease-in-out infinite;
}

@keyframes buffered-bit-8 {
    0%, 19.35% { opacity: 0; transform: scale(.35); }
    19.6%, 98% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.35); }
}

@keyframes corrupt-bit-cycle-8 {
    0%, 19.35% { color: var(--gf-green); opacity: 0; transform: scale(.25); }
    19.6%, 27% { color: var(--gf-green); opacity: 1; transform: scale(1); }
    30% {
        color: var(--gf-red);
        opacity: 1;
        transform: scale(1.15) translateX(-1px);
        box-shadow: 0 0 14px color-mix(in srgb, var(--gf-red) 65%, transparent);
    }
    33% { color: var(--gf-red); opacity: 1; transform: scale(1.15) translateX(2px); }
    36% { color: var(--gf-red); opacity: 1; transform: scale(1.1) translateX(-2px); }
    43%, 100% {
        color: var(--gf-red);
        opacity: 0;
        transform: translateY(-2.2rem) rotate(15deg) scale(.2);
        box-shadow: none;
    }
}

.gate-flow .payload-out i:nth-child(9):not(.corrupt-bit) {
    animation: buffered-bit-9 var(--gf-cycle) linear infinite;
}

.gate-flow .payload-out i:nth-child(9).corrupt-bit {
    animation: corrupt-bit-cycle-9 var(--gf-cycle) ease-in-out infinite;
}

@keyframes buffered-bit-9 {
    0%, 21.55% { opacity: 0; transform: scale(.35); }
    21.8%, 98% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.35); }
}

@keyframes corrupt-bit-cycle-9 {
    0%, 21.55% { color: var(--gf-green); opacity: 0; transform: scale(.25); }
    21.8%, 27% { color: var(--gf-green); opacity: 1; transform: scale(1); }
    30% {
        color: var(--gf-red);
        opacity: 1;
        transform: scale(1.15) translateX(-1px);
        box-shadow: 0 0 14px color-mix(in srgb, var(--gf-red) 65%, transparent);
    }
    33% { color: var(--gf-red); opacity: 1; transform: scale(1.15) translateX(2px); }
    36% { color: var(--gf-red); opacity: 1; transform: scale(1.1) translateX(-2px); }
    43%, 100% {
        color: var(--gf-red);
        opacity: 0;
        transform: translateY(-2.2rem) rotate(15deg) scale(.2);
        box-shadow: none;
    }
}

.gate-flow .payload-out i:nth-child(10):not(.corrupt-bit) {
    animation: buffered-bit-10 var(--gf-cycle) linear infinite;
}

.gate-flow .payload-out i:nth-child(10).corrupt-bit {
    animation: corrupt-bit-cycle-10 var(--gf-cycle) ease-in-out infinite;
}

@keyframes buffered-bit-10 {
    0%, 23.75% { opacity: 0; transform: scale(.35); }
    24%, 98% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.35); }
}

@keyframes corrupt-bit-cycle-10 {
    0%, 23.75% { color: var(--gf-green); opacity: 0; transform: scale(.25); }
    24%, 27% { color: var(--gf-green); opacity: 1; transform: scale(1); }
    30% {
        color: var(--gf-red);
        opacity: 1;
        transform: scale(1.15) translateX(-1px);
        box-shadow: 0 0 14px color-mix(in srgb, var(--gf-red) 65%, transparent);
    }
    33% { color: var(--gf-red); opacity: 1; transform: scale(1.15) translateX(2px); }
    36% { color: var(--gf-red); opacity: 1; transform: scale(1.1) translateX(-2px); }
    43%, 100% {
        color: var(--gf-red);
        opacity: 0;
        transform: translateY(-2.2rem) rotate(15deg) scale(.2);
        box-shadow: none;
    }
}

.gate-flow .unsafe-outbound i:nth-child(1) {
    animation: verified-flow-bit-1 var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-reservoir span:nth-child(1) {
    animation: unsafe-target-bit-1 var(--gf-cycle) linear infinite;
}

@keyframes verified-flow-bit-1 {
    0%, 59% { left: 0; opacity: 0; }
    59.25% { left: 0; opacity: 1; }
    60.95% { left: calc(100% - 1.35rem); opacity: 1; }
    61.2%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

@keyframes unsafe-target-bit-1 {
    0%, 61% { opacity: 0; transform: translateX(-.45rem) scale(.5); }
    61.2%, 98% { opacity: .86; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.5); }
}

.gate-flow .unsafe-outbound i:nth-child(2) {
    animation: verified-flow-bit-2 var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-reservoir span:nth-child(2) {
    animation: unsafe-target-bit-2 var(--gf-cycle) linear infinite;
}

@keyframes verified-flow-bit-2 {
    0%, 61.2% { left: 0; opacity: 0; }
    61.45% { left: 0; opacity: 1; }
    63.15% { left: calc(100% - 1.35rem); opacity: 1; }
    63.4%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

@keyframes unsafe-target-bit-2 {
    0%, 63.2% { opacity: 0; transform: translateX(-.45rem) scale(.5); }
    63.4%, 98% { opacity: .86; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.5); }
}

.gate-flow .unsafe-outbound i:nth-child(3) {
    animation: verified-flow-bit-3 var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-reservoir span:nth-child(3) {
    animation: unsafe-target-bit-3 var(--gf-cycle) linear infinite;
}

@keyframes verified-flow-bit-3 {
    0%, 63.4% { left: 0; opacity: 0; }
    63.65% { left: 0; opacity: 1; }
    65.35% { left: calc(100% - 1.35rem); opacity: 1; }
    65.6%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

@keyframes unsafe-target-bit-3 {
    0%, 65.4% { opacity: 0; transform: translateX(-.45rem) scale(.5); }
    65.6%, 98% { opacity: .86; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.5); }
}

.gate-flow .unsafe-outbound i:nth-child(4) {
    animation: verified-flow-bit-4 var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-reservoir span:nth-child(4) {
    animation: unsafe-target-bit-4 var(--gf-cycle) linear infinite;
}

@keyframes verified-flow-bit-4 {
    0%, 65.6% { left: 0; opacity: 0; }
    65.85% { left: 0; opacity: 1; }
    67.55% { left: calc(100% - 1.35rem); opacity: 1; }
    67.8%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

@keyframes unsafe-target-bit-4 {
    0%, 67.6% { opacity: 0; transform: translateX(-.45rem) scale(.5); }
    67.8%, 98% { opacity: .86; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.5); }
}

.gate-flow .unsafe-outbound i:nth-child(5) {
    animation: verified-flow-bit-5 var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-reservoir span:nth-child(5) {
    animation: unsafe-target-bit-5 var(--gf-cycle) linear infinite;
}

@keyframes verified-flow-bit-5 {
    0%, 67.8% { left: 0; opacity: 0; }
    68.05% { left: 0; opacity: 1; }
    69.75% { left: calc(100% - 1.35rem); opacity: 1; }
    70%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

@keyframes unsafe-target-bit-5 {
    0%, 69.8% { opacity: 0; transform: translateX(-.45rem) scale(.5); }
    70%, 98% { opacity: .86; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.5); }
}

.gate-flow .unsafe-outbound i:nth-child(6) {
    animation: verified-flow-bit-6 var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-reservoir span:nth-child(6) {
    animation: unsafe-target-bit-6 var(--gf-cycle) linear infinite;
}

@keyframes verified-flow-bit-6 {
    0%, 70% { left: 0; opacity: 0; }
    70.25% { left: 0; opacity: 1; }
    71.95% { left: calc(100% - 1.35rem); opacity: 1; }
    72.2%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

@keyframes unsafe-target-bit-6 {
    0%, 72% { opacity: 0; transform: translateX(-.45rem) scale(.5); }
    72.2%, 98% { opacity: .86; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.5); }
}

.gate-flow .unsafe-outbound i:nth-child(7) {
    animation: verified-flow-bit-7 var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-reservoir span:nth-child(7) {
    animation: unsafe-target-bit-7 var(--gf-cycle) linear infinite;
}

@keyframes verified-flow-bit-7 {
    0%, 72.2% { left: 0; opacity: 0; }
    72.45% { left: 0; opacity: 1; }
    74.15% { left: calc(100% - 1.35rem); opacity: 1; }
    74.4%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

@keyframes unsafe-target-bit-7 {
    0%, 74.2% { opacity: 0; transform: translateX(-.45rem) scale(.5); }
    74.4%, 98% { opacity: .86; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.5); }
}

.gate-flow .unsafe-outbound i:nth-child(8) {
    animation: verified-flow-bit-8 var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-reservoir span:nth-child(8) {
    animation: unsafe-target-bit-8 var(--gf-cycle) linear infinite;
}

@keyframes verified-flow-bit-8 {
    0%, 74.4% { left: 0; opacity: 0; }
    74.65% { left: 0; opacity: 1; }
    76.35% { left: calc(100% - 1.35rem); opacity: 1; }
    76.6%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

@keyframes unsafe-target-bit-8 {
    0%, 76.4% { opacity: 0; transform: translateX(-.45rem) scale(.5); }
    76.6%, 98% { opacity: .86; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.5); }
}

.gate-flow .unsafe-outbound i:nth-child(9) {
    animation: verified-flow-bit-9 var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-reservoir span:nth-child(9) {
    animation: unsafe-target-bit-9 var(--gf-cycle) linear infinite;
}

@keyframes verified-flow-bit-9 {
    0%, 76.6% { left: 0; opacity: 0; }
    76.85% { left: 0; opacity: 1; }
    78.55% { left: calc(100% - 1.35rem); opacity: 1; }
    78.8%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

@keyframes unsafe-target-bit-9 {
    0%, 78.6% { opacity: 0; transform: translateX(-.45rem) scale(.5); }
    78.8%, 98% { opacity: .86; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.5); }
}

.gate-flow .unsafe-outbound i:nth-child(10) {
    animation: verified-flow-bit-10 var(--gf-cycle) linear infinite;
}

.gate-flow .unsafe-reservoir span:nth-child(10) {
    animation: unsafe-target-bit-10 var(--gf-cycle) linear infinite;
}

@keyframes verified-flow-bit-10 {
    0%, 78.8% { left: 0; opacity: 0; }
    79.05% { left: 0; opacity: 1; }
    80.75% { left: calc(100% - 1.35rem); opacity: 1; }
    81%, 100% { left: calc(100% - 1.35rem); opacity: 0; }
}

@keyframes unsafe-target-bit-10 {
    0%, 80.8% { opacity: 0; transform: translateX(-.45rem) scale(.5); }
    81%, 98% { opacity: .86; transform: scale(1); }
    99%, 100% { opacity: 0; transform: scale(.5); }
}

/* ============================================================
   Light theme
   The console illustration is dark-only; the website is not. These overrides
   repaint the scene for the light surface instead of leaving white text on a
   pale ground. The presentation decks are always dark and never match here.
   ============================================================ */

body.light .gate-flow,
:where(html[data-theme="light"]) body .gate-flow {
    --gf-text: #173358;
    --gf-muted: #46617c;
    --gf-faint: #4a627a;
    --gf-surface: rgba(255, 255, 255, .82);
    --gf-surface-strong: rgba(255, 255, 255, .96);
    --gf-border: rgba(23, 51, 88, .20);
    --gf-border-strong: rgba(0, 174, 239, .52);
    --gf-accent-soft: rgba(0, 174, 239, .10);

    /* These three drive label text as well as currentColor graphics. The
       brandbook values are tuned for a dark ground and fall to roughly 2:1 on
       the off-white surface, so light mode uses darker shades of the same hues
       and keeps the pure brand colours for fills and glows. */
    --gf-accent: #0b6280;
    --gf-green: #056343;
    --gf-red: #a5122b;
}

body.light .gate-flow .domain-node,
:where(html[data-theme="light"]) body .gate-flow .domain-node {
    background: radial-gradient(circle, rgba(23, 51, 88, .05), transparent 68%);
    box-shadow: none;
}

body.light .gate-flow .domain-node::before,
:where(html[data-theme="light"]) body .gate-flow .domain-node::before {
    opacity: .42;
    filter: none;
}

body.light .gate-flow .gate-halo,
:where(html[data-theme="light"]) body .gate-flow .gate-halo {
    border-color: rgba(0, 174, 239, .20);
    box-shadow: 0 0 0 1rem rgba(0, 174, 239, .02), 0 0 3.2rem rgba(0, 174, 239, .10);
}

body.light .gate-flow .gate-halo::before,
body.light .gate-flow .gate-halo::after,
:where(html[data-theme="light"]) body .gate-flow .gate-halo::before,
:where(html[data-theme="light"]) body .gate-flow .gate-halo::after {
    border-color: rgba(0, 174, 239, .24);
}

body.light .gate-flow .gate-rotor,
:where(html[data-theme="light"]) body .gate-flow .gate-rotor {
    background: radial-gradient(circle at 38% 32%, rgba(0, 178, 107, .26), transparent 28%),
    conic-gradient(from 225deg, rgba(0, 178, 107, .32) 0 24deg, transparent 24deg 318deg, rgba(0, 174, 239, .34) 318deg 360deg),
    linear-gradient(145deg, #f7fcfd, #dcecf1);
    border-color: #0d86a6;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9),
    inset 0 0 2rem rgba(0, 174, 239, .12),
    0 0 0 .45rem rgba(0, 174, 239, .06),
    0 14px 32px rgba(23, 51, 88, .16);
}

body.light .gate-flow .door-aperture,
:where(html[data-theme="light"]) body .gate-flow .door-aperture {
    background: rgba(236, 247, 250, .98);
}

body.light .gate-flow .gate-core,
:where(html[data-theme="light"]) body .gate-flow .gate-core {
    border-color: rgba(0, 174, 239, .38);
    background: rgba(249, 253, 254, .96);
    box-shadow: inset 0 0 1.25rem rgba(0, 174, 239, .08);
}

body.light .gate-flow .gate-state,
:where(html[data-theme="light"]) body .gate-flow .gate-state {
    border-color: rgba(0, 174, 239, .28);
    background: linear-gradient(180deg, rgba(235, 247, 250, .9), rgba(255, 255, 255, .98) 32% 68%, rgba(235, 247, 250, .9));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 10px 24px rgba(23, 51, 88, .13);
}

body.light .gate-flow .transfer-steps article,
:where(html[data-theme="light"]) body .gate-flow .transfer-steps article {
    border-color: rgba(23, 51, 88, .20);
    background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .82));
    box-shadow: 0 8px 22px rgba(23, 51, 88, .08);
}

body.light .gate-flow .bit-reservoir span,
body.light .gate-flow .packet-train i,
body.light .gate-flow .buffer-payload i,
:where(html[data-theme="light"]) body .gate-flow .bit-reservoir span,
:where(html[data-theme="light"]) body .gate-flow .packet-train i,
:where(html[data-theme="light"]) body .gate-flow .buffer-payload i {
    background: rgba(255, 255, 255, .9);
}

body.light .gate-flow .gate-title small,
body.light .gate-flow .step-copy small,
:where(html[data-theme="light"]) body .gate-flow .gate-title small,
:where(html[data-theme="light"]) body .gate-flow .step-copy small {
    color: var(--gf-faint);
}