/**
 * ChinniPumpy's Story Corner - Main Stylesheet
 * Custom styles and theme colors (optimized with Tailwind)
 */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Dancing+Script:wght@400..700&display=swap');

/* Base Styles */
body {
    font-family: 'Quicksand', sans-serif;
    background-color: #FDF9F3; /* Very Light Cream background */
    color: #4A3730; /* Cocoa Brown */
}

/* Custom Brand Colors */
.text-pumpkin {
    color: #FF7518;
}

.bg-pumpkin {
    background-color: #FF7518;
}

.text-cocoa {
    color: #4A3730;
}

/* Brand Font */
.font-brand {
    font-family: 'Dancing Script', cursive;
}

/* Soft Shadow - Used for cards */
.shadow-soft {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Hero Banner Background */
.hero-banner {
    background-image: url('https://placehold.co/1200x320/FFB380/FF7518?text=ChinniPumpy+and+Friend');
    background-size: cover;
    background-position: center;
}

/* --- ANIMATIONS --- */

/* Bubble Effect Animation */
@keyframes bubble {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.01);
    }
}

.bubble-effect:hover {
    animation: bubble 0.8s ease-in-out infinite alternate;
}

/* Spinner Animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #FF7518;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}