/**
 * SpendSnapper - Hero animation
 *
 * Generated by build/website/build-flow.py. Edit the script and run it again, not this file.
 * Each moving piece is a full-size layer animated with transform and opacity only.
 */

.flow-stage {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.flow-stage-portrait {
    max-width: 400px;
}

.flow-stage .flow {
    margin: 0;
    max-width: none;
}

.flow-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.flow-move,
.flow-lit {
    opacity: 0;
}

.flow-glow {
    fill: #fff;
}

@keyframes flow-glow {
    0%, 40% { transform: scale(1); }
    48% { transform: scale(1.22); }
    60%, 100% { transform: scale(1); }
}

@keyframes flow-lit {
    0%, 80% { opacity: 0; }
    84%, 95% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes flow-wide-in1 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    0.46% { transform: translate(0.25%, 0%); opacity: 0.31; }
    0.92% { transform: translate(0.96%, 0.03%); opacity: 0.61; }
    1.38% { transform: translate(2.08%, 0.13%); opacity: 0.92; }
    1.83% { transform: translate(3.52%, 0.37%); opacity: 1; }
    2.29% { transform: translate(5.21%, 0.82%); opacity: 1; }
    2.75% { transform: translate(7.1%, 1.55%); opacity: 1; }
    3.21% { transform: translate(9.1%, 2.58%); opacity: 1; }
    3.67% { transform: translate(11.18%, 3.94%); opacity: 1; }
    4.12% { transform: translate(13.28%, 5.6%); opacity: 1; }
    4.58% { transform: translate(15.39%, 7.51%); opacity: 1; }
    5.04% { transform: translate(17.46%, 9.61%); opacity: 1; }
    5.5% { transform: translate(19.5%, 11.81%); opacity: 1; }
    5.96% { transform: translate(21.49%, 14%); opacity: 1; }
    6.42% { transform: translate(23.43%, 16.1%); opacity: 1; }
    6.88% { transform: translate(25.31%, 18.02%); opacity: 1; }
    7.33% { transform: translate(27.13%, 19.67%); opacity: 1; }
    7.79% { transform: translate(28.86%, 21.03%); opacity: 1; }
    8.25% { transform: translate(30.49%, 22.06%); opacity: 1; }
    8.71% { transform: translate(31.98%, 22.79%); opacity: 1; }
    9.17% { transform: translate(33.31%, 23.24%); opacity: 1; }
    9.62% { transform: translate(34.42%, 23.48%); opacity: 1; }
    10.08% { transform: translate(35.27%, 23.58%); opacity: 1; }
    10.54% { transform: translate(35.81%, 23.61%); opacity: 0.92; }
    11% { transform: translate(36%, 23.61%); opacity: 0; }
    100% { transform: translate(36%, 23.61%); opacity: 0; }
}

@keyframes flow-wide-in2 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    25% { transform: translate(0%, 0%); opacity: 0; }
    25.46% { transform: translate(0.25%, 0%); opacity: 0.31; }
    25.92% { transform: translate(0.96%, -0.03%); opacity: 0.61; }
    26.38% { transform: translate(2.08%, -0.13%); opacity: 0.92; }
    26.83% { transform: translate(3.52%, -0.37%); opacity: 1; }
    27.29% { transform: translate(5.21%, -0.82%); opacity: 1; }
    27.75% { transform: translate(7.1%, -1.55%); opacity: 1; }
    28.21% { transform: translate(9.1%, -2.58%); opacity: 1; }
    28.67% { transform: translate(11.18%, -3.94%); opacity: 1; }
    29.12% { transform: translate(13.28%, -5.6%); opacity: 1; }
    29.58% { transform: translate(15.39%, -7.51%); opacity: 1; }
    30.04% { transform: translate(17.46%, -9.61%); opacity: 1; }
    30.5% { transform: translate(19.5%, -11.81%); opacity: 1; }
    30.96% { transform: translate(21.49%, -14%); opacity: 1; }
    31.42% { transform: translate(23.43%, -16.1%); opacity: 1; }
    31.87% { transform: translate(25.31%, -18.02%); opacity: 1; }
    32.33% { transform: translate(27.13%, -19.67%); opacity: 1; }
    32.79% { transform: translate(28.86%, -21.03%); opacity: 1; }
    33.25% { transform: translate(30.49%, -22.06%); opacity: 1; }
    33.71% { transform: translate(31.98%, -22.79%); opacity: 1; }
    34.17% { transform: translate(33.31%, -23.24%); opacity: 1; }
    34.62% { transform: translate(34.42%, -23.48%); opacity: 1; }
    35.08% { transform: translate(35.27%, -23.58%); opacity: 1; }
    35.54% { transform: translate(35.81%, -23.61%); opacity: 0.92; }
    36% { transform: translate(36%, -23.61%); opacity: 0; }
    100% { transform: translate(36%, -23.61%); opacity: 0; }
}

