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

.glass-card {
    @apply bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl;
}

.dark .glass-card {
    @apply bg-stone-800/50 backdrop-blur-lg border border-stone-700/50;
}

/* Animation triggers */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Staggered animations */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }

/* Hover effects */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

/* Custom styles that go beyond Tailwind */
.glass-card {
    @apply bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl;
}

.dark .glass-card {
    @apply bg-stone-800/50 backdrop-blur-lg border border-stone-700/50;
}

/* Animation triggers */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Staggered animations */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }

/* Hover effects */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}