/* ===== FONT AWESOME ===== */
@import '@fortawesome/fontawesome-free/css/all.min.css';

/* ===== TAILWIND ===== */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== BASE ===== */
@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    /* Dark Mode (Default) */
    html, html.dark-mode {
        --bg-primary: #030712;
        --bg-secondary: #0f1117;
        --bg-card: #111827;
        --bg-card-hover: #1a2234;
        --text-primary: #ffffff;
        --text-secondary: #9ca3af;
        --text-muted: #6b7280;
        --border: rgba(55, 65, 81, 0.5);
        --border-hover: rgba(99, 102, 241, 0.4);
        color-scheme: dark;
    }

    /* Light Mode */
    html.light-mode {
        --bg-primary: #f8fafc;
        --bg-secondary: #ffffff;
        --bg-card: #ffffff;
        --bg-card-hover: #f1f5f9;
        --text-primary: #0f172a;
        --text-secondary: #475569;
        --text-muted: #94a3b8;
        --border: rgba(148, 163, 184, 0.3);
        --border-hover: rgba(99, 102, 241, 0.5);
        color-scheme: light;
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 10px; }
}

/* ===== LIGHT MODE OVERRIDES ===== */
.light-mode body { background-color: #f8fafc; color: #0f172a; }
.light-mode .bg-gray-950 { background-color: #f8fafc !important; }
.light-mode .bg-gray-900 { background-color: #ffffff !important; }
.light-mode .bg-gray-800 { background-color: #f1f5f9 !important; }
.light-mode .bg-gray-800\/50 { background-color: rgba(241,245,249,0.5) !important; }
.light-mode .bg-gray-800\/60 { background-color: rgba(241,245,249,0.6) !important; }
.light-mode .bg-gray-800\/40 { background-color: rgba(241,245,249,0.4) !important; }
.light-mode .text-white { color: #0f172a !important; }
.light-mode .text-gray-300 { color: #47556985 !important; }
.light-mode .text-gray-400 { color: #475569 !important; }
.light-mode .text-gray-500 { color: #64748b !important; }
.light-mode .text-gray-600 { color: #94a3b8 !important; }
.light-mode .border-gray-800 { border-color: rgba(226,232,240,1) !important; }
.light-mode .border-gray-700 { border-color: rgba(203,213,225,1) !important; }
.light-mode .border-white\/5 { border-color: rgba(0,0,0,0.05) !important; }
.light-mode .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }
.light-mode .border-white\/20 { border-color: rgba(0,0,0,0.15) !important; }
.light-mode .bg-white\/5 { background-color: rgba(0,0,0,0.03) !important; }
.light-mode .bg-white\/10 { background-color: rgba(0,0,0,0.05) !important; }
.light-mode .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.03) !important; }
.light-mode .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.06) !important; }
.light-mode .bg-gradient-to-br.from-gray-950 { background: linear-gradient(to bottom right, #f8fafc, #e8eef6) !important; }
.light-mode .shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; }
.light-mode .shadow-2xl { box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important; }
.light-mode input, .light-mode textarea, .light-mode select {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
.light-mode input::placeholder, .light-mode textarea::placeholder {
    color: #94a3b8 !important;
}

/* ===== ANIMATIONS ===== */

/* Fade In Up */
.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-up-delay-1 {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.animate-fade-in-up-delay-2 {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.animate-fade-in-up-delay-3 {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-20px); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ===== SCROLL REVEAL (CSS-only) ===== */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-70px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-left.visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.reveal-right {
    opacity: 0;
    transform: translateX(70px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-right.visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-scale.visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ===== STAGGER CHILDREN - Longer delays for cascade effect ===== */
.stagger-children > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.stagger-children.visible > *:nth-child(1)  { transition-delay: 0.08s; }
.stagger-children.visible > *:nth-child(2)  { transition-delay: 0.16s; }
.stagger-children.visible > *:nth-child(3)  { transition-delay: 0.24s; }
.stagger-children.visible > *:nth-child(4)  { transition-delay: 0.32s; }
.stagger-children.visible > *:nth-child(5)  { transition-delay: 0.40s; }
.stagger-children.visible > *:nth-child(6)  { transition-delay: 0.48s; }
.stagger-children.visible > *:nth-child(7)  { transition-delay: 0.56s; }
.stagger-children.visible > *:nth-child(8)  { transition-delay: 0.64s; }
.stagger-children.visible > *:nth-child(9)  { transition-delay: 0.72s; }
.stagger-children.visible > *:nth-child(10) { transition-delay: 0.80s; }
.stagger-children.visible > *:nth-child(11) { transition-delay: 0.88s; }
.stagger-children.visible > *:nth-child(12) { transition-delay: 0.96s; }

.stagger-children.visible > * {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ===== SAFETY FALLBACK - Show everything after 5 seconds ===== */
@keyframes forceShow {
    to {
        opacity: 1 !important;
        transform: none !important;
    }
}

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
    animation: forceShow 0s 5s forwards;
}

.stagger-children > * {
    animation: forceShow 0s 5.5s forwards;
}

/* ===== HOVER ANIMATIONS FOR CARDS ===== */
.card-hover-lift {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
}

.card-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                0 0 30px rgba(99, 102, 241, 0.08);
}

/* ===== SMOOTH SECTION TRANSITIONS ===== */
section {
    position: relative;
}

/* Gradient transition between sections */
.section-transition-top::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, var(--bg-primary), transparent);
    pointer-events: none;
    z-index: 1;
}

/* ===== COUNTER ANIMATION ===== */
.count-up {
    display: inline-block;
    transition: all 0.3s ease;
}

/* ===== SECTION-LEVEL REVEAL DELAYS ===== */
/* Each section's reveal elements get their own timing */
#about .reveal,
#about .reveal-left,
#about .reveal-right {
    transition-duration: 1s;
}

#services .reveal {
    transition-duration: 0.9s;
}

#portfolio .reveal {
    transition-duration: 0.9s;
}

#team .reveal {
    transition-duration: 0.9s;
}

#testimonials .reveal {
    transition-duration: 1s;
}

#pricing .reveal {
    transition-duration: 0.9s;
}

#blog .reveal {
    transition-duration: 0.9s;
}