@keyframes flow-wide-in3 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    50% { transform: translate(0%, 0%); opacity: 0; }
    50.46% { transform: translate(0.25%, 0%); opacity: 0.31; }
    50.92% { transform: translate(0.96%, 0.03%); opacity: 0.61; }
    51.38% { transform: translate(2.08%, 0.13%); opacity: 0.92; }
    51.83% { transform: translate(3.52%, 0.37%); opacity: 1; }
    52.29% { transform: translate(5.21%, 0.82%); opacity: 1; }
    52.75% { transform: translate(7.1%, 1.55%); opacity: 1; }
    53.21% { transform: translate(9.1%, 2.58%); opacity: 1; }
    53.67% { transform: translate(11.18%, 3.94%); opacity: 1; }
    54.12% { transform: translate(13.28%, 5.6%); opacity: 1; }
    54.58% { transform: translate(15.39%, 7.51%); opacity: 1; }
    55.04% { transform: translate(17.46%, 9.61%); opacity: 1; }
    55.5% { transform: translate(19.5%, 11.81%); opacity: 1; }
    55.96% { transform: translate(21.49%, 14%); opacity: 1; }
    56.42% { transform: translate(23.43%, 16.1%); opacity: 1; }
    56.88% { transform: translate(25.31%, 18.02%); opacity: 1; }
    57.33% { transform: translate(27.13%, 19.67%); opacity: 1; }
    57.79% { transform: translate(28.86%, 21.03%); opacity: 1; }
    58.25% { transform: translate(30.49%, 22.06%); opacity: 1; }
    58.71% { transform: translate(31.98%, 22.79%); opacity: 1; }
    59.17% { transform: translate(33.31%, 23.24%); opacity: 1; }
    59.62% { transform: translate(34.42%, 23.48%); opacity: 1; }
    60.08% { transform: translate(35.27%, 23.58%); opacity: 1; }
    60.54% { transform: translate(35.81%, 23.61%); opacity: 0.92; }
    61% { transform: translate(36%, 23.61%); opacity: 0; }
    100% { transform: translate(36%, 23.61%); opacity: 0; }
}

