/* Background Doodles Animation */
.background-doodles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.8;
}

.doodle {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.2;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.1));
    animation: float-doodle 20s infinite ease-in-out;
}

/* Doodle Sizes */
.doodle.small { width: 50px; height: 50px; }
.doodle.medium { width: 80px; height: 80px; }
.doodle.large { width: 120px; height: 120px; }

/* Doodle Elements - Using CSS for simple shapes */
.doodle.paper-plane {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237B61FF'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2 .01 7z'/%3E%3C/svg%3E");
    animation-delay: 0s;
}

.doodle.star {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD700'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
    animation-delay: 2s;
}

.doodle.heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B6B'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    animation-delay: 4s;
}

.doodle.paint-splash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2361DAFB'%3E%3Cpath d='M7 20c0 .55.45 1 1 1h8c.55 0 1-.45 1-1v-1H7v1z'/%3E%3Cpath d='M18.67 4c-.26 0-.51.1-.71.29L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02.01-1.41l-1.34-1.34c-.2-.2-.45-.29-.71-.29zM7 14c-1.66 0-3 1.34-3 3 0 .35.07.68.18.98L3 22h2.04l1.22-1.22c.31.11.64.18.99.18 1.66 0 3-1.34 3-3s-1.34-2.96-3-2.96z'/%3E%3C/svg%3E");
    animation-delay: 1s;
}


/* Animation Keyframes */
@keyframes float-doodle {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.1;
    }
    25% {
        transform: translate(20px, 20px) rotate(5deg);
        opacity: 0.3;
    }
    50% {
        transform: translate(0, 40px) rotate(0deg);
        opacity: 0.2;
    }
    75% {
        transform: translate(-20px, 20px) rotate(-5deg);
        opacity: 0.3;
    }
}

/* Parallax Effect */
.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Floating Lines */
.floating-line {
    position: absolute;
    background: rgba(123, 97, 255, 0.1);
    transform-origin: left center;
    animation: float-line 20s infinite linear;
}

@keyframes float-line {
    0% {
        transform: translateX(-100%) rotate(45deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.3;
    }
    100% {
        transform: translateX(100vw) rotate(45deg);
        opacity: 0;
    }
}

/* Floating Dots */
.floating-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle, rgba(123, 97, 255, 0.2) 1px, transparent 1px),
        radial-gradient(circle, rgba(97, 218, 251, 0.15) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 107, 107, 0.1) 1px, transparent 1px);
    background-size: 50px 50px, 100px 100px, 150px 150px;
    animation: float-dots 100s linear infinite;
}

@keyframes float-dots {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 500px 1000px, 1000px 500px, 200px 200px;
    }
}