#contact .reveal,
#contact .reveal-left,
#contact .reveal-right {
    transition-duration: 1s;
}

/* ===== PARALLAX-LIKE SUBTLE MOTION ===== */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        transform: translateY(60px);
    }

    .reveal-left {
        transform: translateX(-80px) rotate(-1deg);
    }

    .reveal-right {
        transform: translateX(80px) rotate(1deg);
    }

    .reveal-left.visible,
    .reveal-right.visible {
        transform: translateX(0) rotate(0deg) !important;
    }

    /* Cards come in with slight rotation */
    .stagger-children > * {
        transform: translateY(50px) scale(0.95);
    }

    .stagger-children.visible > * {
        transform: translateY(0) scale(1) !important;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .stagger-children > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ===== BACKGROUND DECORATIONS ===== */

.section-glow {
    position: relative;
    overflow: hidden;
}

.section-glow::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;  /* Behind everything */
}

.section-glow-left::after {
    left: -200px;
    top: 50%;
    transform: translateY(-50%);
    background: #6366f1;
}

.section-glow-right::after {
    right: -200px;
    top: 50%;
    transform: translateY(-50%);
    background: #8b5cf6;
}

.section-glow-center::after {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #6366f1, #06b6d4);
}

/* Noise overlay - BEHIND content, NOT blocking clicks */
.noise-overlay {
    position: relative;
}

.noise-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none;  /* CRITICAL - don't block clicks */
    z-index: 0;            /* Behind content */
    opacity: 1;
}