@keyframes flow-wide-in4 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    75% { transform: translate(0%, 0%); opacity: 0; }
    75.46% { transform: translate(0.25%, 0%); opacity: 0.31; }
    75.92% { transform: translate(0.96%, -0.03%); opacity: 0.61; }
    76.38% { transform: translate(2.08%, -0.13%); opacity: 0.92; }
    76.83% { transform: translate(3.52%, -0.37%); opacity: 1; }
    77.29% { transform: translate(5.21%, -0.82%); opacity: 1; }
    77.75% { transform: translate(7.1%, -1.55%); opacity: 1; }
    78.21% { transform: translate(9.1%, -2.58%); opacity: 1; }
    78.67% { transform: translate(11.18%, -3.94%); opacity: 1; }
    79.12% { transform: translate(13.28%, -5.6%); opacity: 1; }
    79.58% { transform: translate(15.39%, -7.51%); opacity: 1; }
    80.04% { transform: translate(17.46%, -9.61%); opacity: 1; }
    80.5% { transform: translate(19.5%, -11.81%); opacity: 1; }
    80.96% { transform: translate(21.49%, -14%); opacity: 1; }
    81.42% { transform: translate(23.43%, -16.1%); opacity: 1; }
    81.88% { transform: translate(25.31%, -18.02%); opacity: 1; }
    82.33% { transform: translate(27.13%, -19.67%); opacity: 1; }
    82.79% { transform: translate(28.86%, -21.03%); opacity: 1; }
    83.25% { transform: translate(30.49%, -22.06%); opacity: 1; }
    83.71% { transform: translate(31.98%, -22.79%); opacity: 1; }
    84.17% { transform: translate(33.31%, -23.24%); opacity: 1; }
    84.62% { transform: translate(34.42%, -23.48%); opacity: 1; }
    85.08% { transform: translate(35.27%, -23.58%); opacity: 1; }
    85.54% { transform: translate(35.81%, -23.61%); opacity: 0.92; }
    86% { transform: translate(36%, -23.61%); opacity: 0; }
    100% { transform: translate(36%, -23.61%); opacity: 0; }
}

@keyframes flow-wide-out1 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    50% { transform: translate(0%, 0%); opacity: 0; }
    51.33% { transform: translate(0.15%, 0%); opacity: 1; }
    52.67% { transform: translate(0.6%, -0.03%); opacity: 1; }
    54% { transform: translate(1.31%, -0.14%); opacity: 1; }
    55.33% { transform: translate(2.26%, -0.41%); opacity: 1; }
    56.67% { transform: translate(3.42%, -0.95%); opacity: 1; }
    58% { transform: translate(4.77%, -1.88%); opacity: 1; }
    59.33% { transform: translate(6.27%, -3.31%); opacity: 1; }
    60.67% { transform: translate(7.91%, -5.3%); opacity: 1; }
    62% { transform: translate(9.65%, -7.87%); opacity: 1; }
    63.33% { transform: translate(11.47%, -10.91%); opacity: 1; }
    64.67% { transform: translate(13.35%, -14.23%); opacity: 1; }
    66% { transform: translate(15.25%, -17.57%); opacity: 1; }
    67.33% { transform: translate(17.15%, -20.67%); opacity: 1; }
    68.67% { transform: translate(19.03%, -23.38%); opacity: 1; }
    70% { transform: translate(20.85%, -25.59%); opacity: 1; }
    71.33% { transform: translate(22.59%, -27.31%); opacity: 1; }
    72.67% { transform: translate(24.23%, -28.57%); opacity: 1; }
    74% { transform: translate(25.73%, -29.44%); opacity: 1; }
    75.33% { transform: translate(27.08%, -29.99%); opacity: 1; }
    76.67% { transform: translate(28.24%, -30.32%); opacity: 1; }
    78% { transform: translate(29.19%, -30.48%); opacity: 1; }
    79.33% { transform: translate(29.9%, -30.54%); opacity: 1; }
    80.67% { transform: translate(30.35%, -30.55%); opacity: 1; }
    82% { transform: translate(30.5%, -30.56%); opacity: 0; }
    100% { transform: translate(30.5%, -30.56%); opacity: 0; }
}

