/* Main Stylesheet for Flying Craft
  Contains color variables, base styles, and animations.
*/

/* 1. Color Palette & Base Styles */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #FFFFFF;
    color: #374151; /* Default text color */
}

/* We define the brand colors as CSS variables for easy use */
:root {
    --brand-purple: #412F61;
    --brand-orange: #F69E0C;
}

/* Custom Tailwind classes can be defined here if needed, but we'll use the variables directly */
.bg-brand-purple { background-color: var(--brand-purple); }
.text-brand-purple { color: var(--brand-purple); }
.border-brand-purple { border-color: var(--brand-purple); }
.hover\:bg-brand-purple-dark:hover { background-color: #3a2a58; } /* A slightly darker purple for hover */

.bg-brand-orange { background-color: var(--brand-orange); }
.text-brand-orange { color: var(--brand-orange); }

.swiper-pagination-bullet-active {
    background-color: var(--brand-purple) !important;
}

/* 2. Scroll Animation Styles */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-200 { transition-delay: 200ms; }
.delay-400 { transition-delay: 400ms; }
.delay-600 { transition-delay: 600ms; }