/**
 * Animasi
 *
 * @format
 */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.fade-up {
	animation: fadeInUp 0.8s ease-out;
}

.hero-background {
	background-image: url("/assets/img/9.png");
	background-size: cover;
	background-position: center;
}

.features-background {
	background-image: url("/assets/img/5.png");
	background-size: cover;
	background-position: center;
}
.features-background1 {
	background-image: url("/assets/img/16.png");
	background-size: cover;
	background-position: center;
}

/* Loading State for Images */
.image-loading {
	position: relative;
	overflow: hidden;
}

.image-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
	animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

/* Mobile-specific improvements */
@media (max-width: 640px) {
	/* Improve touch targets */
	.touch-manipulation {
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
	
	/* Better mobile scrolling */
	.overflow-auto {
		-webkit-overflow-scrolling: touch;
	}
	
	/* Mobile-optimized text selection */
	* {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	/* Allow text selection for content areas */
	p, span, div[class*="text-"], h1, h2, h3, h4, h5, h6 {
		-webkit-user-select: text;
		-khtml-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		user-select: text;
	}
	
	/* Mobile-optimized animations */
	@media (prefers-reduced-motion: reduce) {
		* {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}
}

/* Extra small screens (xs) breakpoint */
@media (min-width: 475px) {
	.xs\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
	.xs\:text-base { font-size: 1rem; line-height: 1.5rem; }
	.xs\:flex-row { flex-direction: row; }
}

/* Mobile-first responsive improvements */
@media (max-width: 768px) {
	/* Reduce motion for better performance on mobile */
	* {
		animation-duration: 0.3s;
		transition-duration: 0.3s;
	}
	
	/* Improve button spacing on mobile */
	button, a[role="button"] {
		min-height: 44px;
		min-width: 44px;
	}
	
	/* Better mobile modal spacing */
	.modal-mobile {
		padding: 1rem;
		margin: 0.5rem;
	}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
	/* Remove hover effects on touch devices */
	.hover\:scale-105:hover {
		transform: none;
	}
	
	.hover\:shadow-2xl:hover {
		box-shadow: none;
	}
	
	/* Add active states for touch */
	.touch-manipulation:active {
		transform: scale(0.95);
	}
}
@keyframes fadeInDown {
        0% { opacity: 0; transform: translateY(-40px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in-down {
        animation: fadeInDown 1s ease-out forwards;
    }

    @keyframes fadeInUp {
        0% { opacity: 0; transform: translateY(30px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in-up {
        animation: fadeInUp 1s 0.4s ease-out forwards;
        opacity: 0;
    }

    /* Scroll Animations */
    @keyframes slideInLeft {
        0% { opacity: 0; transform: translateX(-80px); }
        100% { opacity: 1; transform: translateX(0); }
    }

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

    @keyframes slideInUp {
        0% { opacity: 0; transform: translateY(60px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes scaleIn {
        0% { opacity: 0; transform: scale(0.9) translateY(20px); }
        100% { opacity: 1; transform: scale(1) translateY(0); }
    }

    .scroll-animate {
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .scroll-animate.animated {
        opacity: 1;
        animation: slideInUp 0.8s ease-out forwards;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .scroll-animate.animated {
            animation: slideInUp 0.6s ease-out forwards;
        }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .scroll-animate,
        .animate-fade-in-down,
        .animate-fade-in-up {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
    }

    /* Group hover effects */
    .group:hover svg {
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }

    /* Feature card hover */
    .group:hover .bg-gradient-to-br {
        background: linear-gradient(to bottom right, #fff, #f3f4f6);
    }

    /* Remove shine effect completely */
    .image-shine {
        display: none !important;
    }