/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Apply base styles from Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles and animations */
@layer base {
    body {
        font-family: 'Inter', sans-serif;
        background-color: #f9fafb; /* Lighter gray for a softer look */
        color: #1f2937; /* Darker gray for better contrast */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

@layer components {
    /* Header & Navigation */
    .header-scrolled {
        @apply bg-white/80 shadow-lg backdrop-blur-lg;
    }
    .nav-link {
        @apply text-gray-600 hover:text-indigo-600 transition-colors duration-300 relative font-medium;
    }
    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        background-color: theme('colors.indigo.500');
        transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .nav-link:hover::after,
    .nav-link.active-link::after {
        width: 100%;
    }
    .nav-link.active-link {
        @apply text-indigo-600;
    }

    /* Buttons */
    .cta-button {
        @apply transition-all duration-300 ease-in-out transform;
    }
    .cta-button:hover {
        @apply -translate-y-1 shadow-xl;
    }

    /* Hero Section Backgrounds */
    .hero-bg {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('https://placehold.co/1920x1080/3B82F6/FFFFFF?text=Adventure');
        background-size: cover;
        background-position: center;
    }

    .destination-hero-bg {
        background: linear-gradient(45deg, rgba(29, 39, 57, 0.8), rgba(67, 56, 202, 0.8)), url('https://placehold.co/1920x1080/4f46e5/ffffff?text=Travel');
        background-size: cover;
        background-position: center;
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }

    /* Destination Card */
    .destination-card {
        @apply bg-white rounded-xl overflow-hidden shadow-lg border border-gray-200/80 transition-all duration-500 ease-in-out transform hover:-translate-y-2 hover:shadow-2xl;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .destination-card.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    .card-image-wrapper {
        @apply overflow-hidden;
    }
    .card-image {
        @apply w-full h-56 object-cover transition-transform duration-500 ease-in-out;
    }
    .destination-card:hover .card-image {
        @apply scale-110;
    }
    .card-content {
        @apply p-6;
    }
    .card-title {
        @apply text-2xl font-bold text-gray-800 mb-2;
    }
    .card-description {
        @apply text-gray-600 mb-4;
    }
    .card-button {
        @apply inline-block bg-indigo-100 text-indigo-700 font-semibold py-2 px-5 rounded-full transition-all duration-300 hover:bg-indigo-600 hover:text-white;
    }

    /* Tour Card (for homepage) */
    .tour-card {
        @apply bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
    }

    /* Service Card (for services.html and homepage) */
    .service-card {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .service-card.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .service-card-home { /* For smaller service cards on homepage */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .service-card-home.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Loading Spinner */
    .loader {
        border-top-color: #3498db;
        border-right-color: #3498db;
        border-bottom-color: #3498db;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
}

/* Keyframe Animations */
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
    opacity: 0; /* Start hidden */
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.animate-fade-in-right {
    animation: fade-in-right 0.8s ease-out forwards;
    opacity: 0; /* Start hidden */
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.animate-fade-in-left {
    animation: fade-in-left 0.8s ease-out forwards;
    opacity: 0; /* Start hidden */
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.animate-slide-in-right {
    animation: slide-in-right 0.7s ease-out forwards;
    opacity: 0; /* Start hidden */
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.animate-slide-in-left {
    animation: slide-in-left 0.7s ease-out forwards;
    opacity: 0; /* Start hidden */
}