/* Custom CSS for Deer AI Landing Page */

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

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Gradient Utilities */
.bg-linear-to-br {
    background: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-linear-to-r {
    background: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-linear-to-tr {
    background: linear-gradient(to top right, var(--tw-gradient-stops));
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

.text-transparent {
    color: transparent;
}

/* Backdrop Blur */
.backdrop-blur-md {
    backdrop-filter: blur(12px);
}

/* Animations */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin 20s linear infinite;
}

/* Loading Animation Classes */
.scale-80 {
    transform: scale(0.8);
}

.scale-100 {
    transform: scale(1);
}

.scale-175 {
    transform: scale(1.75);
}

.translate-y-10 {
    transform: translateY(2.5rem);
}

.translate-y-12 {
    transform: translateY(3rem);
}

.translate-y-14 {
    transform: translateY(3.5rem);
}

.translate-y-0 {
    transform: translateY(0);
}

.translate-x-0 {
    transform: translateX(0);
}

.-translate-x-18 {
    transform: translateX(-4.5rem);
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.opacity-90 {
    opacity: 0.9;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-60 {
    opacity: 0.6;
}

.rotate-0 {
    transform: rotate(0deg);
}

.-rotate-6 {
    transform: rotate(-6deg);
}

.scale-60 {
    transform: scale(0.6);
}

.scale-70 {
    transform: scale(0.7);
}

.scale-0 {
    transform: scale(0);
}

/* Additional classes for original compatibility */
.translate-y-0 {
    transform: translateY(0);
}

.translate-x-0 {
    transform: translateX(0);
}

.rotate-0 {
    transform: rotate(0deg);
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-90 {
    opacity: 0.9;
}

/* Loading Screen Styles */
.loading-screen {
    background: #0b1220;
}

.loading-bg {
    background: radial-gradient(1200px 800px at 50% 50%, #0f1a30 0%, #0b1220 60%, #070d18 100%);
}

.logo-glow {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, rgba(147, 51, 234, 0.25) 30%, rgba(236, 72, 153, 0.2) 60%, rgba(255, 255, 255, 0.8) 100%);
}

.shimmer {
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent);
    transform: skewX(-10deg);
}

.shimmer-mask {
    mask-image: radial-gradient(160px 160px at -20% 50%, rgba(0,0,0,0.95), transparent 60%);
    -webkit-mask-image: radial-gradient(160px 160px at -20% 50%, rgba(0,0,0,0.95), transparent 60%);
}

/* Floating Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.floating-bit {
    animation: float 3s ease-in-out infinite;
}

.floating-bit:nth-child(odd) {
    animation-delay: 0.5s;
}

/* Particle Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.ai-particle {
    animation: pulse 2s ease-in-out infinite;
}

/* Ring Animation */
@keyframes spin-reverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

.ai-ring:nth-child(2) {
    animation: spin-reverse 20s linear infinite;
}

/* Hover Effects */
.group:hover .group-hover\:shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.group:hover .group-hover\:shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Transform Effects */
.transform {
    transform: translateZ(0);
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:scale-110:hover {
    transform: scale(1.1);
}

/* Transition Effects */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-1000 {
    transition-duration: 1000ms;
}

.duration-1300 {
    transition-duration: 1300ms;
}

.duration-1400 {
    transition-duration: 1400ms;
}

.duration-1600 {
    transition-duration: 1600ms;
}

.duration-1800 {
    transition-duration: 1800ms;
}

.duration-2000 {
    transition-duration: 2000ms;
}

.duration-2500 {
    transition-duration: 2500ms;
}

.duration-3000 {
    transition-duration: 3000ms;
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Shadow Effects */
.shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-sm {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Blur Effects */
.blur-3xl {
    filter: blur(64px);
}

/* Responsive Design */
@media (max-width: 640px) {
    .text-5xl {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .text-7xl {
        font-size: 3.5rem;
        line-height: 1.1;
    }
    
    .py-24 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .py-32 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media (max-width: 768px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .text-5xl {
        font-size: 2rem;
    }
    
    .text-7xl {
        font-size: 2.5rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .dark\:from-gray-900 {
        --tw-gradient-from: #111827;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(17, 24, 39, 0));
    }
    
    .dark\:via-gray-800 {
        --tw-gradient-stops: var(--tw-gradient-from), #1f2937, var(--tw-gradient-to, rgba(31, 41, 55, 0));
    }
    
    .dark\:to-gray-900 {
        --tw-gradient-to: #111827;
    }
    
    .dark\:from-white {
        --tw-gradient-from: #ffffff;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
    }
    
    .dark\:to-gray-300 {
        --tw-gradient-to: #d1d5db;
    }
    
    .dark\:bg-gray-900\/90 {
        background-color: rgba(17, 24, 39, 0.9);
    }
    
    .dark\:border-gray-700 {
        border-color: #374151;
    }
    
    .dark\:text-gray-300 {
        color: #d1d5db;
    }
    
    .dark\:text-white {
        color: #ffffff;
    }
    
    .dark\:bg-gray-800 {
        background-color: #1f2937;
    }
    
    .dark\:border-gray-600 {
        border-color: #4b5563;
    }
    
    .dark\:text-gray-600 {
        color: #4b5563;
    }
    
    .dark\:hover\:text-white:hover {
        color: #ffffff;
    }
    
    .dark\:hover\:bg-gray-600:hover {
        background-color: #4b5563;
    }
    
    .dark\:hover\:border-blue-400:hover {
        border-color: #60a5fa;
    }
    
    .dark\:hover\:text-blue-400:hover {
        color: #60a5fa;
    }
}

/* Print Styles */
@media print {
    .loading-screen {
        display: none !important;
    }
    
    .bg-linear-to-br,
    .bg-linear-to-r,
    .bg-linear-to-tr {
        background: #f3f4f6 !important;
    }
    
    .text-transparent {
        color: #000 !important;
    }
    
    .shadow-lg,
    .shadow-xl,
    .shadow-2xl {
        box-shadow: none !important;
    }
}