/* =========================================
   1. GLOBAL STYLES & ANIMATIONS
   ========================================= */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    /* GLOBAL THEME: Rich Espresso Background */
    background-color: #1A1512 !important; 
    color: #E6E0DA !important; /* Crema/Off-White Text */
}

/* Blob background animation */
.animate-blob {
    animation: blob 18s infinite;
}

.animation-delay-2000 {
    animation-delay: 4s;
}

@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    25% { transform: translate(20px, -30px) scale(1.1); }
    50% { transform: translate(-10px, 20px) scale(0.95); }
    75% { transform: translate(-20px, -10px) scale(1.05); }
    100% { transform: translate(0px, 0px) scale(1); }
}

/* Hero heading line animation */
/* CHANGED: Default to opacity 1 so text is visible even if animation fails */
.hero-line { opacity: 1; display: block; }
.hero-line-left { animation: slideInLeft 0.9s ease-out 0.1s forwards; }
.hero-line-right { animation: slideInRight 0.9s ease-out 0.4s forwards; }

@keyframes slideInLeft {
    0% { transform: translateX(-40px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    0% { transform: translateX(40px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* --- Falling Reveal Animation --- */
/* CHANGED: Default to opacity 1 (Visible) to prevent blank screen */
.reveal-item {
    opacity: 1; 
    transform: translateY(0); 
    transition: all 0.8s ease-out;
}

/* Only hide if we specifically want to animate (Optional advanced tweak) */
.reveal-item.hidden-start {
    opacity: 0;
    transform: translateY(-50px);
}

.reveal-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Utilities */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }


/* =========================================
   2. "LUXURY COFFEE" THEME OVERRIDES
   ========================================= */

/* Darkest Backgrounds (Hero, Timeline, Body) */
.bg-zinc-900 { background-color: #1A1512 !important; }

/* Secondary Backgrounds (Navbar, Services, Footer) */
.bg-zinc-800 { background-color: #28221D !important; }

/* Card Backgrounds */
.bg-zinc-700, .lift-fill-card, .project-card-fixed { background-color: #362F29 !important; }

/* Borders */
.border-zinc-800, .border-zinc-700, .border-zinc-600, .border-zinc-500 { border-color: #524B43 !important; }

/* Text Colors */
.text-zinc-400 { color: #A89F91 !important; }
.text-zinc-300 { color: #CDC6BC !important; }
.text-zinc-500 { color: #8C8276 !important; }


/* =========================================
   3. TIMELINE LAYOUT FIX
   ========================================= */

@media (min-width: 768px) {
    /* Restore transparent background for timeline text on Desktop */
    .timeline-item .bg-zinc-800 {
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
}


/* =========================================
   4. INTERACTIVE ELEMENTS & SCROLL
   ========================================= */

.lift-fill-card, .project-card-fixed {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.lift-fill-card:hover, .project-card-fixed:hover {
    transform: translateY(-12px); 
    background-color: #FACC15 !important;    
    box-shadow: 0 20px 25px -5px rgba(250, 204, 21, 0.4), 0 10px 10px -5px rgba(250, 204, 21, 0.2) !important;
}

.lift-fill-card:hover h3,
.lift-fill-card:hover .text-white,
.lift-fill-card:hover .font-bold,
.project-card-fixed:hover h3 {
    color: #1A1512 !important;
}

.lift-fill-card:hover p,
.lift-fill-card:hover .text-zinc-400,
.lift-fill-card:hover .text-stone-300,
.project-card-fixed:hover p {
    color: #28221D !important;
}

.lift-fill-card:hover svg {
    color: #1A1512 !important;
}

/* Horizontal Scrolling */
.projects-scroll-container, .timeline-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding: 1rem; 
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
}
.projects-scroll-container::-webkit-scrollbar, .timeline-scroll-container::-webkit-scrollbar { display: none; }

.project-card-fixed {
    flex: 0 0 320px; 
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10; 
}

@media (max-width: 640px) {
    .project-card-fixed { flex: 0 0 280px; }
}