@layer base {
    body {
        @apply font-sans antialiased;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-serif;
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

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

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-item.active .accordion-content {
    max-height: 200px;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}