/* ======= Hero Paw Background Animation ======= */
.paw-animation {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.paw-float {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.42);
    animation: pawBob ease-in-out infinite;
    will-change: transform;
}

.paw-float i {
    display: block;
    line-height: 1;
}

.paw-float--1 { left: 6%; top: 12%; font-size: 2.9rem; animation-duration: 3.2s; animation-delay: 0s; --paw-rotate: -18deg; }
.paw-float--2 { left: 18%; top: 68%; font-size: 2.2rem; animation-duration: 2.8s; animation-delay: 0.4s; --paw-rotate: 12deg; }
.paw-float--3 { left: 32%; top: 28%; font-size: 2.4rem; animation-duration: 3.6s; animation-delay: 0.8s; --paw-rotate: -8deg; }
.paw-float--4 { left: 44%; top: 78%; font-size: 3.1rem; animation-duration: 3s; animation-delay: 1.1s; --paw-rotate: 20deg; }
.paw-float--5 { left: 56%; top: 18%; font-size: 2rem; animation-duration: 2.6s; animation-delay: 0.2s; --paw-rotate: -14deg; }
.paw-float--6 { left: 68%; top: 58%; font-size: 2.6rem; animation-duration: 3.4s; animation-delay: 1.5s; --paw-rotate: 10deg; }
.paw-float--7 { left: 78%; top: 24%; font-size: 2.25rem; animation-duration: 2.9s; animation-delay: 0.6s; --paw-rotate: -22deg; }
.paw-float--8 { left: 86%; top: 72%; font-size: 3rem; animation-duration: 3.8s; animation-delay: 1.8s; --paw-rotate: 16deg; }
.paw-float--9 { left: 24%; top: 44%; font-size: 1.9rem; animation-duration: 2.7s; animation-delay: 2s; --paw-rotate: 8deg; }
.paw-float--10 { left: 72%; top: 86%; font-size: 2.5rem; animation-duration: 3.1s; animation-delay: 1.3s; --paw-rotate: -10deg; }
.paw-float--11 { left: 12%; top: 36%; font-size: 2.3rem; animation-duration: 3.3s; animation-delay: 0.5s; --paw-rotate: 15deg; }
.paw-float--12 { left: 38%; top: 8%; font-size: 2.7rem; animation-duration: 2.5s; animation-delay: 1.7s; --paw-rotate: -12deg; }
.paw-float--13 { left: 50%; top: 52%; font-size: 2.1rem; animation-duration: 3.5s; animation-delay: 0.9s; --paw-rotate: 18deg; }
.paw-float--14 { left: 62%; top: 38%; font-size: 2.8rem; animation-duration: 2.4s; animation-delay: 2.2s; --paw-rotate: -6deg; }
.paw-float--15 { left: 4%; top: 82%; font-size: 2rem; animation-duration: 3.7s; animation-delay: 1s; --paw-rotate: 22deg; }
.paw-float--16 { left: 28%; top: 88%; font-size: 2.4rem; animation-duration: 2.9s; animation-delay: 1.4s; --paw-rotate: -16deg; }
.paw-float--17 { left: 48%; top: 32%; font-size: 1.95rem; animation-duration: 3.2s; animation-delay: 0.3s; --paw-rotate: 9deg; }
.paw-float--18 { left: 82%; top: 48%; font-size: 2.55rem; animation-duration: 2.6s; animation-delay: 1.9s; --paw-rotate: -20deg; }
.paw-float--19 { left: 92%; top: 16%; font-size: 2.15rem; animation-duration: 3.4s; animation-delay: 0.7s; --paw-rotate: 14deg; }
.paw-float--20 { left: 58%; top: 92%; font-size: 2.35rem; animation-duration: 3s; animation-delay: 2.4s; --paw-rotate: -11deg; }

@keyframes pawBob {
    0%, 100% {
        transform: translateY(0) rotate(var(--paw-rotate, 0deg));
    }

    50% {
        transform: translateY(-22px) rotate(calc(var(--paw-rotate, 0deg) + 6deg));
    }
}

@media screen and (max-width: 767px) {
    .paw-float {
        color: rgba(255, 255, 255, 0.32);
    }

    .paw-float--1,
    .paw-float--4,
    .paw-float--8,
    .paw-float--10,
    .paw-float--12,
    .paw-float--14,
    .paw-float--16,
    .paw-float--18,
    .paw-float--20 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .paw-float {
        animation: none;
    }
}