@keyframes flow-wide-out2 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    50% { transform: translate(0%, 0%); opacity: 0; }
    51.33% { transform: translate(0.15%, 0%); opacity: 1; }
    52.67% { transform: translate(0.6%, 0%); opacity: 1; }
    54% { transform: translate(1.31%, 0%); opacity: 1; }
    55.33% { transform: translate(2.26%, 0%); opacity: 1; }
    56.67% { transform: translate(3.42%, 0%); opacity: 1; }
    58% { transform: translate(4.77%, 0%); opacity: 1; }
    59.33% { transform: translate(6.27%, 0%); opacity: 1; }
    60.67% { transform: translate(7.91%, 0%); opacity: 1; }
    62% { transform: translate(9.65%, 0%); opacity: 1; }
    63.33% { transform: translate(11.47%, 0%); opacity: 1; }
    64.67% { transform: translate(13.35%, 0%); opacity: 1; }
    66% { transform: translate(15.25%, 0%); opacity: 1; }
    67.33% { transform: translate(17.15%, 0%); opacity: 1; }
    68.67% { transform: translate(19.03%, 0%); opacity: 1; }
    70% { transform: translate(20.85%, 0%); opacity: 1; }
    71.33% { transform: translate(22.59%, 0%); opacity: 1; }
    72.67% { transform: translate(24.23%, 0%); opacity: 1; }
    74% { transform: translate(25.73%, 0%); opacity: 1; }
    75.33% { transform: translate(27.08%, 0%); opacity: 1; }
    76.67% { transform: translate(28.24%, 0%); opacity: 1; }
    78% { transform: translate(29.19%, 0%); opacity: 1; }
    79.33% { transform: translate(29.9%, 0%); opacity: 1; }
    80.67% { transform: translate(30.35%, 0%); opacity: 1; }
    82% { transform: translate(30.5%, 0%); opacity: 0; }
    100% { transform: translate(30.5%, 0%); opacity: 0; }
}

@keyframes flow-wide-out3 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    50% { transform: translate(0%, 0%); opacity: 0; }
    51.33% { transform: translate(0.15%, 0%); opacity: 1; }
    52.67% { transform: translate(0.6%, 0.03%); opacity: 1; }
    54% { transform: translate(1.31%, 0.14%); opacity: 1; }
    55.33% { transform: translate(2.26%, 0.41%); opacity: 1; }
    56.67% { transform: translate(3.42%, 0.95%); opacity: 1; }
    58% { transform: translate(4.77%, 1.88%); opacity: 1; }
    59.33% { transform: translate(6.27%, 3.31%); opacity: 1; }
    60.67% { transform: translate(7.91%, 5.3%); opacity: 1; }
    62% { transform: translate(9.65%, 7.87%); opacity: 1; }
    63.33% { transform: translate(11.47%, 10.91%); opacity: 1; }
    64.67% { transform: translate(13.35%, 14.23%); opacity: 1; }
    66% { transform: translate(15.25%, 17.57%); opacity: 1; }
    67.33% { transform: translate(17.15%, 20.67%); opacity: 1; }
    68.67% { transform: translate(19.03%, 23.38%); opacity: 1; }
    70% { transform: translate(20.85%, 25.59%); opacity: 1; }
    71.33% { transform: translate(22.59%, 27.31%); opacity: 1; }
    72.67% { transform: translate(24.23%, 28.57%); opacity: 1; }
    74% { transform: translate(25.73%, 29.44%); opacity: 1; }
    75.33% { transform: translate(27.08%, 29.99%); opacity: 1; }
    76.67% { transform: translate(28.24%, 30.32%); opacity: 1; }
    78% { transform: translate(29.19%, 30.48%); opacity: 1; }
    79.33% { transform: translate(29.9%, 30.54%); opacity: 1; }
    80.67% { transform: translate(30.35%, 30.55%); opacity: 1; }
    82% { transform: translate(30.5%, 30.56%); opacity: 0; }
    100% { transform: translate(30.5%, 30.56%); opacity: 0; }
}

.flow-glow-wide {
    transform-origin: 50% 50%;
}

