/* Kuriiniwe Landing - Custom Styles */
/* Most styling is handled by Tailwind CSS */

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

/* Smooth scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Gradient text utility */
.text-gradient {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow effect for CTA buttons */
.glow-amber {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), 0 0 60px rgba(245, 158, 11, 0.1);
}

/* Subtle grid background pattern */
.bg-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 64px 64px;
}

/* FAQ accordion animation */
details summary {
    cursor: pointer;
    list-style: none;
}
details summary::-webkit-details-marker {
    display: none;
}
details[open] summary .chevron-icon {
    transform: rotate(180deg);
}
.chevron-icon {
    transition: transform 0.2s ease-in-out;
}

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

/* Form input focus styles */
.form-input:focus {
    outline: none;
}

.form-input::placeholder {
    color: #475569;
}

/* Select dropdown styling for dark theme */
select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
}

/* Success message animation */
@keyframes successPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.2);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(34, 197, 94, 0.1);
    }
}

#form-success, #form-duplicate {
    animation: fadeInUp 0.5s ease-out forwards, successPulse 2s ease-in-out 0.5s;
}

/* Scroll offset for fixed navbar */
:target {
    scroll-margin-top: 80px;
}