/*
 * Signin / signup animated backgrounds.
 *
 * One <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"> per sector,
 * animated with CSS keyframes only - no canvas, no WebGL, no vendor library - so it
 * runs on any desktop browser and covers any resolution or aspect ratio.
 *
 * The layer is hidden below 768px (mobile keeps the flat theme gradient) and every
 * animation freezes when the visitor asks for reduced motion.
 */

/* ---------------------------------------------------------------- containers */

.nz-signin-bg {
    overflow: hidden;
    pointer-events: none;
}

.nz-signin-bg-live {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.nz-signin-bg-preview {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

/* keep the login card above the background layer */
body.signin-page .scrollable-page,
body.signup-page #page-content,
body.signin-page .form-signin,
body.signup-page .form-signin {
    position: relative;
    z-index: 2;
}

.nz-anim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.nz-anim>svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* rotation and scaling around the shape itself, not around the SVG origin */
.nz-anim [class*="nz-"] {
    transform-box: fill-box;
    transform-origin: center;
}

/* ---------------------------------------------------- no blur over the layer */

/*
 * The login card is .card, which inherits the app's iOS-26 glass
 * `backdrop-filter: blur(24px) saturate(1.7)`. On every other screen that is
 * what makes the glass; here it is invisible and expensive.
 *
 * Invisible, because the signin card is a solid rgb(255,255,255) and the social
 * buttons sit on top of that same opaque white - blurring what is behind them
 * blurs nothing anyone can see. Expensive, because a backdrop-filter forces the
 * browser to re-sample and blur whatever is painted behind it, and behind it is
 * now a full-screen SVG that never stops moving. Any mouse-driven style change
 * (a :hover transition, the document-level mouseover handler) tears down and
 * rebuilds that backdrop root, and the rebuild shows up as the background
 * blinking.
 *
 * Dropping it on these two pages costs nothing visually and removes the flicker
 * at its source.
 */
body.signin-page .card,
body.signup-page .card,
body.signin-page .card .btn,
body.signup-page .card .btn,
body.signin-page .form-signin .btn,
body.signup-page .form-signin .btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ------------------------------------------------------- shared motion tools */

@keyframes nz-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes nz-spin-back {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes nz-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-26px); }
}

@keyframes nz-float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes nz-sway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

@keyframes nz-pulse {
    0%, 100% { opacity: .25; }
    50% { opacity: 1; }
}

@keyframes nz-blink {
    0%, 45% { opacity: 1; }
    50%, 60% { opacity: .1; }
    65%, 100% { opacity: 1; }
}

@keyframes nz-ripple {
    0% { transform: scale(.2); opacity: .8; }
    100% { transform: scale(2.4); opacity: 0; }
}

@keyframes nz-rise {
    0% { transform: translateY(140px); opacity: 0; }
    12% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(-320px); opacity: 0; }
}

@keyframes nz-dash {
    to { stroke-dashoffset: 0; }
}

@keyframes nz-dash-flow {
    to { stroke-dashoffset: -240; }
}

/* travels the full 1600 viewBox from off-screen left to off-screen right */
@keyframes nz-cross {
    from { transform: translateX(-2000px); }
    to { transform: translateX(2000px); }
}

@keyframes nz-cross-back {
    from { transform: translateX(2000px); }
    to { transform: translateX(-2000px); }
}

/* a repeating strip, drawn twice side by side and shifted by exactly one width */
@keyframes nz-scroll-800 {
    from { transform: translateX(0); }
    to { transform: translateX(-800px); }
}

@keyframes nz-scroll-400 {
    from { transform: translateX(0); }
    to { transform: translateX(-400px); }
}

@keyframes nz-scroll-200 {
    from { transform: translateX(0); }
    to { transform: translateX(-200px); }
}

.nz-a-spin { animation: nz-spin 9s linear infinite; }
.nz-a-float { animation: nz-float 7s ease-in-out infinite; }
.nz-a-float-soft { animation: nz-float-soft 5s ease-in-out infinite; }
.nz-a-sway { animation: nz-sway 5s ease-in-out infinite; }
.nz-a-pulse { animation: nz-pulse 3s ease-in-out infinite; }

/* stagger helpers, applied on top of the animation classes */
.nz-d1 { animation-delay: -1s; }
.nz-d2 { animation-delay: -2s; }
.nz-d3 { animation-delay: -3s; }
.nz-d4 { animation-delay: -4s; }
.nz-d5 { animation-delay: -5s; }
.nz-d6 { animation-delay: -6s; }
.nz-d7 { animation-delay: -7s; }
.nz-d8 { animation-delay: -8s; }
.nz-d9 { animation-delay: -9s; }
.nz-d10 { animation-delay: -10s; }
.nz-d12 { animation-delay: -12s; }
.nz-d14 { animation-delay: -14s; }
.nz-d16 { animation-delay: -16s; }
.nz-d18 { animation-delay: -18s; }

/* ------------------------------------------------------- gallery / behaviour */

/* preview cards only run while they are on screen, so 26 animations cost nothing */
.nz-signin-bg-preview .nz-anim * {
    animation-play-state: paused;
}

.nz-signin-bg-preview.is-playing .nz-anim * {
    animation-play-state: running;
}

@media (max-width: 767px) {
    .nz-signin-bg-live {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nz-anim * {
        animation: none !important;
    }
}

/* ------------------------------------------------------------------- waves */

/* nicofonseca's "WaVvVvVvVeSsS", without GSAP. The per-band random durations,
   offsets and easings are emitted inline by the view; these are the parts that
   are the same for every band. */

.nz-anim-waves {
    background: radial-gradient(circle, #0a3cca 0%, #042e52 100%);
}

/* the pen stretches the artwork to the window instead of cropping it */
.nz-anim-waves > svg.nz-wv-root {
    opacity: 1;
    animation: nz-wv-in 1s linear both;
}

.nz-anim-waves .g {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

/* two copies of each band tile the 1920-wide viewBox, so shifting one full
   width and repeating is seamless */
@keyframes nz-wv-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-1920px); }
}

@keyframes nz-wv-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --------------------------------------------------------------- paper cut */

/* "Paper Cut Text Effect!" by ykadosh. The React that emitted the per-letter
   markup is gone - PHP does that - so this is the pen's CSS on the pen's shape. */

.nz-anim-papercut {
    container-type: size;
    background-color: #eaece5;
}

.nz-anim-papercut .nz-pc-stage {
    position: absolute;
    top: 0;
    left: 0;
    /* the clear band left of the centred 450px login card */
    width: calc(50% - 245px);
    min-width: 260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: min(9vw, 96px);
    line-height: 1;
}

@supports (width: 1cqw) {
    .nz-anim-papercut .nz-pc-stage {
        font-size: min(9cqw, 96px);
    }
}

.nz-anim-papercut .nz-pc-line {
    position: relative;
    display: flex;
}

.nz-anim-papercut .nz-pc-letter {
    position: relative;
    display: flex;
}

.nz-anim-papercut .nz-pc-source {
    color: gray;
    -webkit-text-stroke: .01em rgba(0, 0, 0, .3);
    display: flex;
}

.nz-anim-papercut .nz-pc-overlay,
.nz-anim-papercut .nz-pc-shadow {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    user-select: none;
}

.nz-anim-papercut .nz-pc-overlay {
    background-image: linear-gradient(90deg, white 50%, #eff0eb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transform: rotateY(-30deg) skew(0, -10deg);
    transform-origin: left;
    animation: nz-pc-overlay 3s infinite ease-out var(--nz-pc-delay, 0s);
}

.nz-anim-papercut .nz-pc-shadow {
    filter: blur(5px);
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .4) 30%, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transform: skew(0, 20deg) translateY(.1em) translateX(.05em);
    animation: nz-pc-shadow 3s infinite var(--nz-pc-delay, 0s);
}

@keyframes nz-pc-shadow {
    0%, 20%, 100% { transform: skew(0, 20deg) translateY(.1em) translateX(.05em); opacity: 1; }
    10% { transform: skew(0, 0) translateY(0) translateX(0); opacity: 0; }
}

@keyframes nz-pc-overlay {
    0%, 20%, 100% { transform: rotateY(-30deg) skew(0, -10deg); }
    10% { transform: rotateY(0deg) skew(0, 0); }
}

/* ---------------------------------------------------------------- 3D text */

/* "CSS 3D Text Effect" by kylewetton. */

