/*
 * The Fox mark draws itself once on load and then keeps a slow float and a
 * highlight that travels along the edges.
 *
 * The stagger lives in animation-delay, and animation-delay only applies to the
 * first iteration -- an infinite draw would snap every edge back into lockstep
 * from the second cycle and the whole mark would blink out together. So the
 * draw runs exactly once; only whole-group animations loop.
 */

.fox-mesh {
    width: 100%;
    height: 100%;
    max-height: 610px;
    overflow: visible;
}

.fox-mesh__edge {
    fill: none;
    stroke: url(#foxMeshStroke);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-dasharray: var(--fox-len);
    stroke-dashoffset: var(--fox-len);
    animation: fox-mesh-draw .85s cubic-bezier(.33, .9, .35, 1) var(--fox-delay) 1 both;
}

.fox-mesh__node {
    fill: #7C5CE0;
    opacity: 0;
    animation: fox-mesh-pop .5s ease-out var(--fox-delay) 1 both;
}

.fox-mesh__group {
    transform-origin: 50% 50%;
    animation: fox-mesh-float 7s ease-in-out infinite alternate;
}

.fox-mesh__halo {
    transform-origin: 50% 50%;
    animation: fox-mesh-breathe 7s ease-in-out infinite alternate;
}

@keyframes fox-mesh-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes fox-mesh-pop {
    from { opacity: 0; }
    to { opacity: .8; }
}

@keyframes fox-mesh-float {
    from { transform: translateY(-8px); }
    to { transform: translateY(8px); }
}

@keyframes fox-mesh-breathe {
    from { opacity: .35; transform: scale(.94); }
    to { opacity: .7; transform: scale(1.05); }
}

@media (max-width: 991px) {
    .fox-mesh { max-height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
    .fox-mesh__group,
    .fox-mesh__halo { animation: none; }

    .fox-mesh__edge { animation: none; stroke-dashoffset: 0; }

    .fox-mesh__node { animation: none; opacity: .8; }
}