@keyframes flow-portrait-in1 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    0.46% { transform: translate(0%, 0.21%); opacity: 0.31; }
    0.92% { transform: translate(0.02%, 0.79%); opacity: 0.61; }
    1.38% { transform: translate(0.11%, 1.66%); opacity: 0.92; }
    1.83% { transform: translate(0.31%, 2.74%); opacity: 1; }
    2.29% { transform: translate(0.7%, 3.92%); opacity: 1; }
    2.75% { transform: translate(1.31%, 5.13%); opacity: 1; }
    3.21% { transform: translate(2.19%, 6.28%); opacity: 1; }
    3.67% { transform: translate(3.34%, 7.33%); opacity: 1; }
    4.12% { transform: translate(4.74%, 8.26%); opacity: 1; }
    4.58% { transform: translate(6.36%, 9.07%); opacity: 1; }
    5.04% { transform: translate(8.14%, 9.77%); opacity: 1; }
    5.5% { transform: translate(10%, 10.42%); opacity: 1; }
    5.96% { transform: translate(11.86%, 11.04%); opacity: 1; }
    6.42% { transform: translate(13.64%, 11.69%); opacity: 1; }
    6.88% { transform: translate(15.26%, 12.41%); opacity: 1; }
    7.33% { transform: translate(16.66%, 13.21%); opacity: 1; }
    7.79% { transform: translate(17.81%, 14.12%); opacity: 1; }
    8.25% { transform: translate(18.69%, 15.12%); opacity: 1; }
    8.71% { transform: translate(19.3%, 16.16%); opacity: 1; }
    9.17% { transform: translate(19.69%, 17.18%); opacity: 1; }
    9.62% { transform: translate(19.89%, 18.12%); opacity: 1; }
    10.08% { transform: translate(19.98%, 18.89%); opacity: 1; }
    10.54% { transform: translate(20%, 19.4%); opacity: 0.92; }
    11% { transform: translate(20%, 19.58%); opacity: 0; }
    100% { transform: translate(20%, 19.58%); opacity: 0; }
}

@keyframes flow-portrait-in2 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    25% { transform: translate(0%, 0%); opacity: 0; }
    25.46% { transform: translate(0%, 0.21%); opacity: 0.31; }
    25.92% { transform: translate(-0.02%, 0.79%); opacity: 0.61; }
    26.38% { transform: translate(-0.11%, 1.66%); opacity: 0.92; }
    26.83% { transform: translate(-0.31%, 2.74%); opacity: 1; }
    27.29% { transform: translate(-0.7%, 3.92%); opacity: 1; }
    27.75% { transform: translate(-1.31%, 5.13%); opacity: 1; }
    28.21% { transform: translate(-2.19%, 6.28%); opacity: 1; }
    28.67% { transform: translate(-3.34%, 7.33%); opacity: 1; }
    29.12% { transform: translate(-4.74%, 8.26%); opacity: 1; }
    29.58% { transform: translate(-6.36%, 9.07%); opacity: 1; }
    30.04% { transform: translate(-8.14%, 9.77%); opacity: 1; }
    30.5% { transform: translate(-10%, 10.42%); opacity: 1; }
    30.96% { transform: translate(-11.86%, 11.04%); opacity: 1; }
    31.42% { transform: translate(-13.64%, 11.69%); opacity: 1; }
    31.87% { transform: translate(-15.26%, 12.41%); opacity: 1; }
    32.33% { transform: translate(-16.66%, 13.21%); opacity: 1; }
    32.79% { transform: translate(-17.81%, 14.12%); opacity: 1; }
    33.25% { transform: translate(-18.69%, 15.12%); opacity: 1; }
    33.71% { transform: translate(-19.3%, 16.16%); opacity: 1; }
    34.17% { transform: translate(-19.69%, 17.18%); opacity: 1; }
    34.62% { transform: translate(-19.89%, 18.12%); opacity: 1; }
    35.08% { transform: translate(-19.98%, 18.89%); opacity: 1; }
    35.54% { transform: translate(-20%, 19.4%); opacity: 0.92; }
    36% { transform: translate(-20%, 19.58%); opacity: 0; }
    100% { transform: translate(-20%, 19.58%); opacity: 0; }
}

