@tailwind base;
@tailwind components;
@tailwind utilities;

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

.animate-fadeIn {
    animation: fadeIn 1s ease-out forwards;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

/* Glass Card Effect */
.glass-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

/* Timeline Cards */
.timeline-card {
    @apply glass-card p-6 rounded-2xl border border-white/50;
    position: relative;
    padding-left: 60px;
}

.timeline-card::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    height: 100%;
    width: 2px;
    background: linear-gradient(to bottom, #f9a8d4, #c084fc);
}

.timeline-card:first-child::before {
    top: 20px;
    height: calc(100% - 20px);
}

.timeline-card:last-child::before {
    height: 20px;
}

/* Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Custom Fonts */
.font-playfair {
    font-family: 'Playfair Display', serif;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

/* Particle Background */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url('');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

/* Heart Animation */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

.heart-float {
    animation: float 6s ease-in-out infinite;
}