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

/* Note: We are using Tailwind CSS via a CDN script in the HTML for simplicity.
For a production build, you would typically use the Tailwind CLI to process your CSS.
This file is for styles that are difficult or verbose to write with utility classes alone.
*/

body {
font-family: 'Inter', sans-serif;
background-color: #f8f9fa; /* A light grey background */
}

/* Use the more elegant 'Lora' font for headings */
h1, h2, h3, h4, h5, h6, .font-serif {
font-family: 'Lora', serif;
}

/* This creates the decorative swoosh effect on the hero section.It's an SVG background image, which is lightweight and scales perfectly.
*/
.swoosh-bg {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,160L48,176C96,192,192,224,288,218.7C384,213,480,171,576,144C672,117,768,107,864,122.7C960,139,1056,181,1152,186.7C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
 background-position: bottom;
 background-size: cover;
}

/* Add a smooth scroll behavior for anchor links */
html {
scroll-behavior: smooth;
}

/* === Pre-loader Animation Styles (New Sequence) === */

/* Prevents scrolling while the loader is active */
.body-loading {
    overflow: hidden;
}

/* The main container (initially white). This is what slides out at the end. */
#preloader {
    transition: transform 0.8s ease-in-out;
}

/* This is the final state for the slide-out animation */
#preloader.hidden {
    transform: translateX(-100%);
}

/* The black panel that slides in from the left */
#black-panel {
    transform: translateX(-100%); /* Starts off-screen to the left */
    animation: slide-in-left 0.8s ease-out forwards; /* Plays the slide-in animation */
}

/* The logo that slides up from the bottom */
#loader-logo {
    opacity: 0;
    transform: translateY(50px); /* Starts slightly below its final position */
    animation: slide-up-fade-in 0.7s ease-out 0.8s forwards; /* Starts after a 0.8s delay */
}

/* Animation to slide the black panel in from the left */
@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

/* Animation to slide the logo up and fade it in */
@keyframes slide-up-fade-in {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}