@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

.gradient-text {
    background: linear-gradient(135deg, hsl(15 85% 60%), hsl(330 80% 70%), hsl(200 85% 60%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cloud {
    position: absolute;
    background: white;
    border-radius: 100px;
    opacity: 0.2;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 100px;
}

.cloud-blue { background: hsl(200 85% 60%); }
.cloud-pink { background: hsl(330 80% 70%); }
.cloud-purple { background: hsl(280 70% 65%); }

.cloud-lg {
    width: 200px;
    height: 80px;
}

.cloud-lg::before {
    width: 100px;
    height: 100px;
    top: -50px;
    left: 20px;
}

.cloud-lg::after {
    width: 120px;
    height: 120px;
    top: -60px;
    right: 20px;
}

.cloud-md {
    width: 150px;
    height: 60px;
}

.cloud-md::before {
    width: 70px;
    height: 70px;
    top: -35px;
    left: 15px;
}

.cloud-md::after {
    width: 90px;
    height: 90px;
    top: -45px;
    right: 15px;
}

.animate-delay-300 {
    animation-delay: 300ms;
}

html {
    scroll-behavior: smooth;
}

/* Primary color */
.text-primary {
    color: hsl(15 85% 60%);
}

.bg-primary {
    background-color: hsl(15 85% 60%);
}

.hover\:bg-primary\/90:hover {
    background-color: hsl(15 85% 54%);
}

/* Float animation for image */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Bounce slow animation */
@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
}

/* ===== PAW PRINT STYLES ===== */

/* Create the paw prints */
.pad {
    width: 25px;
    height: 27px;
    background-color: hsl(330 80% 70% / 0.4);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: block;
    position: absolute;
}

.large {
    width: 70px;
    height: 80px;
    transform: rotate(80deg);
    left: 100px;
    top: 50px;
}

.small-1 {
    transform: rotate(50deg);
    left: 145px;
    top: 28px;
}

.small-2 {
    transform: rotate(65deg);
    left: 174px;
    top: 50px;
}

.small-3 {
    transform: rotate(98deg);
    position: absolute;
    left: 178px;
    top: 87px;
}

.small-4 {
    transform: rotate(140deg);
    position: absolute;
    left: 158px;
    top: 117px;
}

.paw-print-1 {
    opacity: 0;
    position: absolute;
    left: -5%;
    top: 40%;
    transform: rotate(-40deg);
    animation: walk 2s linear infinite;
}

.paw-print-2 {
    opacity: 0;
    position: absolute;
    left: 5%;
    top: 35%;
    transform: rotate(-5deg);
    animation: walk 3s linear infinite 0.5s;
}

.paw-print-3 {
    opacity: 0;
    position: absolute;
    left: 18%;
    top: 25%;
    transform: rotate(-10deg);
    animation: walk 3.5s linear infinite 1s;
}

.paw-print-4 {
    opacity: 0;
    position: absolute;
    left: 30%;
    top: 45%;
    transform: rotate(-20deg);
    animation: walk 3.5s linear infinite 1.5s;
}

.paw-print-5 {
    opacity: 0;
    position: absolute;
    left: 42%;
    top: 20%;
    transform: rotate(10deg);
    animation: walk 3s linear infinite 6s;
}

.paw-print-6 {
    opacity: 0;
    position: absolute;
    left: 55%;
    top: 38%;
    transform: rotate(10deg);
    animation: walk 3s linear infinite 6s;
}

.paw-print-7 {
    opacity: 0;
    position: absolute;
    left: 68%;
    top: 22%;
    transform: rotate(20deg);
    animation: walk 3s linear infinite 6s;
}

.paw-print-8 {
    opacity: 0;
    position: absolute;
    left: 82%;
    top: 42%;
    transform: rotate(10deg);
    animation: walk 3s linear infinite 6s;
}

.paw-print-9 {
    opacity: 0;
    position: absolute;
    left: 15%;
    top: 60%;
    transform: rotate(-15deg);
    animation: walk 3.5s linear infinite 3s;
}

.paw-print-10 {
    opacity: 0;
    position: absolute;
    left: 48%;
    top: 55%;
    transform: rotate(5deg);
    animation: walk 3s linear infinite 4s;
}

.paw-print-11 {
    opacity: 0;
    position: absolute;
    left: 72%;
    top: 68%;
    transform: rotate(-25deg);
    animation: walk 3.5s linear infinite 5s;
}

.paw-print-12 {
    opacity: 0;
    position: absolute;
    left: 35%;
    top: 72%;
    transform: rotate(15deg);
    animation: walk 3s linear infinite 7s;
}

/* Walking effect animation keyframes */
@keyframes walk {
    25%  { opacity: 0.6; }
    50%  { opacity: 0.8; }
    75%  { opacity: 0.4; }
    100% { opacity: 0; }
}

/* Paw prints now enabled on mobile */

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}