@keyframes flow-portrait-in3 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    50% { transform: translate(0%, 0%); opacity: 0; }
    50.46% { transform: translate(0%, 0.21%); opacity: 0.31; }
    50.92% { transform: translate(0.02%, 0.79%); opacity: 0.61; }
    51.38% { transform: translate(0.11%, 1.66%); opacity: 0.92; }
    51.83% { transform: translate(0.31%, 2.74%); opacity: 1; }
    52.29% { transform: translate(0.7%, 3.92%); opacity: 1; }
    52.75% { transform: translate(1.31%, 5.13%); opacity: 1; }
    53.21% { transform: translate(2.19%, 6.28%); opacity: 1; }
    53.67% { transform: translate(3.34%, 7.33%); opacity: 1; }
    54.12% { transform: translate(4.74%, 8.26%); opacity: 1; }
    54.58% { transform: translate(6.36%, 9.07%); opacity: 1; }
    55.04% { transform: translate(8.14%, 9.77%); opacity: 1; }
    55.5% { transform: translate(10%, 10.42%); opacity: 1; }
    55.96% { transform: translate(11.86%, 11.04%); opacity: 1; }
    56.42% { transform: translate(13.64%, 11.69%); opacity: 1; }
    56.88% { transform: translate(15.26%, 12.41%); opacity: 1; }
    57.33% { transform: translate(16.66%, 13.21%); opacity: 1; }
    57.79% { transform: translate(17.81%, 14.12%); opacity: 1; }
    58.25% { transform: translate(18.69%, 15.12%); opacity: 1; }
    58.71% { transform: translate(19.3%, 16.16%); opacity: 1; }
    59.17% { transform: translate(19.69%, 17.18%); opacity: 1; }
    59.62% { transform: translate(19.89%, 18.12%); opacity: 1; }
    60.08% { transform: translate(19.98%, 18.89%); opacity: 1; }
    60.54% { transform: translate(20%, 19.4%); opacity: 0.92; }
    61% { transform: translate(20%, 19.58%); opacity: 0; }
    100% { transform: translate(20%, 19.58%); opacity: 0; }
}

@keyframes flow-portrait-in4 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    75% { transform: translate(0%, 0%); opacity: 0; }
    75.46% { transform: translate(0%, 0.21%); opacity: 0.31; }
    75.92% { transform: translate(-0.02%, 0.79%); opacity: 0.61; }
    76.38% { transform: translate(-0.11%, 1.66%); opacity: 0.92; }
    76.83% { transform: translate(-0.31%, 2.74%); opacity: 1; }
    77.29% { transform: translate(-0.7%, 3.92%); opacity: 1; }
    77.75% { transform: translate(-1.31%, 5.13%); opacity: 1; }
    78.21% { transform: translate(-2.19%, 6.28%); opacity: 1; }
    78.67% { transform: translate(-3.34%, 7.33%); opacity: 1; }
    79.12% { transform: translate(-4.74%, 8.26%); opacity: 1; }
    79.58% { transform: translate(-6.36%, 9.07%); opacity: 1; }
    80.04% { transform: translate(-8.14%, 9.77%); opacity: 1; }
    80.5% { transform: translate(-10%, 10.42%); opacity: 1; }
    80.96% { transform: translate(-11.86%, 11.04%); opacity: 1; }
    81.42% { transform: translate(-13.64%, 11.69%); opacity: 1; }
    81.88% { transform: translate(-15.26%, 12.41%); opacity: 1; }
    82.33% { transform: translate(-16.66%, 13.21%); opacity: 1; }
    82.79% { transform: translate(-17.81%, 14.12%); opacity: 1; }
    83.25% { transform: translate(-18.69%, 15.12%); opacity: 1; }
    83.71% { transform: translate(-19.3%, 16.16%); opacity: 1; }
    84.17% { transform: translate(-19.69%, 17.18%); opacity: 1; }
    84.62% { transform: translate(-19.89%, 18.12%); opacity: 1; }
    85.08% { transform: translate(-19.98%, 18.89%); opacity: 1; }
    85.54% { transform: translate(-20%, 19.4%); opacity: 0.92; }
    86% { transform: translate(-20%, 19.58%); opacity: 0; }
    100% { transform: translate(-20%, 19.58%); opacity: 0; }
}

