/* --- Global Styles & Fonts --- */
body {
    font-family: 'Bangers', cursive;
    background-color: #4A2C0B; /* Dark brown background */
    color: #FFD700; /* Gold text color */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* --- New Hero Section Style --- */
.hero-section {
    /* Creates a "spotlight" effect for the background */
    background: radial-gradient(circle at 50% 50%, #6a4a2a, #4A2C0B);
}

/* --- Keyframe Animations --- */
/* Simple fade-in effect for page content */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Bouncing effect for the main title */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Floating effect for images like the happy poop */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Animation for the raining poop emoji */
@keyframes rain {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* --- Animation Classes --- */
.fade-in {
    animation: fadeIn 1s ease-in;
}

.bounce {
    animation: bounce 1s infinite;
}

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

/* --- Raining Poop Effect --- */
#rain-container {
    position: absolute; /* Changed to absolute to be contained within hero-section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 5; /* Places it above the background but below content */
    overflow: hidden;
}

.poop {
    position: absolute;
    font-size: 2em;
    animation: rain 5s linear infinite;
    opacity: 0.7;
    color: #8B4513; /* SaddleBrown for the poop color */
}

/* --- Background & Layout --- */
/* This class is no longer used on the home page but kept for other pages */
.cloud-bg {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEwMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0wIDUwQzAgMjIuMzg1IDIyLjM4NSAwIDUwIDBTMTAwIDIyLjM4NSAxMDAgNTBIMDBaIiBmaWxsPSIjNEExQzBCSI8L3BhdGg+ICA8cGF0aCBkPSJNMTAwIDUwQzEwMCAyMi4zODUgMTIyLjM4NSAwIDE1MCAwUzIwMCAyMi4zODUgMjAwIDUwSDEwMFoiIGZpbGw9IiM0QTFDMEIiPjwvcGF0aD4KPC9zdmc+') repeat-x bottom;
    background-size: contain;
}

/* Parallax scrolling effect for the background */
.parallax {
    background-attachment: fixed;
}

/* --- Interactive Elements --- */
/* Adds a slight scaling effect on hover for buttons and links */
button:hover, a.hover\:scale-105:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
}

/* --- Custom Logo Style --- */
/* This style turns the main poop logo into a circular medallion */
.main-poop-logo {
    border-radius: 50%; /* Makes the image container circular */
    padding: 0.5rem; /* Adds space between the image and the border */
    background-color: #8B4513; /* A brown that complements the theme */
    border: 4px solid #FFD700; /* A thick, gold border */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); /* Adds a yellow glow */
}

/* --- Icon Filter Trick --- */
/* This class applies the brightness/invert filter to make any icon white */
.icon-filter {
    filter: brightness(0) invert(1);
}

/* --- Frosted Glass Effect for Dropdown --- */
.frosted-glass {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
}
