/* Custom styles to match the React app */
body { font-family: 'Inter', sans-serif; }
.font-poppins { font-family: 'Poppins', sans-serif; }
.bg-navy-dark { background-color: #0B2545; }
.prose h1, .prose h2, .prose h3 { font-family: 'Poppins', sans-serif; }

/* Simple animation classes */
.fade-in {
    animation: fadeIn 0.8s ease-in-out forwards;
    opacity: 0;
}
.fade-in-up {
    animation: fadeInUp 0.8s ease-in-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* For intersection observer animations */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal.zoom-in.visible {
    transform: translateY(0) scale(1);
}
.reveal.fade-in-left.visible, .reveal.fade-in-right.visible {
    transform: translateY(0) translateX(0);
}


/* More animations */
.zoom-in {
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-left {
    transform: translateX(-50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-right {
    transform: translateX(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}


/* Wave Animation */
.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 350px; /* Increased height */
    background-size: 1000px 350px; /* Matched height */
    background-repeat: repeat-x;
}

/* Updated SVG paths for taller waves */
.wave1 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 350' preserveAspectRatio='none'%3e%3cpath d='M0,220 C350,120 650,320 1000,220 V350 H0 Z' fill='rgba(255,255,255,0.2)'%3e%3c/path%3e%3c/svg%3e");
    animation: wave-flow 15s linear infinite;
    bottom: 0;
}

.wave2 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 350' preserveAspectRatio='none'%3e%3cpath d='M0,200 C350,100 650,300 1000,200 V350 H0 Z' fill='rgba(255,255,250,0.4)'%3e%3c/path%3e%3c/svg%3e");
    animation: wave-flow 12s linear infinite reverse;
    bottom: 0;
}

.wave3 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 350' preserveAspectRatio='none'%3e%3cpath d='M0,180 C350,80 650,280 1000,180 V350 H0 Z' fill='%23ffffff'%3e%3c/path%3e%3c/svg%3e");
    animation: wave-flow 9s linear infinite;
    bottom: 0;
}


@keyframes wave-flow {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -1000px;
    }
}