@keyframes flow-portrait-out1 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    50% { transform: translate(0%, 0%); opacity: 0; }
    51.33% { transform: translate(0%, 0.12%); opacity: 1; }
    52.67% { transform: translate(-0.01%, 0.45%); opacity: 1; }
    54% { transform: translate(-0.07%, 0.98%); opacity: 1; }
    55.33% { transform: translate(-0.23%, 1.7%); opacity: 1; }
    56.67% { transform: translate(-0.56%, 2.57%); opacity: 1; }
    58% { transform: translate(-1.17%, 3.58%); opacity: 1; }
    59.33% { transform: translate(-2.24%, 4.71%); opacity: 1; }
    60.67% { transform: translate(-4.04%, 5.94%); opacity: 1; }
    62% { transform: translate(-6.96%, 7.25%); opacity: 1; }
    63.33% { transform: translate(-11.44%, 8.62%); opacity: 1; }
    64.67% { transform: translate(-17.03%, 10.03%); opacity: 1; }
    66% { transform: translate(-22.03%, 11.46%); opacity: 1; }
    67.33% { transform: translate(-25.68%, 12.89%); opacity: 1; }
    68.67% { transform: translate(-28.2%, 14.3%); opacity: 1; }
    70% { transform: translate(-29.94%, 15.67%); opacity: 1; }
    71.33% { transform: translate(-31.11%, 16.98%); opacity: 1; }
    72.67% { transform: translate(-31.9%, 18.21%); opacity: 1; }
    74% { transform: translate(-32.4%, 19.34%); opacity: 1; }
    75.33% { transform: translate(-32.71%, 20.35%); opacity: 1; }
    76.67% { transform: translate(-32.88%, 21.22%); opacity: 1; }
    78% { transform: translate(-32.96%, 21.93%); opacity: 1; }
    79.33% { transform: translate(-32.99%, 22.47%); opacity: 1; }
    80.67% { transform: translate(-33%, 22.8%); opacity: 1; }
    82% { transform: translate(-33%, 22.92%); opacity: 0; }
    100% { transform: translate(-33%, 22.92%); opacity: 0; }
}

@keyframes flow-portrait-out2 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    50% { transform: translate(0%, 0%); opacity: 0; }
    51.33% { transform: translate(0%, 0.12%); opacity: 1; }
    52.67% { transform: translate(0%, 0.45%); opacity: 1; }
    54% { transform: translate(0%, 0.98%); opacity: 1; }
    55.33% { transform: translate(0%, 1.7%); opacity: 1; }
    56.67% { transform: translate(0%, 2.57%); opacity: 1; }
    58% { transform: translate(0%, 3.58%); opacity: 1; }
    59.33% { transform: translate(0%, 4.71%); opacity: 1; }
    60.67% { transform: translate(0%, 5.94%); opacity: 1; }
    62% { transform: translate(0%, 7.25%); opacity: 1; }
    63.33% { transform: translate(0%, 8.62%); opacity: 1; }
    64.67% { transform: translate(0%, 10.03%); opacity: 1; }
    66% { transform: translate(0%, 11.46%); opacity: 1; }
    67.33% { transform: translate(0%, 12.89%); opacity: 1; }
    68.67% { transform: translate(0%, 14.3%); opacity: 1; }
    70% { transform: translate(0%, 15.67%); opacity: 1; }
    71.33% { transform: translate(0%, 16.98%); opacity: 1; }
    72.67% { transform: translate(0%, 18.21%); opacity: 1; }
    74% { transform: translate(0%, 19.34%); opacity: 1; }
    75.33% { transform: translate(0%, 20.35%); opacity: 1; }
    76.67% { transform: translate(0%, 21.22%); opacity: 1; }
    78% { transform: translate(0%, 21.93%); opacity: 1; }
    79.33% { transform: translate(0%, 22.47%); opacity: 1; }
    80.67% { transform: translate(0%, 22.8%); opacity: 1; }
    82% { transform: translate(0%, 22.92%); opacity: 0; }
    100% { transform: translate(0%, 22.92%); opacity: 0; }
}

