/* Define the custom font if not done via Tailwind config */
        /* Placeholder for a serif font */
        .font-serif-classic {
            font-family: Georgia, serif; 
        }

        /* 1. Animation for the Main Heading (First Section) */
        @keyframes revealText {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hero-title {
            animation: revealText 1.5s ease-out 0.2s forwards; /* 1.5s duration, 0.2s delay */
            opacity: 0; /* Start hidden */
        }
        
        /* 2. Animation for the Main Paragraph (First Section) */
        .hero-paragraph {
            animation: revealText 1.5s ease-out 0.8s forwards; /* Longer delay to load after title */
            opacity: 0; /* Start hidden */
        }

        /* 3. Animation for subsequent section titles (slower reveal) */
        .story-section-content, .features-section-title {
            animation: revealText 1s ease-out forwards;
            opacity: 0;
        }

        /* Apply a slight delay to the Story section content so it loads after the image */
        .story-section-content {
            animation-delay: 0.5s; 
        }