/* Dot Pattern */
.dot-pattern {
    background-image: radial-gradient(rgba(99, 102, 241, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ===== COMPONENTS ===== */
@layer components {
    .section-label {
        @apply inline-flex items-center gap-2 text-indigo-400 text-sm font-semibold uppercase tracking-widest mb-4;
    }

    .card-hover-glow:hover {
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.08),
                    0 20px 60px rgba(0, 0, 0, 0.3);
    }
}

/* ===== UTILITIES ===== */
@layer utilities {
    .text-gradient {
        background: linear-gradient(135deg, #818cf8, #a78bfa, #67e8f9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .glass {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .shimmer {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
        background-size: 200% 100%;
        animation: shimmer 2s infinite;
    }
}

/* ===== VUE TRANSITIONS ===== */
.fade-enter-active, .fade-leave-active { transition: all 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(10px); }

.slide-down-enter-active, .slide-down-leave-active { transition: all 0.3s ease; }
.slide-down-enter-from, .slide-down-leave-to { opacity: 0; transform: translateY(-10px); }

/* ===== PROSE / BLOG ===== */
.prose h2 { font-size: 1.6rem; margin-top: 2rem; margin-bottom: 0.8rem; font-weight: 700; }
.prose h3 { font-size: 1.3rem; margin-top: 1.5rem; margin-bottom: 0.6rem; font-weight: 600; }
.prose p { margin-bottom: 1.2rem; line-height: 1.8; }
.prose ul, .prose ol { margin-bottom: 1.2rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.4rem; line-height: 1.7; }
.prose li::marker { color: #818cf8; }
.prose a { color: #818cf8; }
.prose a:hover { color: #a5b4fc; }
.prose strong { color: inherit; font-weight: 700; }
.prose blockquote {
    border-left: 3px solid #6366f1;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 0.75rem 0.75rem 0;
    font-style: italic;
}
.prose code {
    padding: 0.15rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}
.prose pre {
    border-radius: 0.75rem;
    padding: 1.25rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}
.prose img {
    border-radius: 0.75rem;
    margin: 1.5rem 0;
}

/* ===== HERO SECTION - ALWAYS DARK (even in light mode) ===== */
.light-mode #home,
.light-mode #home * {
    --hero-forced: true;
}

.light-mode #home {
    background: linear-gradient(to bottom right, #030712, #1e1b4b) !important;
}

.light-mode #home .text-white {
    color: #ffffff !important;
}

.light-mode #home .text-gray-400 {
    color: #9ca3af !important;
}

.light-mode #home .text-gray-500 {
    color: #6b7280 !important;
}

.light-mode #home .text-gray-600 {
    color: #4b5563 !important;
}

.light-mode #home .text-indigo-400 {
    color: #818cf8 !important;
}

.light-mode #home .bg-indigo-500\/10 {
    background-color: rgba(99, 102, 241, 0.1) !important;
}

.light-mode #home .border-indigo-500\/20 {
    border-color: rgba(99, 102, 241, 0.2) !important;
}

.light-mode #home .border-white\/5 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.light-mode #home .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.light-mode #home .border-white\/20 {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.light-mode #home .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.light-mode #home .hover\:bg-white\/10:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.light-mode #home .border-gray-700 {
    border-color: rgba(55, 65, 81, 0.5) !important;
}

/* Navbar in hero area - keep readable in light mode */
.light-mode .navbar-hero-area {
    background: rgba(3, 7, 18, 0.8) !important;
    backdrop-filter: blur(20px) !important;
}

/* ===== NAVBAR LIGHT MODE FIX ===== */
/* When scrolled past hero, navbar should adapt to light mode */
.light-mode nav.scrolled-past-hero {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(226, 232, 240, 1) !important;
}

.light-mode nav.scrolled-past-hero .text-gray-400,
.light-mode nav.scrolled-past-hero a {
    color: #475569 !important;
}

.light-mode nav.scrolled-past-hero a:hover {
    color: #0f172a !important;
}

.light-mode nav.scrolled-past-hero .text-white,
.light-mode nav.scrolled-past-hero span.text-white {
    color: #0f172a !important;
}

/* But navbar over hero stays dark */
.light-mode nav:not(.scrolled-past-hero) {
    background: transparent !important;
}

.light-mode nav:not(.scrolled-past-hero) .text-gray-400 {
    color: #9ca3af !important;
}

.light-mode nav:not(.scrolled-past-hero) .text-white,
.light-mode nav:not(.scrolled-past-hero) span {
    color: #ffffff !important;
}

/* Smooth transition between hero and next section in light mode */
.light-mode #home::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, transparent, #f8fafc);
    pointer-events: none;
    z-index: 5;
}