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

/* --- 1. Global Polish --- */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden; /* Prevents side-scrolling from animations */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Glassmorphism Utilities */
.glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- 2. Background Ambient Animations --- */
@keyframes float-blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: float-blob 7s infinite;
}
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* --- 3. Scroll Reveal Animations (Triggered by JS) --- */

/* Base class for all scroll elements */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
    will-change: opacity, transform;
}

/* Variation: Fade Up (Standard) */
.reveal-up {
    transform: translateY(40px);
}

/* Variation: Fade Left (For Image/Text splits) */
.reveal-left {
    transform: translateX(-40px);
}

/* Variation: Fade Right (For Image/Text splits) */
.reveal-right {
    transform: translateX(40px);
}

/* The Active State (Added by JS) */
.reveal.active {
    opacity: 1;
    transform: translate(0, 0);
}

/* Staggered Delays (For grids/lists) */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* --- 4. Hero Entry Animations (Load immediately) --- */
@keyframes slideDownFade {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.hero-animate-1 { animation: slideDownFade 0.8s ease-out forwards; }
.hero-animate-2 { animation: fadeInUp 0.8s ease-out 0.2s forwards; opacity: 0; }
.hero-animate-3 { animation: fadeInUp 0.8s ease-out 0.4s forwards; opacity: 0; }
.hero-animate-4 { animation: fadeInUp 0.8s ease-out 0.6s forwards; opacity: 0; }

/* --- 5. Hover Micro-Interactions --- */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}