/* ============================================
   DataEngineer Pro - Main Stylesheet
   ============================================ */

/* Text gradient */
.text-gradient-cyan {
    background: linear-gradient(135deg, #00d4ff, #00a8cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Cyan glow border */
.border-cyan-glow {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.border-cyan-glow:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.05);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Scroll animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Star rating */
.star-filled { fill: #fbbf24; color: #fbbf24; }

/* Process connector line */
.process-line {
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.8s ease;
}
.process-line.visible { transform: scaleX(1); }

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

/* Glass effect */
.glass-strong {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Navbar scroll state */
nav.scrolled {
    background: rgba(10, 10, 10, 0.9) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(39, 39, 42, 0.4);
}

/* Form inputs */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #00d4ff !important;
}

/* Testimonial scroll */
.testimonial-scroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 1rem;
}
.testimonial-scroll::-webkit-scrollbar { display: none; }

/* Tech stack progress bar */
.tech-bar {
    height: 4px;
    background: #27272a;
    border-radius: 2px;
    overflow: hidden;
}
.tech-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #00a8cc);
    border-radius: 2px;
    transition: width 1s ease;
    width: 0;
}
.tech-bar-fill.visible { width: var(--progress); }

/* Admin table */
.admin-table th {
    background: #111;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a1a1aa;
    border-bottom: 1px solid #27272a;
}
.admin-table td {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: #d4d4d8;
    border-bottom: 1px solid #27272a;
}
.admin-table tr:hover td { background: #111; }

/* Badge styles */
.badge-new { color: #fbbf24; background: rgba(251,191,36,0.1); }
.badge-read { color: #60a5fa; background: rgba(96,165,250,0.1); }
.badge-replied { color: #34d399; background: rgba(52,211,153,0.1); }
.badge-archived { color: #a1a1aa; background: rgba(161,161,170,0.1); }

/* Chat styles */
.chat-message-user { background: #00d4ff; color: #0a0a0a; }
.chat-message-bot { background: #111; color: #e4e4e7; border: 1px solid #27272a; }

/* Loading spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spinner {
    animation: spin 1s linear infinite;
}

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease; }