.fm-paw-trails {
    position: fixed;
    inset: 0;
    z-index: 1041;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    contain: strict;
}

.fm-paw-trails__print {
    --fm-paw-delay: 0ms;
    --fm-paw-rotation: 0deg;
    --fm-paw-opacity: 0.50;
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(25px, 1.8vw, 31px);
    aspect-ratio: 0.88;
    color: #0b2849;
    opacity: 0;
    transform: translate3d(var(--fm-paw-x), var(--fm-paw-y), 0)
        rotate(var(--fm-paw-rotation)) scale(0.92);
    transform-origin: 50% 50%;
    animation: fm-paw-print 8.4s cubic-bezier(0.22, 0.7, 0.22, 1) var(--fm-paw-delay) both;
    will-change: opacity, transform;
}

.fm-paw-trails__print svg {
    display: block;
    width: 100%;
    height: 100%;
}

.fm-paw-trails__print.is-left {
    color: #12345a;
}

.fm-paw-trails__print.is-logo-trail {
    --fm-paw-opacity: 0.62;
    width: clamp(20px, 1.45vw, 23px);
    animation: fm-paw-logo-print 2.1s cubic-bezier(0.22, 0.7, 0.22, 1)
        var(--fm-paw-delay) both;
}

.fm-paw-trails.is-clearing .fm-paw-trails__print {
    animation: none;
    opacity: 0;
    transition: opacity 240ms ease-out;
}

@keyframes fm-paw-print {
    0%, 7% {
        opacity: 0;
        transform: translate3d(var(--fm-paw-x), var(--fm-paw-y), 0)
            rotate(var(--fm-paw-rotation)) scale(0.9);
    }

    13%, 50% {
        opacity: var(--fm-paw-opacity);
        transform: translate3d(var(--fm-paw-x), var(--fm-paw-y), 0)
            rotate(var(--fm-paw-rotation)) scale(1);
    }

    76%, 100% {
        opacity: 0;
        transform: translate3d(var(--fm-paw-x), var(--fm-paw-y), 0)
            rotate(var(--fm-paw-rotation)) scale(1.025);
    }
}

@keyframes fm-paw-logo-print {
    0%, 5% {
        opacity: 0;
        transform: translate3d(var(--fm-paw-x), var(--fm-paw-y), 0)
            rotate(var(--fm-paw-rotation)) scale(0.9);
    }

    14%, 51% {
        opacity: var(--fm-paw-opacity);
        transform: translate3d(var(--fm-paw-x), var(--fm-paw-y), 0)
            rotate(var(--fm-paw-rotation)) scale(1);
    }

    68%, 100% {
        opacity: 0;
        transform: translate3d(var(--fm-paw-x), var(--fm-paw-y), 0)
            rotate(var(--fm-paw-rotation)) scale(1.015);
    }
}

@media (max-width: 767.98px) {
    .fm-paw-trails__print {
        --fm-paw-opacity: 0.54;
        width: clamp(22px, 6.4vw, 27px);
        color: #414951;
    }

    .fm-paw-trails__print.is-left {
        color: #505861;
    }

    .fm-paw-trails__print.is-logo-trail {
        --fm-paw-opacity: 0.76;
        width: clamp(17px, 4.8vw, 19px);
        color: #343a40;
    }

    .fm-paw-trails__print.is-logo-trail.is-left {
        color: #424950;
    }
}

@media (prefers-reduced-motion: reduce), print {
    .fm-paw-trails {
        display: none !important;
    }
}
