/* Custom styles for GenAI Theme */

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

body {
    font-family: 'Inter', sans-serif;
    background-color: #0B071B;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
    background-size: 2rem 2rem;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Modern, subtle background pattern */
.bg-grid-pattern {
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 2rem 2rem;
}

/* Glow effect for text - more subtle */
.glow-text {
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.6);
}

/* Logo animation */
.logo-container {
    transition: transform 0.3s ease;
}

.logo-container:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.5));
}

/* Navigation link hover effect - handled by tailwind, this is for other 'a' tags if any */
a {
    transition: color 0.2s ease-in-out;
}

/* Hero heading animation */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

h1, p, .max-w-2xl {
    animation: slideInUp 1s ease-out forwards;
}

p {
    animation-delay: 0.2s;
}

.max-w-2xl {
    animation-delay: 0.4s;
}

/* Enhanced input styling */
textarea:focus {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.6);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    /* bg-ai-gray */
    background: #374151; 
}

::-webkit-scrollbar-thumb {
    /* bg-ai-green */
    background: #22c55e;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    /* bg-accent-green */
    background: #4ade80;
}

/* Typing effect for the hero text */
.product-desc-text {
    background: linear-gradient(90deg, #E1FF00, #DA22FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    border-right: .15em solid #E1FF00; /* The cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .1em; /* Adjust as needed */
    animation: 
        typing 2s steps(12, end),
        blink-caret .75s step-end infinite;
    overflow: hidden;
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #E1FF00; }
}