@font-face {
    font-family: "NZ Luckiest Guy";
    src: url("../vendor/luckiest-guy/LuckiestGuy-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

.nz-anim-text3d {
    container-type: size;
    background: radial-gradient(circle, #fffc00 0%, #f0ed17 100%);
}

.nz-anim-text3d .nz-t3-text {
    position: absolute;
    top: 0;
    left: 0;
    /* clear of the centred login card, same as the other title backgrounds */
    width: calc(50% - 245px);
    min-width: 260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "NZ Luckiest Guy", "Arial Black", Impact, sans-serif;
    font-size: min(8vw, 88px);
    line-height: 1.05;
    color: #fff;
    text-shadow:
        0 .1em 20px black, .05em -.03em 0 black, .05em .005em 0 black,
        0 .08em 0 black, .05em .08em 0 black, 0 -.03em 0 black,
        -.03em -.03em 0 black, -.03em .08em 0 black, -.03em 0 0 black;
}

@supports (width: 1cqw) {
    .nz-anim-text3d .nz-t3-text {
        font-size: min(8cqw, 88px);
    }
}

.nz-anim-text3d .nz-t3-part {
    display: inline-block;
    transform: scale(.9);
}

.nz-anim-text3d .nz-t3-part-a {
    animation: nz-t3-bop 1s cubic-bezier(.175, .885, .32, 1.275) forwards infinite alternate;
}

.nz-anim-text3d .nz-t3-part-b {
    animation: nz-t3-bop-b 1s .2s cubic-bezier(.175, .885, .32, 1.275) forwards infinite alternate;
}

@keyframes nz-t3-bop {
    0% { transform: scale(.9); }
    50%, 100% { transform: scale(1); }
}

@keyframes nz-t3-bop-b {
    0% { transform: scale(.9); }
    80%, 100% { transform: scale(1) rotateZ(-3deg); }
}
/* --------------------------------------------------------------- blueprint */

/*
 * "Zero-Element Blueprint Paper CSS Background" by brantholt. Nothing is drawn
 * with elements: the paper is this box's background and the grid is its ::after,
 * exactly as the pen does it with html and body::after.
 *
 * The pen's optional paper texture was an http:// image on a third party's
 * server, which an HTTPS page blocks as mixed content anyway; the grain below is
 * a self-contained SVG.
 *
 * Deliberately still - the pen has no animation.
 */

.nz-anim-blueprint {
    background-color: #57c5fa;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27140%27%20height%3D%27140%27%20filter%3D%27url%28%23g%29%27%20opacity%3D%27.05%27%2F%3E%3C%2Fsvg%3E"),
        linear-gradient(#57c5fa, #0a81fe);
    background-size: 140px 140px, 100% 100%;
    background-repeat: repeat, no-repeat;
}

.nz-anim-blueprint:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .25) 1px, rgba(0, 0, 0, 0) 1px),
        linear-gradient(0deg, rgba(255, 255, 255, .25) 1px, rgba(0, 0, 0, 0) 1px);
    background-position: 0 1px;
    background-repeat: repeat;
    background-size: 20px 20px;
}

/* ------------------------------------------------------------------ vortex */

/* "Vortex" by ruvenss. Three.js paints its own canvas; black behind it so there
   is no flash while the library downloads. */

.nz-anim-vortex {
    background: #000;
}

.nz-anim-vortex canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

/* -------------------------------------------------------------- break mold */

/*
 * "CSS - 3D - Sphere - Cubes - Intersection (No JS)" by konstantindenerz
 * (https://codepen.io/konstantindenerz/pen/xxyZJpO). No JavaScript at all: a
 * sphere passing through a stack of walls whose holes open and close in step
 * with it, all driven by a registered custom property.
 *
 * Everything is renamed. The pen works on bare .container, .wall, .surface,
 * .left, .top and .ball, and defines --c1, --angle, --border-width and
 * --animation-duration on :root - names far too generic to let loose in an
 * application stylesheet. @property registrations are global wherever they are
 * written, so those are namespaced too.
 *
 * Its vmin lengths became container units. vmin is measured against the WINDOW,
 * so in the settings gallery a card 300px wide would try to draw a scene sized
 * off a 1100px viewport and show one corner of it. cqmin measures the animation
 * box itself, which is the window on the login page and the card in the gallery.
 * The vmin value stays as the fallback for anything without container queries.
 *
 * The pen's `mix-blend-mode: plus-lighter` sat on body; here it is on the inner
 * wrapper, so the glow adds against the scene's own backdrop instead of blending
 * the whole layer into the page behind it.
 */

@property --nz-bm-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

@property --nz-bm-circle-diameter {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
}

.nz-anim-breakmold {
    container-type: size;
    display: grid;
    place-items: center;
    background: conic-gradient(black, #192d39, #0e1e2e, #281133, #14293d, #16031a, black);
    color: #fff;
}

.nz-anim-breakmold .nz-bm-wrapper {
    --nz-bm-u: 1vmin;
    --nz-bm-c1: #6eccee;
    --nz-bm-c2: #ffdc99;
    --nz-bm-c3: #e3a4d0;
    --nz-bm-c4: #d455ff;
    --nz-bm-duration: 2.8s;
    --nz-bm-border: calc(.6 * var(--nz-bm-u));
    --nz-bm-glow: drop-shadow(0 0 calc(6 * var(--nz-bm-u)) rgba(255, 255, 255, .19));
    --nz-bm-hole-y: 20%;
    --nz-bm-hole-radius: calc(22 * var(--nz-bm-u));
    --nz-bm-offset-per-surface: calc(360deg / 24);
    display: grid;
    place-items: center;
    mix-blend-mode: plus-lighter;
}

@supports (width: 1cqmin) {
    .nz-anim-breakmold .nz-bm-wrapper {
        --nz-bm-u: 1cqmin;
    }
}

.nz-anim-breakmold .nz-bm-scene {
    position: relative;
    width: calc(50 * var(--nz-bm-u));
    aspect-ratio: 1/1.2;
    --nz-bm-angle: 30deg;
    animation: nz-bm-spin var(--nz-bm-duration) linear infinite;
    transform-style: preserve-3d;
    transform: rotateX(-45deg) rotateY(45deg);
}

.nz-anim-breakmold .nz-bm-wall {
    position: absolute;
    inset: 0;
    --nz-bm-wall-gap: calc(10 * var(--nz-bm-u));
    filter: var(--nz-bm-glow);
}

.nz-anim-breakmold .nz-bm-wall:nth-of-type(1) { transform: translateZ(calc(var(--nz-bm-wall-gap) * -3)); }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(2) { transform: translateZ(calc(var(--nz-bm-wall-gap) * -2)); }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(3) { transform: translateZ(calc(var(--nz-bm-wall-gap) * -1)); }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(4) { transform: translateZ(calc(var(--nz-bm-wall-gap) * 0)); }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(5) { transform: translateZ(calc(var(--nz-bm-wall-gap) * 1)); }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(6) { transform: translateZ(calc(var(--nz-bm-wall-gap) * 2)); }

/* each surface and lid is a quarter-turn further round than the one before it */
.nz-anim-breakmold .nz-bm-wall:nth-of-type(1) .nz-bm-surface,
.nz-anim-breakmold .nz-bm-wall:nth-of-type(1) .nz-bm-top { --nz-bm-index: 1; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(1) .nz-bm-surface:nth-child(2),
.nz-anim-breakmold .nz-bm-wall:nth-of-type(1) .nz-bm-top:nth-child(2) { --nz-bm-index: 2; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(2) .nz-bm-surface,
.nz-anim-breakmold .nz-bm-wall:nth-of-type(2) .nz-bm-top { --nz-bm-index: 3; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(2) .nz-bm-surface:nth-child(2),
.nz-anim-breakmold .nz-bm-wall:nth-of-type(2) .nz-bm-top:nth-child(2) { --nz-bm-index: 4; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(3) .nz-bm-surface,
.nz-anim-breakmold .nz-bm-wall:nth-of-type(3) .nz-bm-top { --nz-bm-index: 5; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(3) .nz-bm-surface:nth-child(2),
.nz-anim-breakmold .nz-bm-wall:nth-of-type(3) .nz-bm-top:nth-child(2) { --nz-bm-index: 6; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(4) .nz-bm-surface,
.nz-anim-breakmold .nz-bm-wall:nth-of-type(4) .nz-bm-top { --nz-bm-index: 7; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(4) .nz-bm-surface:nth-child(2),
.nz-anim-breakmold .nz-bm-wall:nth-of-type(4) .nz-bm-top:nth-child(2) { --nz-bm-index: 8; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(5) .nz-bm-surface,
.nz-anim-breakmold .nz-bm-wall:nth-of-type(5) .nz-bm-top { --nz-bm-index: 9; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(5) .nz-bm-surface:nth-child(2),
.nz-anim-breakmold .nz-bm-wall:nth-of-type(5) .nz-bm-top:nth-child(2) { --nz-bm-index: 10; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(6) .nz-bm-surface,
.nz-anim-breakmold .nz-bm-wall:nth-of-type(6) .nz-bm-top { --nz-bm-index: 11; }
.nz-anim-breakmold .nz-bm-wall:nth-of-type(6) .nz-bm-surface:nth-child(2),
.nz-anim-breakmold .nz-bm-wall:nth-of-type(6) .nz-bm-top:nth-child(2) { --nz-bm-index: 12; }

.nz-anim-breakmold .nz-bm-surface {
    position: absolute;
    inset: 0;
    --nz-bm-angle-offset: calc(var(--nz-bm-index) * var(--nz-bm-offset-per-surface));
    --nz-bm-circle-diameter: calc(var(--nz-bm-hole-radius) * cos(calc(var(--nz-bm-angle) + var(--nz-bm-angle-offset))));
    -webkit-mask: radial-gradient(circle at 50% var(--nz-bm-hole-y), transparent var(--nz-bm-circle-diameter), black var(--nz-bm-circle-diameter));
    mask: radial-gradient(circle at 50% var(--nz-bm-hole-y), transparent var(--nz-bm-circle-diameter), black var(--nz-bm-circle-diameter));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    background:
        radial-gradient(circle at 50% var(--nz-bm-hole-y), var(--nz-bm-c4) calc(var(--nz-bm-circle-diameter) + var(--nz-bm-border)), var(--nz-bm-c4) calc(var(--nz-bm-circle-diameter) + var(--nz-bm-border)), transparent var(--nz-bm-circle-diameter)),
        linear-gradient(black, black),
        linear-gradient(45deg, var(--nz-bm-c1), var(--nz-bm-c3), var(--nz-bm-c2), var(--nz-bm-c1), var(--nz-bm-c4), var(--nz-bm-c3), var(--nz-bm-c2));
    background-repeat: no-repeat;
    background-size: 100% 100%, calc(100% - var(--nz-bm-border) * 2) calc(100% - var(--nz-bm-border) * 2), 100%, 100%;
    background-position: 0 0, var(--nz-bm-border) var(--nz-bm-border), 0 0;
}

.nz-anim-breakmold .nz-bm-surface:nth-child(2) {
    transform: translate(calc(4 * var(--nz-bm-u)), calc(5.7 * var(--nz-bm-u)));
}

.nz-anim-breakmold .nz-bm-left {
    position: absolute;
    inset: 0;
    width: calc(4.5 * var(--nz-bm-u));
    transform: skewY(55deg) translateY(calc(2.9 * var(--nz-bm-u)));
    background:
        linear-gradient(black, black) no-repeat,
        linear-gradient(to top, var(--nz-bm-c1), var(--nz-bm-c3), var(--nz-bm-c2), var(--nz-bm-c1)) no-repeat;
    background-size: calc(100% - var(--nz-bm-border) * 2) calc(100% - var(--nz-bm-border) * 2), 100%, 100%;
    background-position: var(--nz-bm-border) var(--nz-bm-border), 0 0;
}

.nz-anim-breakmold .nz-bm-top {
    position: absolute;
    inset: 0;
    height: calc(6 * var(--nz-bm-u));
    transform: skewX(36deg) translateX(calc(2 * var(--nz-bm-u)));
    background:
        linear-gradient(black, black) no-repeat,
        linear-gradient(to right, var(--nz-bm-c1), var(--nz-bm-c3), var(--nz-bm-c2), var(--nz-bm-c1)) no-repeat;
    background-size: calc(100% - var(--nz-bm-border) * 2) calc(100% - var(--nz-bm-border) * 2), 100%, 100%;
    background-position: var(--nz-bm-border) var(--nz-bm-border), 0 0;
    --nz-bm-angle-offset: calc(var(--nz-bm-index) * var(--nz-bm-offset-per-surface));
    --nz-bm-circle-diameter: calc(var(--nz-bm-hole-radius) * cos(calc(var(--nz-bm-angle) + var(--nz-bm-angle-offset))));
    -webkit-mask: radial-gradient(calc(var(--nz-bm-circle-diameter) * .86) at 50% calc(60% / cos(calc(var(--nz-bm-angle) + var(--nz-bm-angle-offset)))), transparent var(--nz-bm-circle-diameter), black var(--nz-bm-circle-diameter));
    mask: radial-gradient(calc(var(--nz-bm-circle-diameter) * .86) at 50% calc(60% / cos(calc(var(--nz-bm-angle) + var(--nz-bm-angle-offset)))), transparent var(--nz-bm-circle-diameter), black var(--nz-bm-circle-diameter));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

.nz-anim-breakmold .nz-bm-ball-container {
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    transform: translateZ(calc(-60 * var(--nz-bm-u)));
    animation: nz-bm-ball var(--nz-bm-duration) linear infinite;
}

.nz-anim-breakmold .nz-bm-ball {
    width: calc(42 * var(--nz-bm-u));
    aspect-ratio: 1;
    border-radius: 50%;
    filter: var(--nz-bm-glow);
    background:
        radial-gradient(calc(21.5 * var(--nz-bm-u)) calc(21.5 * var(--nz-bm-u)) at center, black calc(20 * var(--nz-bm-u)), transparent calc(20 * var(--nz-bm-u))),
        conic-gradient(var(--nz-bm-c1), var(--nz-bm-c3), var(--nz-bm-c2), var(--nz-bm-c4), var(--nz-bm-c3), var(--nz-bm-c1), var(--nz-bm-c2), var(--nz-bm-c1));
    box-shadow: 0 0 calc(10 * var(--nz-bm-u)) rgba(255, 255, 255, .08);
    transform: rotateX(45deg) rotateY(45deg) translateY(calc(-20 * var(--nz-bm-u)));
}

@keyframes nz-bm-spin {
    from { --nz-bm-angle: 360deg; }
    to { --nz-bm-angle: 0deg; }
}

@keyframes nz-bm-ball {
    from { transform: translateZ(calc(-40 * var(--nz-bm-u))); opacity: 0; }
    10% { transform: translateZ(calc(-25 * var(--nz-bm-u))); opacity: 1; }
    85% { opacity: 1; }
    to { opacity: 0; transform: translateZ(calc(70 * var(--nz-bm-u))); }
}

/* ------------------------------------------------------------- blue sphere */

/* "Blue sphere" by ma77os. The WebGL canvas is transparent, so the pen's radial
   gradient shows through from the box behind it. */

.nz-anim-bluesphere {
    background-image: radial-gradient(circle farthest-corner, #060a33, #000000);
    background-repeat: no-repeat;
}

.nz-anim-bluesphere .nz-bs-stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.nz-anim-bluesphere .nz-bs-stage canvas {
    display: block;
}

/* --------------------------------------------------------- veterinary poly */

/* "Low poly animals" by ainalem. The pen centres a 100vmin square; here it is
   held to the left of centre so the login card does not sit on the animals. */

.nz-anim-vetpoly {
    background: #101018;
}

.nz-anim-vetpoly {
    container-type: size;
}

/* cqmin measures this box, so the animals are sized off the login page
   full-screen and off the card in the settings gallery; vmin is the fallback */
.nz-anim-vetpoly .nz-vp-svg {
    position: absolute;
    top: 50%;
    left: 2%;
    width: 62vmin;
    height: 62vmin;
    transform: translateY(-50%);
    overflow: visible;
}

@supports (width: 1cqmin) {
    .nz-anim-vetpoly .nz-vp-svg {
        width: 62cqmin;
        height: 62cqmin;
    }
}

/* ------------------------------------------------------------ lonely ship */

/*
 * "Lonely space ship (pure css)" by valerite-dev
 * (https://codepen.io/valerite-dev/pen/mEeyNj).
 *
 * Everything is renamed: the pen styles a bare `.body`, `.ship`, `.eyes` and
 * `.foot_1`, and its SVG carries id="wave" - none of which can be turned loose
 * in an application stylesheet, and `.body` least of all. The pen's `body` rule
 * becomes the animation box.
 *
 * Its rem lengths are px here. rem resolves against the document root, not this
 * box, so on a page whose root font size is not 16px the ship would come out a
 * different size than the pen draws it.
 *
 * Two deliberate changes: the ship is off-centre rather than dead centre, where
 * the login card would sit right on top of it, and it is scaled up - at the
 * pen's 48px it is a speck on a full-size login page.
 */

.nz-anim-lonely {
    background-color: #163040;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.5" fill="%23FFFFFF" cx="28.75" cy="22.338" r="0.713"/><circle opacity="0.2" fill="%23FFFFFF" cx="26.75" cy="79.443" r="0.307"/><circle opacity="0.5" fill="%23FFFFFF" cx="50" cy="41.884" r="0.308"/><circle fill="%23FFFFFF" cx="12.883" cy="42.25" r="0.367"/><circle opacity="0.4" fill="%23FFFFFF" cx="80" cy="72.818" r="0.307"/><circle opacity="0.5" fill="%23FFFFFF" cx="55.625" cy="12.375" r="0.308"/><circle opacity="0.2" fill="%23FFFFFF" cx="73.307" cy="89.375" r="0.308"/><circle opacity="0.5" fill="%23FFFFFF" cx="73" cy="53.884" r="0.308"/><circle opacity="0.5" fill="%23FFFFFF" cx="38.875" cy="89.432" r="0.385"/></svg>');
    background-size: 320px 320px;
    background-position: center 0;
    animation: nz-lonely-bg 2s linear infinite;
}

.nz-anim-lonely .nz-lonely-stage {
    position: absolute;
    top: 50%;
    left: 15%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%) scale(2.4);
}

.nz-anim-lonely .nz-lonely-ship {
    position: relative;
    width: 48px;
    height: 48px;
    animation: nz-lonely-move 2s linear infinite alternate;
}

.nz-anim-lonely .nz-lonely-body {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #e3e3e3;
    box-shadow: inset 0 -5px 5px rgba(22, 48, 64, .5);
    z-index: 2;
}

.nz-anim-lonely .nz-lonely-eyes {
    position: relative;
    width: 16px;
    top: 24px;
    left: 16px;
    animation: nz-lonely-eyes 2s ease-in-out infinite alternate;
}

.nz-anim-lonely .nz-lonely-eye {
    position: absolute;
    display: block;
    width: 6.4px;
    height: 6.4px;
    border-radius: 50%;
    background-color: #163040;
    animation: nz-lonely-eye 2s ease-in-out infinite alternate;
}

.nz-anim-lonely .nz-lonely-eye-r {
    right: 0;
}

.nz-anim-lonely .nz-lonely-foot {
    position: absolute;
    top: 24px;
    width: 6.4px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(rgba(227, 227, 227, .6), rgba(227, 227, 227, .3));
    opacity: .5;
}

.nz-anim-lonely .nz-lonely-foot-1 {
    transform: rotate(25deg);
}

.nz-anim-lonely .nz-lonely-foot-2 {
    top: 32px;
    width: 5.92px;
    left: 21.04px;
    background: linear-gradient(rgba(227, 227, 227, .7) 75%, rgba(227, 227, 227, .3));
    opacity: .8;
}

.nz-anim-lonely .nz-lonely-foot-3 {
    transform: rotate(-25deg);
    right: 0;
}

.nz-anim-lonely .nz-lonely-waves {
    position: relative;
    top: -32px;
    left: -32px;
    width: 112px;
    height: 112px;
    fill: none;
}

.nz-anim-lonely .nz-lonely-wave {
    stroke: rgba(227, 227, 227, .7);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2;
    opacity: 0;
    transform-origin: center;
    animation: nz-lonely-wave 2s infinite linear;
    animation-delay: .1s;
}

.nz-anim-lonely .nz-lonely-wave-2 {
    animation-delay: 1s;
}

@keyframes nz-lonely-wave {
    from { transform: scale(.45) rotate(0); opacity: 1; }
    to { transform: scale(1) rotate(20deg); opacity: 0; }
}

@keyframes nz-lonely-move {
    from { transform: rotate(-10deg); }
    to { transform: rotate(10deg); }
}

@keyframes nz-lonely-bg {
    to { background-position: center 320px; }
}

@keyframes nz-lonely-eyes {
    from { transform: translateX(-6.4px); }
    to { transform: translateX(6.4px); }
}

@keyframes nz-lonely-eye {
    40% { transform: scaleY(1); }
    50% { transform: scaleY(0); }
    60% { transform: scaleY(1); }
}

/* --------------------------------------------------------------- world map */

/* "Dotted map" by Mamboleoo. The dots are drawn on a plain 2D canvas; the
   ground colour matches the canvas clear colour so there is no flash. */

.nz-anim-worldmap {
    background: #1d1f23;
}

.nz-anim-worldmap .nz-wm-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------- synapsis */

/* "S M O K E" by ada-lovecraft. The simulation runs at a capped resolution and
   the canvas is stretched over the box, so the ground colour has to match the
   canvas fill or the edges would flash. */

.nz-anim-synapsis {
    background: rgb(5, 15, 16);
}

.nz-anim-synapsis .nz-syn-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* -------------------------------------------------------------------- city */

/*
 * "CSSCities" by cobra_winfrey. The pen styles bare .wrap / .grid / .cell /
 * .class1 selectors and a global `body *`; all of that is namespaced here, and
 * `body` becomes the animation box. The geometry, the extrusion and the window
 * patterns are the pen's, unchanged.
 */

.nz-anim-city {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 2000px;
    background: #fff;
}

.nz-anim-city *,
.nz-anim-city *:before,
.nz-anim-city *:after {
    transform-style: preserve-3d;
}

.nz-anim-city .nz-city-wrap {
    width: 600px;
    min-width: 600px;
    height: 600px;
    position: relative;
    transform: translateY(75px) translateX(-25px) rotateX(75deg);
    backface-visibility: hidden;
}

.nz-anim-city .nz-city-grid {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(8, 10%);
    grid-template-rows: repeat(8, 10%);
    transform: rotate(-135deg);
    backface-visibility: hidden;
    /* the huge white spread is what floods the rest of the box with ground */
    box-shadow: 0 0 0 100vw #fff, inset 0 0 0 100vw #fff;
}

.nz-anim-city .nz-city-cell {
    background: #f1f1f1;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
    transform: scale(.75) translateY(calc(-100% - var(--nz-city-shift, 0px))) translateX(calc(-100% + var(--nz-city-shift, 0px))) translateZ(var(--nz-city-h, 20px));
    transition: .6s ease-in-out;
    backface-visibility: hidden;
    grid-row-end: span var(--nz-city-size, 1);
    grid-column-end: span var(--nz-city-size, 1);
    will-change: transform;
    min-height: 75px;
}

/* flattened while the next city is rolled */
.nz-anim-city .nz-city-grid.is-sliding .nz-city-cell {
    transform: translateZ(0) !important;
    transition-delay: 0s !important;
    background: #fff;
    box-shadow: inset 0 0 0 1px #fff;
}

/* the roof face */
.nz-anim-city .nz-city-cell:before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: var(--nz-city-h, 20px);
    background: #efefef;
    box-shadow: inherit;
    transform-origin: bottom;
    transform: rotateX(90deg);
    backface-visibility: hidden;
}

/* the side face */
.nz-anim-city .nz-city-cell:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(var(--nz-city-h, 20px) * -1);
    height: 100%;
    width: var(--nz-city-h, 20px);
    background: #fff;
    box-shadow: inherit;
    transform-origin: right;
    transform: rotateY(-90deg);
    backface-visibility: hidden;
}

/* the tall one */
.nz-anim-city .nz-city-cell.nz-city-t11 {
    transform: scale(.75) translateY(calc(-100% - var(--nz-city-shift, 0px))) translateX(calc(-100% + var(--nz-city-shift, 0px))) translateZ(calc(var(--nz-city-h, 20px) * 2));
}

.nz-anim-city .nz-city-cell.nz-city-t11:before {
    height: calc(var(--nz-city-h, 20px) * 2);
}

.nz-anim-city .nz-city-cell.nz-city-t11:after {
    width: calc(var(--nz-city-h, 20px) * 2);
    left: calc(var(--nz-city-h, 20px) * -2);
}

/* window patterns, verbatim from the pen */
.nz-anim-city .nz-city-cell.nz-city-t1:before, .nz-anim-city .nz-city-cell.nz-city-t4:before, .nz-anim-city .nz-city-cell.nz-city-t8:before {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #efefef;
  background: repeating-linear-gradient(to bottom, #efefef, #efefef 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #efefef 15px, #efefef 20px), repeating-linear-gradient(to right, #efefef, #efefef 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #efefef 15px, #efefef 20px), #ccc;
  background-position: 50% 10px;
}

.nz-anim-city .nz-city-cell.nz-city-t1:after, .nz-anim-city .nz-city-cell.nz-city-t4:after, .nz-anim-city .nz-city-cell.nz-city-t8:after {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #fff;
  background: repeating-linear-gradient(to bottom, #fff, #fff 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #fff 15px, #fff 20px), repeating-linear-gradient(to left, #fff, #fff 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #fff 15px, #fff 20px), #cecece;
  background-position: 20px 50%;
}

.nz-anim-city .nz-city-cell.nz-city-t2:before, .nz-anim-city .nz-city-cell.nz-city-t5:before, .nz-anim-city .nz-city-cell.nz-city-t7:before {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #efefef;
  background: repeating-linear-gradient(to bottom, #efefef, #efefef 2px, rgba(255, 255, 255, 0.0001) 2px, rgba(255, 255, 255, 0.0001) 4px, #efefef 4px, #efefef 6px), #ccc;
}

.nz-anim-city .nz-city-cell.nz-city-t2:after, .nz-anim-city .nz-city-cell.nz-city-t5:after, .nz-anim-city .nz-city-cell.nz-city-t7:after {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #fff;
  background: repeating-linear-gradient(to right, #fff, #fff 2px, rgba(255, 255, 255, 0.0001) 2px, rgba(255, 255, 255, 0.0001) 4px, #fff 4px, #fff 6px), #cecece;
}

.nz-anim-city .nz-city-cell.nz-city-t9:before, .nz-anim-city .nz-city-cell.nz-city-t6:before {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #efefef;
  background: repeating-linear-gradient(to right, #efefef, #efefef 2px, rgba(255, 255, 255, 0.0001) 2px, rgba(255, 255, 255, 0.0001) 8px, #efefef 8px, #efefef 10px), #ccc;
}

.nz-anim-city .nz-city-cell.nz-city-t9:after, .nz-anim-city .nz-city-cell.nz-city-t6:after {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #fff;
  background: repeating-linear-gradient(to bottom, #fff, #fff 2px, rgba(255, 255, 255, 0.0001) 2px, rgba(255, 255, 255, 0.0001) 8px, #fff 8px, #fff 10px), #cecece;
}

.nz-anim-city .nz-city-cell.nz-city-t10:after {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  background: radial-gradient(circle at left, #ccc, #ccc 10px, rgba(255, 255, 255, 0.0001) 10px), linear-gradient(to bottom, #fff calc(50% - 10px), #ccc calc(50% - 10px), #ccc calc(50% + 10px), #fff calc(50% + 10px)), #fff;
  background-position: 15px 50%, 0% 0%, 50%;
  background-size: 100% 100%, 15px 100%, 100%;
  background-repeat: no-repeat;
}

.nz-anim-city .nz-city-cell.nz-city-t3:before {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #efefef;
  background: repeating-linear-gradient(to bottom, #efefef, #efefef 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 20px, #efefef 20px, #efefef 30px), repeating-linear-gradient(to right, #efefef, #efefef 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #efefef 15px, #efefef 20px), #ccc;
  background-position: 50% 10px;
}

.nz-anim-city .nz-city-cell.nz-city-t3:after {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 15px #fff;
  background: repeating-linear-gradient(to bottom, #fff, #fff 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #fff 15px, #fff 20px), repeating-linear-gradient(to left, #fff, #fff 5px, rgba(255, 255, 255, 0.0001) 5px, rgba(255, 255, 255, 0.0001) 15px, #fff 15px, #fff 20px), #cecece;
  background-position: 20px 50%;
}

/* the wave that runs across the grid as it rebuilds */
.nz-anim-city .nz-city-cell:nth-of-type(1) { transition-delay: 0.0167s; }
.nz-anim-city .nz-city-cell:nth-of-type(2) { transition-delay: 0.0333s; }
.nz-anim-city .nz-city-cell:nth-of-type(3) { transition-delay: 0.0500s; }
.nz-anim-city .nz-city-cell:nth-of-type(4) { transition-delay: 0.0667s; }
.nz-anim-city .nz-city-cell:nth-of-type(5) { transition-delay: 0.0833s; }
.nz-anim-city .nz-city-cell:nth-of-type(6) { transition-delay: 0.1000s; }
.nz-anim-city .nz-city-cell:nth-of-type(7) { transition-delay: 0.1167s; }
.nz-anim-city .nz-city-cell:nth-of-type(8) { transition-delay: 0.1333s; }
.nz-anim-city .nz-city-cell:nth-of-type(9) { transition-delay: 0.1500s; }
.nz-anim-city .nz-city-cell:nth-of-type(10) { transition-delay: 0.1667s; }
.nz-anim-city .nz-city-cell:nth-of-type(11) { transition-delay: 0.1833s; }
.nz-anim-city .nz-city-cell:nth-of-type(12) { transition-delay: 0.2000s; }
.nz-anim-city .nz-city-cell:nth-of-type(13) { transition-delay: 0.2167s; }
.nz-anim-city .nz-city-cell:nth-of-type(14) { transition-delay: 0.2333s; }
.nz-anim-city .nz-city-cell:nth-of-type(15) { transition-delay: 0.2500s; }
.nz-anim-city .nz-city-cell:nth-of-type(16) { transition-delay: 0.2667s; }
.nz-anim-city .nz-city-cell:nth-of-type(17) { transition-delay: 0.2833s; }
.nz-anim-city .nz-city-cell:nth-of-type(18) { transition-delay: 0.3000s; }
.nz-anim-city .nz-city-cell:nth-of-type(19) { transition-delay: 0.3167s; }
.nz-anim-city .nz-city-cell:nth-of-type(20) { transition-delay: 0.3333s; }
.nz-anim-city .nz-city-cell:nth-of-type(21) { transition-delay: 0.3500s; }
.nz-anim-city .nz-city-cell:nth-of-type(22) { transition-delay: 0.3667s; }
.nz-anim-city .nz-city-cell:nth-of-type(23) { transition-delay: 0.3833s; }
.nz-anim-city .nz-city-cell:nth-of-type(24) { transition-delay: 0.4000s; }
.nz-anim-city .nz-city-cell:nth-of-type(25) { transition-delay: 0.4167s; }
.nz-anim-city .nz-city-cell:nth-of-type(26) { transition-delay: 0.4333s; }
.nz-anim-city .nz-city-cell:nth-of-type(27) { transition-delay: 0.4500s; }
.nz-anim-city .nz-city-cell:nth-of-type(28) { transition-delay: 0.4667s; }
.nz-anim-city .nz-city-cell:nth-of-type(29) { transition-delay: 0.4833s; }
.nz-anim-city .nz-city-cell:nth-of-type(30) { transition-delay: 0.5000s; }
.nz-anim-city .nz-city-cell:nth-of-type(31) { transition-delay: 0.5167s; }
.nz-anim-city .nz-city-cell:nth-of-type(32) { transition-delay: 0.5333s; }
.nz-anim-city .nz-city-cell:nth-of-type(33) { transition-delay: 0.5500s; }
.nz-anim-city .nz-city-cell:nth-of-type(34) { transition-delay: 0.5667s; }
.nz-anim-city .nz-city-cell:nth-of-type(35) { transition-delay: 0.5833s; }
.nz-anim-city .nz-city-cell:nth-of-type(36) { transition-delay: 0.6000s; }
.nz-anim-city .nz-city-cell:nth-of-type(37) { transition-delay: 0.6167s; }
.nz-anim-city .nz-city-cell:nth-of-type(38) { transition-delay: 0.6333s; }
.nz-anim-city .nz-city-cell:nth-of-type(39) { transition-delay: 0.6500s; }
.nz-anim-city .nz-city-cell:nth-of-type(40) { transition-delay: 0.6667s; }
.nz-anim-city .nz-city-cell:nth-of-type(41) { transition-delay: 0.6833s; }
.nz-anim-city .nz-city-cell:nth-of-type(42) { transition-delay: 0.7000s; }
.nz-anim-city .nz-city-cell:nth-of-type(43) { transition-delay: 0.7167s; }
.nz-anim-city .nz-city-cell:nth-of-type(44) { transition-delay: 0.7333s; }
.nz-anim-city .nz-city-cell:nth-of-type(45) { transition-delay: 0.7500s; }
.nz-anim-city .nz-city-cell:nth-of-type(46) { transition-delay: 0.7667s; }
.nz-anim-city .nz-city-cell:nth-of-type(47) { transition-delay: 0.7833s; }
.nz-anim-city .nz-city-cell:nth-of-type(48) { transition-delay: 0.8000s; }
.nz-anim-city .nz-city-cell:nth-of-type(49) { transition-delay: 0.8167s; }
.nz-anim-city .nz-city-cell:nth-of-type(50) { transition-delay: 0.8333s; }
.nz-anim-city .nz-city-cell:nth-of-type(51) { transition-delay: 0.8500s; }
.nz-anim-city .nz-city-cell:nth-of-type(52) { transition-delay: 0.8667s; }
.nz-anim-city .nz-city-cell:nth-of-type(53) { transition-delay: 0.8833s; }
.nz-anim-city .nz-city-cell:nth-of-type(54) { transition-delay: 0.9000s; }
.nz-anim-city .nz-city-cell:nth-of-type(55) { transition-delay: 0.9167s; }
.nz-anim-city .nz-city-cell:nth-of-type(56) { transition-delay: 0.9333s; }
.nz-anim-city .nz-city-cell:nth-of-type(57) { transition-delay: 0.9500s; }
.nz-anim-city .nz-city-cell:nth-of-type(58) { transition-delay: 0.9667s; }
.nz-anim-city .nz-city-cell:nth-of-type(59) { transition-delay: 0.9833s; }
.nz-anim-city .nz-city-cell:nth-of-type(60) { transition-delay: 1.0000s; }
.nz-anim-city .nz-city-cell:nth-of-type(61) { transition-delay: 1.0167s; }
.nz-anim-city .nz-city-cell:nth-of-type(62) { transition-delay: 1.0333s; }
.nz-anim-city .nz-city-cell:nth-of-type(63) { transition-delay: 1.0500s; }
.nz-anim-city .nz-city-cell:nth-of-type(64) { transition-delay: 1.0667s; }

/* --------------------------------------------------------------- nameplate */

/* "3D Text Effect in CSS" by ruvenss. The extruded text-shadow stack is the
   pen's, verbatim; the placement is not - see the view for why. */

.nz-anim-nameplate {
    background-color: #c4c4c4;
}

.nz-anim-nameplate .nz-np-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4%;
    box-sizing: border-box;
}

.nz-anim-nameplate .nz-np-text {
    white-space: nowrap;
    text-transform: uppercase;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: #f5f5f5;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
        1px 18px 6px rgba(16, 16, 16, .4),
        1px 22px 10px rgba(16, 16, 16, .2),
        1px 25px 35px rgba(16, 16, 16, .2),
        1px 30px 60px rgba(16, 16, 16, .4);
}

/* ------------------------------------------------------------- paper plane */

/*
 * "Paper Airplane" by RebelJess (https://codepen.io/RebelJess/pen/oONPjd).
 *
 * Pared back to the plane on its sky: the pen's cloud and tree strips are both
 * gone (they were background images on the author's own site and both 404 now
 * anyway). The plane is the pen's own artwork with its fills inlined - the
 * source carries a <style> block using generic .cls-1 / .cls-2 names that would
 * leak into the whole page.
 *
 * Deliberate changes:
 *  - the plane sits on the left instead of at the centre, so the login card
 *    cannot cover it, and it is drawn smaller than the pen's;
 *  - it floats with translateY rather than the pen's margin-top, which animated
 *    layout on every frame. The rotation moved onto the inner <svg>, because one
 *    element cannot run two transform animations at once.
 */

.nz-anim-paperplane {
    background: #93d9d8;
}






.nz-anim-paperplane .nz-pp-plane {
    position: absolute;
    left: 6%;
    top: 44%;
    width: clamp(84px, 8vw, 140px);
    animation: nz-pp-float 2s ease-in-out infinite alternate;
}

.nz-anim-paperplane .nz-pp-plane > svg {
    display: block;
    width: 100%;
    height: auto;
    animation: nz-pp-rotate 4s ease-out infinite;
}

@keyframes nz-pp-float {
    to { transform: translateY(-100px); }
}

@keyframes nz-pp-rotate {
    50% { transform: rotate(-15deg); }
    75% { transform: rotate(20deg); }
}

/* -------------------------------------------------------------- low waves */

/* bsehovac's "Particle Waves WebGL Shader". ShaderProgram builds its own canvas
   inside the stage, so all this needs is a correctly sized box on the pen's
   black ground - which also means no white flash while the helper downloads. */
.nz-anim-low_waves {
    background: #000;
}

.nz-anim-low_waves .nz-lw-stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.nz-anim-low_waves .nz-lw-stage canvas {
    display: block;
}

/* ------------------------------------------------------------------ energy */

.nz-anim-energy .nz-turbine { animation: nz-spin 6s linear infinite; }
.nz-anim-energy .nz-energy-current { animation: nz-dash-flow 3s linear infinite; }

@keyframes nz-energy-bolt {
    0%, 70% { opacity: 0; transform: scale(.6); }
    76% { opacity: 1; transform: scale(1.1); }
    84% { opacity: .2; }
    90% { opacity: .95; transform: scale(1); }
    100% { opacity: 0; transform: scale(.6); }
}

.nz-anim-energy .nz-energy-bolt { animation: nz-energy-bolt 12s ease-in-out infinite; }

/* --------------------------------------------------------------- ecommerce */

@keyframes nz-ec-cart {
    from { transform: translate(-260px, 770px); }
    to { transform: translate(1860px, 770px); }
}

.nz-anim-ecommerce .nz-ecommerce-cart { animation: nz-ec-cart 16s linear infinite; }

/* -------------------------------------------------------------- orderlemon */

@keyframes nz-ol-order {
    0% { transform: translateY(180px); opacity: 0; }
    12% { opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translateY(-260px); opacity: 0; }
}

.nz-anim-orderlemon .nz-orderlemon-order { animation: nz-ol-order 10s ease-in-out infinite; }

/* ---------------------------------------------------------------- whatsapp */

.nz-anim-whatsapp .nz-wa-msg { animation: nz-rise 16s linear infinite; }

@keyframes nz-wa-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-14px); opacity: 1; }
}

.nz-anim-whatsapp .nz-wa-dot { animation: nz-wa-dot 1.4s ease-in-out infinite; }
.nz-anim-whatsapp .nz-wa-dot.nz-d1 { animation-delay: .18s; }
.nz-anim-whatsapp .nz-wa-dot.nz-d2 { animation-delay: .36s; }

/* --------------------------------------------------------------- marketing */

.nz-anim-marketing .nz-mk-horn { animation: nz-sway 3.4s ease-in-out infinite; transform-origin: right center; }
.nz-anim-marketing .nz-mk-ring { animation: nz-ripple 6s ease-out infinite; }

@keyframes nz-mk-bar {
    0%, 100% { transform: scaleY(.35); }
    50% { transform: scaleY(1); }
}

.nz-anim-marketing .nz-mk-bar { animation: nz-mk-bar 6s ease-in-out infinite; transform-origin: bottom; }
.nz-anim-marketing .nz-mk-bar.nz-d1 { animation-delay: -.4s; }
.nz-anim-marketing .nz-mk-bar.nz-d2 { animation-delay: -.8s; }
.nz-anim-marketing .nz-mk-bar.nz-d3 { animation-delay: -1.2s; }

@keyframes nz-mk-trend {
    0% { stroke-dashoffset: 600; }
    45%, 80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -600; }
}

.nz-anim-marketing .nz-mk-trend { animation: nz-mk-trend 7s ease-in-out infinite; }

/* ------------------------------------------------------------------ horeca */

@keyframes nz-hr-steam {
    0% { opacity: 0; transform: translateY(20px) scaleX(.7); }
    35% { opacity: .8; }
    100% { opacity: 0; transform: translateY(-120px) scaleX(1.3); }
}

.nz-anim-horeca .nz-hr-steam path { animation: nz-hr-steam 6s ease-out infinite; }

@keyframes nz-hr-clink-l {
    0%, 70%, 100% { transform: rotate(0deg); }
    80% { transform: rotate(14deg); }
    88% { transform: rotate(-4deg); }
}

@keyframes nz-hr-clink-r {
    0%, 70%, 100% { transform: rotate(0deg); }
    80% { transform: rotate(-14deg); }
    88% { transform: rotate(4deg); }
}

.nz-anim-horeca .nz-hr-clink-l { animation: nz-hr-clink-l 7s ease-in-out infinite; transform-origin: bottom center; }
.nz-anim-horeca .nz-hr-clink-r { animation: nz-hr-clink-r 7s ease-in-out infinite; transform-origin: bottom center; }

/* ---------------------------------------------------------------- fastfood */

@keyframes nz-ff-layer {
    0% { transform: translateY(-260px); opacity: 0; }
    18%, 88% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-260px); opacity: 0; }
}

.nz-anim-fastfood .nz-ff-layer { animation: nz-ff-layer 8s ease-in-out infinite; }
.nz-anim-fastfood .nz-ff-layer.nz-d1 { animation-delay: -.1s; }
.nz-anim-fastfood .nz-ff-layer.nz-d2 { animation-delay: -.3s; }
.nz-anim-fastfood .nz-ff-layer.nz-d3 { animation-delay: -.5s; }
.nz-anim-fastfood .nz-ff-layer.nz-d4 { animation-delay: -.7s; }
.nz-anim-fastfood .nz-ff-layer.nz-d5 { animation-delay: -.9s; }

@keyframes nz-ff-fry {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(3deg); }
}

.nz-anim-fastfood .nz-ff-fry { animation: nz-ff-fry 4s ease-in-out infinite; transform-origin: bottom center; }
.nz-anim-fastfood .nz-ff-fry.nz-d1 { animation-delay: -.5s; }
.nz-anim-fastfood .nz-ff-fry.nz-d2 { animation-delay: -1s; }
.nz-anim-fastfood .nz-ff-fry.nz-d3 { animation-delay: -1.5s; }

/* ------------------------------------------------------------------ hotels */

@keyframes nz-ht-win {
    0%, 40% { opacity: .12; }
    50%, 92% { opacity: .95; }
    100% { opacity: .12; }
}

.nz-anim-hotels .nz-ht-win { animation: nz-ht-win 9s steps(1, end) infinite; }

@keyframes nz-ht-bell {
    0%, 80%, 100% { transform: translateY(0); }
    85% { transform: translateY(-14px); }
    92% { transform: translateY(-4px); }
}

.nz-anim-hotels .nz-ht-bell { animation: nz-ht-bell 6s ease-in-out infinite; }

/* ---------------------------------------------------------------- holidays */

@keyframes nz-hd-sun {
    0%, 100% { transform: scale(1); opacity: .9; }
    50% { transform: scale(1.08); opacity: 1; }
}

.nz-anim-holidays .nz-hd-sun { animation: nz-hd-sun 8s ease-in-out infinite; }
.nz-anim-holidays .nz-hd-palm { animation: nz-sway 6s ease-in-out infinite; transform-origin: left bottom; }

@keyframes nz-hd-balloon {
    0% { transform: translate(-200px, 300px) rotate(-3deg); }
    50% { transform: translate(760px, 190px) rotate(3deg); }
    100% { transform: translate(1780px, 260px) rotate(-3deg); }
}

.nz-anim-holidays .nz-hd-balloon { animation: nz-hd-balloon 34s ease-in-out infinite; }

@keyframes nz-hd-bird {
    0% { transform: translateX(-900px) translateY(0); }
    50% { transform: translateX(0) translateY(-40px); }
    100% { transform: translateX(900px) translateY(0); }
}

.nz-anim-holidays .nz-hd-bird { animation: nz-hd-bird 22s linear infinite; }

@keyframes nz-hd-sea {
    from { transform: translateX(-150px); }
    to { transform: translateX(150px); }
}

.nz-anim-holidays .nz-hd-sea { animation: nz-hd-sea 10s ease-in-out infinite alternate; }
.nz-anim-holidays .nz-hd-sea.nz-d3 { animation-duration: 14s; animation-delay: -3s; }

/* -------------------------------------------------------------- automotive */

.nz-anim-automotive .nz-au-road { animation: nz-scroll-800 4s linear infinite; }
.nz-anim-automotive .nz-au-wheel { animation: nz-spin 1.1s linear infinite; }

@keyframes nz-au-car {
    from { transform: translateX(-500px); }
    to { transform: translateX(2100px); }
}

.nz-anim-automotive .nz-au-car { animation: nz-au-car 11s linear infinite; }
.nz-anim-automotive .nz-au-car.nz-d10 { animation-duration: 17s; animation-delay: -6s; }

/* ---------------------------------------------------------------- shipping */

.nz-anim-shipping .nz-sh-rollers { animation: nz-scroll-400 2.6s linear infinite; }

@keyframes nz-sh-parcel {
    from { transform: translateX(-160px); }
    to { transform: translateX(1780px); }
}

.nz-anim-shipping .nz-sh-parcel { animation: nz-sh-parcel 13s linear infinite; }
.nz-anim-shipping .nz-sh-parcel.nz-d6 { animation-delay: -6.5s; }

@keyframes nz-sh-hook {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(120px); }
}

.nz-anim-shipping .nz-sh-hook { animation: nz-sh-hook 9s ease-in-out infinite; }

/* ---------------------------------------------------------------- maritime */

@keyframes nz-mt-wave {
    from { transform: translateX(-170px); }
    to { transform: translateX(170px); }
}

.nz-anim-maritime .nz-mt-wave { animation: nz-mt-wave 12s ease-in-out infinite alternate; }
.nz-anim-maritime .nz-mt-wave.nz-d3 { animation-duration: 9s; animation-delay: -3s; }
.nz-anim-maritime .nz-mt-wave.nz-d6 { animation-duration: 16s; animation-delay: -6s; }

@keyframes nz-mt-ship {
    0%, 100% { transform: translateY(0) rotate(-1.6deg); }
    50% { transform: translateY(-18px) rotate(1.6deg); }
}

.nz-anim-maritime .nz-mt-ship { animation: nz-mt-ship 7s ease-in-out infinite; }

@keyframes nz-mt-beam {
    0%, 100% { transform: rotate(-16deg); opacity: .15; }
    50% { transform: rotate(16deg); opacity: .5; }
}

.nz-anim-maritime .nz-mt-beam { animation: nz-mt-beam 9s ease-in-out infinite; transform-origin: left center; }

/* -------------------------------------------------------------------- rail */

.nz-anim-rail .nz-rl-track { animation: nz-scroll-400 1.6s linear infinite; }
.nz-anim-rail .nz-rl-wheel { animation: nz-spin .9s linear infinite; }

@keyframes nz-rl-train {
    from { transform: translateX(-1100px); }
    to { transform: translateX(1800px); }
}

.nz-anim-rail .nz-rl-train { animation: nz-rl-train 16s linear infinite; }

/* --------------------------------------------------------------------- air */

@keyframes nz-air-cloud {
    from { transform: translateX(1900px); }
    to { transform: translateX(-400px); }
}

.nz-anim-air .nz-air-cloud { animation: nz-air-cloud 40s linear infinite; }
.nz-anim-air .nz-air-cloud.nz-d5 { animation-duration: 30s; animation-delay: -12s; }
.nz-anim-air .nz-air-cloud.nz-d10 { animation-duration: 52s; animation-delay: -26s; }
.nz-anim-air .nz-air-cloud.nz-d16 { animation-duration: 62s; animation-delay: -40s; }

@keyframes nz-air-plane {
    0% { transform: translate(-300px, 300px); }
    100% { transform: translate(1900px, -140px); }
}

.nz-anim-air .nz-air-plane { animation: nz-air-plane 22s linear infinite; }

@keyframes nz-air-trail {
    0%, 100% { opacity: 0; }
    25%, 75% { opacity: .55; }
}

.nz-anim-air .nz-air-trail { animation: nz-air-trail 22s linear infinite; }
.nz-anim-air .nz-air-route { stroke-dasharray: 14 22; animation: nz-dash-flow 5s linear infinite; }

/* ----------------------------------------------------------- it consultant */

.nz-anim-it_consultant .nz-it-flow { animation: nz-dash-flow 6s linear infinite; }
.nz-anim-it_consultant .nz-it-flow.nz-d2 { animation-duration: 8s; }
.nz-anim-it_consultant .nz-it-flow.nz-d4 { animation-duration: 7s; }
.nz-anim-it_consultant .nz-it-flow.nz-d6 { animation-duration: 9s; }

@keyframes nz-it-node {
    0%, 100% { opacity: .45; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

.nz-anim-it_consultant .nz-it-node { animation: nz-it-node 5s ease-in-out infinite; }
.nz-anim-it_consultant .nz-it-halo { animation: nz-ripple 5s ease-out infinite; }

/* ----------------------------------------------------------------- it saas */

.nz-anim-it_saas .nz-saas-led { animation: nz-blink 3.2s steps(1, end) infinite; }
.nz-anim-it_saas .nz-saas-up { animation: nz-dash-flow 2.6s linear infinite; }
.nz-anim-it_saas .nz-saas-down { animation: nz-dash-flow 2.6s linear infinite reverse; }

/* -------------------------------------------------------------- government */

@keyframes nz-gv-flag {
    0%, 100% { transform: skewY(0deg) scaleY(1); }
    30% { transform: skewY(3deg) scaleY(1.04); }
    65% { transform: skewY(-3deg) scaleY(.96); }
}

.nz-anim-government .nz-gv-flag { animation: nz-gv-flag 4.5s ease-in-out infinite; transform-origin: left center; }

/* ---------------------------------------------------------------------- hr */

@keyframes nz-hr-link {
    0% { stroke-dashoffset: 900; }
    40%, 85% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 900; }
}

.nz-anim-hr .nz-hr-link { animation: nz-hr-link 11s ease-in-out infinite; }
.nz-anim-hr .nz-hr-link.nz-d1 { animation-delay: -.4s; }
.nz-anim-hr .nz-hr-link.nz-d2 { animation-delay: -.8s; }
.nz-anim-hr .nz-hr-link.nz-d3 { animation-delay: -1.2s; }
.nz-anim-hr .nz-hr-link.nz-d4 { animation-delay: -1.6s; }
.nz-anim-hr .nz-hr-link.nz-d5 { animation-delay: -2s; }
.nz-anim-hr .nz-hr-link.nz-d6 { animation-delay: -2.4s; }

@keyframes nz-hr-avatar {
    0%, 100% { opacity: .55; transform: translateY(6px); }
    50% { opacity: 1; transform: translateY(-6px); }
}

.nz-anim-hr .nz-hr-avatar { animation: nz-hr-avatar 6s ease-in-out infinite; }
.nz-anim-hr .nz-hr-avatar.nz-d1 { animation-delay: -.6s; }
.nz-anim-hr .nz-hr-avatar.nz-d2 { animation-delay: -1.2s; }
.nz-anim-hr .nz-hr-avatar.nz-d3 { animation-delay: -1.8s; }
.nz-anim-hr .nz-hr-avatar.nz-d4 { animation-delay: -2.4s; }
.nz-anim-hr .nz-hr-avatar.nz-d5 { animation-delay: -3s; }
.nz-anim-hr .nz-hr-avatar.nz-d6 { animation-delay: -3.6s; }
.nz-anim-hr .nz-hr-avatar.nz-d7 { animation-delay: -4.2s; }

/* ------------------------------------------------------------- headhunting */

@keyframes nz-hh-glass {
    0% { transform: translate(240px, 330px); }
    22% { transform: translate(800px, 330px); }
    44% { transform: translate(1360px, 330px); }
    62% { transform: translate(940px, 660px); }
    82% { transform: translate(380px, 660px); }
    100% { transform: translate(240px, 330px); }
}

.nz-anim-headhunting .nz-hh-glass { animation: nz-hh-glass 20s ease-in-out infinite; }

@keyframes nz-hh-cv {
    0%, 100% { opacity: .35; }
    50% { opacity: .95; }
}

.nz-anim-headhunting .nz-hh-cv { animation: nz-hh-cv 20s ease-in-out infinite; }
.nz-anim-headhunting .nz-hh-cv.nz-d1 { animation-delay: -16.4s; }
.nz-anim-headhunting .nz-hh-cv.nz-d2 { animation-delay: -2.2s; }
.nz-anim-headhunting .nz-hh-cv.nz-d3 { animation-delay: -14.4s; }
.nz-anim-headhunting .nz-hh-cv.nz-d4 { animation-delay: -4.4s; }
.nz-anim-headhunting .nz-hh-cv.nz-d5 { animation-delay: -12.4s; }
.nz-anim-headhunting .nz-hh-cv.nz-d6 { animation-delay: -6.6s; }
.nz-anim-headhunting .nz-hh-cv.nz-d7 { animation-delay: -10.4s; }
.nz-anim-headhunting .nz-hh-cv.nz-d8 { animation-delay: -8.8s; }
/* ----------------------------------------------------------------- housing */

@keyframes nz-hs-house {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.nz-anim-housing .nz-hs-house { animation: nz-hs-house 7s ease-in-out infinite; }
.nz-anim-housing .nz-hs-house.nz-d2 { animation-delay: -1.4s; }
.nz-anim-housing .nz-hs-house.nz-d4 { animation-delay: -2.8s; }
.nz-anim-housing .nz-hs-house.nz-d6 { animation-delay: -4.2s; }

@keyframes nz-hs-sign {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.nz-anim-housing .nz-hs-sign { animation: nz-hs-sign 4s ease-in-out infinite; transform-origin: 90px 16px; }

@keyframes nz-hs-key {
    0%, 55%, 100% { transform: rotate(0deg); }
    75%, 85% { transform: rotate(90deg); }
}

.nz-anim-housing .nz-hs-key { animation: nz-hs-key 8s ease-in-out infinite; transform-origin: 0 0; }

/* -------------------------------------------------------------- mechanical */

.nz-anim-mechanical .nz-mc-rot { animation: nz-spin 11s linear infinite; }
.nz-anim-mechanical .nz-mc-rot-back { animation: nz-spin-back 11s linear infinite; }

@keyframes nz-mc-piston {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(150px); }
}

.nz-anim-mechanical .nz-mc-piston { animation: nz-mc-piston 2.8s ease-in-out infinite; }
.nz-anim-mechanical .nz-mc-flow { animation: nz-dash-flow 8s linear infinite; }
.nz-anim-mechanical .nz-mc-flow.nz-d3 { animation-direction: reverse; }

/* -------------------------------------------------------------- veterinary */

@keyframes nz-vt-paw {
    0% { opacity: 0; transform: scale(.6); }
    8% { opacity: .95; transform: scale(1); }
    55% { opacity: .95; }
    75%, 100% { opacity: 0; transform: scale(1); }
}

.nz-anim-veterinary .nz-vt-paw { animation: nz-vt-paw 9s ease-out infinite; }
.nz-anim-veterinary .nz-vt-paw.nz-d1 { animation-delay: -8.6s; }
.nz-anim-veterinary .nz-vt-paw.nz-d2 { animation-delay: -8.2s; }
.nz-anim-veterinary .nz-vt-paw.nz-d3 { animation-delay: -7.8s; }
.nz-anim-veterinary .nz-vt-paw.nz-d4 { animation-delay: -7.4s; }
.nz-anim-veterinary .nz-vt-paw.nz-d5 { animation-delay: -7s; }
.nz-anim-veterinary .nz-vt-paw.nz-d6 { animation-delay: -6.6s; }
.nz-anim-veterinary .nz-vt-paw.nz-d7 { animation-delay: -6.2s; }
.nz-anim-veterinary .nz-vt-paw.nz-d8 { animation-delay: -5.8s; }

@keyframes nz-vt-heart {
    0%, 100% { transform: scale(1); }
    12% { transform: scale(1.12); }
    24% { transform: scale(1); }
    36% { transform: scale(1.08); }
}

.nz-anim-veterinary .nz-vt-heart { animation: nz-vt-heart 2.4s ease-in-out infinite; }

@keyframes nz-vt-ecg {
    0% { stroke-dashoffset: 1400; }
    40%, 70% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1400; }
}

.nz-anim-veterinary .nz-vt-ecg { animation: nz-vt-ecg 7s linear infinite; }
.nz-anim-veterinary .nz-vt-ecg.nz-d3 { animation-delay: -3.5s; }

/* ----------------------------------------------------------- ophthalmology */

.nz-anim-ophthalmology .nz-op-ring { animation: nz-ripple 7s ease-out infinite; }

@keyframes nz-op-eye {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-56px); }
    70% { transform: translateX(52px); }
}

.nz-anim-ophthalmology .nz-op-eye { animation: nz-op-eye 11s ease-in-out infinite; }

@keyframes nz-op-pupil {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.35); }
    70% { transform: scale(.8); }
}

.nz-anim-ophthalmology .nz-op-pupil { animation: nz-op-pupil 9s ease-in-out infinite; }

@keyframes nz-op-blink {
    0%, 92%, 100% { transform: translateY(-560px); }
    95% { transform: translateY(0); }
}

.nz-anim-ophthalmology .nz-op-blink { animation: nz-op-blink 7s steps(1, end) infinite; }

/* ----------------------------------------------------------------- dentist */

@keyframes nz-dt-tooth {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.nz-anim-dentist .nz-dt-tooth { animation: nz-dt-tooth 3.6s ease-in-out infinite; }
.nz-anim-dentist .nz-dt-tooth.nz-d1 { animation-delay: -.2s; }
.nz-anim-dentist .nz-dt-tooth.nz-d2 { animation-delay: -.4s; }
.nz-anim-dentist .nz-dt-tooth.nz-d3 { animation-delay: -.6s; }
.nz-anim-dentist .nz-dt-tooth.nz-d4 { animation-delay: -.8s; }
.nz-anim-dentist .nz-dt-tooth.nz-d5 { animation-delay: -1s; }
.nz-anim-dentist .nz-dt-tooth.nz-d6 { animation-delay: -1.2s; }
.nz-anim-dentist .nz-dt-tooth.nz-d7 { animation-delay: -1.4s; }
.nz-anim-dentist .nz-dt-tooth.nz-d8 { animation-delay: -1.6s; }

@keyframes nz-dt-shine {
    0%, 100% { transform: translateX(0) skewX(-12deg); opacity: 0; }
    12% { opacity: .55; }
    55% { transform: translateX(720px) skewX(-12deg); opacity: 0; }
}

.nz-anim-dentist .nz-dt-shine { animation: nz-dt-shine 6s ease-in-out infinite; }

@keyframes nz-dt-spark {
    0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
    45% { opacity: 1; transform: scale(1) rotate(90deg); }
}

.nz-anim-dentist .nz-dt-spark { animation: nz-dt-spark 4.5s ease-in-out infinite; }

/* -------------------------------------------------------- telecommunications */

.nz-anim-telecommunications .nz-tc-wave { animation: nz-ripple 6s ease-out infinite; }
.nz-anim-telecommunications .nz-tc-wave.nz-d1 { animation-delay: -1s; }
.nz-anim-telecommunications .nz-tc-wave.nz-d2 { animation-delay: -2s; }
.nz-anim-telecommunications .nz-tc-wave.nz-d3 { animation-delay: -3s; }
.nz-anim-telecommunications .nz-tc-wave.nz-d4 { animation-delay: -4s; }
.nz-anim-telecommunications .nz-tc-wave.nz-d5 { animation-delay: -5s; }

@keyframes nz-tc-dish {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

.nz-anim-telecommunications .nz-tc-dish { animation: nz-tc-dish 11s ease-in-out infinite; transform-origin: bottom center; }
.nz-anim-telecommunications .nz-tc-link { animation: nz-dash-flow 4s linear infinite; }

/* ---------------------------------------------------------- cyber security */

@keyframes nz-cy-rain {
    from { transform: translateY(-460px); }
    to { transform: translateY(460px); }
}

.nz-anim-cybersecurity .nz-cy-rain { animation: nz-cy-rain 9s linear infinite; }
.nz-anim-cybersecurity .nz-cy-rain.nz-d1 { animation-duration: 12s; animation-delay: -3s; }
.nz-anim-cybersecurity .nz-cy-rain.nz-d2 { animation-duration: 7s; animation-delay: -2s; }
.nz-anim-cybersecurity .nz-cy-rain.nz-d4 { animation-duration: 14s; animation-delay: -6s; }
.nz-anim-cybersecurity .nz-cy-rain.nz-d6 { animation-duration: 10s; animation-delay: -8s; }

@keyframes nz-cy-scan {
    0%, 100% { transform: translateY(0); opacity: 0; }
    10% { opacity: .8; }
    50% { transform: translateY(560px); opacity: .8; }
    60% { transform: translateY(560px); opacity: 0; }
}

.nz-anim-cybersecurity .nz-cy-scan { animation: nz-cy-scan 6s ease-in-out infinite; }
.nz-anim-cybersecurity .nz-cy-halo { animation: nz-ripple 7s ease-out infinite; }

@keyframes nz-cy-block {
    0%, 60%, 100% { opacity: 0; transform: scale(.5); }
    70%, 85% { opacity: 1; transform: scale(1); }
}

.nz-anim-cybersecurity .nz-cy-block { animation: nz-cy-block 9s ease-in-out infinite; }

/* -------------------------------------------------------------------- voip */

.nz-anim-voip .nz-vo-ring { animation: nz-ripple 6s ease-out infinite; }

@keyframes nz-vo-shake {
    0%, 55%, 100% { transform: rotate(0deg); }
    60%, 70%, 80% { transform: rotate(-12deg); }
    65%, 75%, 85% { transform: rotate(12deg); }
}

.nz-anim-voip .nz-vo-shake { animation: nz-vo-shake 5s ease-in-out infinite; }

/* the packet path mirrors the grey line drawn under it */
@keyframes nz-vo-packet {
    0% { transform: translate(560px, 420px); opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translate(1340px, 420px); opacity: 0; }
}

.nz-anim-voip .nz-vo-packet { animation: nz-vo-packet 4.5s linear infinite; }
.nz-anim-voip .nz-vo-packet.nz-d2 { animation-delay: -1.1s; }
.nz-anim-voip .nz-vo-packet.nz-d4 { animation-delay: -2.2s; }
.nz-anim-voip .nz-vo-packet.nz-d6 { animation-delay: -3.3s; }

@keyframes nz-vo-bar {
    0%, 100% { transform: scaleY(.25); }
    50% { transform: scaleY(1.5); }
}

.nz-anim-voip .nz-vo-bar { animation: nz-vo-bar 1.6s ease-in-out infinite; transform-origin: center; }
.nz-anim-voip .nz-vo-bar.nz-d1 { animation-delay: -.2s; }
.nz-anim-voip .nz-vo-bar.nz-d2 { animation-delay: -.4s; }
.nz-anim-voip .nz-vo-bar.nz-d3 { animation-delay: -.6s; }
.nz-anim-voip .nz-vo-bar.nz-d4 { animation-delay: -.8s; }
.nz-anim-voip .nz-vo-bar.nz-d5 { animation-delay: -1s; }
.nz-anim-voip .nz-vo-bar.nz-d6 { animation-delay: -1.2s; }
.nz-anim-voip .nz-vo-bar.nz-d7 { animation-delay: -1.4s; }

/* ---------------------------------------------------------------------- ai */

.nz-anim-ai .nz-ai-flow { animation: nz-dash-flow 5s linear infinite; }
.nz-anim-ai .nz-ai-flow.nz-d2 { animation-duration: 6.5s; }
.nz-anim-ai .nz-ai-flow.nz-d4 { animation-duration: 8s; }

@keyframes nz-ai-node {
    0%, 100% { opacity: .4; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.nz-anim-ai .nz-ai-node { animation: nz-ai-node 4.5s ease-in-out infinite; }
.nz-anim-ai .nz-ai-node.nz-d1 { animation-delay: -.5s; }
.nz-anim-ai .nz-ai-node.nz-d2 { animation-delay: -1s; }
.nz-anim-ai .nz-ai-node.nz-d3 { animation-delay: -1.5s; }
.nz-anim-ai .nz-ai-node.nz-d4 { animation-delay: -2s; }
.nz-anim-ai .nz-ai-node.nz-d5 { animation-delay: -2.5s; }
.nz-anim-ai .nz-ai-node.nz-d6 { animation-delay: -3s; }
.nz-anim-ai .nz-ai-node.nz-d7 { animation-delay: -3.5s; }

@keyframes nz-ai-glow {
    0%, 100% { transform: scale(.9); opacity: .5; }
    50% { transform: scale(1.15); opacity: 1; }
}

.nz-anim-ai .nz-ai-glow { animation: nz-ai-glow 6s ease-in-out infinite; }

@keyframes nz-ai-core {
    0%, 100% { transform: scale(.75); opacity: .75; }
    50% { transform: scale(1.15); opacity: 1; }
}

.nz-anim-ai .nz-ai-pulse-core { animation: nz-ai-core 3s ease-in-out infinite; }

/* ----------------------------------------------------------------- booking */

@keyframes nz-bk-day {
    0%, 100% { opacity: 0; transform: scale(.6); }
    12%, 88% { opacity: 1; transform: scale(1); }
}

.nz-anim-booking .nz-bk-day { animation: nz-bk-day 10s ease-in-out infinite; }
.nz-anim-booking .nz-bk-day.nz-d2 { animation-delay: -1.6s; }
.nz-anim-booking .nz-bk-day.nz-d4 { animation-delay: -3.2s; }
.nz-anim-booking .nz-bk-day.nz-d6 { animation-delay: -4.8s; }
.nz-anim-booking .nz-bk-day.nz-d8 { animation-delay: -6.4s; }

.nz-anim-booking .nz-bk-hand-h { animation: nz-spin 24s linear infinite; transform-origin: bottom center; }
.nz-anim-booking .nz-bk-hand-m { animation: nz-spin 2s linear infinite; transform-origin: bottom center; }

@keyframes nz-bk-check {
    0%, 20% { stroke-dashoffset: 220; }
    45%, 85% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 220; }
}

.nz-anim-booking .nz-bk-check { animation: nz-bk-check 7s ease-in-out infinite; }

/* ------------------------------------------------------- global logistics */

/* The only background that is not hand-drawn SVG: it is the real amCharts 5
   "Map Sankey Chart: Global Coffee Supply Chain", vendored under
   /assets/vendor/amcharts5 and booted by app/Views/signin/backgrounds/logistics.php.
   amCharts draws its own canvas, so all this needs is a correctly sized box. */
.nz-anim-logistics .nz-am-chart {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* the paper tone of the chart, so the box is never a white flash while the
   library is still downloading */
.nz-anim-logistics {
    background: #f0e6d6;
}

/* --------------------------------------------- settings: the preview tab UI */

.nz-bg-hero-wrap {
    position: relative;
    width: 100%;
    padding-top: 32%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 22px;
}

.nz-bg-hero-name {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 3;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
}

.nz-bg-group-title {
    margin: 22px 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
}

.nz-bg-card {
    position: relative;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 18px;
    background: #0b132b;
    transition: transform .15s ease, box-shadow .15s ease;
}

.nz-bg-card:hover {
    transform: translateY(-2px);
}

.nz-bg-card:focus {
    outline: 2px solid var(--bs-primary, #1976d2);
    outline-offset: 2px;
}

.nz-bg-card-stage {
    position: relative;
    padding-top: 62%;
}

.nz-bg-card-label {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    font-size: 13px;
}

.nz-bg-card-check {
    opacity: 0;
}

.nz-bg-card.is-selected {
    border-color: var(--bs-primary, #1976d2);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .25);
}

.nz-bg-card.is-selected .nz-bg-card-check {
    opacity: 1;
}