@keyframes flow-portrait-out3 {
    0% { transform: translate(0%, 0%); opacity: 0; }
    50% { transform: translate(0%, 0%); opacity: 0; }
    51.33% { transform: translate(0%, 0.12%); opacity: 1; }
    52.67% { transform: translate(0.01%, 0.45%); opacity: 1; }
    54% { transform: translate(0.07%, 0.98%); opacity: 1; }
    55.33% { transform: translate(0.23%, 1.7%); opacity: 1; }
    56.67% { transform: translate(0.56%, 2.57%); opacity: 1; }
    58% { transform: translate(1.17%, 3.58%); opacity: 1; }
    59.33% { transform: translate(2.24%, 4.71%); opacity: 1; }
    60.67% { transform: translate(4.04%, 5.94%); opacity: 1; }
    62% { transform: translate(6.96%, 7.25%); opacity: 1; }
    63.33% { transform: translate(11.44%, 8.62%); opacity: 1; }
    64.67% { transform: translate(17.03%, 10.03%); opacity: 1; }
    66% { transform: translate(22.03%, 11.46%); opacity: 1; }
    67.33% { transform: translate(25.68%, 12.89%); opacity: 1; }
    68.67% { transform: translate(28.2%, 14.3%); opacity: 1; }
    70% { transform: translate(29.94%, 15.67%); opacity: 1; }
    71.33% { transform: translate(31.11%, 16.98%); opacity: 1; }
    72.67% { transform: translate(31.9%, 18.21%); opacity: 1; }
    74% { transform: translate(32.4%, 19.34%); opacity: 1; }
    75.33% { transform: translate(32.71%, 20.35%); opacity: 1; }
    76.67% { transform: translate(32.88%, 21.22%); opacity: 1; }
    78% { transform: translate(32.96%, 21.93%); opacity: 1; }
    79.33% { transform: translate(32.99%, 22.47%); opacity: 1; }
    80.67% { transform: translate(33%, 22.8%); opacity: 1; }
    82% { transform: translate(33%, 22.92%); opacity: 0; }
    100% { transform: translate(33%, 22.92%); opacity: 0; }
}

.flow-glow-portrait {
    transform-origin: 50% 52.08%;
}

/* Visitors who ask for reduced motion get the still diagram */
@media (prefers-reduced-motion: no-preference) {
    .flow-move,
    .flow-glow-wide,
    .flow-glow-portrait,
    .flow-lit { will-change: transform, opacity; }

    .flow-lit { animation: flow-lit 4s linear infinite; }
    .flow-wide-in1 { animation: flow-wide-in1 16s linear infinite; }
    .flow-wide-in2 { animation: flow-wide-in2 16s linear infinite; }
    .flow-wide-in3 { animation: flow-wide-in3 16s linear infinite; }
    .flow-wide-in4 { animation: flow-wide-in4 16s linear infinite; }
    .flow-wide-out1 { animation: flow-wide-out1 4s linear infinite; }
    .flow-wide-out2 { animation: flow-wide-out2 4s linear infinite; }
    .flow-wide-out3 { animation: flow-wide-out3 4s linear infinite; }
    .flow-glow-wide { animation: flow-glow 4s ease-in-out infinite; }
    .flow-portrait-in1 { animation: flow-portrait-in1 16s linear infinite; }
    .flow-portrait-in2 { animation: flow-portrait-in2 16s linear infinite; }
    .flow-portrait-in3 { animation: flow-portrait-in3 16s linear infinite; }
    .flow-portrait-in4 { animation: flow-portrait-in4 16s linear infinite; }
    .flow-portrait-out1 { animation: flow-portrait-out1 4s linear infinite; }
    .flow-portrait-out2 { animation: flow-portrait-out2 4s linear infinite; }
    .flow-portrait-out3 { animation: flow-portrait-out3 4s linear infinite; }
    .flow-glow-portrait { animation: flow-glow 4s ease-in-out infinite; }
}